@provoly/dashboard 0.19.0 → 0.19.2

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

@@ -20,10 +20,10 @@ import * as i7 from '@provoly/dashboard/components/color-picker';
 import { PryColorPickerModule } from '@provoly/dashboard/components/color-picker';
 
 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}#vg-tooltip-element.vg-tooltip.custom-theme{font-size:12px;font-family:Ubuntu,\"sans-serif\"}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PryWidgetAggregatedChartCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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}#vg-tooltip-element.vg-tooltip.custom-theme{font-size:12px;font-family:Ubuntu,\"sans-serif\"}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetAggregatedChartCssComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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}#vg-tooltip-element.vg-tooltip.custom-theme{font-size:12px;font-family:Ubuntu,\"sans-serif\"}\n"] }]
         }] });
@@ -251,14 +251,15 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                                             ? "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'}`
+                                            : 'datum.value'}`,
+                                        ...this.getLabelAngle(types.abscissa.vegaType, values.data)
                                     },
                                     scale: {
                                         // Force a false value here so that vega understands properly
                                         zero: !!options.abscissa.keep0
                                         //type: WidgetChartComponent.isTimeUnitUTC(variables[0]) ? 'utc' : undefined
                                     },
-                                    ...this.getSort(options.abscissa.attribute, options.graph?.sort, options.ordinate.attribute)
+                                    ...this.getSort(options.abscissa.attribute, options.graph?.sort)
                                 }
                                 : undefined,
                             y: !isCircular
@@ -298,7 +299,9 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                                             field: 'key',
                                             type: types.abscissa.vegaType,
                                             title: options.abscissa.label,
-                                            ...(types.abscissa.vegaType === 'temporal' ? { format: '%Y-%B-%dT%H:%M:%S' } : {})
+                                            ...(types.abscissa.vegaType === 'temporal'
+                                                ? { format: '%Y-%B-%dT%H:%M:%S', scale: { type: 'utc' } }
+                                                : {})
                                         },
                                         { field: 'value', type: types.ordinate.vegaType, title: options.ordinate.label },
                                         {
@@ -312,7 +315,9 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                                             field: 'key',
                                             type: types.abscissa.vegaType,
                                             title: options.abscissa.label,
-                                            ...(types.abscissa.vegaType === 'temporal' ? { format: '%Y-%B-%dT%H:%M:%S' } : {})
+                                            ...(types.abscissa.vegaType === 'temporal'
+                                                ? { format: '%Y-%B-%dT%H:%M:%S', scale: { type: 'utc' } }
+                                                : {})
                                         },
                                         { field: 'value', type: types.ordinate.vegaType, title: options.ordinate.label }
                                     ]
@@ -323,36 +328,33 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                 config: this.getChartConfig()
             }, options.additionalSpec);
         }));
-        this.sortAttributes$ = this.optionsCopy$.pipe(map((options) => {
+        this.sortValues$ = this.optionsCopy$.pipe(map((options) => {
             return [
-                { id: options?.abscissa.attribute, label: options?.abscissa.label },
-                { id: options?.ordinate.attribute, label: options?.ordinate.label }
-            ].filter((attribute) => !!attribute.id);
-        }));
-        this.subscriptions.add(this.sortAttributes$.subscribe((attributes) => {
-            if (this.optionsCopy$.value?.graph.sort &&
-                !attributes.map((attribute) => attribute.id).includes(this.optionsCopy$.value?.graph.sort?.attribute)) {
-                this.optionsCopy$.next({
-                    ...this.optionsCopy$.value,
-                    graph: {
-                        ...this.optionsCopy$.value?.graph,
-                        sort: {
-                            ...this.optionsCopy$.value?.graph.sort,
-                            attribute: attributes[0].id ?? ''
-                        }
-                    }
-                });
-            }
+                {
+                    attrId: options?.abscissa.attribute,
+                    label: options?.abscissa.label,
+                    value: 'key',
+                    isDisplayed: true
+                },
+                {
+                    attrId: options?.ordinate.attribute,
+                    label: options?.ordinate.attribute
+                        ? options?.ordinate.label
+                        : this.translateService.instant(`@pry.widget.chart.sort.by.operation.${options?.ordinate.operation}`),
+                    value: 'value',
+                    isDisplayed: !!options?.ordinate
+                }
+            ].filter((value) => value.isDisplayed);
         }));
-        this.subscriptions.add(combineLatest([this.optionsCopy$, this.attributeTypes$, this.classes$]).subscribe(([options, attrTypes, classes]) => {
+        this.subscriptions.add(combineLatest([this.optionsCopy$, this.sortValues$, this.attributeTypes$, this.classes$]).subscribe(([options, sortValues, attrTypes, classes]) => {
             this.sortDirections = this.sortDirections
-                .map((sort) => {
+                .map((sortDir) => {
                 let attribute = classes
-                    .map((clazz) => clazz.attributes.find((attr) => attr.id === options?.graph.sort?.attribute))
+                    .map((clazz) => clazz.attributes.find((attr) => attr.id === sortValues.find((sortValue) => sortValue.value === options?.graph.sort?.value)?.attrId))
                     .find((attr) => !!attr);
                 return {
-                    value: sort.value,
-                    label: this.translateService.instant(`@pry.widget.chart.sort.${sort.value}.${attrTypes.abscissa.name === attribute?.name
+                    value: sortDir.value,
+                    label: this.translateService.instant(`@pry.widget.chart.sort.${sortDir.value}.${attrTypes.abscissa.name === attribute?.name
                         ? attrTypes.abscissa.vegaType
                         : attrTypes.ordinate.vegaType}`)
                 };
