@provoly/dashboard 0.11.0

package/fesm2022/provoly-dashboard-widgets-widget-aggregated-chart.mjs

@@ -0,0 +1,1228 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
+import * as i5 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@provoly/dashboard';
+import { DataWidgetComponent, WIDGET_HEADER_HEIGHT, GraphType, Operation, VegaColorType, FieldSelectors, ClassSelectors, FieldType, VegaType, BaseWidgetModule, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryEditInputModule, PryI18nModule, PryRangeModule, DashboardSelectors, ResultsetUtils, ItemUtils, DEFAULT_NAMED_QUERY_ID, EXPLORE_NAMED_QUERY_ID, ConfigSelectors } from '@provoly/dashboard';
+import * as i6 from '@provoly/dashboard/components/checkbox';
+import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
+import { BehaviorSubject, Subject, combineLatest, switchMap, withLatestFrom, map as map$1, of } from 'rxjs';
+import { map, filter, debounceTime } from 'rxjs/operators';
+import embed, { vega } from 'vega-embed';
+import { mergeDeep } from 'vega-lite';
+import { fontConfig } from 'vega-lite/build/src/config';
+import * as i1 from '@ngrx/store';
+import * as i3 from '@angular/common/http';
+import { HttpParams } from '@angular/common/http';
+
+class PryAggregationService {
+    aggregate(datasource, options) {
+        throw new Error('You must declare the use of an aggregation service. Add PryBackendAggregationService, PryFrontendAggregationService or a custom service');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryAggregationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryAggregationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryAggregationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PryWidgetAggregatedChartCssComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetAggregatedChartCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryWidgetAggregatedChartCssComponent, selector: "pry-widget-aggregated-chart-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget--chart-color-thumb{display:flex;flex-direction:row;margin-bottom:20px}.o-widget--chart-color-thumb-item{flex:1 1 20px;height:20px;border-radius:4px}.o-widget--chart div.vega-embed{display:block}.o-widget--chart div.vega-embed.has-actions{display:block;height:100%;padding-right:0}.o-widget--chart div.vega-embed.has-actions>div.chart-wrapper.fit-y.fit-x{height:100%;overflow:hidden}.o-widget--chart div.vega-embed.has-actions>details>summary{right:25px}.o-widget--chart div.vega-embed.has-actions>details .vega-actions{right:16px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetAggregatedChartCssComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-aggregated-chart-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-widget--chart-color-thumb{display:flex;flex-direction:row;margin-bottom:20px}.o-widget--chart-color-thumb-item{flex:1 1 20px;height:20px;border-radius:4px}.o-widget--chart div.vega-embed{display:block}.o-widget--chart div.vega-embed.has-actions{display:block;height:100%;padding-right:0}.o-widget--chart div.vega-embed.has-actions>div.chart-wrapper.fit-y.fit-x{height:100%;overflow:hidden}.o-widget--chart div.vega-embed.has-actions>details>summary{right:25px}.o-widget--chart div.vega-embed.has-actions>details .vega-actions{right:16px}\n"] }]
+        }] });
+
+vega.scheme('KO/W/OK', ['#C04D3F', '#FD9843', '#9ABE29']);
+class WidgetAggregatedChartComponent extends DataWidgetComponent {
+    constructor(store, translateService, el, aggregationService) {
+        super(store, el);
+        this.translateService = translateService;
+        this.aggregationService = aggregationService;
+        this.optionsCopy$ = new BehaviorSubject(null);
+        this.trigger$ = new Subject();
+        this.WIDGET_HEADER_HEIGHT = WIDGET_HEADER_HEIGHT;
+        this.GraphType = GraphType;
+        this.Operation = Operation;
+        this.typeOptions = [];
+        this.classes = [];
+        this.fields = [];
+        this.triggerOrdinateAttributes$ = new Subject();
+        this.schemes = [];
+        this.schemes = Object.values(VegaColorType).map((id) => ({ id }));
+        this.typeOptions = Object.values(GraphType)
+            .map((v) => ({
+            id: v,
+            label: this.translateService.instant('@pry.widget.chart.graphType.' + v)
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label));
+        this.options$ = this.manifest$.pipe(map((manifest) => mergeDeep({
+            graph: { type: GraphType.BAR, tooltip: true, legend: false },
+            abscissa: { keep0: true },
+            ordinate: { keep0: true }
+        }, (manifest.options ?? {}))));
+        this.options$.pipe(filter((opt) => !!opt)).subscribe((options) => {
+            this.optionsCopy$.next(JSON.parse(JSON.stringify(options)));
+        });
+        this.fields$ = this.store.select(FieldSelectors.fields);
+        this.classes$ = this.store.select(ClassSelectors.classes);
+        this.operations$ = combineLatest([this.resultSet$, this.classes$, this.fields$]).pipe(map(([rs, classes, fields]) => classes
+            .filter((clazz) => Object.keys(rs.items).includes(clazz.id))
+            .map((clazz) => clazz.attributes)
+            .map((attrs) => attrs.filter((attr) => {
+            const field = fields.find((field) => {
+                return field.id === attr.field;
+            });
+            return !!field && [FieldType.INTEGER, FieldType.DECIMAL, FieldType.LONG].includes(field.type);
+        }))
+            .reduce((a, b) => [...a, ...b], [])
+            .filter((attr) => !!attr)), map((attributes) => (attributes.length > 0 ? Object.values(Operation) : [Operation.COUNT, Operation.DISTINCT, Operation.NONE])
+            .map((v) => ({
+            id: v,
+            label: this.translateService.instant('@pry.widget.chart.operation.' + v)
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label))));
+        this.subscriptions.add(this.fields$.subscribe((fields) => (this.fields = fields)));
+        this.subscriptions.add(this.classes$.subscribe((classes) => (this.classes = classes)));
+        this.abscissaAttributes$ = combineLatest([this.classes$, this.fields$, this.resultSet$, this.optionsCopy$]).pipe(map(([classes, fields, rs, optionCopy]) => classes
+            .filter((clazz) => Object.keys(rs.items).includes(clazz.id))
+            .map((clazz) => clazz.attributes)
+            .map((attrs) => attrs.filter((attr) => {
+            const field = fields.find((field) => {
+                return field.id === attr.field;
+            });
+            return (!!field &&
+                field.type !== FieldType.RAW &&
+                field.type !== FieldType.STRING &&
+                (optionCopy?.graph.type !== GraphType.HISTOGRAM || field.type !== FieldType.KEYWORD));
+        }))
+            .reduce((a, b) => [...a, ...b], [])));
+        this.ordinateAttributes$ = combineLatest([
+            this.classes$,
+            this.fields$,
+            this.resultSet$,
+            this.triggerOrdinateAttributes$
+        ]).pipe(map(([classes, fields, rs]) => classes
+            .filter((clazz) => Object.keys(rs.items).includes(clazz.id))
+            .map((clazz) => clazz.attributes)
+            .map((attrs) => attrs.filter((attr) => {
+            const field = fields.find((field) => {
+                return field.id === attr.field;
+            });
+            if (this.optionsCopy$.value &&
+                [
+                    Operation.MAX,
+                    Operation.MIN,
+                    Operation.SUM,
+                    Operation.Q1,
+                    Operation.Q3,
+                    Operation.AVERAGE,
+                    Operation.MEDIAN,
+                    Operation.NONE
+                ].includes(this.optionsCopy$.value.ordinate.operation)) {
+                return (!!field &&
+                    [FieldType.INTEGER, FieldType.INSTANT, FieldType.LONG, FieldType.DECIMAL].includes(field.type));
+            }
+            return !!field && field.type !== FieldType.RAW && field.type !== FieldType.STRING;
+        }))
+            .reduce((a, b) => [...a, ...b], [])));
+        this.isChartValid$ = combineLatest([this.options$, this.abscissaAttributes$, this.ordinateAttributes$]).pipe(map(([options, abscissaAttrs, ordinateAttrs]) => {
+            return (!!options.abscissa.attribute &&
+                abscissaAttrs.map((attr) => attr.id).includes(options.abscissa.attribute) &&
+                (options.ordinate.attribute
+                    ? ordinateAttrs.map((attr) => attr.id).includes(options.ordinate.attribute)
+                    : true));
+        }));
+        this.attributeTypes$ = combineLatest([this.options$, this.fields$, this.classes$]).pipe(filter(([options, fields, classes]) => !!options.abscissa && !!options.ordinate), map(([options, fields, classes]) => {
+            const abscissa = classes
+                .map((clazz) => clazz.attributes.find((attr) => attr.id === options.abscissa.attribute))
+                .find((attr) => !!attr);
+            const ordinate = classes
+                .map((clazz) => clazz.attributes.find((attr) => attr.id === options.ordinate.attribute))
+                .find((attr) => !!attr);
+            const abscissaFieldType = fields.find((field) => field.id === abscissa?.field)?.type ?? FieldType.STRING;
+            const ordinateFieldType = fields.find((field) => field.id === ordinate?.field)?.type ?? FieldType.STRING;
+            return {
+                abscissa: {
+                    fieldType: abscissaFieldType,
+                    vegaType: this.translateToVegaType(abscissaFieldType, abscissa?.name ?? '')
+                },
+                ordinate: {
+                    fieldType: ordinateFieldType,
+                    vegaType: options.ordinate.operation === Operation.COUNT || options.ordinate.operation === Operation.DISTINCT
+                        ? VegaType.QUANTITATIVE
+                        : this.translateToVegaType(ordinateFieldType, ordinate?.name ?? '')
+                }
+            };
+        }));
+        this.aggregatedValues$ = combineLatest([this.datasourceIds$, this.options$, this.resultSet$]).pipe(switchMap(([datasources, options]) => this.aggregationService.aggregate(datasources, options)), debounceTime(100), withLatestFrom(this.options$), map(([aggregate, options]) => {
+            // @ts-ignore
+            if (aggregate.values.length > 0 && !aggregate.values[0].groupBy) {
+                return {
+                    operation: aggregate.operation,
+                    data: aggregate.values.map((value) => ({ ...value, series: options.ordinate.label }))
+                };
+            }
+            const flattened = aggregate.values
+                .map((value) => value.groupBy.map((groupBy) => ({
+                key: value.key,
+                series: groupBy.key,
+                value: groupBy.value
+            })))
+                .reduce((a, b) => [...a, ...b], []);
+            return { operation: aggregate.operation, data: flattened };
+        }));
+        this.noData$ = this.aggregatedValues$.pipe(map(({ operation, data }) => data.length === 0));
+        this.vegaLiteSpec$ = combineLatest([
+            this.options$,
+            this.attributeTypes$,
+            this.aggregatedValues$,
+            this.widgetSize$.pipe(debounceTime(100)),
+            this.displayHeader$
+        ]).pipe(map(([options, types, values, size, display]) => {
+            const isCircular = [GraphType.CIRCULAR, GraphType.DONUT].includes(options.graph.type);
+            return mergeDeep({
+                $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+                title: this.getTitle(options),
+                width: 'container',
+                height: (size.height ?? 100) - (display ? WIDGET_HEADER_HEIGHT : 0),
+                padding: 10,
+                autosize: { type: 'fit', contains: 'padding' },
+                data: { values: JSON.parse(JSON.stringify(values.data)) },
+                layer: [
+                    {
+                        mark: {
+                            type: options.graph.type.split('-')[0],
+                            point: options.graph.type.indexOf('point') >= 0,
+                            line: options.graph.type.indexOf('line') >= 0,
+                            innerRadius: options.graph.donutSize ?? 30
+                        },
+                        encoding: {
+                            x: !isCircular
+                                ? {
+                                    field: 'key',
+                                    title: options.abscissa.label,
+                                    type: types.abscissa.vegaType,
+                                    timeUnit: types.abscissa.vegaType === VegaType.TEMPORAL && options.abscissa.limit?.isTimeLimit
+                                        ? options.abscissa.limit.interval
+                                        : undefined,
+                                    bin: options.graph.type.indexOf('histogram') >= 0,
+                                    axis: {
+                                        //format: types.abscissa.vegaType === VegaType.TEMPORAL ? '%Y-%B-%dT%H:%M:%S' : undefined,
+                                        grid: false,
+                                        ...WidgetAggregatedChartComponent.minTick(types.abscissa.fieldType),
+                                        labelExpr: `height < 300 ? ${types.abscissa.vegaType === VegaType.TEMPORAL
+                                            ? "timeFormat(datum.value, '%Y-%B-%dT%H:%M:%S')"
+                                            : 'truncate(datum.value, 10)'} : ${types.abscissa.vegaType === VegaType.TEMPORAL
+                                            ? "timeFormat(datum.value, '%Y-%B-%dT%H:%M:%S')"
+                                            : 'datum.value'}`
+                                    },
+                                    scale: {
+                                        // Force a false value here so that vega understands properly
+                                        zero: !!options.abscissa.keep0
+                                        //type: WidgetChartComponent.isTimeUnitUTC(variables[0]) ? 'utc' : undefined
+                                    }
+                                }
+                                : undefined,
+                            y: !isCircular
+                                ? {
+                                    field: 'value',
+                                    title: options.ordinate.label,
+                                    type: types.ordinate.vegaType,
+                                    axis: {
+                                        ...WidgetAggregatedChartComponent.minTick(types.ordinate.fieldType),
+                                        ...this.setTickCount(values.data)
+                                    },
+                                    scale: {
+                                        zero: options.ordinate.keep0
+                                    },
+                                    ...(options.graph.stacked ? { stack: true } : {})
+                                }
+                                : undefined,
+                            theta: isCircular ? { field: 'value', type: types.ordinate.vegaType } : undefined,
+                            color: {
+                                title: this.translateService.instant(options.groupBy ? '@pry.widget.chart.series' : '@pry.widget.chart.legendLabel'),
+                                field: !isCircular ? 'series' : 'key',
+                                legend: options.graph.legend,
+                                scale: options.graph.legend ? { scheme: options.groupBy?.color ?? this.schemes[0].id } : undefined
+                            },
+                            xOffset: options.graph.stacked && options.groupBy ? { field: 'series' } : undefined,
+                            tooltip: options.graph.tooltip
+                                ? options.groupBy
+                                    ? [
+                                        {
+                                            field: 'key',
+                                            type: types.abscissa.vegaType,
+                                            title: options.abscissa.label,
+                                            ...(types.abscissa.vegaType === 'temporal' ? { format: '%Y-%B-%dT%H:%M:%S' } : {})
+                                        },
+                                        { field: 'value', type: types.ordinate.vegaType, title: options.ordinate.label },
+                                        {
+                                            field: 'series',
+                                            title: this.translateService.instant('@pry.widget.chart.series'),
+                                            type: 'nominal'
+                                        }
+                                    ]
+                                    : [
+                                        {
+                                            field: 'key',
+                                            type: types.abscissa.vegaType,
+                                            title: options.abscissa.label,
+                                            ...(types.abscissa.vegaType === 'temporal' ? { format: '%Y-%B-%dT%H:%M:%S' } : {})
+                                        },
+                                        { field: 'value', type: types.ordinate.vegaType, title: options.ordinate.label }
+                                    ]
+                                : undefined
+                        }
+                    }
+                ],
+                config: fontConfig('Ubuntu, sans-serif')
+            }, options.additionalSpec);
+        }));
+    }
+    ngAfterViewInit() {
+        this.subscriptions.add(combineLatest([this.vegaLiteSpec$, this.trigger$]).subscribe(([spec, _]) => {
+            if (this.vega) {
+                this.view?.finalize();
+                console.log(spec);
+                embed(this.vega.nativeElement, JSON.parse(JSON.stringify(spec)), {
+                    actions: false,
+                    renderer: 'canvas',
+                    formatLocale: this.translateService.instantObject('@pry.widget.chart.numberLocale'),
+                    timeFormatLocale: this.translateService.instantObject('@pry.widget.chart.timeFormatLocale')
+                }).then((result) => (this.view = result.view));
+            }
+            else {
+                setTimeout(() => this.trigger$.next(), 100);
+            }
+        }));
+        this.trigger$.next();
+    }
+    translateToVegaType(type, name) {
+        let idRegex = new RegExp(/_id|id_|_ID|ID_|_Id|Id_/, 'g');
+        if (idRegex.test(name ?? '-------')) {
+            return VegaType.ORDINAL;
+        }
+        switch (type) {
+            case FieldType.DECIMAL:
+            case FieldType.INTEGER:
+            case FieldType.LONG:
+                return VegaType.QUANTITATIVE;
+            case FieldType.INSTANT:
+                return VegaType.TEMPORAL;
+            case FieldType.KEYWORD:
+            case FieldType.STRING:
+                return VegaType.NOMINAL;
+            default:
+                return VegaType.NOMINAL;
+        }
+    }
+    static minTick(type) {
+        switch (type) {
+            case FieldType.INTEGER:
+            case FieldType.LONG:
+                return { tickMinStep: 1 };
+            case FieldType.DECIMAL:
+            case FieldType.INSTANT:
+            case FieldType.KEYWORD:
+            case FieldType.STRING:
+            default:
+                return {};
+        }
+    }
+    emitManifest() {
+        this.manifestModified.emit({
+            widgetIndex: this.widgetIndex,
+            manifest: {
+                ...this.manifest,
+                options: { ...this.optionsCopy$.getValue() }
+            }
+        });
+    }
+    openSettings() {
+        this.open$.next(undefined);
+    }
+    getTitle(options) {
+        return options.graph?.title ?? (options.abscissa.label ?? 'key') + ' / ' + (options.ordinate.label ?? 'value');
+    }
+    changeChartTitle($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                graph: { ...this.optionsCopy$.value?.graph, title: $event }
+            });
+        }
+    }
+    changeType($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                graph: { ...this.optionsCopy$.value?.graph, type: $event }
+            });
+            if ([GraphType.CIRCULAR, GraphType.DONUT].includes($event)) {
+                this.optionsCopy$.next({
+                    ...this.optionsCopy$.value,
+                    groupBy: undefined
+                });
+            }
+            if ([GraphType.HISTOGRAM].includes($event)) {
+                this.limitElements(true);
+            }
+        }
+    }
+    changeDonutSize($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                graph: { ...this.optionsCopy$.value?.graph, donutSize: $event }
+            });
+        }
+    }
+    changeOperation($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                ordinate: { ...this.optionsCopy$.value?.ordinate, operation: $event }
+            });
+            if ($event === Operation.COUNT || $event === Operation.DISTINCT) {
+                this.optionsCopy$.next({
+                    ...this.optionsCopy$.value,
+                    ordinate: {
+                        ...this.optionsCopy$.value?.ordinate,
+                        label: this.translateService.instant('@pry.widget.chart.operation.' + $event),
+                        attribute: undefined
+                    }
+                });
+            }
+            setTimeout(() => this.triggerOrdinateAttributes$.next(), 10);
+        }
+    }
+    changeAbscissa($event) {
+        if ($event && this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                abscissa: { ...this.optionsCopy$.value?.abscissa, attribute: $event }
+            });
+            const attr = this.classes
+                .map((clazz) => clazz.attributes)
+                .reduce((a, b) => [...a, ...b], [])
+                .find((attr) => attr.id === $event);
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                abscissa: { ...this.optionsCopy$.value?.abscissa, label: attr?.name ?? 'attr-not-found' }
+            });
+            this.copyAbscissaField = this.fields.find((field) => attr?.field === field.id);
+            this.limitElements(!!this.optionsCopy$.value?.abscissa.limit);
+        }
+    }
+    changeAbscissaLabel($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                abscissa: { ...this.optionsCopy$.value?.abscissa, label: $event }
+            });
+        }
+    }
+    changeOrdinate($event) {
+        if ($event && this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                ordinate: { ...this.optionsCopy$.value?.ordinate, attribute: $event }
+            });
+            const attr = this.classes
+                .map((clazz) => clazz.attributes)
+                .reduce((a, b) => [...a, ...b], [])
+                .find((attr) => attr.id === $event);
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                ordinate: { ...this.optionsCopy$.value?.ordinate, label: attr?.name ?? 'attr-not-found' }
+            });
+            this.copyOrdinateField = this.fields.find((field) => attr?.field === field.id);
+        }
+    }
+    changeOrdinateLabel($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                ordinate: { ...this.optionsCopy$.value?.ordinate, label: $event }
+            });
+        }
+    }
+    changeKeep0Abscissa($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                abscissa: { ...this.optionsCopy$.value?.abscissa, keep0: $event }
+            });
+        }
+    }
+    changeKeep0Ordinate($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                ordinate: { ...this.optionsCopy$.value?.ordinate, keep0: $event }
+            });
+        }
+    }
+    limitElements($event) {
+        if (this.optionsCopy$.value) {
+            if ($event) {
+                if (this.copyAbscissaField?.type !== FieldType.INSTANT &&
+                    this.optionsCopy$.value?.abscissa?.limit &&
+                    'at' in this.optionsCopy$.value?.abscissa?.limit) {
+                    this.optionsCopy$.next({
+                        ...this.optionsCopy$.value,
+                        abscissa: {
+                            ...this.optionsCopy$.value?.abscissa,
+                            limit: {
+                                at: this.optionsCopy$.value?.abscissa?.limit?.at ?? 3,
+                                others: false,
+                                order: 'asc',
+                                isTimeLimit: false
+                            }
+                        }
+                    });
+                }
+                else {
+                    this.optionsCopy$.next({
+                        ...this.optionsCopy$.value,
+                        abscissa: { ...this.optionsCopy$.value?.abscissa, limit: { interval: 'second', isTimeLimit: true } }
+                    });
+                }
+            }
+            else {
+                this.optionsCopy$.next({
+                    ...this.optionsCopy$.value,
+                    abscissa: { ...this.optionsCopy$.value?.abscissa, limit: undefined }
+                });
+            }
+        }
+    }
+    changeLimit($event) {
+        if (this.optionsCopy$.value &&
+            this.optionsCopy$.value.abscissa.limit &&
+            !this.optionsCopy$.value.abscissa.limit.isTimeLimit) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                abscissa: {
+                    ...this.optionsCopy$.value?.abscissa,
+                    limit: {
+                        ...this.optionsCopy$.value?.abscissa.limit,
+                        at: $event
+                    }
+                }
+            });
+        }
+    }
+    changeLimitOthers($event) {
+        if (this.optionsCopy$.value &&
+            this.optionsCopy$.value.abscissa.limit &&
+            !this.optionsCopy$.value.abscissa.limit.isTimeLimit) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                abscissa: {
+                    ...this.optionsCopy$.value?.abscissa,
+                    limit: {
+                        ...this.optionsCopy$.value?.abscissa.limit,
+                        others: $event
+                    }
+                }
+            });
+        }
+    }
+    changeLimitOrder($event) {
+        if (this.optionsCopy$.value &&
+            this.optionsCopy$.value.abscissa.limit &&
+            !this.optionsCopy$.value.abscissa.limit.isTimeLimit) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                abscissa: {
+                    ...this.optionsCopy$.value?.abscissa,
+                    limit: {
+                        ...this.optionsCopy$.value?.abscissa.limit,
+                        order: $event ? 'asc' : 'desc'
+                    }
+                }
+            });
+        }
+    }
+    changeTimeLimit($event) {
+        if (this.optionsCopy$.value &&
+            this.optionsCopy$.value.abscissa.limit &&
+            this.optionsCopy$.value.abscissa.limit.isTimeLimit) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                abscissa: {
+                    ...this.optionsCopy$.value.abscissa,
+                    limit: {
+                        ...this.optionsCopy$.value.abscissa.limit,
+                        interval: $event
+                    }
+                }
+            });
+        }
+    }
+    toggleLegend($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                graph: { ...this.optionsCopy$.value.graph, legend: $event }
+            });
+        }
+    }
+    toggleTooltip($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                graph: { ...this.optionsCopy$.value?.graph, tooltip: $event }
+            });
+        }
+    }
+    toggleGroupBy($event) {
+        if (this.optionsCopy$.value) {
+            if ($event) {
+                this.optionsCopy$.next({
+                    ...this.optionsCopy$.value,
+                    groupBy: { attribute: this.optionsCopy$.value?.groupBy?.attribute ?? '', color: this.schemes[0].id }
+                });
+            }
+            else {
+                this.optionsCopy$.next({
+                    ...this.optionsCopy$.value,
+                    groupBy: undefined
+                });
+            }
+        }
+    }
+    changeGroupBy($event) {
+        if (typeof $event === 'string' && this.optionsCopy$.value && this.optionsCopy$.value.groupBy) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                groupBy: {
+                    ...this.optionsCopy$.value?.groupBy,
+                    attribute: $event
+                }
+            });
+        }
+    }
+    changeColorScheme($event) {
+        if (this.optionsCopy$.value && this.optionsCopy$.value.groupBy) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                groupBy: {
+                    attribute: this.optionsCopy$.value.groupBy?.attribute,
+                    color: $event
+                }
+            });
+        }
+    }
+    setTickCount(data) {
+        return Math.max(...data.map((val) => val.value)) < 3
+            ? { tickCount: Math.max(...data.map((val) => val.value)) }
+            : {};
+    }
+    scheme() {
+        return vega.scheme(this.optionsCopy$.value?.groupBy?.color ?? '');
+    }
+    toggleStacked($event) {
+        if (this.optionsCopy$.value) {
+            this.optionsCopy$.next({
+                ...this.optionsCopy$.value,
+                graph: {
+                    ...this.optionsCopy$.value?.graph,
+                    stacked: $event
+                }
+            });
+        }
+    }
+    toImage() {
+        return new Promise((resolve, reject) => {
+            resolve(this.vega.nativeElement.querySelectorAll('canvas')[0].toDataURL('image/png'));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetAggregatedChartComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i0.ElementRef }, { token: PryAggregationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: WidgetAggregatedChartComponent, selector: "pry-widget-aggregated-chart", viewQueries: [{ propertyName: "vega", first: true, predicate: ["vega"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-aggregated-chart-css></pry-widget-aggregated-chart-css>\n<div class=\"o-widget o-widget--chart\" *ngIf=\"optionsCopy$ | async as optionsCopy\">\n  <pry-widget-header\n    [datasourceIds$]=\"datasourceIds$\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    #header\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    [displayCount]=\"false\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [open$]=\"open$\"\n      [header]=\"header\"\n      class=\"o-settings\"\n    >\n      <div class=\"o-settings__popup__content__fields -condensed\">\n        <pry-edit-input\n          label=\"@pry.widget.chart.title\"\n          (ngModelChange)=\"changeChartTitle($event)\"\n          [ngModel]=\"optionsCopy.graph.title\"\n        ></pry-edit-input>\n\n        <div *ngIf=\"optionsCopy\" class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"chart_type\">{{ '@pry.widget.chart.type' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeType($event)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"typeOptions\"\n            [ngModel]=\"optionsCopy.graph.type\"\n            class=\"a-pry-select\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"chart_type\"\n          ></pry-select>\n        </div>\n\n        <ng-container *ngIf=\"optionsCopy.graph.type === GraphType.DONUT\">\n          <pry-range\n            [ngModel]=\"optionsCopy.graph.donutSize\"\n            (ngModelChange)=\"changeDonutSize($event)\"\n            labelTranslate=\"@pry.widget.chart.donutSize\"\n            min=\"1\"\n            max=\"500\"\n          ></pry-range>\n        </ng-container>\n\n        <div class=\"m-form-label-field\">\n          <pry-checkbox (ngModelChange)=\"toggleLegend($event)\" [ngModel]=\"!!optionsCopy.graph.legend\">\n            {{ '@pry.widget.chart.legend' | i18n }}\n          </pry-checkbox>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <pry-checkbox (ngModelChange)=\"toggleTooltip($event)\" [ngModel]=\"!!optionsCopy.graph.tooltip\"\n            >{{ '@pry.widget.chart.tooltip' | i18n }}\n          </pry-checkbox>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"!!optionsCopy.graph.type\">\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"abscissa\">{{ '@pry.widget.chart.abscissa' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeAbscissa($event)\"\n              [itemsAsOption]=\"true\"\n              [items]=\"abscissaAttributes$ | async\"\n              [ngModel]=\"optionsCopy.abscissa.attribute\"\n              bindLabel=\"name\"\n              bindValue=\"id\"\n              class=\"a-pry-select\"\n              id=\"abscissa\"\n            ></pry-select>\n          </div>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeAbscissaLabel($event)\"\n            [ngModel]=\"optionsCopy.abscissa.label\"\n          ></pry-edit-input>\n\n          <div\n            *ngIf=\"\n              ['quantitative', 'temporal'].includes(translateToVegaType(copyAbscissaField?.type)) &&\n              optionsCopy.graph.type !== GraphType.DONUT &&\n              optionsCopy.graph.type !== GraphType.CIRCULAR\n            \"\n            class=\"m-form-label-field\"\n          >\n            <pry-checkbox (ngModelChange)=\"changeKeep0Abscissa($event)\" [ngModel]=\"optionsCopy.abscissa.keep0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n\n            <pry-checkbox\n              (ngModelChange)=\"limitElements($event)\"\n              [ngModel]=\"!!optionsCopy.abscissa.limit\"\n              [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n              >{{ '@pry.widget.chart.limit' | i18n }}\n            </pry-checkbox>\n\n            <ng-container *ngIf=\"!!optionsCopy.abscissa.limit\">\n              <ng-container *ngIf=\"optionsCopy.abscissa.limit.isTimeLimit === false\">\n                <pry-range\n                  [ngModel]=\"optionsCopy.abscissa.limit.at\"\n                  (ngModelChange)=\"changeLimit($event)\"\n                  labelTranslate=\"@pry.widget.chart.limit\"\n                  min=\"1\"\n                  max=\"10\"\n                ></pry-range>\n\n                <ng-container *ngIf=\"optionsCopy.graph.type !== GraphType.HISTOGRAM\">\n                  <pry-checkbox\n                    (ngModelChange)=\"changeLimitOthers($event)\"\n                    [ngModel]=\"optionsCopy.abscissa.limit.others\"\n                    >{{ '@pry.widget.chart.others' | i18n }}\n                  </pry-checkbox>\n\n                  <label class=\"a-label\" for=\"date_limit\">{{ '@pry.widget.chart.order' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeLimitOrder($event)\"\n                    [itemsAsOption]=\"true\"\n                    [items]=\"[{ id: 'asc' }, { id: 'desc' }]\"\n                    [ngModel]=\"optionsCopy.abscissa.limit.order\"\n                    [baseTranslate]=\"'@pry.widget.chart.'\"\n                    [labelTranslate]=\"true\"\n                    bindLabel=\"id\"\n                    bindValue=\"id\"\n                    class=\"a-pry-select\"\n                    id=\"other_limit\"\n                  ></pry-select>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngIf=\"!!optionsCopy.abscissa.limit.isTimeLimit\">\n                <label class=\"a-label\" for=\"date_limit\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeTimeLimit($event)\"\n                  [itemsAsOption]=\"true\"\n                  [items]=\"[\n                    { id: 'second' },\n                    { id: 'minute' },\n                    { id: 'hour' },\n                    { id: 'day' },\n                    { id: 'week' },\n                    { id: 'month' },\n                    { id: 'quarter' },\n                    { id: 'year' }\n                  ]\"\n                  [ngModel]=\"optionsCopy.abscissa.limit.interval\"\n                  [labelTranslate]=\"true\"\n                  baseTranslate=\"@pry.widget.chart.time.\"\n                  bindLabel=\"id\"\n                  bindValue=\"id\"\n                  class=\"a-pry-select\"\n                  id=\"date_limit\"\n                ></pry-select>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"operations\">{{ '@pry.widget.chart.operation.title' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeOperation($event)\"\n              [itemsAsOption]=\"true\"\n              [items]=\"operations$ | async\"\n              [ngModel]=\"optionsCopy.ordinate.operation\"\n              bindLabel=\"label\"\n              bindValue=\"id\"\n              class=\"a-pry-select\"\n              id=\"operations\"\n            ></pry-select>\n          </div>\n\n          <ng-container *ngIf=\"optionsCopy.ordinate.operation !== Operation.COUNT\">\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"ordinate\">{{ '@pry.widget.chart.ordinate' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeOrdinate($event)\"\n                [itemsAsOption]=\"true\"\n                [items]=\"ordinateAttributes$ | async\"\n                [ngModel]=\"optionsCopy.ordinate.attribute\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                class=\"a-pry-select\"\n                id=\"ordinate\"\n              ></pry-select>\n            </div>\n          </ng-container>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeOrdinateLabel($event)\"\n            [ngModel]=\"optionsCopy.ordinate.label\"\n          ></pry-edit-input>\n\n          <div *ngIf=\"translateToVegaType(copyOrdinateField?.type) === 'quantitative'\" class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"changeKeep0Ordinate($event)\" [ngModel]=\"optionsCopy.ordinate.keep0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n          </div>\n        </div>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type !== GraphType.DONUT && optionsCopy.graph.type !== GraphType.CIRCULAR\"\n        >\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleGroupBy($event)\" [ngModel]=\"!!optionsCopy.groupBy\"\n                >{{ '@pry.widget.chart.groupBy' | i18n }}\n              </pry-checkbox>\n            </div>\n\n            <ng-container *ngIf=\"!!optionsCopy.groupBy\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.groupAttr' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeGroupBy($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.attribute\"\n                  [items]=\"abscissaAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"id\"\n                  class=\"a-pry-select\"\n                  id=\"chart_seriesAttr\"\n                ></pry-select>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesScheme\">{{ '@pry.widget.chart.colorScheme' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeColorScheme($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.color\"\n                  [itemsAsOption]=\"true\"\n                  [items]=\"schemes\"\n                  id=\"chart_seriesScheme\"\n                  [labelTranslate]=\"true\"\n                  baseTranslate=\"@pry.widget.chart.scheme.\"\n                  bindValue=\"id\"\n                  bindLabel=\"id\"\n                ></pry-select>\n              </div>\n\n              <div class=\"o-widget--chart-color-thumb\">\n                <div\n                  *ngFor=\"let schemeColor of scheme()\"\n                  class=\"o-widget--chart-color-thumb-item\"\n                  [title]=\"schemeColor\"\n                  [style.background-color]=\"schemeColor\"\n                ></div>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-checkbox [ngModel]=\"optionsCopy.graph.stacked\" (ngModelChange)=\"toggleStacked($event)\">\n                  {{ '@pry.widget.chart.stacked' | i18n }}\n                </pry-checkbox>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </pry-settings>\n  </pry-widget-header>\n  <div class=\"no-result\" *ngIf=\"(isChartValid$ | async) === false\">\n    <img\n      class=\"no-result__search\"\n      src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n      alt=\"{{ '@pry.widget.chart.noData' | i18n }}\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"no-result__text\">{{ '@pry.widget.chart.noData' | i18n }}</span>\n  </div>\n  <ng-container *ngIf=\"(isChartValid$ | async) && !(noData$ | async)\">\n    <div #vega></div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(isChartValid$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <p class=\"a-p\">\n        {{ '@pry.widget.chart.chooseParameters' | i18n }}\n      </p>\n      <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"noData$ | async\">\n    <div class=\"o-widget__choose-parameters\">\n      <p class=\"a-p\">\n        {{ '@pry.widget.chart.noData' | i18n }}\n      </p>\n    </div>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.SettingsComponent, selector: "pry-settings", inputs: ["widgetIndex", "isDisable", "headerPresent", "open$", "header"], outputs: ["saveTriggered"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "additionalOptions", "headerOptions", "displayCount", "datasourceIds$", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i6.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: PryWidgetAggregatedChartCssComponent, selector: "pry-widget-aggregated-chart-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetAggregatedChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-aggregated-chart', template: "<pry-widget-aggregated-chart-css></pry-widget-aggregated-chart-css>\n<div class=\"o-widget o-widget--chart\" *ngIf=\"optionsCopy$ | async as optionsCopy\">\n  <pry-widget-header\n    [datasourceIds$]=\"datasourceIds$\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    #header\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n    [displayCount]=\"false\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [widgetIndex]=\"widgetIndex\"\n      [open$]=\"open$\"\n      [header]=\"header\"\n      class=\"o-settings\"\n    >\n      <div class=\"o-settings__popup__content__fields -condensed\">\n        <pry-edit-input\n          label=\"@pry.widget.chart.title\"\n          (ngModelChange)=\"changeChartTitle($event)\"\n          [ngModel]=\"optionsCopy.graph.title\"\n        ></pry-edit-input>\n\n        <div *ngIf=\"optionsCopy\" class=\"m-form-label-field\">\n          <label class=\"a-label\" for=\"chart_type\">{{ '@pry.widget.chart.type' | i18n }}</label>\n          <pry-select\n            (ngModelChange)=\"changeType($event)\"\n            [itemsAsOption]=\"true\"\n            [items]=\"typeOptions\"\n            [ngModel]=\"optionsCopy.graph.type\"\n            class=\"a-pry-select\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"chart_type\"\n          ></pry-select>\n        </div>\n\n        <ng-container *ngIf=\"optionsCopy.graph.type === GraphType.DONUT\">\n          <pry-range\n            [ngModel]=\"optionsCopy.graph.donutSize\"\n            (ngModelChange)=\"changeDonutSize($event)\"\n            labelTranslate=\"@pry.widget.chart.donutSize\"\n            min=\"1\"\n            max=\"500\"\n          ></pry-range>\n        </ng-container>\n\n        <div class=\"m-form-label-field\">\n          <pry-checkbox (ngModelChange)=\"toggleLegend($event)\" [ngModel]=\"!!optionsCopy.graph.legend\">\n            {{ '@pry.widget.chart.legend' | i18n }}\n          </pry-checkbox>\n        </div>\n\n        <div class=\"m-form-label-field\">\n          <pry-checkbox (ngModelChange)=\"toggleTooltip($event)\" [ngModel]=\"!!optionsCopy.graph.tooltip\"\n            >{{ '@pry.widget.chart.tooltip' | i18n }}\n          </pry-checkbox>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"!!optionsCopy.graph.type\">\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"abscissa\">{{ '@pry.widget.chart.abscissa' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeAbscissa($event)\"\n              [itemsAsOption]=\"true\"\n              [items]=\"abscissaAttributes$ | async\"\n              [ngModel]=\"optionsCopy.abscissa.attribute\"\n              bindLabel=\"name\"\n              bindValue=\"id\"\n              class=\"a-pry-select\"\n              id=\"abscissa\"\n            ></pry-select>\n          </div>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeAbscissaLabel($event)\"\n            [ngModel]=\"optionsCopy.abscissa.label\"\n          ></pry-edit-input>\n\n          <div\n            *ngIf=\"\n              ['quantitative', 'temporal'].includes(translateToVegaType(copyAbscissaField?.type)) &&\n              optionsCopy.graph.type !== GraphType.DONUT &&\n              optionsCopy.graph.type !== GraphType.CIRCULAR\n            \"\n            class=\"m-form-label-field\"\n          >\n            <pry-checkbox (ngModelChange)=\"changeKeep0Abscissa($event)\" [ngModel]=\"optionsCopy.abscissa.keep0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n\n            <pry-checkbox\n              (ngModelChange)=\"limitElements($event)\"\n              [ngModel]=\"!!optionsCopy.abscissa.limit\"\n              [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n              >{{ '@pry.widget.chart.limit' | i18n }}\n            </pry-checkbox>\n\n            <ng-container *ngIf=\"!!optionsCopy.abscissa.limit\">\n              <ng-container *ngIf=\"optionsCopy.abscissa.limit.isTimeLimit === false\">\n                <pry-range\n                  [ngModel]=\"optionsCopy.abscissa.limit.at\"\n                  (ngModelChange)=\"changeLimit($event)\"\n                  labelTranslate=\"@pry.widget.chart.limit\"\n                  min=\"1\"\n                  max=\"10\"\n                ></pry-range>\n\n                <ng-container *ngIf=\"optionsCopy.graph.type !== GraphType.HISTOGRAM\">\n                  <pry-checkbox\n                    (ngModelChange)=\"changeLimitOthers($event)\"\n                    [ngModel]=\"optionsCopy.abscissa.limit.others\"\n                    >{{ '@pry.widget.chart.others' | i18n }}\n                  </pry-checkbox>\n\n                  <label class=\"a-label\" for=\"date_limit\">{{ '@pry.widget.chart.order' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeLimitOrder($event)\"\n                    [itemsAsOption]=\"true\"\n                    [items]=\"[{ id: 'asc' }, { id: 'desc' }]\"\n                    [ngModel]=\"optionsCopy.abscissa.limit.order\"\n                    [baseTranslate]=\"'@pry.widget.chart.'\"\n                    [labelTranslate]=\"true\"\n                    bindLabel=\"id\"\n                    bindValue=\"id\"\n                    class=\"a-pry-select\"\n                    id=\"other_limit\"\n                  ></pry-select>\n                </ng-container>\n              </ng-container>\n\n              <ng-container *ngIf=\"!!optionsCopy.abscissa.limit.isTimeLimit\">\n                <label class=\"a-label\" for=\"date_limit\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeTimeLimit($event)\"\n                  [itemsAsOption]=\"true\"\n                  [items]=\"[\n                    { id: 'second' },\n                    { id: 'minute' },\n                    { id: 'hour' },\n                    { id: 'day' },\n                    { id: 'week' },\n                    { id: 'month' },\n                    { id: 'quarter' },\n                    { id: 'year' }\n                  ]\"\n                  [ngModel]=\"optionsCopy.abscissa.limit.interval\"\n                  [labelTranslate]=\"true\"\n                  baseTranslate=\"@pry.widget.chart.time.\"\n                  bindLabel=\"id\"\n                  bindValue=\"id\"\n                  class=\"a-pry-select\"\n                  id=\"date_limit\"\n                ></pry-select>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"operations\">{{ '@pry.widget.chart.operation.title' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeOperation($event)\"\n              [itemsAsOption]=\"true\"\n              [items]=\"operations$ | async\"\n              [ngModel]=\"optionsCopy.ordinate.operation\"\n              bindLabel=\"label\"\n              bindValue=\"id\"\n              class=\"a-pry-select\"\n              id=\"operations\"\n            ></pry-select>\n          </div>\n\n          <ng-container *ngIf=\"optionsCopy.ordinate.operation !== Operation.COUNT\">\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"ordinate\">{{ '@pry.widget.chart.ordinate' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"changeOrdinate($event)\"\n                [itemsAsOption]=\"true\"\n                [items]=\"ordinateAttributes$ | async\"\n                [ngModel]=\"optionsCopy.ordinate.attribute\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                class=\"a-pry-select\"\n                id=\"ordinate\"\n              ></pry-select>\n            </div>\n          </ng-container>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeOrdinateLabel($event)\"\n            [ngModel]=\"optionsCopy.ordinate.label\"\n          ></pry-edit-input>\n\n          <div *ngIf=\"translateToVegaType(copyOrdinateField?.type) === 'quantitative'\" class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"changeKeep0Ordinate($event)\" [ngModel]=\"optionsCopy.ordinate.keep0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n          </div>\n        </div>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type !== GraphType.DONUT && optionsCopy.graph.type !== GraphType.CIRCULAR\"\n        >\n          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleGroupBy($event)\" [ngModel]=\"!!optionsCopy.groupBy\"\n                >{{ '@pry.widget.chart.groupBy' | i18n }}\n              </pry-checkbox>\n            </div>\n\n            <ng-container *ngIf=\"!!optionsCopy.groupBy\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.groupAttr' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeGroupBy($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.attribute\"\n                  [items]=\"abscissaAttributes$ | async\"\n                  bindLabel=\"name\"\n                  bindValue=\"id\"\n                  class=\"a-pry-select\"\n                  id=\"chart_seriesAttr\"\n                ></pry-select>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesScheme\">{{ '@pry.widget.chart.colorScheme' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeColorScheme($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.color\"\n                  [itemsAsOption]=\"true\"\n                  [items]=\"schemes\"\n                  id=\"chart_seriesScheme\"\n                  [labelTranslate]=\"true\"\n                  baseTranslate=\"@pry.widget.chart.scheme.\"\n                  bindValue=\"id\"\n                  bindLabel=\"id\"\n                ></pry-select>\n              </div>\n\n              <div class=\"o-widget--chart-color-thumb\">\n                <div\n                  *ngFor=\"let schemeColor of scheme()\"\n                  class=\"o-widget--chart-color-thumb-item\"\n                  [title]=\"schemeColor\"\n                  [style.background-color]=\"schemeColor\"\n                ></div>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-checkbox [ngModel]=\"optionsCopy.graph.stacked\" (ngModelChange)=\"toggleStacked($event)\">\n                  {{ '@pry.widget.chart.stacked' | i18n }}\n                </pry-checkbox>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </pry-settings>\n  </pry-widget-header>\n  <div class=\"no-result\" *ngIf=\"(isChartValid$ | async) === false\">\n    <img\n      class=\"no-result__search\"\n      src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n      alt=\"{{ '@pry.widget.chart.noData' | i18n }}\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"no-result__text\">{{ '@pry.widget.chart.noData' | i18n }}</span>\n  </div>\n  <ng-container *ngIf=\"(isChartValid$ | async) && !(noData$ | async)\">\n    <div #vega></div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(isChartValid$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <p class=\"a-p\">\n        {{ '@pry.widget.chart.chooseParameters' | i18n }}\n      </p>\n      <button type=\"button\" (click)=\"openSettings()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.settings.title' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"noData$ | async\">\n    <div class=\"o-widget__choose-parameters\">\n      <p class=\"a-p\">\n        {{ '@pry.widget.chart.noData' | i18n }}\n      </p>\n    </div>\n  </ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.PryI18nService }, { type: i0.ElementRef }, { type: PryAggregationService }]; }, propDecorators: { vega: [{
+                type: ViewChild,
+                args: ['vega']
+            }] } });
+
+const enTranslations = {
+    '@pry': {
+        widget: {
+            chart: {
+                numberLocale: {
+                    decimal: '.',
+                    thousands: ',',
+                    grouping: [3],
+                    currency: ['$', '']
+                },
+                timeFormatLocale: {
+                    dateTime: '%Y %B %d %H:%M:%S',
+                    date: '%d/%m/%Y',
+                    time: '%H:%M:%S',
+                    periods: ['AM', 'PM'],
+                    days: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
+                    shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+                    months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+                    shortMonths: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
+                },
+                operation: {
+                    none: 'Attribute value',
+                    count: 'Count',
+                    sum: 'Sum',
+                    cardinality: 'Distinct elements',
+                    avg: 'Average',
+                    median: 'Median',
+                    q1: 'Lower quartile',
+                    q3: 'Upper Quartile',
+                    min: 'Minimum',
+                    max: 'Maximum',
+                    percent: 'Percent',
+                    title: 'Operation'
+                },
+                chooseParameters: 'Please select parameters to display chart.',
+                series: 'Series',
+                type: 'Chart type',
+                title: 'Chart title',
+                graphType: {
+                    'area-default': 'Area',
+                    'area-with-lines-and-points': 'Curve with lines and points',
+                    'bar-default': 'Bar',
+                    'arc-default': 'Circular',
+                    'line-default': 'Curve',
+                    'line-with-points': 'Curve with points',
+                    'arc-donut': 'Donut',
+                    'bar-histogram': 'Histogram',
+                    'point-default': 'Points'
+                },
+                donutSize: 'Donut inner radius',
+                abscissa: 'Abscissa',
+                ordinate: 'Ordinate',
+                dataLabel: 'Data label',
+                origin: 'Axis containing 0',
+                limit: 'Limit elements',
+                asc: 'Biggest elements',
+                desc: 'Smallest elements',
+                timeInterval: 'Time interval',
+                others: 'Regroup remaining values in category "Other"',
+                order: 'Component selection',
+                groupBy: 'Group by',
+                groupAttr: 'Grouping attribute',
+                colorScheme: 'Color scheme',
+                legend: 'Display legend',
+                legendLabel: 'Legend',
+                tooltip: 'Display tooltip',
+                stacked: 'Vertical stacking',
+                noData: 'No data to display',
+                scheme: {
+                    accent: '8 colors n°1',
+                    set2: '8 colors n°2',
+                    dark2: '8 dark colors',
+                    pastel2: '8 pastel colors',
+                    set1: '9 colors',
+                    pastel1: '9 pastel colors',
+                    category10: '10 colors',
+                    tableau10: '10 different colors',
+                    set3: '12 colors',
+                    paired: '12 different colors',
+                    tableau20: '20 colors',
+                    category20: '20 colors with 2 shades',
+                    category20b: '20 colors with 4 shades n°1',
+                    category20c: '20 colors with 4 shades n°2',
+                    'KO/W/OK': 'Traffic light'
+                },
+                time: {
+                    second: 'Second',
+                    minute: 'Minute',
+                    hour: 'Hour',
+                    day: 'Day',
+                    week: 'Week',
+                    month: 'Month',
+                    quarter: 'Quarter',
+                    year: 'Year'
+                }
+            }
+        },
+        message: {
+            'backend-only-1-datasource': 'Aggregation service can only manage the first datasource linked to the widget.',
+            'cannot-aggregate-virtual-ds': 'Aggregation service cannot perform aggregation on virtual datasets such as current search.'
+        }
+    }
+};
+
+const frTranslations = {
+    '@pry': {
+        widget: {
+            chart: {
+                numberLocale: {
+                    decimal: '.',
+                    thousands: ' ',
+                    grouping: [3],
+                    currency: ['€', '']
+                },
+                timeFormatLocale: {
+                    dateTime: '%Y %B %d %H:%M:%S',
+                    date: '%d/%m/%Y',
+                    time: '%H:%M:%S',
+                    periods: ['AM', 'PM'],
+                    days: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+                    shortDays: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+                    months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+                    shortMonths: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
+                },
+                operation: {
+                    none: "Valeur de l'attribut",
+                    count: 'Nombre',
+                    sum: 'Somme',
+                    cardinality: "Nombre d'éléments distincts",
+                    avg: 'Moyenne',
+                    median: 'Médiane',
+                    q1: 'Quartile inférieur',
+                    q3: 'Quartile supérieur',
+                    min: 'Minimum',
+                    max: 'Maximum',
+                    percent: 'Pourcentage',
+                    title: 'Opération'
+                },
+                chooseParameters: "Merci de sélectionner les paramètres afin d'afficher le graphique",
+                series: 'Regroupement',
+                type: 'Type de graphique',
+                title: 'Titre du graphique',
+                graphType: {
+                    'area-default': 'Aire',
+                    'area-with-lines-and-points': 'Aire avec lignes et marques',
+                    'bar-default': 'Barres',
+                    'arc-default': 'Circulaire',
+                    'line-default': 'Courbe',
+                    'line-with-points': 'Courbe avec marques',
+                    'arc-donut': 'Diagramme anneau',
+                    'bar-histogram': 'Histogramme',
+                    'point-default': 'Points'
+                },
+                donutSize: "Diamètre intérieur de l'anneau",
+                abscissa: 'Abscisse',
+                ordinate: 'Ordonnée',
+                dataLabel: 'Libellé de la donnée',
+                origin: 'Axe contenant 0',
+                limit: 'Limiter les éléments',
+                asc: 'Aux plus grands éléments',
+                desc: 'Aux plus petits éléments',
+                timeInterval: 'Intervalle de temps',
+                others: 'Regrouper les valeurs restantes dans une catégorie "Autre"',
+                order: 'Choix des éléments',
+                groupBy: 'Regroupement',
+                groupAttr: 'Attribut de regroupement',
+                colorScheme: 'Schéma de couleur',
+                legend: 'Afficher la légende',
+                legendLabel: 'Légende',
+                tooltip: 'Affichage des info-bulles',
+                stacked: 'Superposition verticale',
+                noData: 'Aucune donnée à afficher',
+                scheme: {
+                    accent: '8 couleurs n°1',
+                    set2: '8 couleurs n°2',
+                    dark2: '8 couleurs sombre',
+                    pastel2: '8 couleurs pastel',
+                    set1: '9 couleurs',
+                    pastel1: '9 couleurs pastel',
+                    category10: '10 couleurs',
+                    tableau10: '10 couleurs différentes',
+                    set3: '12 couleurs',
+                    paired: '12 couleurs différentes',
+                    tableau20: '20 couleurs',
+                    category20: '20 couleurs avec 2 nuances',
+                    category20b: '20 couleurs avec 4 nuances n°1',
+                    category20c: '20 couleurs avec 4 nuances n°2',
+                    'KO/W/OK': 'Feu de signalisation'
+                },
+                time: {
+                    second: 'Seconde',
+                    minute: 'Minute',
+                    hour: 'Heure',
+                    day: 'Jour',
+                    week: 'Semaine',
+                    month: 'Mois',
+                    quarter: 'Trimestre',
+                    year: 'Année'
+                }
+            }
+        },
+        message: {
+            'backend-only-1-datasource': 'Le service aggregation ne peut prendre en compte que la première datasource associée au widget.',
+            'cannot-aggregate-virtual-ds': 'Le service aggregation ne peut pas agréger sur des dataset virtuels tels que la recherche courante.'
+        }
+    }
+};
+
+class WidgetAggregatedChartModule extends BaseWidgetModule {
+    constructor(pryTranslateService) {
+        super();
+        this.pryTranslateService = pryTranslateService;
+        this.pryTranslateService.addLangObject('fr', 'widget-aggregated-chart', frTranslations);
+        this.pryTranslateService.addLangObject('en', 'widget-aggregated-chart', enTranslations);
+    }
+    getComponent() {
+        return WidgetAggregatedChartComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetAggregatedChartModule, deps: [{ token: i2.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: WidgetAggregatedChartModule, declarations: [WidgetAggregatedChartComponent, PryWidgetAggregatedChartCssComponent], imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryCheckboxModule,
+            PryToggleModule,
+            PryEditInputModule,
+            PryI18nModule,
+            PryRangeModule], exports: [WidgetAggregatedChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetAggregatedChartModule, providers: [PryAggregationService], imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryCheckboxModule,
+            PryToggleModule,
+            PryEditInputModule,
+            PryI18nModule,
+            PryRangeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetAggregatedChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [WidgetAggregatedChartComponent, PryWidgetAggregatedChartCssComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        OverlayModule,
+                        PryCoreModule,
+                        PryDashboardModule,
+                        PrySelectModule,
+                        PryIconModule,
+                        PryCheckboxModule,
+                        PryToggleModule,
+                        PryEditInputModule,
+                        PryI18nModule,
+                        PryRangeModule
+                    ],
+                    exports: [WidgetAggregatedChartComponent],
+                    providers: [PryAggregationService]
+                }]
+        }], ctorParameters: function () { return [{ type: i2.PryI18nService }]; } });
+
+class PryFrontendAggregationService extends PryAggregationService {
+    constructor(store) {
+        super();
+        this.store = store;
+    }
+    // @ts-ignore
+    aggregate(datasource, options) {
+        return combineLatest([
+            this.store.select(DashboardSelectors.resultSets),
+            this.store.select(ClassSelectors.classes)
+        ]).pipe(map$1(([resultSets, classes]) => {
+            const abscissa = classes
+                .map((clazz) => clazz.attributes.find((attr) => attr.id === options.abscissa.attribute))
+                .find((attr) => !!attr)?.name;
+            const ordinate = classes
+                .map((clazz) => clazz.attributes.find((attr) => attr.id === options.ordinate.attribute))
+                .find((attr) => !!attr)?.name;
+            if (!abscissa || !ordinate) {
+                throw new Error('abscissaorodinateinvalid');
+            }
+            let data = datasource.map((rsName) => resultSets[rsName ?? '']).filter((rsName) => !!rsName);
+            const resultSet = data.reduce((rs1, rs2) => ResultsetUtils.mergeResultSets(rs1, rs2), {
+                items: {},
+                relations: [],
+                merged: data.length
+            });
+            let items = Object.keys(resultSet.items)
+                .map((classId) => resultSet.items[classId])
+                .reduce((prev, curr) => [...prev, ...curr], []);
+            if (!!options.groupBy) {
+                const groupBy = classes
+                    .map((clazz) => clazz.attributes.find((attr) => attr.id === options.groupBy?.attribute))
+                    .find((attr) => !!attr)?.name;
+                if (!groupBy) {
+                    throw new Error('groupByAttributeisinvalid');
+                }
+                const itemsGrouped = this.groupBy(items, groupBy);
+                const values = [];
+                Object.keys(itemsGrouped).forEach((key) => {
+                    values.push({
+                        key,
+                        groupBy: this.getValueFromOperation(itemsGrouped[key], options.ordinate.operation, abscissa, ordinate, options.abscissa.limit)
+                    });
+                });
+                return { operation: options.ordinate.operation, values: values };
+            }
+            const values = this.getValueFromOperation(items, options.ordinate.operation, abscissa, ordinate, options.abscissa.limit);
+            return { operation: options.ordinate.operation, values: values };
+        }));
+    }
+    getValueFromOperation(items, operation, abscissa, ordinate, limit) {
+        let result = [];
+        const groupByAbscissa = this.groupBy(items, abscissa);
+        groupByAbscissa.map((test) => console.log(groupByAbscissa[test]));
+        switch (operation) {
+            case Operation.COUNT:
+                result.push(...Object.keys(groupByAbscissa).map((key) => ({
+                    key: key,
+                    value: groupByAbscissa[key].length
+                })));
+                break;
+            case Operation.SUM:
+                result.push(...Object.keys(groupByAbscissa).map((key) => ({
+                    key: key,
+                    value: this.getSum(groupByAbscissa[key], ordinate)
+                })));
+                break;
+            case Operation.DISTINCT:
+                result.push(...Object.keys(groupByAbscissa).map((key) => ({
+                    key: key,
+                    value: this.getDistinct(groupByAbscissa[key], ordinate)
+                })));
+                break;
+            case Operation.AVERAGE:
+                result.push(...Object.keys(groupByAbscissa).map((key) => ({
+                    key: key,
+                    value: this.getAverage(groupByAbscissa[key], ordinate)
+                })));
+                break;
+            case Operation.MEDIAN:
+                result.push(...Object.keys(groupByAbscissa).map((key) => ({
+                    key: key,
+                    value: this.getQuartile(groupByAbscissa[key], ordinate, 0.5)
+                })));
+                break;
+            case Operation.Q1:
+                result.push(...Object.keys(groupByAbscissa).map((key) => ({
+                    key: key,
+                    value: this.getQuartile(groupByAbscissa[key], ordinate, 0.25)
+                })));
+                break;
+            case Operation.Q3:
+                result.push(...Object.keys(groupByAbscissa).map((key) => ({
+                    key: key,
+                    value: this.getQuartile(groupByAbscissa[key], ordinate, 0.75)
+                })));
+                break;
+            case Operation.MIN:
+                result.push(...Object.keys(groupByAbscissa).map((key) => ({
+                    key: key,
+                    value: this.getMin(groupByAbscissa[key], ordinate)
+                })));
+                break;
+            default:
+                result.push(...Object.keys(groupByAbscissa).map((key) => ({
+                    key: key,
+                    value: this.getMax(groupByAbscissa[key], ordinate)
+                })));
+                break;
+        }
+        if (limit) {
+            result = this.formatByLimit(result, limit);
+        }
+        return result;
+    }
+    groupBy(items, attribute) {
+        let distincts = [];
+        items.forEach((item) => {
+            let value = this.getValueFromAttribute(item, attribute);
+            if (distincts[value.value]) {
+                distincts[value.value].push(item);
+            }
+            else {
+                distincts[value.value] = [item];
+            }
+        });
+        return distincts;
+    }
+    getValueFromAttribute(item, attribute) {
+        let value = ItemUtils.getAttributeValue(item, attribute);
+        return Array.isArray(value) ? value[0] : value;
+    }
+    getSum(items, attribute) {
+        let sum = 0;
+        items.forEach((item) => {
+            sum += this.getValueFromAttribute(item, attribute).value;
+        });
+        return sum;
+    }
+    getMin(items, attribute) {
+        const result = items.reduce((prev, curr) => {
+            const prevValue = this.getValueFromAttribute(prev, attribute).value;
+            const currValue = this.getValueFromAttribute(curr, attribute).value;
+            return prevValue < currValue ? prev : curr;
+        });
+        return this.getValueFromAttribute(result, attribute).value;
+    }
+    getMax(items, attribute) {
+        const result = items.reduce((prev, curr) => {
+            const prevValue = this.getValueFromAttribute(prev, attribute).value;
+            const currValue = this.getValueFromAttribute(curr, attribute).value;
+            return prevValue > currValue ? prev : curr;
+        });
+        return this.getValueFromAttribute(result, attribute).value;
+    }
+    getAverage(items, attribute) {
+        const allValues = items.map((item) => this.getValueFromAttribute(item, attribute).value);
+        return allValues.reduce((acc, val) => acc + val, 0) / allValues.length;
+    }
+    getDistinct(items, attribute) {
+        return [...new Set(items.map((item) => this.getValueFromAttribute(item, attribute).value))].length;
+    }
+    getQuartile(items, attribute, q) {
+        const allValues = items.map((item) => this.getValueFromAttribute(item, attribute).value);
+        const allValuesSorted = allValues.sort((a, b) => a - b);
+        let pos = (allValuesSorted.length - 1) * q;
+        if (pos % 1 === 0) {
+            return allValuesSorted[pos];
+        }
+        pos = Math.floor(pos);
+        if (allValuesSorted[pos + 1] !== undefined) {
+            return (allValuesSorted[pos] + allValuesSorted[pos + 1]) / 2;
+        }
+        return allValuesSorted[pos];
+    }
+    getPercentile(items, attribute, q) {
+        const allValues = items.map((item) => this.getValueFromAttribute(item, attribute).value);
+        const allValuesSorted = allValues.sort((a, b) => a - b);
+        return ((100 * allValuesSorted.reduce((acc, v) => acc + (v < q ? 1 : 0) + (v === q ? 0.5 : 0), 0)) /
+            allValuesSorted.length);
+    }
+    formatByLimit(data, limit) {
+        if (!limit.isTimeLimit) {
+            data
+                .sort((a, b) => (limit.order === 'asc' ? (a.value > b.value ? 1 : -1) : a.value < b.value ? 1 : -1))
+                .splice(limit.at);
+            return data;
+        }
+        return data;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryFrontendAggregationService, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryFrontendAggregationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryFrontendAggregationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Store }]; } });
+
+class PryBackendAggregationService extends PryAggregationService {
+    constructor(store, snackBar, translateService, httpClient) {
+        super();
+        this.store = store;
+        this.snackBar = snackBar;
+        this.translateService = translateService;
+        this.httpClient = httpClient;
+        this.rs = {};
+        this.classes = [];
+        this.fields = [];
+        this.filters = {};
+        this.store.select(DashboardSelectors.resultSets).subscribe((rs) => (this.rs = rs));
+        this.store.select(ClassSelectors.classes).subscribe((classes) => (this.classes = classes));
+        this.store.select(FieldSelectors.fields).subscribe((fields) => (this.fields = fields));
+        this.store.select(DashboardSelectors.filters).subscribe((filters) => (this.filters = filters));
+    }
+    aggregate(datasources, options) {
+        const targetDatasource = datasources.find((ds) => ![DEFAULT_NAMED_QUERY_ID, EXPLORE_NAMED_QUERY_ID].includes(ds));
+        if (datasources.length > 1) {
+            this.snackBar.open({
+                type: 'warning',
+                message: this.translateService.instant('@pry.message.backend-only-1-datasource'),
+                timeout: 4000
+            });
+        }
+        if (datasources.includes(DEFAULT_NAMED_QUERY_ID) || datasources.includes(EXPLORE_NAMED_QUERY_ID)) {
+            this.snackBar.open({
+                type: 'warning',
+                message: this.translateService.instant('@pry.message.cannot-aggregate-virtual-ds'),
+                timeout: 4000
+            });
+        }
+        if (!options.abscissa || !options.ordinate) {
+            console.warn('Abscissa and ordinate must both be defined');
+            return of({ operation: 'none', values: [] });
+        }
+        if (!targetDatasource) {
+            console.warn('Aggregation needs a target datasource.');
+            return of({ operation: options.ordinate.operation, values: [] });
+        }
+        let params = new HttpParams();
+        if (options.abscissa.attribute) {
+            params = params.set('aggregatedBy', options.abscissa.attribute);
+        }
+        else {
+            console.warn('Aggregation needs an aggregatedBy member.');
+            return of({ operation: options.ordinate.operation, values: [] });
+        }
+        if (options.abscissa.limit) {
+            if (options.abscissa.limit.isTimeLimit) {
+                params = params.set('dateInterval', options.abscissa.limit.interval);
+            }
+            else {
+                params = params.set('interval', options.abscissa.limit.at);
+                params = params.set('limitOrder', options.abscissa.limit.order);
+                params = params.set('limitOthers', options.abscissa.limit.others);
+            }
+        }
+        const operation = options.ordinate.operation?.replace(/^none$/, Operation.SUM);
+        params = params.set('operation', operation);
+        if (!!options.ordinate.attribute) {
+            params = params.set('valueField', options.ordinate.attribute);
+        }
+        if (options.groupBy) {
+            params = params.set('groupBy', options.groupBy.attribute);
+        }
+        if (this.filters[targetDatasource]) {
+            this.filters[targetDatasource].forEach((filter) => {
+                params = params.append('filter', filter.attribute + ',' + filter.operator + ',' + filter.value);
+            });
+        }
+        return this.store.select(ConfigSelectors.dataUrl).pipe(switchMap((url) => this.httpClient
+            .get(`${url}/data-sources/id/${targetDatasource}/items/aggregate`, {
+            params
+        })
+            .pipe(map$1((result) => ({
+            ...result,
+            operation: options.ordinate.operation === Operation.NONE ? Operation.NONE : result.operation
+        })))));
+    }
+    getValueFromAttribute(item, attribute) {
+        let value = ItemUtils.getAttributeValue(item, attribute);
+        return Array.isArray(value) ? value[0] : value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryBackendAggregationService, deps: [{ token: i1.Store }, { token: i2.PrySnackbarService }, { token: i2.PryI18nService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryBackendAggregationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryBackendAggregationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.PrySnackbarService }, { type: i2.PryI18nService }, { type: i3.HttpClient }]; } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PryAggregationService, PryBackendAggregationService, PryFrontendAggregationService, WidgetAggregatedChartComponent, WidgetAggregatedChartModule };
+//# sourceMappingURL=provoly-dashboard-widgets-widget-aggregated-chart.mjs.map