Skip to content

Commit

Permalink
add elementSelector to groupBy / groupToObject
Browse files Browse the repository at this point in the history
  • Loading branch information
olmobrutall committed May 15, 2020
1 parent 6ae63ae commit 91330aa
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions Signum.React/Scripts/Globals.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ declare global {

interface Array<T> {
groupBy<K extends string | number>(this: Array<T>, keySelector: (element: T) => K): { key: K; elements: T[] }[];
groupBy<K extends string | number, E>(this: Array<T>, keySelector: (element: T) => K, elementSelector: (element: T) => E): { key: K; elements: E[] }[];
groupToObject(this: Array<T>, keySelector: (element: T) => string): { [key: string]: T[] };
groupToObject<E>(this: Array<T>, keySelector: (element: T) => string, elementSelector: (element: T) => E): { [key: string]: E[] };
groupWhen(this: Array<T>, condition: (element: T) => boolean, includeKeyInGroup?: boolean, initialGroup?: boolean): { key: T, elements: T[] }[];
groupWhenChange<K extends string | number>(this: Array<T>, keySelector: (element: T) => K): { key: K, elements: T[] }[];

Expand Down Expand Up @@ -137,25 +139,25 @@ Array.prototype.clear = function (): void {
this.length = 0;
};

Array.prototype.groupBy = function (this: any[], keySelector: (element: any) => string | number): { key: any /*string*/; elements: any[] }[] {
Array.prototype.groupBy = function (this: any[], keySelector: (element: any) => string | number, elementSelector?: (element: any) => unknown): { key: any /*string*/; elements: any[] }[] {
const result: { key: string | number; elements: any[] }[] = [];
const objectGrouped = this.groupToObject(keySelector as ((element: any) => string));
const objectGrouped = this.groupToObject(keySelector as ((element: any) => string), elementSelector!);
for (const prop in objectGrouped) {
if (objectGrouped.hasOwnProperty(prop))
result.push({ key: prop, elements: objectGrouped[prop] });
}
return result;
};

Array.prototype.groupToObject = function (this: any[], keySelector: (element: any) => string): { [key: string]: any[] } {
Array.prototype.groupToObject = function (this: any[], keySelector: (element: any) => string, elementSelector?: (element: any) => unknown): { [key: string]: any[] } {
const result: { [key: string]: any[] } = {};

for (let i = 0; i < this.length; i++) {
const element: any = this[i];
const key = keySelector(element);
if (!result[key])
result[key] = [];
result[key].push(element);
result[key].push(elementSelector ? elementSelector(element) : element);
}
return result;
};
Expand Down

2 comments on commit 91330aa

@olmobrutall
Copy link
Collaborator Author

@olmobrutall olmobrutall commented on 91330aa May 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New Pivot Table Chart

Signum Extensions just got an important addition with the new Pivot Table chart (commits signumsoftware/extensions@04f4e1c, signumsoftware/extensions@bc034e5 and signumsoftware/extensions@e254b8f).

This chart is based in a HTML table (no SVG) and allows you to divide an aggregate (typically Count or Sum) by categories in the vertical and horizontal axis.

Each axis is able to support from 0, 1, 2 or 3 dimensions. So is possible to visualize complex tables, like Year / Month / Day on the horizontal axis and Project / Task / User in the vertical one.

Of course, the cells and the summaries on the borders allow drill-down.

The chart also allows to use independent gradients and scales for the values in the table and the sub-totals in the borders to

image.

The number of rows / columns is typically determined by the data, so in this example we don't have a column for Jan 2018 or Dec 2020:

image

We can try to correct this behavior with the "Complete Axis" parameters. Here we choose Complete Horizontal Axis (2): Consistent, this will ensure that all the years have the same numbers of months.

image

There is also another interesting option: Complete Horizontal Axis: FromFilters. This mode looks for filters using the same token and the operators Greater Than / Greater Than Or Equal / Less Than / Less Than Or Equal, or even Is In to infer what columns / rows you want.

image

This way you can make the size of your charts more stable independently of the data, and you can save them using filter value expressions (FilterValueConverters) in User Charts.

For example this table shows the last 7 days of orders, without skipping days with no orders at all

image

And the number of columns is implicitly defined just using filters.

Enjoy!

@MehdyKarimpour
Copy link
Contributor

@MehdyKarimpour MehdyKarimpour commented on 91330aa May 17, 2020 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.