@@ -415,12 +417,8 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                 return {};
         }
     }
-    getSort(abscissa, sort, ordinate) {
-        return sort
-            ? {
-                sort: { field: sort.attribute === abscissa ? 'key' : 'value', order: sort.direction + 'ending' }
-            }
-            : {};
+    getSort(abscissa, sort) {
+        return sort ? { sort: { field: sort.value, order: sort.direction + 'ending' } } : {};
     }
     emitManifest() {
         this.manifestModified.emit({
@@ -447,7 +445,7 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                     // axis tick titles
                     font: 'Ubuntu, sans-serif',
                     fontSize: 12,
-                    fontWeight: 600,
+                    fontWeight: 400,
                     fill: '#263340'
                 },
                 'guide-title': {
@@ -455,13 +453,13 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                     font: 'Ubuntu, sans-serif',
                     fontSize: 12,
                     fontWeight: 600,
-                    fill: '#263340'
+                    fill: '#3E546A'
                 },
                 'group-title': {
                     // chart title
                     font: 'Ubuntu, sans-serif',
                     fontSize: 12,
-                    fontWeight: 600,
+                    fontWeight: 400,
                     fill: '#263340'
                 },
                 'group-subtitle': {
@@ -773,7 +771,7 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                     ...this.optionsCopy$.value.graph,
                     sort: $event
                         ? this.optionsCopy$.value.graph.sort ?? {
-                            attribute: this.optionsCopy$.value.abscissa.attribute,
+                            value: 'key',
                             direction: 'asc'
                         }
                         : undefined
@@ -781,13 +779,13 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
             });
         }
     }
-    changeSortAttribute($event) {
+    changeSortValue($event) {
         if (this.optionsCopy$.value) {
             this.optionsCopy$.next({
                 ...this.optionsCopy$.value,
                 graph: {
                     ...this.optionsCopy$.value.graph,
-                    sort: { ...this.optionsCopy$.value.graph.sort, attribute: $event }
+                    sort: { ...this.optionsCopy$.value.graph.sort, value: $event }
                 }
             });
         }
@@ -829,16 +827,23 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
             return { timeUnit: options.abscissa.limit.interval };
         }
         else if (abscissaType === VegaType.TEMPORAL && !!options.graph.sort) {
-            return { timeUnit: 'yearmonthdatehoursminutesseconds' };
+            return { timeUnit: 'utcyearmonthdate' };
+        }
+        return {};
+    }
+    getLabelAngle(abscissaType, data) {
+        if ([VegaType.NOMINAL, VegaType.ORDINAL].includes(abscissaType) &&
+            data.some((item) => item.key.toString().length > 10)) {
+            return { labelAngle: -30 };
         }
         return {};
     }
