@provoly/dashboard 1.4.9 → 1.4.10

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

@@ -1,13 +1,13 @@
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i4 from '@angular/common';
+import * as i8 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
-import * as i5 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@provoly/dashboard';
 import { DataWidgetComponent, WIDGET_HEADER_HEIGHT, GraphType, Operation, FieldSelectors, ClassSelectors, FieldType, NamedQueryTypes, VegaType, SearchActions, BaseWidgetModule, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryEditInputModule, PryI18nModule, PryRangeModule, PrySortModule, PryAggregationService } from '@provoly/dashboard';
-import * as i6 from '@provoly/dashboard/components/checkbox';
+import * as i5 from '@provoly/dashboard/components/checkbox';
 import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
 import { BehaviorSubject, Subject, combineLatest, map, filter, fromEvent, startWith, debounceTime, tap, switchMap, catchError, throwError, withLatestFrom, share } from 'rxjs';
 import embed, { vega } from 'vega-embed';
@@ -16,7 +16,7 @@ import { initConfig } from 'vega-lite/build/src/config';
 import * as i1 from '@ngrx/store';
 import * as i3 from '@provoly/dashboard/components/scheme-picker';
 import { PrySchemePickerModule } from '@provoly/dashboard/components/scheme-picker';
-import * as i7 from '@provoly/dashboard/components/color-picker';
+import * as i6 from '@provoly/dashboard/components/color-picker';
 import { PryColorPickerModule } from '@provoly/dashboard/components/color-picker';
 
 class PryWidgetAggregatedChartCssComponent {
@@ -245,7 +245,7 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                                 ? {
                                     field: 'key',
                                     title: options.abscissa.label,
-                                    type: this.getAbscissaType(types.abscissa.vegaType, !!options.graph.sort),
+                                    type: this.getAbscissaType(types.abscissa.vegaType, options),
                                     axis: {
                                         grid: false,
                                         ...WidgetAggregatedChartComponent.minTick(types.abscissa.field?.type ?? FieldType.STRING),
@@ -254,8 +254,9 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                                     },
                                     scale: {
                                         // Force a false value here so that vega understands properly
-                                        zero: !!options.abscissa.keep0
+                                        zero: !!options.abscissa.keep0,
                                         //type: WidgetChartComponent.isTimeUnitUTC(variables[0]) ? 'utc' : undefined
+                                        reverse: this.reverseAxis(options, types)
                                     },
                                     ...this.getSort(options.abscissa.attribute, options.graph?.sort),
                                     timeUnit: this.getTimeUnit(options, types)
@@ -293,7 +294,7 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                             },
                             xOffset: stacked &&
                                 options.groupBy &&
-                                this.getAbscissaType(types.abscissa.vegaType, !!options.graph.sort) !== VegaType.TEMPORAL
+                                this.getAbscissaType(types.abscissa.vegaType, options) !== VegaType.TEMPORAL
                                 ? { field: 'series' }
                                 : undefined,
                             tooltip: options.graph.tooltip
@@ -755,7 +756,13 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
                 ...this.optionsCopy$.value,
                 graph: {
                     ...this.optionsCopy$.value?.graph,
-                    sort: { ...this.optionsCopy$.value?.graph.sort, value: $event }
+                    sort: {
+                        ...this.optionsCopy$.value?.graph.sort,
+                        value: $event,
+                        direction: this.optionsCopy$.value.graph.type === GraphType.HISTOGRAM
+                            ? 'asc'
+                            : this.optionsCopy$.value?.graph.sort?.direction
+                    }
                 }
             });
         }
@@ -825,11 +832,15 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
         }
         return {};
     }
