@provoly/dashboard 0.11.0

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

@@ -0,0 +1,1238 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@provoly/dashboard';
+import { PRY_CUSTOMEVENT_TYPE, DataWidgetComponent, MarkType, MarkSubType, WIDGET_HEADER_HEIGHT, ConfigSelectors, ClassSelectors, FieldSelectors, ItemUtils, FieldType, Aggregation, DashboardSelectors, VegaType, BaseWidgetModule, PryCoreModule, PryDashboardModule, PrySelectModule, PryIconModule, PryToggleModule, PryEditInputModule, PryI18nModule, PryRangeModule } from '@provoly/dashboard';
+import * as i5 from '@provoly/dashboard/components/checkbox';
+import { PryCheckboxModule } from '@provoly/dashboard/components/checkbox';
+import equal from 'fast-deep-equal/es6';
+import { BehaviorSubject, Subject, combineLatest, delay } from 'rxjs';
+import { map, distinctUntilChanged, filter } from 'rxjs/operators';
+import embed, { vega } from 'vega-embed';
+import { mergeDeep } from 'vega-lite';
+import { fontConfig } from 'vega-lite/build/src/config';
+import { View } from 'vega';
+import * as i1 from '@ngrx/store';
+
+let pryLogger = {
+    ...console,
+    debug: () => { },
+    level: () => { },
+    // @ts-ignore
+    error: (err) => {
+        // Making specific Vega error message trapping
+        const customEvent = new CustomEvent(PRY_CUSTOMEVENT_TYPE, {
+            detail: {
+                type: 'error',
+                message: '@pry.snack.default'
+            },
+            bubbles: true,
+            cancelable: true
+        });
+        if (err.stack.includes('Error: missing:')) {
+            customEvent.detail.message = '@pry.snack.missingParent';
+        }
+        else if (err.stack.includes("TypeError: Cannot read properties of undefined (reading 'value')")) {
+            customEvent.detail.message = '@pry.snack.missingValue';
+        }
+        else if (err.stack.includes('Expected number')) {
+            customEvent.detail.message = '@pry.snack.emptyValues';
+        }
+        document.dispatchEvent(customEvent);
+    }
+};
+class VegaErrorHandler extends View {
+    constructor(runtime, opt) {
+        // @ts-ignore
+        super(runtime, { ...opt, logger: pryLogger });
+    }
+}
+
+const vegaBaseConf = {
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    title: '',
+    width: 'container',
+    height: 'container',
+    padding: 0,
+    autosize: { type: 'fit', contains: 'padding' },
+    data: { values: {} },
+    layer: [
+        {
+            mark: {
+                type: '',
+                point: '',
+                innerRadius: 30
+            },
+            encoding: {}
+        }
+    ]
+};
+const vegaRadarConf = {
+    $schema: 'https://vega.github.io/schema/vega/v5.json',
+    title: '',
+    width: 'container',
+    height: 'container',
+    padding: 40,
+    autosize: { type: 'none', contains: 'padding' },
+    signals: [{ name: 'radius', update: 'height / 2' }],
+    data: [
+        {
+            name: 'table',
+            values: []
+        },
+        {
+            name: 'keys',
+            source: 'table',
+            transform: [
+                {
+                    type: 'aggregate',
+                    groupby: ['key']
+                }
+            ]
+        }
+    ],
+    scales: [
+        {
+            name: 'angular',
+            type: 'point',
+            range: { signal: '[-PI, PI]' },
+            padding: 0.5,
+            domain: { data: 'table', field: 'key' }
+        },
+        {
+            name: 'radial',
+            type: 'linear',
+            range: { signal: '[0, radius]' },
+            zero: true,
+            nice: false,
+            domain: { data: 'table', field: 'value' },
+            domainMin: 0
+        },
+        {
+            name: 'color',
+            type: 'ordinal',
+            domain: { data: 'table', field: 'category' },
+            range: { scheme: 'category10' }
+        }
+    ],
+    encode: {
+        enter: {
+            x: { signal: 'radius' },
+            y: { signal: 'radius' }
+        }
+    },
+    marks: [
+        {
+            type: 'group',
+            name: 'categories',
+            zindex: 1,
+            from: {
+                facet: { data: 'table', name: 'facet', groupby: ['category'] }
+            },
+            marks: [
+                {
+                    type: 'line',
+                    name: 'category-line',
+                    from: { data: 'facet' },
+                    encode: {
+                        enter: {
+                            interpolate: { value: 'linear-closed' },
+                            x: { signal: "scale('radial', datum.value) * cos(scale('angular', datum.key))" },
+                            y: { signal: "scale('radial', datum.value) * sin(scale('angular', datum.key))" },
+                            stroke: { scale: 'color', field: 'category' },
+                            strokeWidth: { value: 1 },
+                            fill: { scale: 'color', field: 'category' },
+                            fillOpacity: { value: 0.1 }
+                        }
+                    }
+                },
+                {
+                    type: 'text',
+                    name: 'value-text',
+                    from: { data: 'category-line' },
+                    encode: {
+                        enter: {
+                            x: { signal: 'datum.x' },
+                            y: { signal: 'datum.y' },
+                            text: { signal: 'datum.datum.value' },
+                            align: { value: 'center' },
+                            baseline: { value: 'middle' },
+                            fill: { value: 'black' }
+                        }
+                    }
+                }
+            ]
+        },
+        {
+            type: 'rule',
+            name: 'radial-grid',
+            from: { data: 'keys' },
+            zindex: 0,
+            encode: {
+                enter: {
+                    x: { value: 0 },
+                    y: { value: 0 },
+                    x2: { signal: "radius * cos(scale('angular', datum.key))" },
+                    y2: { signal: "radius * sin(scale('angular', datum.key))" },
+                    stroke: { value: 'lightgray' },
+                    strokeWidth: { value: 1 }
+                }
+            }
+        },
+        {
+            type: 'text',
+            name: 'key-label',
+            from: { data: 'keys' },
+            zindex: 1,
+            encode: {
+                enter: {
+                    x: { signal: "(radius + 5) * cos(scale('angular', datum.key))" },
+                    y: { signal: "(radius + 5) * sin(scale('angular', datum.key))" },
+                    text: { field: 'key' },
+                    align: [
+                        {
+                            test: "abs(scale('angular', datum.key)) > PI / 2",
+                            value: 'right'
+                        },
+                        {
+                            value: 'left'
+                        }
+                    ],
+                    baseline: [
+                        {
+                            test: "scale('angular', datum.key) > 0",
+                            value: 'top'
+                        },
+                        {
+                            test: "scale('angular', datum.key) == 0",
+                            value: 'middle'
+                        },
+                        {
+                            value: 'bottom'
+                        }
+                    ],
+                    fill: { value: 'black' },
+                    fontWeight: { value: 'bold' }
+                }
+            }
+        },
+        {
+            type: 'line',
+            name: 'outer-line',
+            from: { data: 'radial-grid' },
+            encode: {
+                enter: {
+                    interpolate: { value: 'linear-closed' },
+                    x: { field: 'x2' },
+                    y: { field: 'y2' },
+                    stroke: { value: 'lightgray' },
+                    strokeWidth: { value: 1 }
+                }
+            }
+        }
+    ]
+};
+const vegaCirclePackConf = {
+    $schema: 'https://vega.github.io/schema/vega/v5.json',
+    description: 'An example of a circle packing layout for hierarchical data.',
+    width: 'container',
+    height: 'container',
+    padding: 0,
+    autosize: { type: 'fit', contains: 'padding' },
+    data: [
+        {
+            name: 'table',
+            values: []
+        },
+        {
+            name: 'tree',
+            source: 'table',
+            transform: [
+                {
+                    type: 'stratify',
+                    key: 'id',
+                    parentKey: 'parent'
+                },
+                {
+                    type: 'pack',
+                    field: 'size',
+                    sort: { field: 'value' },
+                    size: [{ signal: 'width' }, { signal: 'height' }]
+                }
+            ]
+        }
+    ],
+    scales: [
+        {
+            name: 'color',
+            type: 'ordinal',
+            domain: { data: 'tree', field: 'depth' },
+            range: { scheme: 'category20' }
+        }
+    ],
+    marks: [
+        {
+            type: 'symbol',
+            from: { data: 'tree' },
+            encode: {
+                enter: {
+                    shape: { value: 'circle' },
+                    fill: { scale: 'color', field: 'depth' },
+                    tooltip: { signal: "datum.name + (datum.size ? ', ' + datum.size + ' bytes' : '')" }
+                },
+                update: {
+                    x: { field: 'x' },
+                    y: { field: 'y' },
+                    size: { signal: '4 * datum.r * datum.r' },
+                    stroke: { value: 'white' },
+                    strokeWidth: { value: 0.5 }
+                },
+                hover: {
+                    stroke: { value: 'red' },
+                    strokeWidth: { value: 2 }
+                }
+            }
+        }
+    ]
+};
+
+class PryWidgetChartCssComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetChartCssComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: PryWidgetChartCssComponent, selector: "pry-widget-chart-css", ngImport: i0, template: '', isInline: true, styles: [".o-widget--chart-color-thumb{display:flex;flex-direction:row;margin-bottom:20px}.o-widget--chart-color-thumb-item{flex:1 1 20px;height:20px;border-radius:4px}.o-widget--chart div.vega-embed{display:block}.o-widget--chart div.vega-embed.has-actions{display:block;height:100%;padding-right:0}.o-widget--chart div.vega-embed.has-actions>div.chart-wrapper.fit-y.fit-x{height:100%;overflow:hidden}.o-widget--chart div.vega-embed.has-actions>details>summary{right:25px}.o-widget--chart div.vega-embed.has-actions>details .vega-actions{right:16px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: PryWidgetChartCssComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-chart-css', template: '', encapsulation: ViewEncapsulation.None, styles: [".o-widget--chart-color-thumb{display:flex;flex-direction:row;margin-bottom:20px}.o-widget--chart-color-thumb-item{flex:1 1 20px;height:20px;border-radius:4px}.o-widget--chart div.vega-embed{display:block}.o-widget--chart div.vega-embed.has-actions{display:block;height:100%;padding-right:0}.o-widget--chart div.vega-embed.has-actions>div.chart-wrapper.fit-y.fit-x{height:100%;overflow:hidden}.o-widget--chart div.vega-embed.has-actions>details>summary{right:25px}.o-widget--chart div.vega-embed.has-actions>details .vega-actions{right:16px}\n"] }]
+        }] });
+
+vega.scheme('KO/W/OK', ['#C04D3F', '#FD9843', '#9ABE29']);
+class WidgetChartComponent extends DataWidgetComponent {
+    constructor(store, translateService, el, cdRef) {
+        super(store, el);
+        this.translateService = translateService;
+        this.cdRef = cdRef;
+        this.typeOptions = [];
+        this.markTypes = [];
+        this.MarkType = MarkType;
+        this.MarkSubType = MarkSubType;
+        this.WIDGET_HEADER_HEIGHT = WIDGET_HEADER_HEIGHT;
+        this.timeUnits = ['year', 'quarter', 'month', 'week', 'day', 'hours', 'minutes'];
+        this.optionsCopy = {};
+        this.triggerCalculatePossibleAttributes$ = new BehaviorSubject(undefined);
+        this.variables = [];
+        this.aggregations = [];
+        this.variableAttributes = [];
+        this.fields = [];
+        this.comparisons = [
+            {
+                id: 'item',
+                name: this.translateService.instant('@pry.widget.chart.comparison.item')
+            },
+            {
+                id: 'value',
+                name: this.translateService.instant('@pry.widget.chart.comparison.value')
+            }
+        ];
+        this.trigger$ = new Subject();
+        this.invalidJson = false;
+        this.templateTypeTranslationFn = (item, args) => `${args[0]}${item === MarkSubType.DEFAULT ? item : args[1] + args[2] + item}`;
+        this.translateAggregations = (item) => this.translateService.instant('@pry.widget.chart.aggregation.' + item);
+        this.advancedEdit = '{}';
+        this.store.select(ConfigSelectors.chartOption).subscribe((chartOptions) => {
+            this.aggregations = chartOptions.aggregation;
+            this.schemes = chartOptions.color.map((scheme) => ({ id: scheme, translated: '' }));
+            this.markTypes = chartOptions.type;
+            this.subTypes = chartOptions.subType;
+            this.typeOptions = this.markTypes
+                .map((type) => {
+                // @ts-ignore
+                return this.subTypes && this.subTypes[type] ? this.subTypes[type].map((subType) => ({ type, subType })) : [];
+            })
+                .reduce((p, c) => [...p, ...c], [])
+                .map((options) => ({
+                ...options,
+                id: `${options.type}-${options.subType}`,
+                label: options.subType === MarkSubType.DEFAULT ? options.type : options.subType
+            }))
+                .map((options) => ({
+                ...options,
+                translated: this.translateService.instant('@pry.widget.chart.markType.' + options.label)
+            }));
+            this.typeOptions.sort((a, b) => a.translated?.localeCompare(b.translated ?? '') ?? -1);
+        });
+        this.classes$ = this.store.select(ClassSelectors.classes);
+        this.fields$ = this.store.select(FieldSelectors.fields);
+        this.variableAttributes$ = combineLatest([this.resultSet$, this.classes$, this.fields$]).pipe(map(([resultSet, classes, fields]) => ItemUtils.getAttributesFromRs(resultSet, classes, fields)), map((fields) => fields.sort((a, b) => a.name.localeCompare(b.name))), map((props) => WidgetChartComponent.uniqueAttributesByNames(props)), distinctUntilChanged((p, c) => equal(p, c)));
+        this.subscriptions.add(this.variableAttributes$.subscribe((attrs) => (this.variableAttributes = attrs)));
+        this.subscriptions.add(this.fields$.subscribe((attrs) => (this.fields = attrs)));
+        this.variables$ = combineLatest([this.variableAttributes$, this.fields$]).pipe(map(([attributes, fields]) => {
+            return attributes.map((attr) => ({
+                name: attr.name,
+                label: attr.name,
+                type: this.translateToVegaType(fields.find((field) => field.id === attr.field)?.type ?? FieldType.STRING, attr.name)
+            }) ?? []);
+        }));
+        this.options$ = combineLatest([
+            this.variables$,
+            this.manifest$.pipe(map((manifest) => manifest.options))
+        ]).pipe(map(([variables, options]) => ({
+            ...options,
+            title: options?.title ?? ((variables[0]?.label ?? '') + ', ' + (variables[1]?.label ?? '')).replace(/^, $/, ''),
+            selectedVariables: options?.selectedVariables ?? [{}, {}],
+            // Here, we do not presume of the type of graph that the user wants, and prefer to display a button to go to params
+            type: options?.type ?? undefined,
+            aggregation: options?.aggregation ?? Aggregation.COUNT,
+            tooltip: options?.tooltip ?? true,
+            legend: options.legend ?? true,
+            locale: 'fr'
+        })));
+        this.items$ = this.resultSet$.pipe(filter((resultSet) => !!resultSet), map((resultSet) => {
+            return Object.keys(resultSet?.items)
+                .map((classId) => resultSet.items[classId])
+                .reduce((prev, curr) => [...prev, ...curr], []);
+        }));
+        this.possibleSecondaryAttributes$ = combineLatest([
+            this.variableAttributes$,
+            this.items$,
+            this.fields$,
+            this.triggerCalculatePossibleAttributes$
+        ]).pipe(map(([variableFields, items, fields, _]) => {
+            return variableFields
+                .filter((attribute) => {
+                // Keep only numeric values when necessary
+                if (!this.optionsCopy.aggregation ||
+                    [Aggregation.NONE, Aggregation.DISTINCT, Aggregation.COUNT].includes(this.optionsCopy.aggregation)) {
+                    return true;
+                }
+                else {
+                    const field = fields.find((field) => field.id === attribute.field);
+                    return [FieldType.DECIMAL, FieldType.INSTANT, FieldType.LONG, FieldType.INTEGER].includes(field?.type ?? FieldType.STRING);
+                }
+            })
+                .filter((attribute) => items.find((item) => Object.keys(item.attributes).includes(this.optionsCopy.selectedVariables[0].label) &&
+                Object.keys(item.attributes).includes(attribute.name) &&
+                !!item.attributes[this.optionsCopy.selectedVariables[0].label].value &&
+                item.attributes[attribute.name].value !== undefined));
+        }), map((props) => WidgetChartComponent.uniqueAttributesByNames(props)));
+        this.numericProperties$ = combineLatest([
+            this.variableAttributes$,
+            this.items$,
+            this.fields$,
+            this.triggerCalculatePossibleAttributes$
+        ]).pipe(map(([variableFields, items, fields, _]) => {
+            return variableFields
+                .filter((attribute) => {
+                const field = fields.find((field) => field.id === attribute.field);
+                return [FieldType.DECIMAL, FieldType.INSTANT, FieldType.LONG, FieldType.INTEGER].includes(field?.type ?? FieldType.STRING);
+            })
+                .filter((attribute) => items.find((item) => Object.keys(item.attributes).includes(attribute.name) &&
+                item.attributes[attribute.name].value !== undefined));
+        }), map((props) => {
+            return WidgetChartComponent.uniqueAttributesByNames(props);
+        }));
+        this.textProperties$ = combineLatest([
+            this.variableAttributes$,
+            this.items$,
+            this.fields$,
+            this.triggerCalculatePossibleAttributes$
+        ]).pipe(map(([variableFields, items, fields, _]) => {
+            return variableFields
+                .filter((attribute) => {
+                const field = fields.find((field) => field.id === attribute.field);
+                return [FieldType.STRING, FieldType.KEYWORD].includes(field?.type ?? FieldType.INTEGER);
+            })
+                .filter((attribute) => items.find((item) => Object.keys(item.attributes).includes(attribute.name) &&
+                item.attributes[attribute.name].value !== undefined));
+        }), map((props) => {
+            return WidgetChartComponent.uniqueAttributesByNames(props);
+        }));
+        this.filterDataForOptions$ = combineLatest([this.items$, this.options$, this.variableAttributes$]).pipe(filter(([items, options]) => options.selectedVariables && options.selectedVariables.length > 0), map(([items, options, variables]) => WidgetChartComponent.matchingItems(items, options, variables)));
+        this.filterDataForOptionsCopy$ = combineLatest([
+            this.items$,
+            this.triggerCalculatePossibleAttributes$.pipe(delay(200)),
+            this.variableAttributes$
+        ]).pipe(filter(([items, _]) => this.optionsCopy.selectedVariables && this.optionsCopy.selectedVariables.length > 0), map(([items, _, variables]) => WidgetChartComponent.matchingItems(items, this.optionsCopy, variables)));
+        this.subscriptions.add(this.options$.pipe(filter((opt) => !!opt)).subscribe((options) => {
+            this.optionsCopy = JSON.parse(JSON.stringify(options));
+            this.updateAdvancedEdit(JSON.stringify(this.optionsCopy.specToMerge));
+            this.optionsCopy.type = !this.markTypes.includes(this.optionsCopy.type)
+                ? this.markTypes[0]
+                : this.optionsCopy.type;
+            this.optionsCopy.subType = this.optionsCopy.subType ?? MarkSubType.DEFAULT;
+            this.optionsCopy.aggregation = !this.aggregations.includes(this.optionsCopy.aggregation)
+                ? this.aggregations[0]
+                : this.optionsCopy.aggregation;
+            if (this.optionsCopy.series) {
+                this.optionsCopy.series.scheme =
+                    this.optionsCopy.series?.scheme &&
+                        this.schemes &&
+                        !this.schemes.find((s) => s.id === this.optionsCopy?.series?.scheme)
+                        ? this.schemes[0].id
+                        : this.optionsCopy.series?.scheme;
+            }
+        }));
+        this.vegaLiteSpec$ = combineLatest([
+            this.store.select(DashboardSelectors.windowManifest),
+            this.manifest$,
+            this.widgetSize$,
+            this.filterDataForOptions$,
+            this.options$,
+            this.displayHeader$,
+            this.variableAttributes$
+        ]).pipe(map(([windowManifest, widgetManifest, size, data, options, displayHeader, variableField]) => {
+            let spec = vegaBaseConf;
+            switch (options.type) {
+                case MarkType.RADAR:
+                    spec = vegaRadarConf;
+                    break;
+                case MarkType.CIRCLE_PACK:
+                    spec = vegaCirclePackConf;
+            }
+            spec.title = options.customTitle ?? options.title;
+            switch (options.type) {
+                case MarkType.RADAR:
+                    spec.signals[0].update = size.width > size.height ? 'height / 2' : 'width / 2';
+                    spec.data[0].values = WidgetChartComponent.buildDataVegaRadar(data, options);
+                    spec.scales[2].range.scheme = options.series?.scheme;
+                    break;
+                case MarkType.CIRCLE_PACK:
+                    spec.data[0].values = JSON.parse(JSON.stringify(data));
+                    spec.data[1].transform[0].key = 'attributes.' + options.packing?.id + '.value';
+                    spec.data[1].transform[0].parentKey = 'attributes.' + options.packing?.parentId + '.value';
+                    spec.data[1].transform[1].field = 'attributes.' + options.packing?.packField + '.value';
+                    spec.marks[0].encode.enter.tooltip.signal = `datum.attributes.${options.packing?.tooltip ?? options.packing?.id}.value + ' : ' + datum.attributes.${options.packing?.packField}.value`;
+                    break;
+                default:
+                    spec.data = { values: JSON.parse(JSON.stringify(data)) };
+                    spec.layer = [
+                        {
+                            mark: {
+                                type: options.type,
+                                point: options.type === MarkType.POINT ||
+                                    options.subType === MarkSubType.WITH_LINES_AND_POINTS ||
+                                    options.subType === MarkSubType.WITH_POINTS,
+                                line: options.type === MarkType.LINE || options.subType === MarkSubType.WITH_LINES_AND_POINTS,
+                                innerRadius: options.innerRadius,
+                                tooltip: options.tooltip ?? true
+                            },
+                            encoding: WidgetChartComponent.calculateEncoding(options)
+                        }
+                    ];
+                    if (options.fill) {
+                        spec.layer[0].mark.fill = options.fill;
+                    }
+                    if (options.subType === MarkSubType.AREASTACKED || options.subType === MarkSubType.HISTOSTACKED) {
+                        spec.data.transform = [
+                            {
+                                type: 'stack',
+                                groupby: [options.selectedVariables[0].name],
+                                sort: { field: options.series?.groupBy },
+                                field: options.selectedVariables[1].name
+                            }
+                        ];
+                    }
+            }
+            const merged = mergeDeep(spec, { config: fontConfig('Ubuntu, sans-serif') }, options.specToMerge);
+            if (!!options.specToMerge) {
+                console.log(JSON.stringify(spec));
+            }
+            return merged;
+        }));
+        this.isChartValid$ = this.options$.pipe(map((options) => !!options.type &&
+            // We must have the correct number of variables to draw the graph
+            (options.selectedVariables.filter((v) => !!v.type).length > 1 ||
+                (options.selectedVariables.filter((v) => !!v.type).length > 0 &&
+                    (options.aggregation === Aggregation.COUNT ||
+                        options.aggregation === Aggregation.DISTINCT ||
+                        options.aggregation === Aggregation.NONE)))));
+    }
+    ngAfterViewInit() {
+        this.subscriptions.add(combineLatest([this.vegaLiteSpec$, this.trigger$]).subscribe(([spec, _]) => {
+            if (this.vega) {
+                this.view?.finalize();
+                embed(this.vega.nativeElement, JSON.parse(JSON.stringify(spec)), {
+                    actions: false,
+                    renderer: 'svg',
+                    formatLocale: this.optionsCopy.locale === 'fr'
+                        ? {
+                            decimal: ',',
+                            thousands: '\u00a0',
+                            grouping: [3],
+                            currency: ['', '\u00a0€'],
+                            percent: '\u202f%'
+                        }
+                        : {
+                            decimal: '.',
+                            thousands: ',',
+                            grouping: [3],
+                            currency: ['$', '']
+                        },
+                    // @ts-ignore
+                    viewClass: VegaErrorHandler
+                }).then((result) => (this.view = result.view));
+            }
+            else {
+                setTimeout(() => this.trigger$.next(), 100);
+            }
+        }));
+        this.trigger$.next();
+    }
+    static calculateEncoding(options) {
+        const variables = options.selectedVariables ?? [{}, {}];
+        switch (options.type) {
+            case MarkType.ARC:
+                return {
+                    theta: {
+                        field: `attributes.${variables[1].name}.value`,
+                        title: variables[1].label,
+                        type: variables[1].type,
+                        aggregate: 'count'
+                    },
+                    color: {
+                        field: `attributes.${variables[0].name}.value`,
+                        title: variables[0].label,
+                        type: variables[0].type,
+                        legend: options.legend ?? true,
+                        scale: options.scale ?? { scheme: options.series?.scheme ?? 'category20c' }
+                    }
+                };
+            case MarkType.RADAR:
+                return {};
+            default:
+                const encoding = {
+                    x: {
+                        field: `attributes.${variables[0].name}.value`,
+                        title: variables[0].label,
+                        type: variables[0].type,
+                        timeUnit: variables[0].type === VegaType.TEMPORAL ? variables[0].timeUnit : undefined,
+                        bin: options.subType === MarkSubType.HISTOGRAM,
+                        axis: variables[0].axisOptions,
+                        scale: {
+                            // Force a false value here so that vega understand properly
+                            zero: !!variables[0].origin0,
+                            type: WidgetChartComponent.isTimeUnitUTC(variables[0]) ? 'utc' : undefined
+                        }
+                    },
+                    y: {
+                        field: `attributes.${variables[1].name}.value`,
+                        title: variables[1].label,
+                        type: options.aggregation === Aggregation.COUNT ? VegaType.QUANTITATIVE : variables[1].type,
+                        timeUnit: variables[1].type === VegaType.TEMPORAL ? variables[1].timeUnit : undefined,
+                        axis: variables[1].axisOptions,
+                        aggregate: options.aggregation !== Aggregation.NONE ? options.aggregation : undefined,
+                        scale: {
+                            zero: variables[1].origin0,
+                            type: WidgetChartComponent.isTimeUnitUTC(variables[1]) ? 'utc' : undefined
+                        }
+                    }
+                };
+                if (options.series) {
+                    // @ts-ignore
+                    encoding.color = {
+                        title: `${options.series.groupBy}`,
+                        field: `attributes.${options.series.groupBy}.value`,
+                        legend: options.legend
+                    };
+                    if (options.series.scheme) {
+                        // @ts-ignore
+                        encoding.color.scale = { scheme: options.series.scheme };
+                    }
+                }
+                return encoding;
+        }
+    }
+    static buildDataVegaRadar(items, options) {
+        if (options.radar?.compare === 'item') {
+            return items
+                .map((item, idx) => (options.radar?.props ?? []).map((prop) => {
+                const itemValueMultiple = ItemUtils.getAttributeValue(item, prop);
+                const itemValue = Array.isArray(itemValueMultiple) ? itemValueMultiple[0] : itemValueMultiple;
+                return {
+                    category: idx,
+                    key: prop,
+                    value: itemValue?.value
+                };
+            }))
+                .reduce((a, b) => [...a, ...b], [])
+                .filter((a) => a.value !== undefined && a.value !== null);
+        }
+        else {
+            return items
+                .map((item, idx) => ({
+                category: item.attributes[options.radar?.categoryProp ?? '']?.value ?? 'object',
+                key: item.attributes[options.radar?.keyProp ?? '']?.value,
+                value: item.attributes[options.radar?.valueProp ?? '']?.value
+            }))
+                .filter((a) => a.value !== undefined && a.value !== null && !!a.key);
+        }
+    }
+    static matchingItems(items, options, attributes) {
+        return items.filter((item) => {
+            switch (options.type) {
+                case MarkType.CIRCLE_PACK:
+                    return !!options.packing?.id && !!options.packing.parentId && !!options.packing.packField;
+                case MarkType.RADAR:
+                    return (((options.radar?.compare === 'item' && (options.radar.props?.length ?? []) > 2) ||
+                        (options.radar?.compare !== 'item' &&
+                            !!options.radar?.keyProp &&
+                            !!options.radar.valueProp &&
+                            !!options.radar.categoryProp)) &&
+                        WidgetChartComponent.buildDataVegaRadar(items, options).length > 0);
+                default:
+                    return (Object.keys(item.attributes).includes(options.selectedVariables[0].name) &&
+                        item.attributes[options.selectedVariables[0].name].value !== undefined &&
+                        ((Object.keys(item.attributes).includes(options.selectedVariables[1].name) &&
+                            item.attributes[options.selectedVariables[1].name].value !== undefined) ||
+                            options.aggregation === Aggregation.DISTINCT ||
+                            options.aggregation === Aggregation.COUNT));
+            }
+        });
+    }
+    static uniqueAttributesByNames(attributes) {
+        return [...new Set(attributes.map((attr) => attr.name))].map((attrName) => attributes.find((attr) => attr.name === attrName) ?? {});
+    }
+    changeChartTitle(title) {
+        this.optionsCopy.customTitle = title;
+    }
+    changeTimeUnit($event, variable) {
+        variable.timeUnit = $event;
+    }
+    changeAggregation($event) {
+        this.optionsCopy.aggregation = $event;
+        if ([Aggregation.COUNT, Aggregation.DISTINCT].includes($event)) {
+            this.optionsCopy.selectedVariables[1].axisOptions = { tickMinStep: 1 };
+        }
+        else {
+            delete this.optionsCopy.selectedVariables[1].axisOptions;
+        }
+        this.triggerCalculatePossibleAttributes$.next();
+    }
+    changeProperty(attrName, index) {
+        const attr = this.variableAttributes.find((attr) => attr.name === attrName);
+        if (!!attr) {
+            this.optionsCopy.selectedVariables[index].name = attr.name;
+            this.optionsCopy.selectedVariables[index].label = attr.name;
+            const field = this.fields.find((field) => field.id === attr.field)?.type ?? FieldType.STRING;
+            this.optionsCopy.selectedVariables[index].type = this.translateToVegaType(field, attr.name);
+            this.optionsCopy.selectedVariables[index].axisOptions = this.minTick(field);
+            this.optionsCopy.title =
+                this.optionsCopy.selectedVariables[0].label + ', ' + this.optionsCopy.selectedVariables[1].label;
+        }
+        this.triggerCalculatePossibleAttributes$.next();
+    }
+    static isTimeUnitUTC(variableDef) {
+        let utcRegex = new RegExp(/_utc|utc_|_UTC|UTC_|_Utc|Utc_/, 'g');
+        return utcRegex.test(variableDef?.label);
+    }
+    changeLabel(label, index) {
+        let updateTitle = false;
+        if (this.optionsCopy.title ===
+            this.optionsCopy.selectedVariables[0].label + ', ' + this.optionsCopy.selectedVariables[1].label) {
+            updateTitle = true;
+        }
+        this.optionsCopy.selectedVariables[index].label = label;
+        if (updateTitle) {
+            //update title if it has not been modified manually
+            this.optionsCopy.title =
+                this.optionsCopy.selectedVariables[0].label + ', ' + this.optionsCopy.selectedVariables[1].label;
+        }
+    }
+    toggleOriginAtZero(variable, $event) {
+        variable.origin0 = $event;
+    }
+    changeType(typeOptionsId) {
+        this.optionsCopy = JSON.parse(JSON.stringify(this.optionsCopy));
+        const [type, subType] = typeOptionsId.split('-');
+        // @ts-ignore
+        this.optionsCopy.type = type;
+        this.optionsCopy.subType = subType ?? MarkSubType.DEFAULT;
+        if (this.optionsCopy.type === MarkType.CIRCLE_PACK) {
+            this.optionsCopy.packing = {};
+        }
+        else {
+            delete this.optionsCopy.packing;
+        }
+        if (this.optionsCopy.type === MarkType.RADAR) {
+            this.optionsCopy.radar = {};
+        }
+        else {
+            delete this.optionsCopy.radar;
+        }
+        switch (this.optionsCopy.type) {
+            case MarkType.BAR:
+            case MarkType.LINE:
+                this.optionsCopy.selectedVariables[0].type =
+                    this.optionsCopy.selectedVariables[0].type !== VegaType.TEMPORAL ? VegaType.NOMINAL : VegaType.TEMPORAL;
+                break;
+            case MarkType.POINT:
+                this.optionsCopy.selectedVariables[1].type =
+                    this.optionsCopy.selectedVariables[1].type !== VegaType.TEMPORAL ? VegaType.QUANTITATIVE : VegaType.TEMPORAL;
+                break;
+        }
+        if (this.optionsCopy.subType === MarkSubType.AREASTACKED || this.optionsCopy.subType === MarkSubType.HISTOSTACKED) {
+            this.optionsCopy.series = this.optionsCopy.series ?? {};
+        }
+        this.resetChart();
+        if (subType === MarkSubType.DONUT) {
+            this.optionsCopy.innerRadius = this.optionsCopy.innerRadius ?? 50;
+        }
+    }
+    resetChart() {
+        if (this.optionsCopy.selectedVariables?.length > 2) {
+            this.optionsCopy.selectedVariables.pop();
+        }
+    }
+    emitManifest() {
+        this.manifestModified.emit({
+            widgetIndex: this.widgetIndex,
+            manifest: {
+                ...this.manifest,
+                options: { ...this.optionsCopy }
+            }
+        });
+    }
+    translateToVegaType(type, name) {
+        let idRegex = new RegExp(/_id|id_|_ID|ID_|_Id|Id_/, 'g');
+        if (idRegex.test(name)) {
+            return VegaType.ORDINAL;
+        }
+        switch (type) {
+            case FieldType.DECIMAL:
+            case FieldType.INTEGER:
+            case FieldType.LONG:
+                return VegaType.QUANTITATIVE;
+            case FieldType.INSTANT:
+                return VegaType.TEMPORAL;
+            case FieldType.KEYWORD:
+            case FieldType.STRING:
+                return VegaType.NOMINAL;
+            default:
+                return VegaType.NOMINAL;
+        }
+    }
+    minTick(type) {
+        switch (type) {
+            case FieldType.INTEGER:
+            case FieldType.LONG:
+                return { tickMinStep: 1 };
+            case FieldType.DECIMAL:
+            case FieldType.INSTANT:
+            case FieldType.KEYWORD:
+            case FieldType.STRING:
+            default:
+                return undefined;
+        }
+    }
+    trigger() {
+        this.triggerCalculatePossibleAttributes$.next();
+    }
+    proposeTitle() {
+        setTimeout(() => {
+            if (this.optionsCopy.type === MarkType.RADAR) {
+                if (this.optionsCopy.radar?.compare === 'item') {
+                    this.optionsCopy.title = this.translateService.instant('@pry.widget.chart.radar.titleItem', {
+                        props: (this.optionsCopy.radar.props || []).join(', ')
+                    });
+                }
+                if (this.optionsCopy.radar?.compare === 'value') {
+                    this.optionsCopy.title = this.translateService.instant('@pry.widget.chart.radar.titleList', {
+                        key: this.optionsCopy.radar.keyProp ?? this.translateService.instant('@pry.widget.chart.radar.defineKey'),
+                        value: this.optionsCopy.radar.valueProp ?? this.translateService.instant('@pry.widget.chart.radar.defineValue'),
+                        category: this.optionsCopy.radar.categoryProp ??
+                            this.translateService.instant('@pry.widget.chart.radar.defineCategory')
+                    });
+                }
+            }
+            if (this.optionsCopy.type === MarkType.CIRCLE_PACK) {
+                this.optionsCopy.title = this.translateService.instant('@pry.widget.chart.circle.title', {
+                    field: this.optionsCopy.packing?.packField ?? ''
+                });
+            }
+        }, 100);
+    }
+    changeInnerRadius($event) {
+        // @ts-ignore
+        this.optionsCopy.innerRadius = parseInt($event, 10);
+    }
+    openSettings() {
+        this.open$.next(undefined);
+    }
+    toggleSeries($event) {
+        if ($event) {
+            this.optionsCopy.series = {};
+        }
+        else {
+            delete this.optionsCopy.series;
+        }
+    }
+    changeSeries($event) {
+        if (!this.optionsCopy.series) {
+            this.optionsCopy.series = {};
+        }
+        this.optionsCopy.series.groupBy = $event;
+    }
+    changeSeriesScheme($event) {
+        if (!this.optionsCopy.series) {
+            this.optionsCopy.series = {};
+        }
+        this.optionsCopy.series.scheme = $event;
+    }
+    toggleSeriesLegend($event) {
+        this.optionsCopy.legend = $event;
+    }
+    toggleTooltip($event) {
+        this.optionsCopy.tooltip = $event;
+    }
+    axeLabel(i, optionsCopy) {
+        if (optionsCopy?.type === MarkType.ARC) {
+            return i === 0 ? '@pry.widget.chart.encoding.group' : '@pry.widget.chart.encoding.values';
+        }
+        return i === 0 ? '@pry.widget.chart.encoding.horizontal' : '@pry.widget.chart.encoding.vertical';
+    }
+    hasNoType(options) {
+        return !options || !options.type || options.type.includes('undefined') || options.type.includes('null');
+    }
+    scheme() {
+        return vega.scheme(this.optionsCopy.series?.scheme ?? '');
+    }
+    toggleSpecToMerge($event) {
+        if ($event) {
+            this.optionsCopy.specToMerge = {};
+            this.advancedEdit = '{}';
+        }
+        else {
+            delete this.optionsCopy.specToMerge;
+            this.advancedEdit = '{}';
+        }
+    }
+    updateAdvancedEdit($event) {
+        const value = $event?.target?.value ?? $event;
+        if (value) {
+            try {
+                this.optionsCopy.specToMerge = JSON.parse(value);
+                this.advancedEdit = JSON.stringify(this.optionsCopy.specToMerge, undefined, 4);
+                this.invalidJson = false;
+            }
+            catch (e) {
+                console.error('Invalid json provided');
+                this.invalidJson = true;
+            }
+            this.cdRef.markForCheck();
+        }
+        else {
+            delete this.optionsCopy.specToMerge;
+            this.advancedEdit = '{}';
+        }
+    }
+    toImage() {
+        return new Promise((resolve, reject) => {
+            resolve(this.vega.nativeElement.querySelectorAll('canvas')[0].toDataURL('image/png'));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetChartComponent, deps: [{ token: i1.Store }, { token: i2.PryI18nService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: WidgetChartComponent, selector: "pry-widget-chart", viewQueries: [{ propertyName: "vega", first: true, predicate: ["vega"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pry-widget-chart-css></pry-widget-chart-css>\n<div class=\"o-widget o-widget--chart\">\n  <pry-widget-header\n    [datasourceIds$]=\"datasourceIds$\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    #header\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [isDisable]=\"(filterDataForOptionsCopy$ | async)?.length === 0 || hasNoType(optionsCopy)\"\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.customTitle ?? optionsCopy.title\"\n        ></pry-edit-input>\n\n        <div class=\"m-form-label-field\">\n          <ng-container *ngIf=\"(filterDataForOptionsCopy$ | async)?.length === 0; else data\">\n            <p class=\"a-label a-label--help -error\">{{ '@pry.widget.chart.params.noParams' | i18n }}</p>\n          </ng-container>\n          <ng-template #data>\n            <div *ngIf=\"optionsCopy?.type !== MarkType.RADAR\">\n              {{ '@pry.widget.chart.params.multipleParams' | i18n }}{{ (filterDataForOptionsCopy$ | async)?.length }}\n            </div>\n          </ng-template>\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            [itemsAsOption]=\"true\"\n            [items]=\"typeOptions\"\n            [labelTranslate]=\"true\"\n            [ngModel]=\"optionsCopy.type + '-' + optionsCopy.subType\"\n            baseTranslate=\"@pry.widget.chart.markType.\"\n            class=\"a-pry-select\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"chart_type\"\n          ></pry-select>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"optionsCopy?.type !== MarkType.RADAR && optionsCopy?.type !== MarkType.CIRCLE_PACK\">\n        <ng-container *ngIf=\"optionsCopy?.subType === MarkSubType.DONUT\">\n          <pry-range\n            [ngModel]=\"optionsCopy.innerRadius\"\n            (ngModelChange)=\"changeInnerRadius($event)\"\n            labelTranslate=\"@pry.widget.chart.innerRadius\"\n            min=\"1\"\n            max=\"500\"\n          ></pry-range>\n        </ng-container>\n\n        <div\n          *ngFor=\"let variableDef of optionsCopy?.selectedVariables; let i = index\"\n          class=\"o-settings__popup__content__fields -condensed\"\n        >\n          <div class=\"m-form-label-field\" *ngIf=\"i === 1\">\n            <label class=\"a-label\" for=\"aggregations\">{{ '@pry.widget.chart.encoding.group' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeAggregation($event)\"\n              *ngIf=\"i === 1\"\n              [bindData]=\"true\"\n              [itemsAsOption]=\"true\"\n              [items]=\"aggregations\"\n              [labelTranslate]=\"true\"\n              [ngModel]=\"optionsCopy.aggregation\"\n              [translationFn]=\"translateAggregations\"\n              class=\"a-pry-select\"\n              id=\"aggregations\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"i !== 1 || optionsCopy.aggregation !== 'count'\">\n            <label class=\"a-label\" for=\"aggregation_property\">\n              {{ axeLabel(i, optionsCopy) | i18n }}\n            </label>\n            <pry-select\n              (ngModelChange)=\"changeProperty($event, i)\"\n              [itemsAsOption]=\"true\"\n              [items]=\"(i !== 1 ? variableAttributes$ : possibleSecondaryAttributes$) | async\"\n              [ngModel]=\"variableDef.name\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"aggregation_property\"\n            ></pry-select>\n          </div>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeLabel($event, i)\"\n            [ngModel]=\"variableDef.label\"\n          ></pry-edit-input>\n\n          <div *ngIf=\"variableDef.type === 'temporal'\" class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_timeUnit\">{{ '@pry.widget.chart.timeUnit' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeTimeUnit($event, variableDef)\"\n              [bindData]=\"true\"\n              [itemsAsOption]=\"true\"\n              [items]=\"timeUnits\"\n              [labelTranslate]=\"true\"\n              [ngModel]=\"variableDef.timeUnit\"\n              baseTranslate=\"@pry.widget.chart.timeUnitList.\"\n              class=\"a-pry-select\"\n              id=\"chart_timeUnit\"\n            ></pry-select>\n          </div>\n\n          <div *ngIf=\"variableDef.type === 'quantitative' && optionsCopy?.type !== 'arc'\" class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"toggleOriginAtZero(variableDef, $event)\" [ngModel]=\"variableDef.origin0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <pry-checkbox\n              (ngModelChange)=\"toggleSeries($event)\"\n              [ngModel]=\"!!optionsCopy.series\"\n              *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR\"\n              [disabled]=\"\n                this.optionsCopy.subType === MarkSubType.AREASTACKED ||\n                this.optionsCopy.subType === MarkSubType.HISTOSTACKED\n              \"\n              >{{ '@pry.widget.chart.series' | i18n }}\n            </pry-checkbox>\n          </div>\n\n          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR && !!optionsCopy.series\"\n          >\n            <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.seriesAttr' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeSeries($event)\"\n              [ngModel]=\"optionsCopy.series.groupBy!\"\n              [itemsAsOption]=\"true\"\n              [items]=\"variableAttributes$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_seriesAttr\"\n            ></pry-select>\n          </div>\n\n          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"\n              (optionsCopy?.type === MarkType.ARC || optionsCopy?.type === MarkType.RADAR || !!optionsCopy.series) &&\n              schemes\n            \"\n          >\n            <label class=\"a-label\" for=\"chart_seriesScheme\" [title]=\"'@pry.widget.chart.seriesSchemeAlt' | i18n\">{{\n              '@pry.widget.chart.seriesScheme' | i18n\n            }}</label>\n            <pry-select\n              (ngModelChange)=\"changeSeriesScheme($event)\"\n              [ngModel]=\"optionsCopy.series?.scheme!\"\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\n              (ngModelChange)=\"toggleSeriesLegend($event)\"\n              [ngModel]=\"!!optionsCopy.legend!\"\n              *ngIf=\"optionsCopy?.type !== MarkType.RADAR || !!optionsCopy.series\"\n              >{{ '@pry.widget.chart.seriesLegend' | i18n }}\n            </pry-checkbox>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"toggleTooltip($event)\" [ngModel]=\"!!optionsCopy.tooltip!\"\n              >{{ '@pry.widget.chart.tooltip' | i18n }}\n            </pry-checkbox>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"optionsCopy?.type === MarkType.RADAR && optionsCopy.radar !== undefined\">\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.radar.compare\"\n              [itemsAsOption]=\"true\"\n              [items]=\"comparisons\"\n              bindLabel=\"name\"\n              bindValue=\"id\"\n              class=\"a-pry-select\"\n            ></pry-select>\n          </div>\n\n          <ng-container *ngIf=\"optionsCopy.radar.compare === 'item'\">\n            <div class=\"m-form-label-field\">\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.props\"\n                [itemsAsOption]=\"true\"\n                [items]=\"numericProperties$ | async\"\n                [multiple]=\"true\"\n                bindLabel=\"name\"\n                bindValue=\"name\"\n                class=\"a-pry-select\"\n              ></pry-select>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"optionsCopy.radar.compare === 'value'\">\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"comparison_key\">{{ '@pry.widget.chart.comparison.key' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.keyProp\"\n                [itemsAsOption]=\"true\"\n                [items]=\"textProperties$ | async\"\n                bindLabel=\"name\"\n                bindValue=\"name\"\n                class=\"a-pry-select\"\n                id=\"comparison_key\"\n              ></pry-select>\n            </div>\n\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"comparison_values\">{{ '@pry.widget.chart.comparison.values' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.valueProp\"\n                [itemsAsOption]=\"true\"\n                [items]=\"numericProperties$ | async\"\n                bindLabel=\"name\"\n                bindValue=\"name\"\n                class=\"a-pry-select\"\n                id=\"comparison_values\"\n              ></pry-select>\n            </div>\n\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"comparison_category\">{{\n                '@pry.widget.chart.comparison.category' | i18n\n              }}</label>\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.categoryProp\"\n                [itemsAsOption]=\"true\"\n                [items]=\"textProperties$ | async\"\n                bindLabel=\"name\"\n                bindValue=\"name\"\n                class=\"a-pry-select\"\n                id=\"comparison_category\"\n              ></pry-select>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"schemes\">\n            <label\n              class=\"a-label\"\n              for=\"chart_seriesScheme_radar\"\n              [title]=\"'@pry.widget.chart.seriesSchemeAlt' | i18n\"\n              >{{ '@pry.widget.chart.seriesScheme' | i18n }}</label\n            >\n            <pry-select\n              (ngModelChange)=\"changeSeriesScheme($event)\"\n              [ngModel]=\"optionsCopy.series?.scheme!\"\n              [bindData]=\"true\"\n              [itemsAsOption]=\"false\"\n              [items]=\"schemes\"\n              id=\"chart_seriesScheme_radar\"\n            ></pry-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"optionsCopy?.type === MarkType.CIRCLE_PACK && optionsCopy.packing !== undefined\">\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_circle_id\">{{ '@pry.widget.chart.circle.id' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.packing.id\"\n              [itemsAsOption]=\"true\"\n              [items]=\"variableAttributes$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_circle_id\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_circle_pid\">{{ '@pry.widget.chart.circle.pid' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.packing.parentId\"\n              [itemsAsOption]=\"true\"\n              [items]=\"variableAttributes$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_circle_pid\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_circle_field\">{{ '@pry.widget.chart.circle.field' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.packing.packField\"\n              [itemsAsOption]=\"true\"\n              [items]=\"numericProperties$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_circle_field\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_circle_tooltip\">{{ '@pry.widget.chart.circle.tooltip' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.packing.tooltip\"\n              [itemsAsOption]=\"true\"\n              [items]=\"variableAttributes$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_circle_tooltip\"\n            ></pry-select>\n          </div>\n        </div>\n      </ng-container>\n\n      <div class=\"o-settings__popup__content__fields -condensed\">\n        <pry-checkbox (ngModelChange)=\"toggleSpecToMerge($event)\" [ngModel]=\"!!optionsCopy.specToMerge\"\n          >{{ '@pry.widget.chart.moreOptions' | i18n }}\n        </pry-checkbox>\n\n        <ng-container *ngIf=\"!!optionsCopy.specToMerge\">\n          <textarea\n            [ngModel]=\"advancedEdit\"\n            (focusout)=\"updateAdvancedEdit($event)\"\n            class=\"o-settings__popup__content__area\"\n            [class.-invalid]=\"invalidJson\"\n          ></textarea>\n        </ng-container>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n  <ng-container *ngIf=\"isChartValid$ | async\">\n    <div\n      #vega\n      [style.height.px]=\"\n        ((widgetSize$ | async)?.height ?? 0) - ((displayHeader$ | async) ? 1 : 0) * WIDGET_HEADER_HEIGHT\n      \"\n      [style.width.px]=\"(widgetSize$ | async)?.width\"\n    ></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</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.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.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"] }, { kind: "component", type: i2.PryWidgetHeaderComponent, selector: "pry-widget-header", inputs: ["manifest", "additionalOptions", "headerOptions", "displayCount", "datasourceIds$", "widgetIndex"], outputs: ["manifestModified"] }, { kind: "component", type: i2.PrySelectComponent, selector: "pry-select", inputs: ["labelTranslate", "baseTranslate", "translationFn", "translationFnArgs", "clearable", "multiple", "multipleClearRight", "placeholder", "isForm", "required", "name", "readonly", "items", "itemsAsOption", "bindData", "bindValue", "bindLabel", "bindIcon", "iconSize", "templateLabel", "templateOption", "autocomplete"] }, { kind: "component", type: i2.PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: 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: PryWidgetChartCssComponent, selector: "pry-widget-chart-css" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-chart', template: "<pry-widget-chart-css></pry-widget-chart-css>\n<div class=\"o-widget o-widget--chart\">\n  <pry-widget-header\n    [datasourceIds$]=\"datasourceIds$\"\n    *ngIf=\"displayHeader$ | async\"\n    [widgetIndex]=\"widgetIndex\"\n    [manifest]=\"manifest\"\n    (manifestModified)=\"manifestModified.emit($event)\"\n    #header\n    [headerOptions]=\"(displayHeader$ | async) ?? {}\"\n  >\n    <pry-settings\n      (saveTriggered)=\"emitManifest()\"\n      [headerPresent]=\"displayHeader$ | async\"\n      [isDisable]=\"(filterDataForOptionsCopy$ | async)?.length === 0 || hasNoType(optionsCopy)\"\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.customTitle ?? optionsCopy.title\"\n        ></pry-edit-input>\n\n        <div class=\"m-form-label-field\">\n          <ng-container *ngIf=\"(filterDataForOptionsCopy$ | async)?.length === 0; else data\">\n            <p class=\"a-label a-label--help -error\">{{ '@pry.widget.chart.params.noParams' | i18n }}</p>\n          </ng-container>\n          <ng-template #data>\n            <div *ngIf=\"optionsCopy?.type !== MarkType.RADAR\">\n              {{ '@pry.widget.chart.params.multipleParams' | i18n }}{{ (filterDataForOptionsCopy$ | async)?.length }}\n            </div>\n          </ng-template>\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            [itemsAsOption]=\"true\"\n            [items]=\"typeOptions\"\n            [labelTranslate]=\"true\"\n            [ngModel]=\"optionsCopy.type + '-' + optionsCopy.subType\"\n            baseTranslate=\"@pry.widget.chart.markType.\"\n            class=\"a-pry-select\"\n            bindLabel=\"label\"\n            bindValue=\"id\"\n            id=\"chart_type\"\n          ></pry-select>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"optionsCopy?.type !== MarkType.RADAR && optionsCopy?.type !== MarkType.CIRCLE_PACK\">\n        <ng-container *ngIf=\"optionsCopy?.subType === MarkSubType.DONUT\">\n          <pry-range\n            [ngModel]=\"optionsCopy.innerRadius\"\n            (ngModelChange)=\"changeInnerRadius($event)\"\n            labelTranslate=\"@pry.widget.chart.innerRadius\"\n            min=\"1\"\n            max=\"500\"\n          ></pry-range>\n        </ng-container>\n\n        <div\n          *ngFor=\"let variableDef of optionsCopy?.selectedVariables; let i = index\"\n          class=\"o-settings__popup__content__fields -condensed\"\n        >\n          <div class=\"m-form-label-field\" *ngIf=\"i === 1\">\n            <label class=\"a-label\" for=\"aggregations\">{{ '@pry.widget.chart.encoding.group' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeAggregation($event)\"\n              *ngIf=\"i === 1\"\n              [bindData]=\"true\"\n              [itemsAsOption]=\"true\"\n              [items]=\"aggregations\"\n              [labelTranslate]=\"true\"\n              [ngModel]=\"optionsCopy.aggregation\"\n              [translationFn]=\"translateAggregations\"\n              class=\"a-pry-select\"\n              id=\"aggregations\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\" *ngIf=\"i !== 1 || optionsCopy.aggregation !== 'count'\">\n            <label class=\"a-label\" for=\"aggregation_property\">\n              {{ axeLabel(i, optionsCopy) | i18n }}\n            </label>\n            <pry-select\n              (ngModelChange)=\"changeProperty($event, i)\"\n              [itemsAsOption]=\"true\"\n              [items]=\"(i !== 1 ? variableAttributes$ : possibleSecondaryAttributes$) | async\"\n              [ngModel]=\"variableDef.name\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"aggregation_property\"\n            ></pry-select>\n          </div>\n\n          <pry-edit-input\n            label=\"@pry.widget.chart.dataLabel\"\n            (ngModelChange)=\"changeLabel($event, i)\"\n            [ngModel]=\"variableDef.label\"\n          ></pry-edit-input>\n\n          <div *ngIf=\"variableDef.type === 'temporal'\" class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_timeUnit\">{{ '@pry.widget.chart.timeUnit' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeTimeUnit($event, variableDef)\"\n              [bindData]=\"true\"\n              [itemsAsOption]=\"true\"\n              [items]=\"timeUnits\"\n              [labelTranslate]=\"true\"\n              [ngModel]=\"variableDef.timeUnit\"\n              baseTranslate=\"@pry.widget.chart.timeUnitList.\"\n              class=\"a-pry-select\"\n              id=\"chart_timeUnit\"\n            ></pry-select>\n          </div>\n\n          <div *ngIf=\"variableDef.type === 'quantitative' && optionsCopy?.type !== 'arc'\" class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"toggleOriginAtZero(variableDef, $event)\" [ngModel]=\"variableDef.origin0\"\n              >{{ '@pry.widget.chart.origin' | i18n }}\n            </pry-checkbox>\n          </div>\n        </div>\n\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <pry-checkbox\n              (ngModelChange)=\"toggleSeries($event)\"\n              [ngModel]=\"!!optionsCopy.series\"\n              *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR\"\n              [disabled]=\"\n                this.optionsCopy.subType === MarkSubType.AREASTACKED ||\n                this.optionsCopy.subType === MarkSubType.HISTOSTACKED\n              \"\n              >{{ '@pry.widget.chart.series' | i18n }}\n            </pry-checkbox>\n          </div>\n\n          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"optionsCopy?.type !== MarkType.ARC && optionsCopy?.type !== MarkType.RADAR && !!optionsCopy.series\"\n          >\n            <label class=\"a-label\" for=\"chart_seriesAttr\">{{ '@pry.widget.chart.seriesAttr' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"changeSeries($event)\"\n              [ngModel]=\"optionsCopy.series.groupBy!\"\n              [itemsAsOption]=\"true\"\n              [items]=\"variableAttributes$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_seriesAttr\"\n            ></pry-select>\n          </div>\n\n          <div\n            class=\"m-form-label-field\"\n            *ngIf=\"\n              (optionsCopy?.type === MarkType.ARC || optionsCopy?.type === MarkType.RADAR || !!optionsCopy.series) &&\n              schemes\n            \"\n          >\n            <label class=\"a-label\" for=\"chart_seriesScheme\" [title]=\"'@pry.widget.chart.seriesSchemeAlt' | i18n\">{{\n              '@pry.widget.chart.seriesScheme' | i18n\n            }}</label>\n            <pry-select\n              (ngModelChange)=\"changeSeriesScheme($event)\"\n              [ngModel]=\"optionsCopy.series?.scheme!\"\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\n              (ngModelChange)=\"toggleSeriesLegend($event)\"\n              [ngModel]=\"!!optionsCopy.legend!\"\n              *ngIf=\"optionsCopy?.type !== MarkType.RADAR || !!optionsCopy.series\"\n              >{{ '@pry.widget.chart.seriesLegend' | i18n }}\n            </pry-checkbox>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <pry-checkbox (ngModelChange)=\"toggleTooltip($event)\" [ngModel]=\"!!optionsCopy.tooltip!\"\n              >{{ '@pry.widget.chart.tooltip' | i18n }}\n            </pry-checkbox>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"optionsCopy?.type === MarkType.RADAR && optionsCopy.radar !== undefined\">\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.radar.compare\"\n              [itemsAsOption]=\"true\"\n              [items]=\"comparisons\"\n              bindLabel=\"name\"\n              bindValue=\"id\"\n              class=\"a-pry-select\"\n            ></pry-select>\n          </div>\n\n          <ng-container *ngIf=\"optionsCopy.radar.compare === 'item'\">\n            <div class=\"m-form-label-field\">\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.props\"\n                [itemsAsOption]=\"true\"\n                [items]=\"numericProperties$ | async\"\n                [multiple]=\"true\"\n                bindLabel=\"name\"\n                bindValue=\"name\"\n                class=\"a-pry-select\"\n              ></pry-select>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"optionsCopy.radar.compare === 'value'\">\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"comparison_key\">{{ '@pry.widget.chart.comparison.key' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.keyProp\"\n                [itemsAsOption]=\"true\"\n                [items]=\"textProperties$ | async\"\n                bindLabel=\"name\"\n                bindValue=\"name\"\n                class=\"a-pry-select\"\n                id=\"comparison_key\"\n              ></pry-select>\n            </div>\n\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"comparison_values\">{{ '@pry.widget.chart.comparison.values' | i18n }}</label>\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.valueProp\"\n                [itemsAsOption]=\"true\"\n                [items]=\"numericProperties$ | async\"\n                bindLabel=\"name\"\n                bindValue=\"name\"\n                class=\"a-pry-select\"\n                id=\"comparison_values\"\n              ></pry-select>\n            </div>\n\n            <div class=\"m-form-label-field\">\n              <label class=\"a-label\" for=\"comparison_category\">{{\n                '@pry.widget.chart.comparison.category' | i18n\n              }}</label>\n              <pry-select\n                (ngModelChange)=\"trigger(); proposeTitle()\"\n                [(ngModel)]=\"optionsCopy.radar.categoryProp\"\n                [itemsAsOption]=\"true\"\n                [items]=\"textProperties$ | async\"\n                bindLabel=\"name\"\n                bindValue=\"name\"\n                class=\"a-pry-select\"\n                id=\"comparison_category\"\n              ></pry-select>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"schemes\">\n            <label\n              class=\"a-label\"\n              for=\"chart_seriesScheme_radar\"\n              [title]=\"'@pry.widget.chart.seriesSchemeAlt' | i18n\"\n              >{{ '@pry.widget.chart.seriesScheme' | i18n }}</label\n            >\n            <pry-select\n              (ngModelChange)=\"changeSeriesScheme($event)\"\n              [ngModel]=\"optionsCopy.series?.scheme!\"\n              [bindData]=\"true\"\n              [itemsAsOption]=\"false\"\n              [items]=\"schemes\"\n              id=\"chart_seriesScheme_radar\"\n            ></pry-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"optionsCopy?.type === MarkType.CIRCLE_PACK && optionsCopy.packing !== undefined\">\n        <div class=\"o-settings__popup__content__fields -condensed\">\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_circle_id\">{{ '@pry.widget.chart.circle.id' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.packing.id\"\n              [itemsAsOption]=\"true\"\n              [items]=\"variableAttributes$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_circle_id\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_circle_pid\">{{ '@pry.widget.chart.circle.pid' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.packing.parentId\"\n              [itemsAsOption]=\"true\"\n              [items]=\"variableAttributes$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_circle_pid\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_circle_field\">{{ '@pry.widget.chart.circle.field' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.packing.packField\"\n              [itemsAsOption]=\"true\"\n              [items]=\"numericProperties$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_circle_field\"\n            ></pry-select>\n          </div>\n\n          <div class=\"m-form-label-field\">\n            <label class=\"a-label\" for=\"chart_circle_tooltip\">{{ '@pry.widget.chart.circle.tooltip' | i18n }}</label>\n            <pry-select\n              (ngModelChange)=\"trigger(); proposeTitle()\"\n              [(ngModel)]=\"optionsCopy.packing.tooltip\"\n              [itemsAsOption]=\"true\"\n              [items]=\"variableAttributes$ | async\"\n              bindLabel=\"name\"\n              bindValue=\"name\"\n              class=\"a-pry-select\"\n              id=\"chart_circle_tooltip\"\n            ></pry-select>\n          </div>\n        </div>\n      </ng-container>\n\n      <div class=\"o-settings__popup__content__fields -condensed\">\n        <pry-checkbox (ngModelChange)=\"toggleSpecToMerge($event)\" [ngModel]=\"!!optionsCopy.specToMerge\"\n          >{{ '@pry.widget.chart.moreOptions' | i18n }}\n        </pry-checkbox>\n\n        <ng-container *ngIf=\"!!optionsCopy.specToMerge\">\n          <textarea\n            [ngModel]=\"advancedEdit\"\n            (focusout)=\"updateAdvancedEdit($event)\"\n            class=\"o-settings__popup__content__area\"\n            [class.-invalid]=\"invalidJson\"\n          ></textarea>\n        </ng-container>\n      </div>\n    </pry-settings>\n  </pry-widget-header>\n  <ng-container *ngIf=\"isChartValid$ | async\">\n    <div\n      #vega\n      [style.height.px]=\"\n        ((widgetSize$ | async)?.height ?? 0) - ((displayHeader$ | async) ? 1 : 0) * WIDGET_HEADER_HEIGHT\n      \"\n      [style.width.px]=\"(widgetSize$ | async)?.width\"\n    ></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</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.PryI18nService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { vega: [{
+                type: ViewChild,
+                args: ['vega']
+            }] } });
+
+const enTranslations = {
+    '@pry': {
+        widget: {
+            chart: {
+                title: 'Chart title',
+                tooltip: 'Display tooltip',
+                params: {
+                    noParams: 'No data for chart with selected settings',
+                    multipleParams: 'Number of data with selected parameters: '
+                },
+                encoding: {
+                    horizontal: 'Horizontal axis',
+                    vertical: 'Vertical axis',
+                    group: 'Operation type',
+                    values: 'Values'
+                },
+                markType: {
+                    null: '',
+                    bar: 'Bar chart',
+                    line: 'Line',
+                    point: 'Points',
+                    area: 'Area',
+                    arc: 'Arc',
+                    radar: 'Radar',
+                    circle_pack: 'Circle packing',
+                    histogram: 'Histogram',
+                    timehistogram: 'Time histogram',
+                    grouped: 'Grouped bar chart',
+                    histostacked: 'Stacked bar chart',
+                    withPoints: 'Line with points',
+                    multi: 'Multi series line chart',
+                    scatterColor: 'Scatter plot with color',
+                    withLinesAndPoints: 'Area chart with overlaying lines and point markers',
+                    areastacked: 'Stacked area chart',
+                    pie: 'Pie Chart',
+                    donut: 'Donut chart'
+                },
+                scheme: {
+                    accent: '8 colors n°1',
+                    set2: '8 colors n°2',
+                    dark2: '8 dark colors',
+                    pastel2: '8 pastel colors',
+                    set1: '9 colors',
+                    pastel1: '9 pastel colors',
+                    category10: '10 colors',
+                    tableau10: '10 different colors',
+                    set3: '12 colors',
+                    paired: '12 different colors',
+                    tableau20: '20 colors',
+                    category20: '20 colors with 2 shades',
+                    category20b: '20 colors with 4 shades n°1',
+                    category20c: '20 colors with 4 shades n°2',
+                    'KO/W/OK': 'Traffic light'
+                },
+                dataLabel: 'Data label',
+                origin: 'Origin at zero',
+                series: 'Group as series',
+                seriesAttr: 'grouping attribute',
+                seriesScheme: 'Color scheme',
+                seriesSchemeAlt: 'https://vega.github.io/vega/docs/schemes/',
+                seriesLegend: 'Display legend',
+                chooseParameters: 'Please select parameters to display chart.',
+                timeUnit: 'Time unit',
+                timeUnitList: {
+                    year: 'Year',
+                    quarter: 'Quarter',
+                    month: 'Month',
+                    week: 'Week',
+                    day: 'Day',
+                    hours: 'Hours',
+                    minutes: 'Minutes'
+                },
+                type: 'Chart type',
+                template: 'Chart template',
+                aggregation: {
+                    none: 'Value',
+                    count: 'Count',
+                    sum: 'Sum',
+                    distinct: 'Distinct elements',
+                    average: 'Average',
+                    median: 'Median',
+                    q1: 'Lower quartile',
+                    q3: 'Upper Quartile',
+                    min: 'Minimum',
+                    max: 'Maximum'
+                },
+                comparison: {
+                    item: 'Compare objects',
+                    value: 'Value list',
+                    key: 'Branch property',
+                    values: 'Value property',
+                    category: 'Object property'
+                },
+                radar: {
+                    titleItem: 'Compare displaying {{props}}',
+                    titleList: 'Branches {{key}}, diplaying {{value}}, grouped by {{category}}',
+                    defineKey: '«Key»',
+                    defineValue: '«Value»',
+                    defineCategory: '«Category»'
+                },
+                circle: {
+                    id: 'Field for item identifier',
+                    pid: 'Field for parent item identifier',
+                    field: 'Field containing value',
+                    title: 'Circle packing displaying {{field}}',
+                    tooltip: 'Property to display in tooltip'
+                },
+                innerRadius: 'Inner radius',
+                moreOptions: 'Advanced mode'
+            }
+        }
+    }
+};
+
+const frTranslations = {
+    '@pry': {
+        widget: {
+            chart: {
+                title: 'Titre du graphique',
+                tooltip: 'Affichage des info-bulles',
+                params: {
+                    noParams: 'Aucune donnée pour le graphique avec les paramètres sélectionnés',
+                    multipleParams: 'Nombre de données avec les paramètres sélectionnés: '
+                },
+                encoding: {
+                    horizontal: 'Axe horizontal',
+                    vertical: 'Axe vertical',
+                    group: 'Type de calcul',
+                    values: 'Valeurs'
+                },
+                markType: {
+                    null: '',
+                    bar: 'Barres',
+                    line: 'Courbe',
+                    point: 'Points',
+                    area: 'Aire',
+                    arc: 'Circulaire',
+                    radar: 'Radar',
+                    circle_pack: 'Paquets de cercles',
+                    histogram: 'Histogramme',
+                    timehistogram: 'Histogramme de temps',
+                    grouped: 'Histogramme empilé',
+                    histostacked: 'Histogramme groupé',
+                    withPoints: 'Courbe avec marques',
+                    multi: 'Courbes empilées',
+                    scatterColor: 'Nuages de points avec couleurs',
+                    withLinesAndPoints: 'Aire avec lignes et marques',
+                    areastacked: 'Aires empilées',
+                    pie: 'Diagramme circulaire',
+                    donut: 'Diagramme anneau'
+                },
+                scheme: {
+                    accent: '8 couleurs n°1',
+                    set2: '8 couleurs n°2',
+                    dark2: '8 couleurs sombre',
+                    pastel2: '8 couleurs pastel',
+                    set1: '9 couleurs',
+                    pastel1: '9 couleurs pastel',
+                    category10: '10 couleurs',
+                    tableau10: '10 couleurs différentes',
+                    set3: '12 couleurs',
+                    paired: '12 couleurs différentes',
+                    tableau20: '20 couleurs',
+                    category20: '20 couleurs avec 2 nuances',
+                    category20b: '20 couleurs avec 4 nuances n°1',
+                    category20c: '20 couleurs avec 4 nuances n°2',
+                    'KO/W/OK': 'Feu de signalisation'
+                },
+                dataLabel: 'Libellé de la donnée',
+                origin: 'Axe affichant la valeur zéro',
+                series: 'Regrouper en séries',
+                seriesAttr: 'Attribut de regroupement',
+                seriesScheme: 'Jeu de couleur',
+                seriesSchemeAlt: 'https://vega.github.io/vega/docs/schemes/',
+                seriesLegend: 'Afficher la légende',
+                chooseParameters: "Merci de sélectionner les paramètres afin d'afficher le graphique",
+                timeUnit: 'Unité de temps',
+                timeUnitList: {
+                    year: 'Année',
+                    quarter: 'Trimestre',
+                    month: 'Mois',
+                    week: 'Semaine',
+                    day: 'Jour',
+                    hours: 'Heures',
+                    minutes: 'Minutes'
+                },
+                type: 'Type de graphique',
+                template: 'Modèle de graphique',
+                aggregation: {
+                    none: 'Valeur',
+                    count: 'Nombre',
+                    sum: 'Somme',
+                    distinct: "Nombre d'éléments distincts",
+                    average: 'Moyenne',
+                    median: 'Médiane',
+                    q1: 'Quartile inférieur',
+                    q3: 'Quartile supérieur',
+                    min: 'Minimum',
+                    max: 'Maximum'
+                },
+                comparison: {
+                    item: "Comparaison d'objets",
+                    value: 'Liste de valeurs',
+                    key: 'Propriété contenant la branche',
+                    values: 'Propriété contenant la valeur',
+                    category: "Propriété contenant l'objet"
+                },
+                radar: {
+                    titleItem: 'Comparaisons affichant {{props}}',
+                    titleList: 'Branches {{key}}, affichant {{value}}, regroupées par {{category}}',
+                    defineKey: '«Clé»',
+                    defineValue: '«Valeur»',
+                    defineCategory: '«Catégorie»'
+                },
+                circle: {
+                    id: "Champ identifiant l'item",
+                    pid: 'Champ identifiant le parent',
+                    field: 'Champ identifiant la valeur',
+                    title: 'Paquets de cercles présentant {{field}}',
+                    tooltip: 'Champ à afficher dans le tooltip'
+                },
+                innerRadius: 'Taille du rayon interne',
+                moreOptions: 'Mode avancé'
+            }
+        }
+    }
+};
+
+class WidgetChartModule extends BaseWidgetModule {
+    constructor(pryTranslateService) {
+        super();
+        this.pryTranslateService = pryTranslateService;
+        this.pryTranslateService.addLangObject('fr', 'widget-chart', frTranslations);
+        this.pryTranslateService.addLangObject('en', 'widget-chart', enTranslations);
+    }
+    getComponent() {
+        return WidgetChartComponent;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetChartModule, deps: [{ token: i2.PryI18nService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: WidgetChartModule, declarations: [WidgetChartComponent, PryWidgetChartCssComponent], imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryCheckboxModule,
+            PryToggleModule,
+            PryEditInputModule,
+            PryI18nModule,
+            PryRangeModule], exports: [WidgetChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetChartModule, imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            PryCoreModule,
+            PryDashboardModule,
+            PrySelectModule,
+            PryIconModule,
+            PryCheckboxModule,
+            PryToggleModule,
+            PryEditInputModule,
+            PryI18nModule,
+            PryRangeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: WidgetChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [WidgetChartComponent, PryWidgetChartCssComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        OverlayModule,
+                        PryCoreModule,
+                        PryDashboardModule,
+                        PrySelectModule,
+                        PryIconModule,
+                        PryCheckboxModule,
+                        PryToggleModule,
+                        PryEditInputModule,
+                        PryI18nModule,
+                        PryRangeModule
+                    ],
+                    exports: [WidgetChartComponent]
+                }]
+        }], ctorParameters: function () { return [{ type: i2.PryI18nService }]; } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WidgetChartComponent, WidgetChartModule };
+//# sourceMappingURL=provoly-dashboard-widgets-widget-chart.mjs.map