@provoly/dashboard 0.15.2 → 0.15.4

package/fesm2022/provoly-dashboard-tooltips-attribute.mjs

@@ -6,7 +6,7 @@ import { Component, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@provoly/dashboard';
 import { BaseTooltipComponent, BaseTooltipModule, PryCoreModule } from '@provoly/dashboard';
-import { of } from 'rxjs';
+import { map, of } from 'rxjs';
 
 class AttributeTooltipComponent extends BaseTooltipComponent {
     constructor(translateIdPipe) {
@@ -14,7 +14,22 @@ class AttributeTooltipComponent extends BaseTooltipComponent {
         this.translateIdPipe = translateIdPipe;
         this.context = this.context ?? { attributes: [] };
     }
-    getValue(attribute) {
+    getValue(attribute, limit = 9999) {
+        return this._getValue(attribute).pipe(map((value) => {
+            switch (typeof value) {
+                case 'undefined':
+                    return '';
+                case 'number':
+                    return value.toString();
+                case 'string':
+                    return value;
+                default:
+                    const result = JSON.stringify(value);
+                    return result.length > limit ? `${result.substring(0, limit)}...` : result;
+            }
+        }));
+    }
+    _getValue(attribute) {
         if (!this.data.item.properties) {
             // This is for Provoly-like items
             switch (attribute) {
@@ -26,20 +41,20 @@ class AttributeTooltipComponent extends BaseTooltipComponent {
                         output: 'name'
                     });
                 default:
-                    return of((this.data.item.attributes[attribute]?.value ?? ''));
+                    return of(this.data.item.attributes[attribute]?.value);
             }
         }
         else {
             // This is for other items, like WMSFeatures
-            return of(this.data.item.properties.find((prop) => prop.key === attribute)?.value ?? '');
+            return of(this.data.item.properties.find((prop) => prop.key === attribute)?.value);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AttributeTooltipComponent, deps: [{ token: i1.TranslateIdPipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AttributeTooltipComponent, selector: "pry-attribute-tooltip", usesInheritance: true, ngImport: i0, template: "<div class=\"m-tooltip__item__content\">\n  <h3 class=\"a-h3 -attribute\">\n    <img\n      [src]=\"data.item | translateItemToSymbol | async\"\n      [alt]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n      width=\"32\"\n      aria-hidden=\"true\"\n    />\n    <span>{{ data.item.oClass | translateId : { type: 'class', output: 'name' } | async }}</span>\n  </h3>\n  <ng-container *ngFor=\"let attribute of context.attributes\">\n    <p>\n      <span>{{ attribute }}:</span> {{ getValue(attribute) | async }}\n    </p>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i1.TranslateItemToSymbolPipe, name: "translateItemToSymbol" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AttributeTooltipComponent, selector: "pry-attribute-tooltip", usesInheritance: true, ngImport: i0, template: "<div class=\"m-tooltip__item__content\">\n  <h3 class=\"a-h3 -attribute\">\n    <img\n      [src]=\"data.item | translateItemToSymbol | async\"\n      [alt]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n      [title]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n      width=\"32\"\n      aria-hidden=\"true\"\n    />\n    <span [title]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\">{{\n      data.item.oClass | translateId : { type: 'class', output: 'name' } | async\n    }}</span>\n  </h3>\n  <ng-container *ngFor=\"let attribute of context.attributes\">\n    <p [title]=\"getValue(attribute) | async\">\n      <span>{{ attribute }}:</span> {{ getValue(attribute, 40) | async }}\n    </p>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslateIdPipe, name: "translateId" }, { kind: "pipe", type: i1.TranslateItemToSymbolPipe, name: "translateItemToSymbol" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AttributeTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-attribute-tooltip', template: "<div class=\"m-tooltip__item__content\">\n  <h3 class=\"a-h3 -attribute\">\n    <img\n      [src]=\"data.item | translateItemToSymbol | async\"\n      [alt]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n      width=\"32\"\n      aria-hidden=\"true\"\n    />\n    <span>{{ data.item.oClass | translateId : { type: 'class', output: 'name' } | async }}</span>\n  </h3>\n  <ng-container *ngFor=\"let attribute of context.attributes\">\n    <p>\n      <span>{{ attribute }}:</span> {{ getValue(attribute) | async }}\n    </p>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'pry-attribute-tooltip', template: "<div class=\"m-tooltip__item__content\">\n  <h3 class=\"a-h3 -attribute\">\n    <img\n      [src]=\"data.item | translateItemToSymbol | async\"\n      [alt]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n      [title]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n      width=\"32\"\n      aria-hidden=\"true\"\n    />\n    <span [title]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\">{{\n      data.item.oClass | translateId : { type: 'class', output: 'name' } | async\n    }}</span>\n  </h3>\n  <ng-container *ngFor=\"let attribute of context.attributes\">\n    <p [title]=\"getValue(attribute) | async\">\n      <span>{{ attribute }}:</span> {{ getValue(attribute, 40) | async }}\n    </p>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.TranslateIdPipe }]; } });
 
 class PryAttributeTooltipModule extends BaseTooltipModule {

package/fesm2022/provoly-dashboard-tooltips-attribute.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"provoly-dashboard-tooltips-attribute.mjs","sources":["../../../../projects/provoly/dashboard/tooltips/attribute/attribute-tooltip.component.ts","../../../../projects/provoly/dashboard/tooltips/attribute/attribute-tooltip.component.html","../../../../projects/provoly/dashboard/tooltips/attribute/attribute-tooltip.module.ts","../../../../projects/provoly/dashboard/tooltips/attribute/provoly-dashboard-tooltips-attribute.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { BaseTooltipComponent, TranslateIdPipe } from '@provoly/dashboard';\nimport { Observable, of } from 'rxjs';\n\n@Component({\n  selector: 'pry-attribute-tooltip',\n  templateUrl: './attribute-tooltip.component.html'\n})\nexport class AttributeTooltipComponent extends BaseTooltipComponent {\n  constructor(private translateIdPipe: TranslateIdPipe) {\n    super();\n    this.context = this.context ?? { attributes: [] };\n  }\n\n  getValue(attribute: string): Observable<string> {\n    if (!this.data.item.properties) {\n      // This is for Provoly-like items\n      switch (attribute) {\n        case 'id':\n          return of(this.data.item[attribute]);\n        case 'oClass':\n          return this.translateIdPipe.transform(this.data.item[attribute], {\n            type: 'class',\n            output: 'name'\n          }) as Observable<string>;\n        default:\n          return of((this.data.item.attributes[attribute]?.value ?? '') as string);\n      }\n    } else {\n      // This is for other items, like WMSFeatures\n      return of(\n        this.data.item.properties.find((prop: { key: string; value: string }) => prop.key === attribute)?.value ?? ''\n      );\n    }\n  }\n}\n","<div class=\"m-tooltip__item__content\">\n  <h3 class=\"a-h3 -attribute\">\n    <img\n      [src]=\"data.item | translateItemToSymbol | async\"\n      [alt]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n      width=\"32\"\n      aria-hidden=\"true\"\n    />\n    <span>{{ data.item.oClass | translateId : { type: 'class', output: 'name' } | async }}</span>\n  </h3>\n  <ng-container *ngFor=\"let attribute of context.attributes\">\n    <p>\n      <span>{{ attribute }}:</span> {{ getValue(attribute) | async }}\n    </p>\n  </ng-container>\n</div>\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule, Type } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BaseTooltipComponent, BaseTooltipModule, PryCoreModule } from '@provoly/dashboard';\nimport { AttributeTooltipComponent } from './attribute-tooltip.component';\n\n@NgModule({\n  declarations: [AttributeTooltipComponent],\n  imports: [CommonModule, FormsModule, OverlayModule, PryCoreModule],\n  exports: [AttributeTooltipComponent]\n})\nexport class PryAttributeTooltipModule extends BaseTooltipModule {\n  override getComponent() {\n    return AttributeTooltipComponent as Type<BaseTooltipComponent>;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"provoly-dashboard-tooltips-attribute.mjs","sources":["../../../../projects/provoly/dashboard/tooltips/attribute/attribute-tooltip.component.ts","../../../../projects/provoly/dashboard/tooltips/attribute/attribute-tooltip.component.html","../../../../projects/provoly/dashboard/tooltips/attribute/attribute-tooltip.module.ts","../../../../projects/provoly/dashboard/tooltips/attribute/provoly-dashboard-tooltips-attribute.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { BaseTooltipComponent, TranslateIdPipe } from '@provoly/dashboard';\nimport { map, Observable, of } from 'rxjs';\n\n@Component({\n  selector: 'pry-attribute-tooltip',\n  templateUrl: './attribute-tooltip.component.html'\n})\nexport class AttributeTooltipComponent extends BaseTooltipComponent {\n  constructor(private translateIdPipe: TranslateIdPipe) {\n    super();\n    this.context = this.context ?? { attributes: [] };\n  }\n\n  getValue(attribute: string, limit = 9999): Observable<string> {\n    return this._getValue(attribute).pipe(\n      map((value) => {\n        switch (typeof value) {\n          case 'undefined':\n            return '';\n          case 'number':\n            return value.toString();\n          case 'string':\n            return value;\n          default:\n            const result = JSON.stringify(value);\n            return result.length > limit ? `${result.substring(0, limit)}...` : result;\n        }\n      })\n    );\n  }\n\n  _getValue(attribute: string): Observable<string | undefined | number> {\n    if (!this.data.item.properties) {\n      // This is for Provoly-like items\n      switch (attribute) {\n        case 'id':\n          return of(this.data.item[attribute]);\n        case 'oClass':\n          return this.translateIdPipe.transform(this.data.item[attribute], {\n            type: 'class',\n            output: 'name'\n          }) as Observable<string>;\n        default:\n          return of(this.data.item.attributes[attribute]?.value);\n      }\n    } else {\n      // This is for other items, like WMSFeatures\n      return of(\n        this.data.item.properties.find((prop: { key: string; value: string }) => prop.key === attribute)?.value\n      );\n    }\n  }\n}\n","<div class=\"m-tooltip__item__content\">\n  <h3 class=\"a-h3 -attribute\">\n    <img\n      [src]=\"data.item | translateItemToSymbol | async\"\n      [alt]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n      [title]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\"\n      width=\"32\"\n      aria-hidden=\"true\"\n    />\n    <span [title]=\"data.item.oClass | translateId : { type: 'class', output: 'name' } | async\">{{\n      data.item.oClass | translateId : { type: 'class', output: 'name' } | async\n    }}</span>\n  </h3>\n  <ng-container *ngFor=\"let attribute of context.attributes\">\n    <p [title]=\"getValue(attribute) | async\">\n      <span>{{ attribute }}:</span> {{ getValue(attribute, 40) | async }}\n    </p>\n  </ng-container>\n</div>\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule, Type } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BaseTooltipComponent, BaseTooltipModule, PryCoreModule } from '@provoly/dashboard';\nimport { AttributeTooltipComponent } from './attribute-tooltip.component';\n\n@NgModule({\n  declarations: [AttributeTooltipComponent],\n  imports: [CommonModule, FormsModule, OverlayModule, PryCoreModule],\n  exports: [AttributeTooltipComponent]\n})\nexport class PryAttributeTooltipModule extends BaseTooltipModule {\n  override getComponent() {\n    return AttributeTooltipComponent as Type<BaseTooltipComponent>;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -9,8 +9,7 @@ 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, PrySortModule, PryAggregationService } from '@provoly/dashboard';
 import * as i5 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
-import { BehaviorSubject, Subject, combineLatest, switchMap, withLatestFrom } from 'rxjs';
-import { map, filter, debounceTime } from 'rxjs/operators';
+import { BehaviorSubject, Subject, map, filter, combineLatest, fromEvent, startWith, debounceTime, switchMap, withLatestFrom, share } from 'rxjs';
 import embed, { vega } from 'vega-embed';
 import { mergeDeep } from 'vega-lite';
 import { fontConfig } from 'vega-lite/build/src/config';
@@ -70,7 +69,9 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
             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])
+            .filter((attr) => !!attr)), map((attributes) => (attributes.length > 0
+            ? Object.values(Operation).filter((operation) => operation !== Operation.EXTENT)
+            : [Operation.COUNT, Operation.DISTINCT, Operation.NONE])
             .map((v) => ({
             id: v,
             label: this.translateService.instant('@pry.widget.chart.operation.' + v)
@@ -160,7 +161,12 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                 }
             };
         }));
-        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]) => {
+        this.aggregatedValues$ = combineLatest([
+            this.datasourceIds$,
+            this.options$,
+            this.resultSet$.pipe(filter((rs) => (rs.merged ?? 0) > 0)),
+            combineLatest([fromEvent(window, 'datasourceRefresh'), this.datasourceIds$]).pipe(filter(([event, datasources]) => datasources.includes(event.detail)), startWith(undefined))
+        ]).pipe(debounceTime(100), switchMap(([datasources, options]) => this.aggregationService.aggregate(datasources, options)), withLatestFrom(this.options$), map(([aggregate, options]) => {
             // @ts-ignore
             if (aggregate.values.length > 0 && !aggregate.values[0].groupBy) {
                 return {
@@ -176,8 +182,9 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
             })))
                 .reduce((a, b) => [...a, ...b], []);
             return { operation: aggregate.operation, data: flattened };
-        }));
-        this.noData$ = this.aggregatedValues$.pipe(map(({ operation, data }) => data.length === 0));
+        }), startWith({ operation: Operation.NONE, data: [] }), share());
+        this.noData$ = this.datasourceIds$.pipe(map((ids) => ids.length === 0));
+        this.noAggregationData$ = this.aggregatedValues$.pipe(map(({ data }) => data.length === 0));
         this.vegaLiteSpec$ = combineLatest([
             this.options$,
             this.attributeTypes$,
@@ -351,6 +358,9 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
     openSettings() {
         this.open$.next(undefined);
     }
+    openData() {
+        this.openData$.next(undefined);
+    }
     getTitle(options) {
         return options.graph?.title ?? (options.abscissa.label ?? 'key') + ' / ' + (options.ordinate.label ?? 'value');
     }
@@ -650,11 +660,11 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
         });
     }
     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 }], 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  >\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\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 | 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                <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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "changeTitle"] }, { 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", "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: i5.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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i2.PrySortDataPipe, name: "prySortData" }] }); }