-    getAbscissaType(abscissaVegaType, hasSort) {
+    getAbscissaType(abscissaVegaType, options) {
         if (abscissaVegaType === VegaType.TEMPORAL) {
-            return abscissaVegaType;
+            return options.graph.type !== GraphType.BAR
+                ? abscissaVegaType
+                : options.graph.sort?.value === 'value'
+                    ? VegaType.ORDINAL
+                    : VegaType.TEMPORAL;
         }
-        return hasSort ? VegaType.ORDINAL : abscissaVegaType;
+        return !!options.graph.sort ? VegaType.ORDINAL : abscissaVegaType;
     }
     isTimeInterval(abscissaInterval) {
         return typeof abscissaInterval === 'string';
@@ -882,12 +893,20 @@ class WidgetAggregatedChartComponent extends DataWidgetComponent {
         };
         return vegaTimeUnits[options.abscissa.interval];
     }
+    reverseAxis(options, types) {
+        if (options?.graph.type !== GraphType.HISTOGRAM && options?.graph.type !== GraphType.BAR) {
+            return undefined;
+        }
+        return (types.abscissa.vegaType === VegaType.TEMPORAL &&
+            options?.graph.sort?.value === 'key' &&
+            options?.graph.sort?.direction === 'desc');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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\n  class=\"o-widget o-widget--chart\"\n  *ngIf=\"optionsCopy$ | async as optionsCopy\"\n  [class.-has-header]=\"displayHeader$ | async\"\n>\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        <div class=\"m-form-label-field\">\n          <pry-edit-input\n            label=\"@pry.widget.chart.title\"\n            (ngModelChange)=\"changeChartTitle($event)\"\n            [ngModel]=\"optionsCopy.graph.title\"\n          ></pry-edit-input>\n        </div>\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            [items]=\"typeOptions\"\n            [ngModel]=\"optionsCopy.graph.type\"\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              [items]=\"abscissaAttributes$ | async | prySortData: sortActive : sortDirection\"\n              [ngModel]=\"optionsCopy.abscissa.attribute\"\n              bindLabel=\"name\"\n              bindValue=\"id\"\n              id=\"abscissa\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <pry-edit-input\n              label=\"@pry.widget.chart.dataLabel\"\n              (ngModelChange)=\"changeAbscissaLabel($event)\"\n              [ngModel]=\"optionsCopy.abscissa.label\"\n            ></pry-edit-input>\n          </div>\n\n          <div\n            *ngIf=\"\n              ['quantitative', 'temporal'].includes(\n                (attributeTypes$ | async)?.abscissa?.vegaType?.toString() ?? '--'\n              ) &&\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            <ng-container *ngIf=\"optionsCopy.graph.type === GraphType.HISTOGRAM\">\n              <pry-checkbox\n                (ngModelChange)=\"enableIntervals($event)\"\n                [ngModel]=\"!!optionsCopy.abscissa.interval\"\n                [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                >{{ '@pry.widget.chart.interval' | i18n }}\n              </pry-checkbox>\n\n              <ng-container *ngIf=\"!!optionsCopy.abscissa.interval\">\n                <ng-container *ngIf=\"!isTimeInterval(optionsCopy.abscissa.interval); else timeInterval\">\n                  <pry-range\n                    [ngModel]=\"optionsCopy.abscissa.interval\"\n                    (ngModelChange)=\"changeInterval($event)\"\n                    labelTranslate=\"@pry.widget.chart.specifyInterval\"\n                    min=\"1\"\n                    max=\"10\"\n                  ></pry-range>\n                </ng-container>\n\n                <ng-template #timeInterval>\n                  <label class=\"a-label\" for=\"time_interval\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeTimeInterval($event)\"\n                    [items]=\"['second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year']\"\n                    [ngModel]=\"optionsCopy.abscissa.interval\"\n                    i18nPrefix=\"@pry.widget.chart.time.\"\n                    id=\"time_interval\"\n                  ></pry-select>\n                </ng-template>\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              [items]=\"operations$ | async\"\n              [ngModel]=\"optionsCopy.ordinate.operation\"\n              bindLabel=\"label\"\n              bindValue=\"id\"\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                [items]=\"ordinateAttributes$ | async | prySortData: sortActive : sortDirection\"\n                [ngModel]=\"optionsCopy.ordinate.attribute\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                id=\"ordinate\"\n              ></pry-select>\n            </div>\n          </ng-container>\n\n          <div class=\"m-form-label-field\">\n            <pry-edit-input\n              label=\"@pry.widget.chart.dataLabel\"\n              (ngModelChange)=\"changeOrdinateLabel($event)\"\n              [ngModel]=\"optionsCopy.ordinate.label\"\n            ></pry-edit-input>\n          </div>\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                  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\n                (ngModelChange)=\"toggleLimitItems($event)\"\n                [ngModel]=\"optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null\"\n              >\n                {{ '@pry.widget.chart.limit' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_limitItemsValue\">{{ '@pry.widget.chart.limitMaxNb' | i18n }}</label>\n                <input\n                  type=\"number\"\n                  id=\"chart_limitItemsValue\"\n                  class=\"a-form-field\"\n                  [ngModel]=\"optionsCopy.abscissa.limit\"\n                  (ngModelChange)=\"changeLimitValue($event)\"\n                  min=\"1\"\n                  step=\"1\"\n                  [attr.aria-invalid]=\"optionsCopy.abscissa.limit < 1\"\n                />\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                  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                  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            ></pry-color-picker>\n            <ng-template #templateOption let-item=\"item\">\n              <div class=\"aligned-option\">\n                <div class=\"a-chip -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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { 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", "name", "inputId", "inhibit"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label", "editButtonTooltip", "confirmButtonTooltip"], outputs: ["validated"] }, { 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", 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@if (optionsCopy$ | async; as optionsCopy) {\n  <div class=\"o-widget o-widget--chart\" [class.-has-header]=\"displayHeader$ | async\">\n    @if (displayHeader$ | async) {\n      <pry-widget-header\n        [datasourceIds]=\"(datasourceIds$ | 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            <div class=\"m-form-label-field\">\n              <pry-edit-input\n                label=\"@pry.widget.chart.title\"\n                (ngModelChange)=\"changeChartTitle($event)\"\n                [ngModel]=\"optionsCopy.graph.title\"\n              ></pry-edit-input>\n            </div>\n\n            @if (optionsCopy) {\n              <div 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                  [items]=\"typeOptions\"\n                  [ngModel]=\"optionsCopy.graph.type\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"chart_type\"\n                ></pry-select>\n              </div>\n            }\n\n            @if (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            }\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          @if (!!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                  [items]=\"abscissaAttributes$ | async | prySortData: sortActive : sortDirection\"\n                  [ngModel]=\"optionsCopy.abscissa.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"id\"\n                  id=\"abscissa\"\n                ></pry-select>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-edit-input\n                  label=\"@pry.widget.chart.dataLabel\"\n                  (ngModelChange)=\"changeAbscissaLabel($event)\"\n                  [ngModel]=\"optionsCopy.abscissa.label\"\n                ></pry-edit-input>\n              </div>\n\n              @if (\n                ['quantitative', 'temporal'].includes(\n                  (attributeTypes$ | async)?.abscissa?.vegaType?.toString() ?? '--'\n                ) &&\n                optionsCopy.graph.type !== GraphType.DONUT &&\n                optionsCopy.graph.type !== GraphType.CIRCULAR\n              ) {\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"changeKeep0Abscissa($event)\" [ngModel]=\"optionsCopy.abscissa.keep0\"\n                    >{{ '@pry.widget.chart.origin' | i18n }}\n                  </pry-checkbox>\n\n                  @if (optionsCopy.graph.type === GraphType.HISTOGRAM) {\n                    <pry-checkbox\n                      (ngModelChange)=\"enableIntervals($event)\"\n                      [ngModel]=\"!!optionsCopy.abscissa.interval\"\n                      [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                      >{{ '@pry.widget.chart.interval' | i18n }}\n                    </pry-checkbox>\n\n                    @if (!!optionsCopy.abscissa.interval) {\n                      @if (!isTimeInterval(optionsCopy.abscissa.interval)) {\n                        <pry-range\n                          [ngModel]=\"optionsCopy.abscissa.interval\"\n                          (ngModelChange)=\"changeInterval($event)\"\n                          labelTranslate=\"@pry.widget.chart.specifyInterval\"\n                          min=\"1\"\n                          max=\"10\"\n                        ></pry-range>\n                      } @else {\n                        <label class=\"a-label\" for=\"time_interval\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                        <pry-select\n                          (ngModelChange)=\"changeTimeInterval($event)\"\n                          [items]=\"['second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year']\"\n                          [ngModel]=\"optionsCopy.abscissa.interval\"\n                          i18nPrefix=\"@pry.widget.chart.time.\"\n                          id=\"time_interval\"\n                        ></pry-select>\n                      }\n                    }\n                  }\n                </div>\n              }\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                  [items]=\"operations$ | async\"\n                  [ngModel]=\"optionsCopy.ordinate.operation\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"operations\"\n                ></pry-select>\n              </div>\n\n              @if (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                    [items]=\"ordinateAttributes$ | async | prySortData: sortActive : sortDirection\"\n                    [ngModel]=\"optionsCopy.ordinate.attribute\"\n                    bindLabel=\"name\"\n                    bindValue=\"id\"\n                    id=\"ordinate\"\n                  ></pry-select>\n                </div>\n              }\n\n              <div class=\"m-form-label-field\">\n                <pry-edit-input\n                  label=\"@pry.widget.chart.dataLabel\"\n                  (ngModelChange)=\"changeOrdinateLabel($event)\"\n                  [ngModel]=\"optionsCopy.ordinate.label\"\n                ></pry-edit-input>\n              </div>\n\n              @if (translateToVegaType(copyOrdinateField?.type) === 'quantitative') {\n                <div 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              }\n            </div>\n\n            @if (optionsCopy.graph.type !== GraphType.DONUT && optionsCopy.graph.type !== GraphType.CIRCULAR) {\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                @if (!!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                      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                }\n              </div>\n              <div class=\"o-settings__popup__content__fields -condensed\">\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox\n                    (ngModelChange)=\"toggleLimitItems($event)\"\n                    [ngModel]=\"optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null\"\n                  >\n                    {{ '@pry.widget.chart.limit' | i18n }}\n                  </pry-checkbox>\n                </div>\n                @if (optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null) {\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_limitItemsValue\">{{\n                      '@pry.widget.chart.limitMaxNb' | i18n\n                    }}</label>\n                    <input\n                      type=\"number\"\n                      id=\"chart_limitItemsValue\"\n                      class=\"a-form-field\"\n                      [ngModel]=\"optionsCopy.abscissa.limit\"\n                      (ngModelChange)=\"changeLimitValue($event)\"\n                      min=\"1\"\n                      step=\"1\"\n                      [attr.aria-invalid]=\"optionsCopy.abscissa.limit < 1\"\n                    />\n                  </div>\n                }\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                @if (!!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                      id=\"chart_sortValue\"\n                      [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                    ></pry-select>\n                  </div>\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_sortDirection\">{{\n                      '@pry.widget.chart.sort.direction' | i18n\n                    }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeSortDirection($event)\"\n                      [ngModel]=\"optionsCopy.graph.sort.direction\"\n                      [items]=\"sortDirections\"\n                      bindValue=\"value\"\n                      bindLabel=\"label\"\n                      id=\"chart_sortDirection\"\n                    ></pry-select>\n                  </div>\n                }\n              </div>\n            }\n\n            @if (optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR) {\n              <pry-scheme-picker\n                (ngModelChange)=\"changeCircleColorScheme($event)\"\n                [ngModel]=\"optionsCopy.circleColorScheme\"\n              ></pry-scheme-picker>\n            }\n\n            @if (\n              optionsCopy.graph.type !== GraphType.DONUT &&\n              optionsCopy.graph.type !== GraphType.CIRCULAR &&\n              !optionsCopy.groupBy\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                ></pry-color-picker>\n                <ng-template #templateOption let-item=\"item\">\n                  <div class=\"aligned-option\">\n                    <div class=\"a-chip -md\" [style.background-color]=\"item\">{{ item }}</div>\n                  </div>\n                </ng-template>\n              </div>\n            }\n          }\n        </pry-settings>\n      </pry-widget-header>\n    }\n\n    @if ((isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)) {\n      <div #vega></div>\n    }\n\n    @if (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    }\n\n    @if (!(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    }\n\n    @if (!(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    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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: ["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: ["items", "clearable", "multiple", "closeOnSelect", "placeholder", "isForm", "required", "name", "autocomplete", "alwaysShowAutosuggestedValues", "externalAutocompleteService", "bindValue", "bindLabel", "iconSize", "bindIcon", "template", "i18nPrefix", "bindClasses", "loading", "elementRef"], outputs: ["searched", "cleared", "clicked", "pressedEnter"] }, { 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", "name", "inputId", "inhibit"] }, { kind: "component", type: i2.PryEditInputComponent, selector: "pry-edit-input", inputs: ["label", "editButtonTooltip", "confirmButtonTooltip"], outputs: ["validated"] }, { kind: "component", type: i2.PryRangeComponent, selector: "pry-range", inputs: ["min", "max", "step", "disabled", "labelTranslate"] }, { kind: "component", type: i6.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: i8.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }, { kind: "pipe", type: i2.PrySortDataPipe, name: "prySortData" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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\n  class=\"o-widget o-widget--chart\"\n  *ngIf=\"optionsCopy$ | async as optionsCopy\"\n  [class.-has-header]=\"displayHeader$ | async\"\n>\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        <div class=\"m-form-label-field\">\n          <pry-edit-input\n            label=\"@pry.widget.chart.title\"\n            (ngModelChange)=\"changeChartTitle($event)\"\n            [ngModel]=\"optionsCopy.graph.title\"\n          ></pry-edit-input>\n        </div>\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            [items]=\"typeOptions\"\n            [ngModel]=\"optionsCopy.graph.type\"\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              [items]=\"abscissaAttributes$ | async | prySortData: sortActive : sortDirection\"\n              [ngModel]=\"optionsCopy.abscissa.attribute\"\n              bindLabel=\"name\"\n              bindValue=\"id\"\n              id=\"abscissa\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <pry-edit-input\n              label=\"@pry.widget.chart.dataLabel\"\n              (ngModelChange)=\"changeAbscissaLabel($event)\"\n              [ngModel]=\"optionsCopy.abscissa.label\"\n            ></pry-edit-input>\n          </div>\n\n          <div\n            *ngIf=\"\n              ['quantitative', 'temporal'].includes(\n                (attributeTypes$ | async)?.abscissa?.vegaType?.toString() ?? '--'\n              ) &&\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            <ng-container *ngIf=\"optionsCopy.graph.type === GraphType.HISTOGRAM\">\n              <pry-checkbox\n                (ngModelChange)=\"enableIntervals($event)\"\n                [ngModel]=\"!!optionsCopy.abscissa.interval\"\n                [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                >{{ '@pry.widget.chart.interval' | i18n }}\n              </pry-checkbox>\n\n              <ng-container *ngIf=\"!!optionsCopy.abscissa.interval\">\n                <ng-container *ngIf=\"!isTimeInterval(optionsCopy.abscissa.interval); else timeInterval\">\n                  <pry-range\n                    [ngModel]=\"optionsCopy.abscissa.interval\"\n                    (ngModelChange)=\"changeInterval($event)\"\n                    labelTranslate=\"@pry.widget.chart.specifyInterval\"\n                    min=\"1\"\n                    max=\"10\"\n                  ></pry-range>\n                </ng-container>\n\n                <ng-template #timeInterval>\n                  <label class=\"a-label\" for=\"time_interval\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                  <pry-select\n                    (ngModelChange)=\"changeTimeInterval($event)\"\n                    [items]=\"['second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year']\"\n                    [ngModel]=\"optionsCopy.abscissa.interval\"\n                    i18nPrefix=\"@pry.widget.chart.time.\"\n                    id=\"time_interval\"\n                  ></pry-select>\n                </ng-template>\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              [items]=\"operations$ | async\"\n              [ngModel]=\"optionsCopy.ordinate.operation\"\n              bindLabel=\"label\"\n              bindValue=\"id\"\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                [items]=\"ordinateAttributes$ | async | prySortData: sortActive : sortDirection\"\n                [ngModel]=\"optionsCopy.ordinate.attribute\"\n                bindLabel=\"name\"\n                bindValue=\"id\"\n                id=\"ordinate\"\n              ></pry-select>\n            </div>\n          </ng-container>\n\n          <div class=\"m-form-label-field\">\n            <pry-edit-input\n              label=\"@pry.widget.chart.dataLabel\"\n              (ngModelChange)=\"changeOrdinateLabel($event)\"\n              [ngModel]=\"optionsCopy.ordinate.label\"\n            ></pry-edit-input>\n          </div>\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                  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\n                (ngModelChange)=\"toggleLimitItems($event)\"\n                [ngModel]=\"optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null\"\n              >\n                {{ '@pry.widget.chart.limit' | i18n }}\n              </pry-checkbox>\n            </div>\n            <ng-container *ngIf=\"optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null\">\n              <div class=\"m-form-label-field\">\n                <label class=\"a-label\" for=\"chart_limitItemsValue\">{{ '@pry.widget.chart.limitMaxNb' | i18n }}</label>\n                <input\n                  type=\"number\"\n                  id=\"chart_limitItemsValue\"\n                  class=\"a-form-field\"\n                  [ngModel]=\"optionsCopy.abscissa.limit\"\n                  (ngModelChange)=\"changeLimitValue($event)\"\n                  min=\"1\"\n                  step=\"1\"\n                  [attr.aria-invalid]=\"optionsCopy.abscissa.limit < 1\"\n                />\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                  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                  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            ></pry-color-picker>\n            <ng-template #templateOption let-item=\"item\">\n              <div class=\"aligned-option\">\n                <div class=\"a-chip -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@if (optionsCopy$ | async; as optionsCopy) {\n  <div class=\"o-widget o-widget--chart\" [class.-has-header]=\"displayHeader$ | async\">\n    @if (displayHeader$ | async) {\n      <pry-widget-header\n        [datasourceIds]=\"(datasourceIds$ | 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            <div class=\"m-form-label-field\">\n              <pry-edit-input\n                label=\"@pry.widget.chart.title\"\n                (ngModelChange)=\"changeChartTitle($event)\"\n                [ngModel]=\"optionsCopy.graph.title\"\n              ></pry-edit-input>\n            </div>\n\n            @if (optionsCopy) {\n              <div 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                  [items]=\"typeOptions\"\n                  [ngModel]=\"optionsCopy.graph.type\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"chart_type\"\n                ></pry-select>\n              </div>\n            }\n\n            @if (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            }\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          @if (!!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                  [items]=\"abscissaAttributes$ | async | prySortData: sortActive : sortDirection\"\n                  [ngModel]=\"optionsCopy.abscissa.attribute\"\n                  bindLabel=\"name\"\n                  bindValue=\"id\"\n                  id=\"abscissa\"\n                ></pry-select>\n              </div>\n\n              <div class=\"m-form-label-field\">\n                <pry-edit-input\n                  label=\"@pry.widget.chart.dataLabel\"\n                  (ngModelChange)=\"changeAbscissaLabel($event)\"\n                  [ngModel]=\"optionsCopy.abscissa.label\"\n                ></pry-edit-input>\n              </div>\n\n              @if (\n                ['quantitative', 'temporal'].includes(\n                  (attributeTypes$ | async)?.abscissa?.vegaType?.toString() ?? '--'\n                ) &&\n                optionsCopy.graph.type !== GraphType.DONUT &&\n                optionsCopy.graph.type !== GraphType.CIRCULAR\n              ) {\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox (ngModelChange)=\"changeKeep0Abscissa($event)\" [ngModel]=\"optionsCopy.abscissa.keep0\"\n                    >{{ '@pry.widget.chart.origin' | i18n }}\n                  </pry-checkbox>\n\n                  @if (optionsCopy.graph.type === GraphType.HISTOGRAM) {\n                    <pry-checkbox\n                      (ngModelChange)=\"enableIntervals($event)\"\n                      [ngModel]=\"!!optionsCopy.abscissa.interval\"\n                      [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                      >{{ '@pry.widget.chart.interval' | i18n }}\n                    </pry-checkbox>\n\n                    @if (!!optionsCopy.abscissa.interval) {\n                      @if (!isTimeInterval(optionsCopy.abscissa.interval)) {\n                        <pry-range\n                          [ngModel]=\"optionsCopy.abscissa.interval\"\n                          (ngModelChange)=\"changeInterval($event)\"\n                          labelTranslate=\"@pry.widget.chart.specifyInterval\"\n                          min=\"1\"\n                          max=\"10\"\n                        ></pry-range>\n                      } @else {\n                        <label class=\"a-label\" for=\"time_interval\">{{ '@pry.widget.chart.timeInterval' | i18n }}</label>\n                        <pry-select\n                          (ngModelChange)=\"changeTimeInterval($event)\"\n                          [items]=\"['second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year']\"\n                          [ngModel]=\"optionsCopy.abscissa.interval\"\n                          i18nPrefix=\"@pry.widget.chart.time.\"\n                          id=\"time_interval\"\n                        ></pry-select>\n                      }\n                    }\n                  }\n                </div>\n              }\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                  [items]=\"operations$ | async\"\n                  [ngModel]=\"optionsCopy.ordinate.operation\"\n                  bindLabel=\"label\"\n                  bindValue=\"id\"\n                  id=\"operations\"\n                ></pry-select>\n              </div>\n\n              @if (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                    [items]=\"ordinateAttributes$ | async | prySortData: sortActive : sortDirection\"\n                    [ngModel]=\"optionsCopy.ordinate.attribute\"\n                    bindLabel=\"name\"\n                    bindValue=\"id\"\n                    id=\"ordinate\"\n                  ></pry-select>\n                </div>\n              }\n\n              <div class=\"m-form-label-field\">\n                <pry-edit-input\n                  label=\"@pry.widget.chart.dataLabel\"\n                  (ngModelChange)=\"changeOrdinateLabel($event)\"\n                  [ngModel]=\"optionsCopy.ordinate.label\"\n                ></pry-edit-input>\n              </div>\n\n              @if (translateToVegaType(copyOrdinateField?.type) === 'quantitative') {\n                <div 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              }\n            </div>\n\n            @if (optionsCopy.graph.type !== GraphType.DONUT && optionsCopy.graph.type !== GraphType.CIRCULAR) {\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                @if (!!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                      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                }\n              </div>\n              <div class=\"o-settings__popup__content__fields -condensed\">\n                <div class=\"m-form-label-field\">\n                  <pry-checkbox\n                    (ngModelChange)=\"toggleLimitItems($event)\"\n                    [ngModel]=\"optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null\"\n                  >\n                    {{ '@pry.widget.chart.limit' | i18n }}\n                  </pry-checkbox>\n                </div>\n                @if (optionsCopy.abscissa.limit !== undefined && optionsCopy.abscissa.limit !== null) {\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_limitItemsValue\">{{\n                      '@pry.widget.chart.limitMaxNb' | i18n\n                    }}</label>\n                    <input\n                      type=\"number\"\n                      id=\"chart_limitItemsValue\"\n                      class=\"a-form-field\"\n                      [ngModel]=\"optionsCopy.abscissa.limit\"\n                      (ngModelChange)=\"changeLimitValue($event)\"\n                      min=\"1\"\n                      step=\"1\"\n                      [attr.aria-invalid]=\"optionsCopy.abscissa.limit < 1\"\n                    />\n                  </div>\n                }\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                @if (!!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                      id=\"chart_sortValue\"\n                      [disabled]=\"optionsCopy.graph.type === GraphType.HISTOGRAM\"\n                    ></pry-select>\n                  </div>\n                  <div class=\"m-form-label-field\">\n                    <label class=\"a-label\" for=\"chart_sortDirection\">{{\n                      '@pry.widget.chart.sort.direction' | i18n\n                    }}</label>\n                    <pry-select\n                      (ngModelChange)=\"changeSortDirection($event)\"\n                      [ngModel]=\"optionsCopy.graph.sort.direction\"\n                      [items]=\"sortDirections\"\n                      bindValue=\"value\"\n                      bindLabel=\"label\"\n                      id=\"chart_sortDirection\"\n                    ></pry-select>\n                  </div>\n                }\n              </div>\n            }\n\n            @if (optionsCopy.graph.type === GraphType.DONUT || optionsCopy.graph.type === GraphType.CIRCULAR) {\n              <pry-scheme-picker\n                (ngModelChange)=\"changeCircleColorScheme($event)\"\n                [ngModel]=\"optionsCopy.circleColorScheme\"\n              ></pry-scheme-picker>\n            }\n\n            @if (\n              optionsCopy.graph.type !== GraphType.DONUT &&\n              optionsCopy.graph.type !== GraphType.CIRCULAR &&\n              !optionsCopy.groupBy\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                ></pry-color-picker>\n                <ng-template #templateOption let-item=\"item\">\n                  <div class=\"aligned-option\">\n                    <div class=\"a-chip -md\" [style.background-color]=\"item\">{{ item }}</div>\n                  </div>\n                </ng-template>\n              </div>\n            }\n          }\n        </pry-settings>\n      </pry-widget-header>\n    }\n\n    @if ((isChartValid$ | async) && !(noData$ | async) && !(noAggregationData$ | async)) {\n      <div #vega></div>\n    }\n\n    @if (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    }\n\n    @if (!(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    }\n\n    @if (!(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    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i2.PryI18nService }, { type: i0.ElementRef }, { type: i2.PryAggregationService }, { type: i3.PrySchemeService }], propDecorators: { vega: [{
                 type: ViewChild,
                 args: ['vega']