@wavemaker-ai/app-ng-runtime 12.0.0-rc.335 → 12.0.1-rc.338

package/components/basic/video/fesm2022/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/basic/video/src/video.props.ts","../../../../../projects/components/widgets/basic/video/src/video.component.ts","../../../../../projects/components/widgets/basic/video/src/video.component.html","../../../../../projects/components/widgets/basic/video/src/index.ts"],"sourcesContent":["import {PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, register} from '@wm/components/base';\n\nexport const registerProps = () => {\n    register(\n        'wm-video',\n        new Map(\n            [\n                ['autoplay', PROP_BOOLEAN],\n                ['class', PROP_STRING],\n                ['controls', PROP_BOOLEAN],\n                ['hint', PROP_STRING],\n                ['arialabel', PROP_STRING],\n                ['loop', PROP_BOOLEAN],\n                ['mp4format', PROP_STRING],\n                ['muted', PROP_BOOLEAN],\n                ['name', PROP_STRING],\n                ['oggformat', PROP_STRING],\n                ['show', {value: true, ...PROP_BOOLEAN}],\n                ['subtitlelang', {value: 'en', ...PROP_STRING}],\n                ['subtitlesource', PROP_STRING],\n                ['tabindex', {value: 0, ...PROP_NUMBER}],\n                ['videoposter', {value: 'resources/images/imagelists/default-image.png', ...PROP_STRING}],\n                ['videopreload', {value: 'none', ...PROP_STRING}],\n                ['videosupportmessage', {value: 'Your browser does not support the video tag.', ...PROP_STRING}],\n                ['webmformat', PROP_STRING]\n            ]\n        )\n    );\n};\n","import {Component, Inject, Injector, Optional, SecurityContext} from '@angular/core';\n\nimport {appendNode, createElement, removeNode, transformFileURI} from '@wm/core';\nimport {DISPLAY_TYPE, ImagePipe, provideAsWidgetRef, StylableComponent, styler, TrustAsPipe} from '@wm/components/base';\n\nimport {registerProps} from './video.props';\n\nconst DEFAULT_CLS = 'app-video';\nconst WIDGET_CONFIG = {\n    widgetType: 'wm-video',\n    hostClass: DEFAULT_CLS,\n    displayType: DISPLAY_TYPE.INLINE_BLOCK\n};\n\n@Component({\n    standalone: true,\n    imports: [TrustAsPipe, ImagePipe],\n    selector: '[wmVideo]',\n    templateUrl: './video.component.html',\n    providers: [\n        provideAsWidgetRef(VideoComponent)\n    ]\n})\nexport class VideoComponent extends StylableComponent {\n    static initializeProps = registerProps();\n    /**\n     * subtitle language property eg: en\n     */\n    public subtitlelang = 'en';\n    public videopreload: any;\n    public mp4format: string;\n    public muted: boolean;\n    public videoposter: any;\n    public controls: boolean;\n    public loop: boolean;\n    public autoplay: boolean;\n    public webmformat: string;\n    public oggformat: string;\n    public videosupportmessage: any;\n    public arialabel: string;\n    public tabindex: string;\n\n    constructor(inj: Injector, private trustAsPipe: TrustAsPipe, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n        styler(this.nativeElement, this);\n    }\n\n    // DO NOT use ngIf binding for the track. As of v6.0.Beta7 there is an error creating a void track node\n    onPropertyChange(key: string, nv: any, ov?: any) {\n        if (key === 'subtitlesource') {\n            let track: HTMLElement = this.nativeElement.querySelector('track');\n            if (track) {\n                removeNode(track, true);\n            }\n\n            track = createElement('track', {\n                kind: 'subtitles',\n                label: this.subtitlelang,\n                srclang: this.subtitlelang,\n                src: this.trustAsPipe.transform(nv, SecurityContext.RESOURCE_URL),\n                default: ''\n            }, true);\n\n            appendNode(track, this.nativeElement.querySelector('video'));\n        } else if (key === 'mp4format') {\n            this.mp4format = transformFileURI(nv);\n        } else if (key === 'webmformat') {\n            this.webmformat = transformFileURI(nv);\n        } else if (key === 'oggformat') {\n            this.oggformat = transformFileURI(nv);\n        } else if (key === 'tabindex') {\n            return;\n        }\n\n        super.onPropertyChange(key, nv, ov);\n    }\n}\n","<video [attr.aria-label]=\"arialabel || 'video'\" [preload]=\"videopreload\"\n  [src]=\"mp4format | trustAs: 'resource'\"\n  [muted]=\"muted\"\n  [poster]=\"videoposter | image\"\n  [controls]=\"controls\"\n  [loop]=\"loop\"\n  [autoplay]=\"autoplay\" [tabindex]=\"tabindex\">\n  @if (mp4format) {\n    <source type=\"video/mp4\" [src]=\"mp4format | trustAs: 'resource'\">\n  }\n  @if (webmformat) {\n    <source type=\"video/webm\" [src]=\"webmformat | trustAs: 'resource'\">\n  }\n  @if (oggformat) {\n    <source type=\"video/ogg\" [src]=\"oggformat | trustAs: 'resource'\">\n  }\n  {{videosupportmessage}}\n</video>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/basic/video/src/video.props.ts","../../../../../projects/components/widgets/basic/video/src/video.component.ts","../../../../../projects/components/widgets/basic/video/src/video.component.html","../../../../../projects/components/widgets/basic/video/src/index.ts"],"sourcesContent":["import {PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, register} from '@wm/components/base';\n\nexport const registerProps = () => {\n    register(\n        'wm-video',\n        new Map(\n            [\n                ['autoplay', PROP_BOOLEAN],\n                ['class', PROP_STRING],\n                ['controls', PROP_BOOLEAN],\n                ['hint', PROP_STRING],\n                ['arialabel', PROP_STRING],\n                ['loop', PROP_BOOLEAN],\n                ['mp4format', PROP_STRING],\n                ['muted', PROP_BOOLEAN],\n                ['name', PROP_STRING],\n                ['oggformat', PROP_STRING],\n                ['show', {value: true, ...PROP_BOOLEAN}],\n                ['subtitlelang', {value: 'en', ...PROP_STRING}],\n                ['subtitlesource', PROP_STRING],\n                ['tabindex', {value: 0, ...PROP_NUMBER}],\n                ['videoposter', {value: 'resources/images/imagelists/default-image.png', ...PROP_STRING}],\n                ['videopreload', {value: 'none', ...PROP_STRING}],\n                ['videosupportmessage', {value: 'Your browser does not support the video tag.', ...PROP_STRING}],\n                ['webmformat', PROP_STRING]\n            ]\n        )\n    );\n};\n","import {Component, Inject, Injector, Optional, SecurityContext} from '@angular/core';\n\nimport {appendNode, createElement, removeNode, transformFileURI} from '@wm/core';\nimport {DISPLAY_TYPE, ImagePipe, provideAsWidgetRef, StylableComponent, styler, TrustAsPipe} from '@wm/components/base';\n\nimport {registerProps} from './video.props';\n\nconst DEFAULT_CLS = 'app-video';\nconst WIDGET_CONFIG = {\n    widgetType: 'wm-video',\n    hostClass: DEFAULT_CLS,\n    displayType: DISPLAY_TYPE.INLINE_BLOCK\n};\n\n@Component({\n    standalone: true,\n    imports: [TrustAsPipe, ImagePipe],\n    selector: '[wmVideo]',\n    templateUrl: './video.component.html',\n    providers: [\n        provideAsWidgetRef(VideoComponent)\n    ]\n})\nexport class VideoComponent extends StylableComponent {\n    static readonly initializeProps = registerProps();\n    /**\n     * subtitle language property eg: en\n     */\n    public subtitlelang = 'en';\n    public videopreload: any;\n    public mp4format: string;\n    public muted: boolean;\n    public videoposter: any;\n    public controls: boolean;\n    public loop: boolean;\n    public autoplay: boolean;\n    public webmformat: string;\n    public oggformat: string;\n    public videosupportmessage: any;\n    public arialabel: string;\n    public tabindex: string;\n\n    constructor(inj: Injector, private readonly trustAsPipe: TrustAsPipe, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n        styler(this.nativeElement, this);\n    }\n\n    // DO NOT use ngIf binding for the track. As of v6.0.Beta7 there is an error creating a void track node\n    onPropertyChange(key: string, nv: any, ov?: any) {\n        if (key === 'subtitlesource') {\n            let track: HTMLElement = this.nativeElement.querySelector('track');\n            if (track) {\n                removeNode(track, true);\n            }\n\n            track = createElement('track', {\n                kind: 'subtitles',\n                label: this.subtitlelang,\n                srclang: this.subtitlelang,\n                src: this.trustAsPipe.transform(nv, SecurityContext.RESOURCE_URL),\n                default: ''\n            }, true);\n\n            appendNode(track, this.nativeElement.querySelector('video'));\n        } else if (key === 'mp4format') {\n            this.mp4format = transformFileURI(nv);\n        } else if (key === 'webmformat') {\n            this.webmformat = transformFileURI(nv);\n        } else if (key === 'oggformat') {\n            this.oggformat = transformFileURI(nv);\n        } else if (key === 'tabindex') {\n            return;\n        }\n\n        super.onPropertyChange(key, nv, ov);\n    }\n}\n","<video [attr.aria-label]=\"arialabel || 'video'\" [preload]=\"videopreload\"\n  [src]=\"mp4format | trustAs: 'resource'\"\n  [muted]=\"muted\"\n  [poster]=\"videoposter | image\"\n  [controls]=\"controls\"\n  [loop]=\"loop\"\n  [autoplay]=\"autoplay\" [tabindex]=\"tabindex\">\n  @if (mp4format) {\n    <source type=\"video/mp4\" [src]=\"mp4format | trustAs: 'resource'\">\n  }\n  @if (webmformat) {\n    <source type=\"video/webm\" [src]=\"webmformat | trustAs: 'resource'\">\n  }\n  @if (oggformat) {\n    <source type=\"video/ogg\" [src]=\"oggformat | trustAs: 'resource'\">\n  }\n  {{videosupportmessage}}\n</video>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/components/basic/video/types/index.d.ts

@@ -3,8 +3,8 @@ import { Injector } from '@angular/core';
 import { StylableComponent, TrustAsPipe } from '@wm/components/base';
 
 declare class VideoComponent extends StylableComponent {
-    private trustAsPipe;
-    static initializeProps: void;
+    private readonly trustAsPipe;
+    static readonly initializeProps: void;
     /**
      * subtitle language property eg: en
      */

package/components/chart/bundles/index.umd.js

@@ -517,8 +517,8 @@
             }
             formattedData = numberFormatter(d);
             // Getting the respective divider[1000,1000000,1000000000] based on the number format choosen
-            divider = (tickformats[numberFormat] && tickformats[numberFormat].divider) || 0;
-            prefix = tickformats[numberFormat] && tickformats[numberFormat].prefix;
+            divider = (tickformats[numberFormat]?.divider) || 0;
+            prefix = tickformats[numberFormat]?.prefix;
             if (prefix && divider !== 0) {
                 formattedData = d3.format('.2f')(d / divider) + prefix;
             }
@@ -670,7 +670,7 @@
             }
         }
         // Setting the legend type choosen by user or default it will be furious