+    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\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 | 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                <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\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) && !(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\n  <ng-container *ngIf=\"!(noData$ | async) && (isChartValid$ | 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</div>\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "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: i5.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: i3.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: [{
             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  >\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\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 | 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                <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" }]
+            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\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 | 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                <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\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) && !(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\n  <ng-container *ngIf=\"!(noData$ | async) && (isChartValid$ | 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</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.PryI18nService }, { type: i0.ElementRef }, { type: i2.PryAggregationService }]; }, propDecorators: { vega: [{
                 type: ViewChild,
                 args: ['vega']
@@ -728,6 +738,7 @@ const enTranslations = {
                 tooltip: 'Display tooltip',
                 stacked: 'Vertical stacking',
                 noData: 'No data to display',
+                aggNoResult: 'Aggregation returns no results',
                 scheme: {
                     accent: '8 colors n°1',
                     set2: '8 colors n°2',
@@ -831,6 +842,7 @@ const frTranslations = {
                 tooltip: 'Affichage des info-bulles',
                 stacked: 'Superposition verticale',
                 noData: 'Aucune donnée à afficher',
+                aggNoResult: "L'aggrégation demandée ne renvoie rien.",
                 scheme: {
                     accent: '8 couleurs n°1',
                     set2: '8 couleurs n°2',