-    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: i2.PryAggregationService }, { token: i3.PrySchemeService }], 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$ | async) ?? []\"\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    [openData$]=\"openData$\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\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      </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 | prySortData : sortActive : sortDirection\"\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 | prySortData : sortActive : sortDirection\"\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 | prySortData : sortActive : sortDirection\"\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                <pry-scheme-picker\n                  (ngModelChange)=\"changeColorScheme($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.color\"\n                ></pry-scheme-picker>\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          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleSort($event)\" [ngModel]=\"!!optionsCopy.graph.sort\"\n                >{{ '@pry.widget.chart.sort.title' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"!!optionsCopy.graph.sort\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesAttr\">Attribute</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortAttribute($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.attribute\"\n                  [items]=\"sortAttributes$ | async\"\n                  bindValue=\"id\"\n                  bindLabel=\"label\"\n                  class=\"a-pry-select\"\n                  id=\"chart_sortAttr\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesAttr\">Sort</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortDirection($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.direction\"\n                  [items]=\"sortDirections\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  class=\"a-pry-select\"\n                  id=\"chart_sortDirection\"\n                ></pry-select>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR\"\n        >\n          <pry-scheme-picker\n            (ngModelChange)=\"changeCircleColorScheme($event)\"\n            [ngModel]=\"optionsCopy.circleColorScheme\"\n          ></pry-scheme-picker>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"\n            optionsCopy.graph.type !== GraphType.DONUT &&\n            optionsCopy.graph.type !== GraphType.CIRCULAR &&\n            !optionsCopy.groupBy\n          \"\n        >\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_baseColor\">{{ '@pry.widget.chart.color' | i18n }}</label>\n            <pry-color-picker\n              (ngModelChange)=\"changeBaseColor($event)\"\n              [ngModel]=\"optionsCopy.baseColor\"\n              id=\"chart_baseColor\"\n              class=\"a-pry-select\"\n            ></pry-color-picker>\n            <ng-template #templateOption let-item=\"item\">\n              <div class=\"aligned-option\">\n                <div class=\"a-chips -md\" [style.background-color]=\"item\">{{ item }}</div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </pry-settings>\n  </pry-widget-header>\n\n  <ng-container *ngIf=\"(isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)\">\n    <div #vega></div>\n  </ng-container>\n\n  <ng-container *ngIf=\"noData$ | async\">\n    <div class=\"o-widget__choose-parameters\">\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      <button type=\"button\" (click)=\"openData()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(noData$ | async) && (noAggregationData$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.aggNoResult' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.aggNoResult' | i18n }}</span>\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) && !(noAggregationData$ | async) && !(isChartValid$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.chooseParameters' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.chooseParameters' | i18n }}</span>\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</div>\n", dependencies: [{ 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: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "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: i7.PryColorPickerComponent, selector: "pry-color-picker" }, { kind: "component", type: i3.PrySchemePickerComponent, selector: "pry-scheme-picker" }, { kind: "component", type: PryWidgetAggregatedChartCssComponent, selector: "pry-widget-aggregated-chart-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i2.PrySortDataPipe, name: "prySortData" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetAggregatedChartComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i0.ElementRef }, { token: i2.PryAggregationService }, { token: i3.PrySchemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$ | async) ?? []\"\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    [openData$]=\"openData$\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\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      </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 | prySortData : sortActive : sortDirection\"\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 | prySortData : sortActive : sortDirection\"\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 | prySortData : sortActive : sortDirection\"\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                <pry-scheme-picker\n                  (ngModelChange)=\"changeColorScheme($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.color\"\n                ></pry-scheme-picker>\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          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleSort($event)\" [ngModel]=\"!!optionsCopy.graph.sort\"\n                >{{ '@pry.widget.chart.sort.title' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"!!optionsCopy.graph.sort\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_sortValue\">{{ '@pry.widget.chart.sort.attribute' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortValue($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.value\"\n                  [items]=\"sortValues$ | async\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  class=\"a-pry-select\"\n                  id=\"chart_sortValue\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_sortDirection\">{{ '@pry.widget.chart.sort.direction' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortDirection($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.direction\"\n                  [items]=\"sortDirections\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  class=\"a-pry-select\"\n                  id=\"chart_sortDirection\"\n                ></pry-select>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR\"\n        >\n          <pry-scheme-picker\n            (ngModelChange)=\"changeCircleColorScheme($event)\"\n            [ngModel]=\"optionsCopy.circleColorScheme\"\n          ></pry-scheme-picker>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"\n            optionsCopy.graph.type !== GraphType.DONUT &&\n            optionsCopy.graph.type !== GraphType.CIRCULAR &&\n            !optionsCopy.groupBy\n          \"\n        >\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_baseColor\">{{ '@pry.widget.chart.color' | i18n }}</label>\n            <pry-color-picker\n              (ngModelChange)=\"changeBaseColor($event)\"\n              [ngModel]=\"optionsCopy.baseColor\"\n              id=\"chart_baseColor\"\n              class=\"a-pry-select\"\n            ></pry-color-picker>\n            <ng-template #templateOption let-item=\"item\">\n              <div class=\"aligned-option\">\n                <div class=\"a-chips -md\" [style.background-color]=\"item\">{{ item }}</div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </pry-settings>\n  </pry-widget-header>\n\n  <ng-container *ngIf=\"(isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)\">\n    <div #vega></div>\n  </ng-container>\n\n  <ng-container *ngIf=\"noData$ | async\">\n    <div class=\"o-widget__choose-parameters\">\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      <button type=\"button\" (click)=\"openData()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(noData$ | async) && (noAggregationData$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.aggNoResult' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.aggNoResult' | i18n }}</span>\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) && !(noAggregationData$ | async) && !(isChartValid$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.chooseParameters' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.chooseParameters' | i18n }}</span>\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</div>\n", dependencies: [{ 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: ["triggerClick", "saveTriggered", "changeTitle"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "openData$", "additionalOptions", "headerOptions", "displayCount", "datasourceIds", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "closeOnSelect", "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: i7.PryColorPickerComponent, selector: "pry-color-picker" }, { kind: "component", type: i3.PrySchemePickerComponent, selector: "pry-scheme-picker" }, { kind: "component", type: PryWidgetAggregatedChartCssComponent, selector: "pry-widget-aggregated-chart-css" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i2.PrySortDataPipe, name: "prySortData" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetAggregatedChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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$ | async) ?? []\"\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    [openData$]=\"openData$\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\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      </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 | prySortData : sortActive : sortDirection\"\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 | prySortData : sortActive : sortDirection\"\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 | prySortData : sortActive : sortDirection\"\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                <pry-scheme-picker\n                  (ngModelChange)=\"changeColorScheme($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.color\"\n                ></pry-scheme-picker>\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          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleSort($event)\" [ngModel]=\"!!optionsCopy.graph.sort\"\n                >{{ '@pry.widget.chart.sort.title' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"!!optionsCopy.graph.sort\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesAttr\">Attribute</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortAttribute($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.attribute\"\n                  [items]=\"sortAttributes$ | async\"\n                  bindValue=\"id\"\n                  bindLabel=\"label\"\n                  class=\"a-pry-select\"\n                  id=\"chart_sortAttr\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_seriesAttr\">Sort</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortDirection($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.direction\"\n                  [items]=\"sortDirections\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  class=\"a-pry-select\"\n                  id=\"chart_sortDirection\"\n                ></pry-select>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR\"\n        >\n          <pry-scheme-picker\n            (ngModelChange)=\"changeCircleColorScheme($event)\"\n            [ngModel]=\"optionsCopy.circleColorScheme\"\n          ></pry-scheme-picker>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"\n            optionsCopy.graph.type !== GraphType.DONUT &&\n            optionsCopy.graph.type !== GraphType.CIRCULAR &&\n            !optionsCopy.groupBy\n          \"\n        >\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_baseColor\">{{ '@pry.widget.chart.color' | i18n }}</label>\n            <pry-color-picker\n              (ngModelChange)=\"changeBaseColor($event)\"\n              [ngModel]=\"optionsCopy.baseColor\"\n              id=\"chart_baseColor\"\n              class=\"a-pry-select\"\n            ></pry-color-picker>\n            <ng-template #templateOption let-item=\"item\">\n              <div class=\"aligned-option\">\n                <div class=\"a-chips -md\" [style.background-color]=\"item\">{{ item }}</div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </pry-settings>\n  </pry-widget-header>\n\n  <ng-container *ngIf=\"(isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)\">\n    <div #vega></div>\n  </ng-container>\n\n  <ng-container *ngIf=\"noData$ | async\">\n    <div class=\"o-widget__choose-parameters\">\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      <button type=\"button\" (click)=\"openData()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(noData$ | async) && (noAggregationData$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.aggNoResult' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.aggNoResult' | i18n }}</span>\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) && !(noAggregationData$ | async) && !(isChartValid$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.chooseParameters' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.chooseParameters' | i18n }}</span>\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</div>\n" }]
+            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$ | async) ?? []\"\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    [openData$]=\"openData$\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      (changeTitle)=\"changeWidgetTitle($event)\"\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      </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 | prySortData : sortActive : sortDirection\"\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 | prySortData : sortActive : sortDirection\"\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 | prySortData : sortActive : sortDirection\"\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                <pry-scheme-picker\n                  (ngModelChange)=\"changeColorScheme($event)\"\n                  [ngModel]=\"optionsCopy.groupBy.color\"\n                ></pry-scheme-picker>\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          <div class=\"o-settings__popup__content__fields -condensed\">\n            <div class=\"m-form-label-field\">\n              <pry-checkbox (ngModelChange)=\"toggleSort($event)\" [ngModel]=\"!!optionsCopy.graph.sort\"\n                >{{ '@pry.widget.chart.sort.title' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"!!optionsCopy.graph.sort\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_sortValue\">{{ '@pry.widget.chart.sort.attribute' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortValue($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.value\"\n                  [items]=\"sortValues$ | async\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  class=\"a-pry-select\"\n                  id=\"chart_sortValue\"\n                ></pry-select>\n              </div>\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_sortDirection\">{{ '@pry.widget.chart.sort.direction' | i18n }}</label>\n                <pry-select\n                  (ngModelChange)=\"changeSortDirection($event)\"\n                  [ngModel]=\"optionsCopy.graph.sort.direction\"\n                  [items]=\"sortDirections\"\n                  bindValue=\"value\"\n                  bindLabel=\"label\"\n                  class=\"a-pry-select\"\n                  id=\"chart_sortDirection\"\n                ></pry-select>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR\"\n        >\n          <pry-scheme-picker\n            (ngModelChange)=\"changeCircleColorScheme($event)\"\n            [ngModel]=\"optionsCopy.circleColorScheme\"\n          ></pry-scheme-picker>\n        </ng-container>\n\n        <ng-container\n          *ngIf=\"\n            optionsCopy.graph.type !== GraphType.DONUT &&\n            optionsCopy.graph.type !== GraphType.CIRCULAR &&\n            !optionsCopy.groupBy\n          \"\n        >\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_baseColor\">{{ '@pry.widget.chart.color' | i18n }}</label>\n            <pry-color-picker\n              (ngModelChange)=\"changeBaseColor($event)\"\n              [ngModel]=\"optionsCopy.baseColor\"\n              id=\"chart_baseColor\"\n              class=\"a-pry-select\"\n            ></pry-color-picker>\n            <ng-template #templateOption let-item=\"item\">\n              <div class=\"aligned-option\">\n                <div class=\"a-chips -md\" [style.background-color]=\"item\">{{ item }}</div>\n              </div>\n            </ng-template>\n          </div>\n        </ng-container>\n      </ng-container>\n    </pry-settings>\n  </pry-widget-header>\n\n  <ng-container *ngIf=\"(isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)\">\n    <div #vega></div>\n  </ng-container>\n\n  <ng-container *ngIf=\"noData$ | async\">\n    <div class=\"o-widget__choose-parameters\">\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      <button type=\"button\" (click)=\"openData()\" class=\"a-btn a-btn--primary\">\n        <pry-icon [height]=\"20\" [width]=\"20\" iconSvg=\"control\"></pry-icon>\n        <span>{{ '@pry.widget.tooltip.readSearch' | i18n }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!(noData$ | async) && (noAggregationData$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.aggNoResult' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.aggNoResult' | i18n }}</span>\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) && !(noAggregationData$ | async) && !(isChartValid$ | async)\">\n    <div class=\"o-widget__choose-parameters\">\n      <img\n        class=\"no-result__search\"\n        src=\"../../../assets/svgs/pry_recherche_pas_de_resultat.svg\"\n        alt=\"{{ '@pry.widget.chart.chooseParameters' | i18n }}\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"no-result__text\">{{ '@pry.widget.chart.chooseParameters' | i18n }}</span>\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</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.PryI18nService }, { type: i0.ElementRef }, { type: i2.PryAggregationService }, { type: i3.PrySchemeService }]; }, propDecorators: { vega: [{
                 type: ViewChild,
                 args: ['vega']
@@ -944,6 +949,8 @@ const enTranslations = {
                 color: 'Color',
                 sort: {
                     title: 'Sort',
+                    attribute: 'Attribute',
+                    direction: 'Direction',
                     asc: {
                         quantitative: 'Low to high',
                         nominal: 'Alphabetical',
@@ -955,6 +962,13 @@ const enTranslations = {
                         nominal: 'Reverse alphabetical',
                         ordinal: 'Reverse alphabetical',
                         temporal: 'Antichronological'
+                    },
+                    by: {
+                        operation: {
+                            none: 'Ordinate',
+                            count: 'Occurrence',
+                            cardinality: 'Unique occurrences'
+                        }
                     }
                 }
             }
@@ -1065,6 +1079,8 @@ const frTranslations = {
                 color: 'Couleur',
                 sort: {
                     title: 'Tri',
+                    attribute: 'Attribut',
+                    direction: 'Direction',
                     asc: {
                         quantitative: 'Croissant',
                         ordinal: 'Alphabétique',
@@ -1076,6 +1092,13 @@ const frTranslations = {
                         ordinal: 'Anti-alphabétique',
                         nominal: 'Anti-alphabétique',
                         temporal: 'Antéchronologique'
+                    },
+                    by: {
+                        operation: {
+                            none: 'Ordonnée',
+                            count: "Nombre d'occurences",
+                            cardinality: "Nombre d'occurences uniques"
+                        }
                     }
                 }
             }
@@ -1097,8 +1120,8 @@ class WidgetAggregatedChartModule extends BaseWidgetModule {
     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,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetAggregatedChartModule, deps: [{ token: i2.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: WidgetAggregatedChartModule, declarations: [WidgetAggregatedChartComponent, PryWidgetAggregatedChartCssComponent], imports: [CommonModule,
             FormsModule,
             OverlayModule,
             PryCoreModule,
@@ -1114,7 +1137,7 @@ class WidgetAggregatedChartModule extends BaseWidgetModule {
             ReactiveFormsModule,
             PryColorPickerModule,
             PrySchemePickerModule], exports: [WidgetAggregatedChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetAggregatedChartModule, providers: [PryAggregationService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetAggregatedChartModule, providers: [PryAggregationService], imports: [CommonModule,
             FormsModule,
             OverlayModule,
             PryCoreModule,
@@ -1131,7 +1154,7 @@ class WidgetAggregatedChartModule extends BaseWidgetModule {
             PryColorPickerModule,
             PrySchemePickerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetAggregatedChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WidgetAggregatedChartModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [WidgetAggregatedChartComponent, PryWidgetAggregatedChartCssComponent],