-        chart.legend.vers((propertyValueMap.legendtype && propertyValueMap.legendtype.toLowerCase()) || 'furious');
+        chart.legend.vers((propertyValueMap.legendtype?.toLowerCase()) || 'furious');
         if (!lodashEs.includes(chartTypes, widgetContext.type)) {
             chart = nv.models.multiBarChart()
                 .x(d => d.x)
@@ -725,11 +725,9 @@
             else if (propertyValueMap.xnumberformat) {
                 chart.xAxis.tickFormat(d => getNumberFormatedData(propertyValueMap.xnumberformat, d));
             }
-            else {
-                if (isLineTypeChart(widgetContext.type)) {
-                    // get the actual value
-                    chart.xAxis.tickFormat(d => widgetContext.xDataKeyArr[d]);
-                }
+            else if (isLineTypeChart(widgetContext.type)) {
+                // get the actual value
+                chart.xAxis.tickFormat(d => widgetContext.xDataKeyArr[d]);
             }
             chart.yAxis
                 .axisLabel(yaxislabel)
@@ -992,7 +990,7 @@
                 this.xDataKeyArr = getDateList();
                 return this.sampleData;
             }
-            if (!this.chartData || !this.chartData.length) {
+            if (!this.chartData?.length) {
                 return [];
             }
             let datum = [], yAxisKey, shapes = [], values = [];
@@ -1162,7 +1160,6 @@
                     }
                     obj[this.xaxisdatakey] = lodashEs.get(responseContent, xAxisAliasKey) || lodashEs.get(responseContent, this.xaxisdatakey);
                     yAxisKeys.forEach((yAxisKey, index) => {
-                        obj[yAxisKey] = responseContent[yAxisAliasKeys[index]];
                         obj[yAxisKey] = lodashEs.get(responseContent, yAxisAliasKeys[index]) || lodashEs.get(responseContent, yAxisKey);
                     });
                     chartData.push(obj);
@@ -1319,7 +1316,7 @@
                 pieLabels = chartSvg.select('.nv-pieLabels').selectAll('.nv-label');
                 pieGroups = chartSvg.select('.nv-pie').selectAll('.nv-slice');
                 angleArray = [];
-                if (pieGroups && pieGroups.length) {
+                if (pieGroups?.length) {
                     pieGroups.each(function () {
                         d3.select(this).attr('transform', function (d) {
                             angleArray.push(angle(d));
@@ -1345,7 +1342,7 @@
              * allow window-resize functionality, for only-run mode as
              * updating chart is being handled by watchers of height & width in studio-mode
              * */
-            i1.triggerFn(this._resizeFn && this._resizeFn.clear);
+            i1.triggerFn(this._resizeFn?.clear);
             this._resizeFn = nv.utils.windowResize(() => {
                 if (element[0].getBoundingClientRect().height) {
                     chart.update();
@@ -1380,7 +1377,7 @@
             if (lodashEs.isArray(this._processedData)) {
                 // WMS-19499:  To remove chart X-axis old ticks when chart data loaded dynamically.
                 const oldgTicks = $('#wmChart' + this.$id + ' svg').find('g.nv-x').find('g.tick');
-                if (oldgTicks && oldgTicks.length) {
+                if (oldgTicks?.length) {
                     oldgTicks.remove();
                 }
                 beforeRenderVal = this.invokeEventCallback('beforerender', { 'chartInstance': chart });
@@ -1495,7 +1492,7 @@
                     break;
                 case 'groupby':
                     // Filtering only non primary key columns
-                    if (this.isLiveVariable && this.nonPrimaryColumns && this.nonPrimaryColumns.length) {
+                    if (this.isLiveVariable && this.nonPrimaryColumns?.length) {
                         newOptions = this.nonPrimaryColumns;
                     }
                     break;
@@ -1512,7 +1509,7 @@
                     }
                     break;
                 case 'bubblesize':
-                    if (this.numericColumns && this.numericColumns.length) {
+                    if (this.numericColumns?.length) {
                         newOptions = this.numericColumns;
                     }
                     break;
@@ -1559,7 +1556,7 @@
             if (!lodashEs.isArray(this.chartData) && lodashEs.isObject(this.chartData)) {
                 this.chartData = [this.chartData];
             }
-            if (newVal && newVal.filterFields) {
+            if (newVal?.filterFields) {
                 this.filterFields = newVal.filterFields;
             }
             // plotchart for only valid data and only after bound variable returns data
@@ -1579,13 +1576,13 @@
                 .attr('class', 'nv-pie-title')
                 .text(labelValue)
                 .each(function (d) {
-                var d3text = d3.select(this), circ = d3.select(this.parentElement), totalWidth = Number(circ.node().getBoundingClientRect().width), 
+                const d3text = d3.select(this), circ = d3.select(this.parentElement), totalWidth = Number(circ.node().getBoundingClientRect().width), 
                 // minus the ring width from total width
                 availWidth = totalWidth - 30, textWidth = this.getComputedTextLength();
                 d3text.attr("data-scale", availWidth / textWidth);
             }).style("font-size", function () {
                 // 16 is the default font size to multiply with the scaled value and 24 is the maximum font size that can be applied
-                var fontSize = 16 * d3.select(this).attr("data-scale");
+                const fontSize = 16 * d3.select(this).attr("data-scale");
                 return fontSize > 24 ? 24 : fontSize + "px";
             });
         }
@@ -1632,7 +1629,7 @@
         }
         handleLoading(data) {
             const dataSource = this.datasource;
-            if (dataSource && dataSource.execute(i1.DataSource.Operation.IS_API_AWARE) && i1.isDataSourceEqual(data.variable, dataSource)) {
+            if (dataSource?.execute(i1.DataSource.Operation.IS_API_AWARE) && i1.isDataSourceEqual(data.variable, dataSource)) {
                 this.variableInflight = data.active;
                 this.isLoadInProgress = data.active;
             }
@@ -1723,12 +1720,12 @@
             this.nonPrimaryColumns = [];
             super.ngOnDestroy();
         }
-        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: ChartComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
-        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ChartComponent, isStandalone: true, selector: "div[wmChart]", host: { properties: { "class.panel": "this.title" } }, providers: [
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: ChartComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: ChartComponent, isStandalone: true, selector: "div[wmChart]", host: { properties: { "class.panel": "this.title" } }, providers: [
                 base.provideAsWidgetRef(ChartComponent)
             ], usesInheritance: true, ngImport: i0__namespace, template: "@if (title) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" iconClasses=\"panel-icon\" alt=\"Chart icon\"></wm-app-icon>\n      </div>\n      <div class=\"heading\" [innerHTML]=\"title\"></div>\n      @if (subheading) {\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-chart-inner\" [ngClass]=\"{'loading':isLoadInProgress, 'panel-body': title}\">\n  <svg></svg>\n  @if (showContentLoadError && showNoDataMsg) {\n    <div class=\"wm-content-info readonly-wrapper\">\n      <p class=\"wm-message\" [title]=\"hintMsg\" [ngClass]=\"{'error': invalidConfig}\" [innerText]=\"errMsg\"></p>\n    </div>\n  }\n  <div wmSpinner show.bind=\"isLoadInProgress\" caption.bind=\"loadingdatamsg\"></div>\n</div>\n", styles: [".nvtooltip h3,.nvtooltip p{margin:0;text-align:center}.nv-distx,.nv-disty,.nv-noninteractive,.nvd3 .nv-axis,.nvd3 .nv-interactiveGuideLine,.nvd3.nv-pie .nv-label,.nvd3.nv-sparklineplus g.nv-hoverValue,.nvtooltip{pointer-events:none}.nvd3 .nv-axis{opacity:1}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero,.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .nv-axisMaxMin text,.nvtooltip table td.key.total{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nvd3 .nv-axis.nv-disabled,.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check{opacity:0}.nvd3 .nv-bars rect{fill-opacity:.75;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-bars rect.hover,.nvd3 .nv-boxplot circle:hover,.nvd3 .nv-boxplot rect:hover,.nvd3 .nv-candlestickBar .nv-ticks rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover,.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-scatter .nv-point.hover,.nvd3.nv-bullet .nv-measure:hover,.nvd3.nv-linePlusBar .nv-bar rect:hover,.nvd3.nv-pie .hover path{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:#0000}.nvd3 .nv-bars .hover text{fill:#000}.nvd3 .nv-discretebar .nv-groups rect,.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:#000;stroke:#0000}.nvd3 .nv-boxplot circle{fill-opacity:.5}.nvd3 line.nv-boxplot-median{stroke:#000}.nv-boxplot-tick:hover{stroke-width:2.5px}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-markerLine{stroke:#000;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-candlestickBar .nv-ticks .nv-tick,.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover,.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect,.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect,.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.with-transitions .nv-candlestickBar .nv-ticks .nv-tick,.with-transitions .nvd3 .nv-groups .nv-point{-webkit-transition:stroke-width .25s linear,stroke-opacity .25s linear;transition:stroke-width .25s linear,stroke-opacity .25s linear}.nvd3.nv-candlestickBar .nv-ticks line{stroke:#333}.nv-force-node{stroke:#fff;stroke-width:1.5px}.nv-force-link{stroke:#999;stroke-opacity:.6}.nv-force-node text{stroke-width:0}.nvd3 .nv-check-box .nv-box{fill-opacity:0;stroke-width:2}.nvd3 .nv-check-box .nv-check{fill-opacity:0;stroke-width:4}.nvd3 .nv-hoverArea,.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check,.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3 .nv-groups path.nv-line,.nvd3.nv-sparkline path{fill:none}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.nvd3 .nv-groups .nv-point.hover,.nvd3.nv-scatter .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}svg.nvd3-svg{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;height:100%}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px #0003;border-radius:5px}.nvd3 text{font:12px Arial,sans-serif}.nvtooltip h3,.nvtooltip table td.key{font-weight:400}.nvd3 .title{font:700 14px Arial,sans-serif}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .selection{fill-opacity:.125;shape-rendering:crispEdges}.nv-brush .handle path{fill:#eee;stroke:#666}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.nvd3 .nv-brush .selection{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}@media print{.nvd3 text{stroke-width:0;fill-opacity:1}}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3 .background path{fill:none;stroke:#eee;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .nv-parallelCoordinates-brush .selection{fill:#fff;fill-opacity:.6;stroke:gray;shape-rendering:crispEdges}.nvd3 .nv-parallelCoordinates .hover{fill-opacity:1;stroke-width:3px}.nvd3 .missingValuesline line{fill:none;stroke:#000;stroke-width:1;stroke-opacity:1;stroke-dasharray:5,5}.nvd3.nv-pie path{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;stroke:#fff;stroke-width:1px;stroke-opacity:1;fill-opacity:.7}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:#13c4f996}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-opacity .25s linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvtooltip{position:absolute;background-color:#fff;color:#000;padding:1px;border:1px solid rgba(0,0,0,.5);z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-ms-user-select:none;user-select:none;background:#fffc;border-radius:4px}.nvtooltip.with-transitions,.with-transitions .nvtooltip{-webkit-transition:opacity 50ms linear .2s;transition:opacity 50ms linear .2s}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{padding:4px 14px;line-height:18px;background-color:#f7f7f7bf;color:#000;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.nvtooltip p{padding:5px 14px}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table td.percent{color:#a9a9a9}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{vertical-align:middle;width:12px;height:12px;border:1px solid #999}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{pointer-events:none;display:none}.nvd3 line.nv-guideline{stroke:#ccc}\n"], dependencies: [{ kind: "ngmodule", type: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: spinner.SpinnerComponent, selector: "[wmSpinner]", exportAs: ["wmSpinner"] }, { kind: "component", type: base.WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }], encapsulation: i0__namespace.ViewEncapsulation.None }); }
     }
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0__namespace, type: ChartComponent, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0__namespace, type: ChartComponent, decorators: [{
                 type: i0.Component,
                 args: [{ standalone: true, imports: [i2.CommonModule, spinner.SpinnerComponent, base.WmAppIconComponent], selector: 'div[wmChart]', providers: [
                             base.provideAsWidgetRef(ChartComponent)

package/components/chart/fesm2022/index.mjs

@@ -500,8 +500,8 @@ const getNumberFormatedData = (numberFormat, d) => {
         }
         formattedData = numberFormatter(d);
         // Getting the respective divider[1000,1000000,1000000000] based on the number format choosen
-        divider = (tickformats[numberFormat] && tickformats[numberFormat].divider) || 0;
-        prefix = tickformats[numberFormat] && tickformats[numberFormat].prefix;
+        divider = (tickformats[numberFormat]?.divider) || 0;
+        prefix = tickformats[numberFormat]?.prefix;
         if (prefix && divider !== 0) {
             formattedData = d3.format('.2f')(d / divider) + prefix;
         }
@@ -530,7 +530,7 @@ const modifyLegendPosition = (widgetContext, position, id) => {
         return;
     }
     if (position === 'bottom') {
-        const legendWrapHeight = legendWrap['_groups'][0][0].getBoundingClientRect().height, wrap = d3.select(chart_Id + ' .nv-wrap'), wrapTransform = (wrap && wrap.attr('transform')) ? wrap.attr('transform').replace(/, /g, ',') : '', coordinates = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(wrapTransform), getChartHeight = () => {
+        const legendWrapHeight = legendWrap['_groups'][0][0].getBoundingClientRect().height, wrap = d3.select(chart_Id + ' .nv-wrap'), wrapTransform = (wrap?.attr('transform')) ? wrap.attr('transform').replace(/, /g, ',') : '', coordinates = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(wrapTransform), getChartHeight = () => {
             let chartHeight = $(chart_Id + ' svg>.nvd3.nv-wrap')[0].getBoundingClientRect().height;
             if (chartHeight === 0) { // fix for IE
                 chartHeight = ($(chart_Id + ' svg')[0].getBoundingClientRect().height - (legendWrapHeight + 15));
@@ -683,7 +683,7 @@ const initChart = (widgetContext, xDomainValues, yDomainValues, propertyValueMap
         }
     }
     // Setting the legend type choosen by user or default it will be furious
-    chart.legend.vers((propertyValueMap.legendtype && propertyValueMap.legendtype.toLowerCase()) || 'furious');
+    chart.legend.vers((propertyValueMap.legendtype?.toLowerCase()) || 'furious');
     if (!includes(chartTypes, widgetContext.type)) {
         chart = nv.models.multiBarChart()
             .x(d => d.x)
@@ -738,11 +738,9 @@ const initChart = (widgetContext, xDomainValues, yDomainValues, propertyValueMap
         else if (propertyValueMap.xnumberformat) {
             chart.xAxis.tickFormat(d => getNumberFormatedData(propertyValueMap.xnumberformat, d));
         }
-        else {
-            if (isLineTypeChart(widgetContext.type)) {
-                // get the actual value
-                chart.xAxis.tickFormat(d => widgetContext.xDataKeyArr[d]);
-            }
+        else if (isLineTypeChart(widgetContext.type)) {
+            // get the actual value
+            chart.xAxis.tickFormat(d => widgetContext.xDataKeyArr[d]);
         }
         chart.yAxis
             .axisLabel(yaxislabel)
@@ -1008,7 +1006,7 @@ class ChartComponent extends StylableComponent {
             this.xDataKeyArr = getDateList();
             return this.sampleData;
         }
-        if (!this.chartData || !this.chartData.length) {
+        if (!this.chartData?.length) {
             return [];
         }
         let datum = [], yAxisKey, shapes = [], values = [];
@@ -1178,7 +1176,6 @@ class ChartComponent extends StylableComponent {
                 }
                 obj[this.xaxisdatakey] = get(responseContent, xAxisAliasKey) || get(responseContent, this.xaxisdatakey);
                 yAxisKeys.forEach((yAxisKey, index) => {
-                    obj[yAxisKey] = responseContent[yAxisAliasKeys[index]];
                     obj[yAxisKey] = get(responseContent, yAxisAliasKeys[index]) || get(responseContent, yAxisKey);
                 });
                 chartData.push(obj);
@@ -1335,7 +1332,7 @@ class ChartComponent extends StylableComponent {
             pieLabels = chartSvg.select('.nv-pieLabels').selectAll('.nv-label');
             pieGroups = chartSvg.select('.nv-pie').selectAll('.nv-slice');
             angleArray = [];
-            if (pieGroups && pieGroups.length) {
+            if (pieGroups?.length) {
                 pieGroups.each(function () {
                     d3.select(this).attr('transform', function (d) {
                         angleArray.push(angle(d));
@@ -1361,7 +1358,7 @@ class ChartComponent extends StylableComponent {
          * allow window-resize functionality, for only-run mode as
          * updating chart is being handled by watchers of height & width in studio-mode
          * */
-        triggerFn(this._resizeFn && this._resizeFn.clear);
+        triggerFn(this._resizeFn?.clear);
         this._resizeFn = nv.utils.windowResize(() => {
             if (element[0].getBoundingClientRect().height) {
                 chart.update();
@@ -1404,7 +1401,7 @@ class ChartComponent extends StylableComponent {
         if (isArray(this._processedData)) {
             // WMS-19499:  To remove chart X-axis old ticks when chart data loaded dynamically.
             const oldgTicks = $('#wmChart' + this.$id + ' svg').find('g.nv-x').find('g.tick');
-            if (oldgTicks && oldgTicks.length) {
+            if (oldgTicks?.length) {
                 oldgTicks.remove();
             }
             beforeRenderVal = this.invokeEventCallback('beforerender', { 'chartInstance': chart });
@@ -1519,7 +1516,7 @@ class ChartComponent extends StylableComponent {
                 break;
             case 'groupby':
                 // Filtering only non primary key columns
-                if (this.isLiveVariable && this.nonPrimaryColumns && this.nonPrimaryColumns.length) {
+                if (this.isLiveVariable && this.nonPrimaryColumns?.length) {
                     newOptions = this.nonPrimaryColumns;
                 }
                 break;
@@ -1536,7 +1533,7 @@ class ChartComponent extends StylableComponent {
                 }
                 break;
             case 'bubblesize':
-                if (this.numericColumns && this.numericColumns.length) {
+                if (this.numericColumns?.length) {
                     newOptions = this.numericColumns;
                 }
                 break;
@@ -1583,7 +1580,7 @@ class ChartComponent extends StylableComponent {
         if (!isArray(this.chartData) && isObject(this.chartData)) {
             this.chartData = [this.chartData];
         }
-        if (newVal && newVal.filterFields) {
+        if (newVal?.filterFields) {
             this.filterFields = newVal.filterFields;
         }
         // plotchart for only valid data and only after bound variable returns data
@@ -1603,13 +1600,13 @@ class ChartComponent extends StylableComponent {
             .attr('class', 'nv-pie-title')
             .text(labelValue)
             .each(function (d) {
-            var d3text = d3.select(this), circ = d3.select(this.parentElement), totalWidth = Number(circ.node().getBoundingClientRect().width), 
+            const d3text = d3.select(this), circ = d3.select(this.parentElement), totalWidth = Number(circ.node().getBoundingClientRect().width), 
             // minus the ring width from total width
             availWidth = totalWidth - 30, textWidth = this.getComputedTextLength();
             d3text.attr("data-scale", availWidth / textWidth);
         }).style("font-size", function () {
             // 16 is the default font size to multiply with the scaled value and 24 is the maximum font size that can be applied
-            var fontSize = 16 * d3.select(this).attr("data-scale");
+            const fontSize = 16 * d3.select(this).attr("data-scale");
             return fontSize > 24 ? 24 : fontSize + "px";
         });
     }
@@ -1656,7 +1653,7 @@ class ChartComponent extends StylableComponent {
     }
     handleLoading(data) {
         const dataSource = this.datasource;
-        if (dataSource && dataSource.execute(DataSource.Operation.IS_API_AWARE) && isDataSourceEqual(data.variable, dataSource)) {
+        if (dataSource?.execute(DataSource.Operation.IS_API_AWARE) && isDataSourceEqual(data.variable, dataSource)) {
             this.variableInflight = data.active;
             this.isLoadInProgress = data.active;
         }
@@ -1747,12 +1744,12 @@ class ChartComponent extends StylableComponent {
         this.nonPrimaryColumns = [];
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartComponent, deps: [{ token: i0.Injector }, { token: i1.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: ChartComponent, isStandalone: true, selector: "div[wmChart]", host: { properties: { "class.panel": "this.title" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: ChartComponent, deps: [{ token: i0.Injector }, { token: i1.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: ChartComponent, isStandalone: true, selector: "div[wmChart]", host: { properties: { "class.panel": "this.title" } }, providers: [
             provideAsWidgetRef(ChartComponent)
         ], usesInheritance: true, ngImport: i0, template: "@if (title) {\n  <div class=\"panel-heading\">\n    <h3 class=\"panel-title\">\n      <div class=\"pull-left\">\n        <wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" iconClasses=\"panel-icon\" alt=\"Chart icon\"></wm-app-icon>\n      </div>\n      <div class=\"heading\" [innerHTML]=\"title\"></div>\n      @if (subheading) {\n        <div class=\"description\" [innerHTML]=\"subheading\"></div>\n      }\n    </h3>\n  </div>\n}\n<div class=\"app-chart-inner\" [ngClass]=\"{'loading':isLoadInProgress, 'panel-body': title}\">\n  <svg></svg>\n  @if (showContentLoadError && showNoDataMsg) {\n    <div class=\"wm-content-info readonly-wrapper\">\n      <p class=\"wm-message\" [title]=\"hintMsg\" [ngClass]=\"{'error': invalidConfig}\" [innerText]=\"errMsg\"></p>\n    </div>\n  }\n  <div wmSpinner show.bind=\"isLoadInProgress\" caption.bind=\"loadingdatamsg\"></div>\n</div>\n", styles: [".nvtooltip h3,.nvtooltip p{margin:0;text-align:center}.nv-distx,.nv-disty,.nv-noninteractive,.nvd3 .nv-axis,.nvd3 .nv-interactiveGuideLine,.nvd3.nv-pie .nv-label,.nvd3.nv-sparklineplus g.nv-hoverValue,.nvtooltip{pointer-events:none}.nvd3 .nv-axis{opacity:1}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero,.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .nv-axisMaxMin text,.nvtooltip table td.key.total{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nvd3 .nv-axis.nv-disabled,.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check{opacity:0}.nvd3 .nv-bars rect{fill-opacity:.75;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-bars rect.hover,.nvd3 .nv-boxplot circle:hover,.nvd3 .nv-boxplot rect:hover,.nvd3 .nv-candlestickBar .nv-ticks rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover,.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-scatter .nv-point.hover,.nvd3.nv-bullet .nv-measure:hover,.nvd3.nv-linePlusBar .nv-bar rect:hover,.nvd3.nv-pie .hover path{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:#0000}.nvd3 .nv-bars .hover text{fill:#000}.nvd3 .nv-discretebar .nv-groups rect,.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear;transition:fill-opacity .25s linear}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:#000;stroke:#0000}.nvd3 .nv-boxplot circle{fill-opacity:.5}.nvd3 line.nv-boxplot-median{stroke:#000}.nv-boxplot-tick:hover{stroke-width:2.5px}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-markerLine{stroke:#000;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-candlestickBar .nv-ticks .nv-tick,.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover,.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect,.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect,.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.with-transitions .nv-candlestickBar .nv-ticks .nv-tick,.with-transitions .nvd3 .nv-groups .nv-point{-webkit-transition:stroke-width .25s linear,stroke-opacity .25s linear;transition:stroke-width .25s linear,stroke-opacity .25s linear}.nvd3.nv-candlestickBar .nv-ticks line{stroke:#333}.nv-force-node{stroke:#fff;stroke-width:1.5px}.nv-force-link{stroke:#999;stroke-opacity:.6}.nv-force-node text{stroke-width:0}.nvd3 .nv-check-box .nv-box{fill-opacity:0;stroke-width:2}.nvd3 .nv-check-box .nv-check{fill-opacity:0;stroke-width:4}.nvd3 .nv-hoverArea,.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check,.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3 .nv-groups path.nv-line,.nvd3.nv-sparkline path{fill:none}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.nvd3 .nv-groups .nv-point.hover,.nvd3.nv-scatter .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}svg.nvd3-svg{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;height:100%}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px #0003;border-radius:5px}.nvd3 text{font:12px Arial,sans-serif}.nvtooltip h3,.nvtooltip table td.key{font-weight:400}.nvd3 .title{font:700 14px Arial,sans-serif}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .selection{fill-opacity:.125;shape-rendering:crispEdges}.nv-brush .handle path{fill:#eee;stroke:#666}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.nvd3 .nv-brush .selection{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}@media print{.nvd3 text{stroke-width:0;fill-opacity:1}}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3 .background path{fill:none;stroke:#eee;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .nv-parallelCoordinates-brush .selection{fill:#fff;fill-opacity:.6;stroke:gray;shape-rendering:crispEdges}.nvd3 .nv-parallelCoordinates .hover{fill-opacity:1;stroke-width:3px}.nvd3 .missingValuesline line{fill:none;stroke:#000;stroke-width:1;stroke-opacity:1;stroke-dasharray:5,5}.nvd3.nv-pie path{stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-width .25s linear,stroke-opacity .25s linear;stroke:#fff;stroke-width:1px;stroke-opacity:1;fill-opacity:.7}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:#13c4f996}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;-webkit-transition:fill-opacity .25s linear,stroke-opacity .25s linear;transition:fill-opacity .25s linear,stroke-opacity .25s linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvtooltip{position:absolute;background-color:#fff;color:#000;padding:1px;border:1px solid rgba(0,0,0,.5);z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-ms-user-select:none;user-select:none;background:#fffc;border-radius:4px}.nvtooltip.with-transitions,.with-transitions .nvtooltip{-webkit-transition:opacity 50ms linear .2s;transition:opacity 50ms linear .2s}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{padding:4px 14px;line-height:18px;background-color:#f7f7f7bf;color:#000;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.nvtooltip p{padding:5px 14px}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table td.percent{color:#a9a9a9}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{vertical-align:middle;width:12px;height:12px;border:1px solid #999}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{pointer-events:none;display:none}.nvd3 line.nv-guideline{stroke:#ccc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "[wmSpinner]", exportAs: ["wmSpinner"] }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["icon", "iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule, SpinnerComponent, WmAppIconComponent], selector: 'div[wmChart]', providers: [
                         provideAsWidgetRef(ChartComponent)