@wavemaker/app-ng-runtime 11.8.0-next.24904 → 11.8.0-next.27301

app-ng-runtime/components/chart/fesm2022/index.mjs

@@ -7,6 +7,7 @@ import * as i2 from '@wm/components/basic';
 import { BasicModule } from '@wm/components/basic';
 import * as i1 from '@wm/core';
 import { isEmptyObject, prettifyLabels, isNumberType, triggerFn, DataSource, getClonedObject, isDataSourceEqual, removeAttr } from '@wm/core';
+import { invert, includes, split, isFinite, isUndefined, forEach, isString, isArray, get, minBy, maxBy, map, first, orderBy, groupBy, max, fill, forEachRight, concat, replace, uniq, intersection, isEmpty, keys, isObject, debounce } from 'lodash-es';
 
 const registerProps = () => {
     register('wm-chart', new Map([
@@ -150,7 +151,7 @@ const dateList = ['01/01/2001', '01/01/2002', '01/01/2003'], themes = {
     'small': 0.3,
     'medium': 0.6,
     'large': 0.7
-}, barSpacingMapInvert = _.invert(barSpacingMap), donutRatioMapInvert = _.invert(donutRatioMap), tickformats = {
+}, barSpacingMapInvert = invert(barSpacingMap), donutRatioMapInvert = invert(donutRatioMap), tickformats = {
     'Thousand': {
         'prefix': 'K',
         'divider': 1000
@@ -189,11 +190,11 @@ const isAreaChart = type => type === 'Area';
 // returns true if chart type is area
 const isPieType = type => isPieChart(type) || isDonutChart(type);
 // The format of chart data is array of json objects in case of the following types of chart
-const isChartDataJSON = type => _.includes(dataTypeJSON, type) || !_.includes(chartTypes, type);
+const isChartDataJSON = type => includes(dataTypeJSON, type) || !includes(chartTypes, type);
 // The format of chart data is array of objects in case of the following types of chart
-const isChartDataArray = type => _.includes(dataTypeArray, type);
+const isChartDataArray = type => includes(dataTypeArray, type);
 // returns true is the chart type is 'line', 'area' or 'cumulative line' else false
-const isLineTypeChart = type => _.includes(lineTypeCharts, type);
+const isLineTypeChart = type => includes(lineTypeCharts, type);
 // X/Y Domain properties are supported only for Column and Area charts
 const isAxisDomainSupported = type => isColumnChart(type) || isAreaChart(type);
 // Returns bar spacing value
@@ -394,7 +395,7 @@ const getDataType = widgetContext => {
     return isChartDataJSON(type) ? 'jsonFormat' : 'arrayFormat';
 };
 // Sample data to populate when no data is bound
-const getSampleData = widgetContext => constructSampleData(getDataType(widgetContext), _.split(widgetContext.yaxisdatakey, ',').length, widgetContext.shape);
+const getSampleData = widgetContext => constructSampleData(getDataType(widgetContext), split(widgetContext.yaxisdatakey, ',').length, widgetContext.shape);
 // Check whether X/Y Domain was set to Min and is supported for the present chart
 const isAxisDomainValid = (widgetContext, axis) => {
     if (widgetContext[axis + 'domain'] === 'Min' && (isAxisDomainSupported(widgetContext.type))) {
@@ -404,7 +405,7 @@ const isAxisDomainValid = (widgetContext, axis) => {
 };
 // Check whether min and max values are finite or not
 const areMinMaxValuesValid = values => {
-    if (_.isFinite(values.min) && _.isFinite(values.max)) {
+    if (isFinite(values.min) && isFinite(values.max)) {
         return true;
     }
     return false;
@@ -444,8 +445,8 @@ const initProperties = (widgetContext, propertyValueMap) => {
     if (!propertyValueMap || isEmptyObject(propertyValueMap)) {
         propertyValueMap = {};
     }
-    _.forEach(basicProperties, prop => {
-        if (_.isUndefined(propertyValueMap[prop])) {
+    forEach(basicProperties, prop => {
+        if (isUndefined(propertyValueMap[prop])) {
             propertyValueMap[prop] = widgetContext[prop];
         }
     });
@@ -680,7 +681,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');
-    if (!_.includes(chartTypes, widgetContext.type)) {
+    if (!includes(chartTypes, widgetContext.type)) {
         chart = nv.models.multiBarChart()
             .x(d => d.x)
             .y(d => d.y);
@@ -750,10 +751,10 @@ const initChart = (widgetContext, xDomainValues, yDomainValues, propertyValueMap
         }
     }
     // Support for custom colors if user gives direct string of colors in text box
-    if (_.isString(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
-        colors = _.split(propertyValueMap.customcolors, ',');
+    if (isString(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
+        colors = split(propertyValueMap.customcolors, ',');
     }
-    if (_.isArray(propertyValueMap.customcolors)) {
+    if (isArray(propertyValueMap.customcolors)) {
         colors = propertyValueMap.customcolors;
     }
     showLegend = isShowLegend(propertyValueMap.showlegend);
@@ -873,8 +874,8 @@ const getBooleanValue = val => {
 const getLodashOrderByFormat = orderby => {
     let columns;
     const orderByColumns = [], orders = [];
-    _.forEach(_.split(orderby, ','), function (col) {
-        columns = _.split(col, ':');
+    forEach(split(orderby, ','), function (col) {
+        columns = split(col, ':');
         orderByColumns.push(columns[0]);
         orders.push(columns[1]);
     });
@@ -922,7 +923,7 @@ class ChartComponent extends StylableComponent {
         other than integer unlike the column and bar.It is a nvd3 issue. Inorder to
         support that this is a fix*/
     getxAxisVal(dataObj, xKey, index) {
-        const value = _.get(dataObj, xKey);
+        const value = get(dataObj, xKey);
         // If x axis is other than number type then add indexes
         if (isLineTypeChart(this.type) && !isNumberType(this.xAxisDataType)) {
             // Verification to get the unique data keys
@@ -952,7 +953,7 @@ class ChartComponent extends StylableComponent {
             input: [[10, 20], [20, 30], [30, 40]];
             min x: 10
         */
-        xValues.min = _.minBy(datum.values, dataObject => dataObject.x || dataObject[0]);
+        xValues.min = minBy(datum.values, dataObject => dataObject.x || dataObject[0]);
         /*
          compute the max x value
          eg: When data has objects
@@ -962,7 +963,7 @@ class ChartComponent extends StylableComponent {
             input: [[10, 20], [20, 30], [30, 40]];
             max x: 30
          */
-        xValues.max = _.maxBy(datum.values, dataObject => dataObject.x || dataObject[0]);
+        xValues.max = maxBy(datum.values, dataObject => dataObject.x || dataObject[0]);
         return xValues;
     }
     // Getting the min and max values among all the y values
@@ -984,13 +985,17 @@ class ChartComponent extends StylableComponent {
             min y values : '20'(among first set) & '30'(among second set)
             max y values : '40'(among first set) & '50'(among second set)
          */
-        _.forEach(datum, data => {
-            minValues.push(_.minBy(data.values, function (dataObject) { return dataObject.y || dataObject[1]; }));
-            maxValues.push(_.maxBy(data.values, function (dataObject) { return dataObject.y || dataObject[1]; }));
+        forEach(datum, data => {
+            minValues.push(minBy(data.values, function (dataObject) {
+                return dataObject.y || dataObject[1];
+            }));
+            maxValues.push(maxBy(data.values, function (dataObject) {
+                return dataObject.y || dataObject[1];
+            }));
         });
         // Gets the least and highest values among all the min and max values of respective series of data
-        yValues.min = _.minBy(minValues, dataObject => dataObject.y || dataObject[1]);
-        yValues.max = _.maxBy(maxValues, dataObject => dataObject.y || dataObject[1]);
+        yValues.min = minBy(minValues, dataObject => dataObject.y || dataObject[1]);
+        yValues.max = maxBy(maxValues, dataObject => dataObject.y || dataObject[1]);
         return yValues;
     }
     // If the x-axis values are undefined, we return empty array else we return the values
@@ -999,7 +1004,7 @@ class ChartComponent extends StylableComponent {
     }
     // Returns the single data point based on the type of the data chart accepts
     valueFinder(dataObj, xKey, yKey, index, shape) {
-        const xVal = this.getxAxisVal(dataObj, xKey, index), value = _.get(dataObj, yKey), yVal = parseFloat(value) || value, size = parseFloat(dataObj[this.bubblesize]) || 2;
+        const xVal = this.getxAxisVal(dataObj, xKey, index), value = get(dataObj, yKey), yVal = parseFloat(value) || value, size = parseFloat(dataObj[this.bubblesize]) || 2;
         let dataPoint = {};
         if (isChartDataJSON(this.type)) {
             dataPoint.x = xVal;
@@ -1040,10 +1045,10 @@ class ChartComponent extends StylableComponent {
         }
         let datum = [], yAxisKey, shapes = [], values = [];
         const xAxisKey = this.xaxisdatakey, yAxisKeys = this.yaxisdatakey ? this.yaxisdatakey.split(',') : [], dataSet = this.chartData;
-        if (_.isArray(dataSet)) {
+        if (isArray(dataSet)) {
             if (isPieType(this.type)) {
                 yAxisKey = yAxisKeys[0];
-                datum = _.map(dataSet, (dataObj, index) => {
+                datum = map(dataSet, (dataObj, index) => {
                     if (!isEmptyObject(dataSet[index])) {
                         return this.valueFinder(dataSet[index], xAxisKey, yAxisKey);
                     }
@@ -1055,9 +1060,9 @@ class ChartComponent extends StylableComponent {
                     shapes = this.shape === 'random' ? allShapes : this.shape;
                 }
                 yAxisKeys.forEach((yAxisKey, series) => {
-                    values = _.map(dataSet, (dataObj, index) => {
+                    values = map(dataSet, (dataObj, index) => {
                         if (!isEmptyObject(dataSet[index])) {
-                            return this.valueFinder(dataSet[index], xAxisKey, yAxisKey, index, (_.isArray(shapes) && shapes[series]) || this.shape);
+                            return this.valueFinder(dataSet[index], xAxisKey, yAxisKey, index, (isArray(shapes) && shapes[series]) || this.shape);
                         }
                     });
                     values = this.getValidData(values);
@@ -1081,21 +1086,21 @@ class ChartComponent extends StylableComponent {
     // constructing the grouped data based on the selection of orderby, x & y axis
     getVisuallyGroupedData(queryResponse, groupingColumn) {
         let groupData = {}, groupValues = [], orderByDetails, maxLength;
-        const chartData = [], _isAreaChart = isAreaChart(this.type), yAxisKey = _.first(_.split(this.yaxisdatakey, ','));
+        const chartData = [], _isAreaChart = isAreaChart(this.type), yAxisKey = first(split(this.yaxisdatakey, ','));
         this.xDataKeyArr = [];
-        queryResponse = _.orderBy(queryResponse, _.split(this.groupby, ','));
+        queryResponse = orderBy(queryResponse, split(this.groupby, ','));
         if (this.orderby) {
             orderByDetails = getLodashOrderByFormat(this.orderby);
-            queryResponse = _.orderBy(queryResponse, orderByDetails.columns, orderByDetails.orders);
+            queryResponse = orderBy(queryResponse, orderByDetails.columns, orderByDetails.orders);
         }
-        queryResponse = _.groupBy(queryResponse, groupingColumn);
+        queryResponse = groupBy(queryResponse, groupingColumn);
         // In case of area chart all the series data should be of same length
         if (_isAreaChart) {
-            maxLength = _.max(_.map(queryResponse, obj => obj.length));
+            maxLength = max(map(queryResponse, obj => obj.length));
         }
-        _.forEach(queryResponse, (values, groupKey) => {
-            groupValues = isAreaChart ? _.fill(new Array(maxLength), [0, 0]) : [];
-            _.forEachRight(values, (value, index) => {
+        forEach(queryResponse, (values, groupKey) => {
+            groupValues = isAreaChart ? fill(new Array(maxLength), [0, 0]) : [];
+            forEachRight(values, (value, index) => {
                 groupValues[index] = this.valueFinder(value, this.xaxisdatakey, yAxisKey, index);
             });
             groupData = {
@@ -1129,14 +1134,14 @@ class ChartComponent extends StylableComponent {
                     columns.push(visualGroupingColumn);
                 }
                 if (groupbyColumns.length) {
-                    columns = _.concat(columns, groupbyColumns);
+                    columns = concat(columns, groupbyColumns);
                 }
             }
             // If x and y axis are not included in aggregation need to be included in groupby
             if (this.xaxisdatakey !== this.aggregationcolumn) {
                 columns.push(this.xaxisdatakey);
             }
-            _.forEach(yAxisKeys, key => {
+            forEach(yAxisKeys, key => {
                 if (key !== this.aggregationcolumn) {
                     columns.push(key);
                 }
@@ -1164,16 +1169,17 @@ class ChartComponent extends StylableComponent {
             return;
         }
         if (this.isGroupByEnabled()) {
-            groupByFields = _.split(this.groupby, ',');
+            groupByFields = split(this.groupby, ',');
         }
         if (this.orderby) {
-            sortExpr = _.replace(this.orderby, /:/g, ' ');
-            columns = _.uniq(_.concat(columns, groupByFields, [this.aggregationcolumn]));
+            sortExpr = replace(this.orderby, /:/g, ' ');
+            columns = uniq(concat(columns, groupByFields, [this.aggregationcolumn]));
             orderByColumns = getLodashOrderByFormat(this.orderby).columns;
             // If the orderby column is chosen either in groupby or orderby then replace . with $ for that column
-            _.forEach(_.intersection(columns, orderByColumns), col => {
+            forEach(intersection(columns, orderByColumns), col => {
                 colAlias = getValidAliasName(col);
-                sortExpr = _.replace(sortExpr, col, colAlias);
+                // @ts-ignore
+                sortExpr = replace(sortExpr, col, colAlias);
             });
         }
         if (this.isAggregationEnabled()) {
@@ -1195,17 +1201,17 @@ class ChartComponent extends StylableComponent {
             // Transform the result into a format supported by the chart.
             const chartData = [], aggregationAlias = getValidAliasName(this.aggregationcolumn), xAxisAliasKey = getValidAliasName(this.xaxisdatakey), yAxisAliasKeys = [];
             yAxisKeys.forEach(yAxisKey => yAxisAliasKeys.push(getValidAliasName(yAxisKey)));
-            _.forEach(response.body.content, (responseContent) => {
+            forEach(response.body.content, (responseContent) => {
                 const obj = {};
                 // Set the response in the chartData based on 'aggregationColumn', 'xAxisDataKey' & 'yAxisDataKey'.
                 if (this.isAggregationEnabled()) {
                     obj[this.aggregationcolumn] = responseContent[aggregationAlias];
-                    obj[this.aggregationcolumn] = _.get(responseContent, aggregationAlias) || _.get(responseContent, this.aggregationcolumn);
+                    obj[this.aggregationcolumn] = get(responseContent, aggregationAlias) || get(responseContent, this.aggregationcolumn);
                 }
-                obj[this.xaxisdatakey] = _.get(responseContent, xAxisAliasKey) || _.get(responseContent, this.xaxisdatakey);
+                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);
+                    obj[yAxisKey] = get(responseContent, yAxisAliasKeys[index]) || get(responseContent, yAxisKey);
                 });
                 chartData.push(obj);
             });
@@ -1331,7 +1337,11 @@ class ChartComponent extends StylableComponent {
                     break;
             }
             this.selecteditem = dataObj;
-            this.invokeEventCallback('select', { $event: d3.event, selectedChartItem: data, selectedItem: this.selecteditem });
+            this.invokeEventCallback('select', {
+                $event: event,
+                selectedChartItem: data,
+                selectedItem: this.selecteditem
+            });
         });
     }
     /*  Returns Y Scale min value
@@ -1370,7 +1380,7 @@ class ChartComponent extends StylableComponent {
             }
         }
         // prepare text style props object and set
-        _.forEach(styleProps, (value, key) => {
+        forEach(styleProps, (value, key) => {
             if (key === 'fontsize' || key === 'fontunit') {
                 styleObj[value] = this.fontsize + this.fontunit;
             }
@@ -1423,7 +1433,7 @@ class ChartComponent extends StylableComponent {
         }
         // get the chart object
         chart = initChart(this, xDomainValues, yDomainValues, null, !this.binddataset);
-        if (_.isArray(this._processedData)) {
+        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) {
@@ -1514,7 +1524,7 @@ class ChartComponent extends StylableComponent {
         this.yaxisdatakey = defaultColumns[1] || null;
     }
     getCutomizedOptions(prop, fields) {
-        const groupByColumns = _.split(this.groupby, ','), aggColumns = _.split(this.aggregationcolumn, ',');
+        const groupByColumns = split(this.groupby, ','), aggColumns = split(this.aggregationcolumn, ',');
         if (!this.binddataset) {
             return fields;
         }
@@ -1554,7 +1564,7 @@ class ChartComponent extends StylableComponent {
             case 'orderby':
                 // Set the 'aggregationColumn' to show all keys in case of aggregation function is count or to numeric keys in all other cases.
                 if (this.isLiveVariable && this.isAggregationEnabled()) {
-                    newOptions = _.uniq(_.concat(groupByColumns, aggColumns));
+                    newOptions = uniq(concat(groupByColumns, aggColumns));
                 }
                 break;
             case 'bubblesize':
@@ -1572,12 +1582,12 @@ class ChartComponent extends StylableComponent {
         this.numericColumns = [];
         this.nonPrimaryColumns = [];
         // Fetching all the columns
-        if (this.dataset && !_.isEmpty(propertiesMap)) {
+        if (this.dataset && !isEmpty(propertiesMap)) {
             columns = []; // TODO: fetchPropertiesMapColumns(propertiesMap);
         }
         if (columns) {
             // Iterating through all the columns and fetching the numeric and non primary key columns
-            _.forEach(Object.keys(columns), (key) => {
+            forEach(Object.keys(columns), (key) => {
                 type = columns[key].type;
                 if (isNumberType(type)) {
                     this.numericColumns.push(key);
@@ -1600,9 +1610,9 @@ class ChartComponent extends StylableComponent {
             this.axisoptions = null;
         }
         // liveVariables contain data in 'data' property' of the variable
-        this.chartData = this.isLiveVariable ? newVal || '' : (newVal && newVal.dataValue === '' && _.keys(newVal).length === 1) ? '' : newVal;
+        this.chartData = this.isLiveVariable ? newVal || '' : (newVal && newVal.dataValue === '' && keys(newVal).length === 1) ? '' : newVal;
         // if the data returned is an object make it an array of object
-        if (!_.isArray(this.chartData) && _.isObject(this.chartData)) {
+        if (!isArray(this.chartData) && isObject(this.chartData)) {
             this.chartData = [this.chartData];
         }
         if (newVal && newVal.filterFields) {
@@ -1672,7 +1682,7 @@ class ChartComponent extends StylableComponent {
                 this._plotChartProxy();
                 break;
         }
-        if (_.includes(advanceDataProps, key)) {
+        if (includes(advanceDataProps, key)) {
             this._plotChartProxy();
         }
     }
@@ -1711,7 +1721,7 @@ class ChartComponent extends StylableComponent {
         this.chartData = [];
         this._processedData = [];
         this._subsciptions = [];
-        this._plotChartProxy = _.debounce(this.plotChartProxy.bind(this), 100);
+        this._plotChartProxy = debounce(this.plotChartProxy.bind(this), 100);
         this.redraw = this._plotChartProxy.bind(this);
         styler(this.nativeElement, this, APPLY_STYLES_TYPE.CONTAINER, ['fontsize', 'fontunit', 'color', 'fontfamily', 'fontweight', 'fontstyle', 'textdecoration']);
         // generate unique id for the component
@@ -1728,7 +1738,7 @@ class ChartComponent extends StylableComponent {
     ngAfterViewInit() {
         super.ngAfterViewInit();
         // For old projects
-        if (!_.includes(['outside', 'inside', 'hide'], this.showlabels)) {
+        if (!includes(['outside', 'inside', 'hide'], this.showlabels)) {
             this.showlabels = getBooleanValue(this.showlabels);
             this.showlabelsoutside = getBooleanValue(this.showlabelsoutside);
             this.showlabels = this.showlabels ? (this.showlabelsoutside ? 'outside' : 'inside') : 'hide';
@@ -1787,7 +1797,7 @@ class ChartComponent extends StylableComponent {
             type: HostBinding,
             args: ['class.panel']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChartComponent, { className: "ChartComponent", filePath: "chart.component.ts", lineNumber: 122 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChartComponent, { className: "ChartComponent", filePath: "chart.component.ts", lineNumber: 139 }); })();
 
 const components = [
     ChartComponent