@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

package/components/chart/src/chartUtils.js

@@ -1,274 +1,240 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.initChart = exports.highlightPoints = exports.customiseTooltip = exports.attachClickEvent = void 0;
-Object.defineProperty(exports, "isShowLegend", {
-  enumerable: true,
-  get: function get() {
-    return _dataUtils.isShowLegend;
-  }
-});
-exports.setTextStyle = exports.setLineThickness = exports.setLabelsMaxWidth = exports.setDonutCenterLabel = exports.rotatePieLabels = exports.postPlotChartProcess = exports.modifyLegendPosition = exports.isShowLegendValue = void 0;
-var _lodashEs = require("lodash-es");
-var _d3Setup = require("./d3Setup");
-var _constants = require("./constants");
-var _dataUtils = require("./dataUtils");
-var _formatUtils = require("./formatUtils");
-var initProperties = function initProperties(widgetContext, propertyValueMap) {
+import { forEach, includes, isArray, isString, isUndefined, split } from "lodash-es";
+import { d3, nv } from "./d3Setup";
+import {
+  themes,
+  basicProperties,
+  barSpacingMap,
+  chartTypes,
+  chartDataPointXpath
+} from "./constants";
+import {
+  isPieType,
+  isLineTypeChart,
+  isDonutChart,
+  isBubbleChart,
+  isBarChart,
+  areMinMaxValuesValid,
+  getYScaleMinValue,
+  getBarSpacingValue,
+  getLabelValues,
+  getNumberValue,
+  isShowLegend
+} from "./dataUtils";
+import { getDateFormatedData, getNumberFormatedData, prettifyLabels } from "./formatUtils";
+import { isShowLegend as isShowLegend2 } from "./dataUtils";
+const initProperties = (widgetContext, propertyValueMap) => {
   if (!propertyValueMap || Object.keys(propertyValueMap).length === 0) {
     propertyValueMap = {};
   }
-  (0, _lodashEs.forEach)(_constants.basicProperties, function (prop) {
-    if ((0, _lodashEs.isUndefined)(propertyValueMap[prop])) {
+  forEach(basicProperties, (prop) => {
+    if (isUndefined(propertyValueMap[prop])) {
       propertyValueMap[prop] = widgetContext[prop];
     }
   });
   return propertyValueMap;
 };
-var customiseTooltip = exports.customiseTooltip = function customiseTooltip(chart, propertyValueMap, widgetContext, label) {
-  _d3Setup.d3.selectAll(".nvtooltip").style("opacity", 0);
-  chart.tooltip.contentGenerator(function (key) {
-    var _key$data, _key$data2;
-    var xValue = key === null || key === void 0 || (_key$data = key.data) === null || _key$data === void 0 ? void 0 : _key$data.x;
-    var yValue = (0, _formatUtils.getNumberFormatedData)((propertyValueMap === null || propertyValueMap === void 0 ? void 0 : propertyValueMap.ynumberformat) || (widgetContext === null || widgetContext === void 0 ? void 0 : widgetContext.ynumberformat) || (propertyValueMap === null || propertyValueMap === void 0 ? void 0 : propertyValueMap.ynumberformat), key === null || key === void 0 || (_key$data2 = key.data) === null || _key$data2 === void 0 ? void 0 : _key$data2.y);
-    if ((0, _dataUtils.isPieType)(widgetContext.type)) {
-      var _key$data3;
-      label = key === null || key === void 0 || (_key$data3 = key.data) === null || _key$data3 === void 0 ? void 0 : _key$data3.x;
+const customiseTooltip = (chart, propertyValueMap, widgetContext, label) => {
+  d3.selectAll(".nvtooltip").style("opacity", 0);
+  chart.tooltip.contentGenerator((key) => {
+    var _a, _b, _c;
+    let xValue = (_a = key == null ? void 0 : key.data) == null ? void 0 : _a.x;
+    const yValue = getNumberFormatedData(
+      (propertyValueMap == null ? void 0 : propertyValueMap.ynumberformat) || (widgetContext == null ? void 0 : widgetContext.ynumberformat) || (propertyValueMap == null ? void 0 : propertyValueMap.ynumberformat),
+      (_b = key == null ? void 0 : key.data) == null ? void 0 : _b.y
+    );
+    if (isPieType(widgetContext.type)) {
+      label = (_c = key == null ? void 0 : key.data) == null ? void 0 : _c.x;
       xValue = "";
     }
-    return "<table>" + "<tbody>" + '<tr class="value"><b>' + xValue + "</b></tr>" + "<tr>" + '<td class="legend-color-guide"><div style="background-color:' + (key === null || key === void 0 ? void 0 : key.color) + ';"></div></td>' + '<td class="key">' + label + "</td>" + '<td class="value">' + yValue + "</td>" + "</tr>" + "</tbody>" + "</table>";
+    return '<table><tbody><tr class="value"><b>' + xValue + '</b></tr><tr><td class="legend-color-guide"><div style="background-color:' + (key == null ? void 0 : key.color) + ';"></div></td><td class="key">' + label + '</td><td class="value">' + yValue + "</td></tr></tbody></table>";
   });
 };
-var highlightPoints = exports.highlightPoints = function highlightPoints(chartId, highlightpoints) {
-  var chartSvg = chartId ? _d3Setup.d3.select("#" + chartId + " svg") : _d3Setup.d3.select("#preview-chart svg");
+const highlightPoints = (chartId, highlightpoints) => {
+  const chartSvg = chartId ? d3.select("#" + chartId + " svg") : d3.select("#preview-chart svg");
   if (highlightpoints) {
     chartSvg.selectAll(".nv-point").style("stroke-width", "6px").style("fill-opacity", "0.95").style("stroke-opacity", "0.95");
   } else {
     chartSvg.selectAll(".nv-point").style("stroke-width", "0px").style("fill-opacity", "0");
   }
 };
-var setLineThickness = exports.setLineThickness = function setLineThickness(chartId, thickness) {
-  var chartSvg = chartId ? _d3Setup.d3.select("#" + chartId + " svg") : _d3Setup.d3.select("#preview-chart svg");
-  var t = thickness || "1.5";
-  var lines = chartSvg.selectAll(".nv-line");
+const setLineThickness = (chartId, thickness) => {
+  const chartSvg = chartId ? d3.select("#" + chartId + " svg") : d3.select("#preview-chart svg");
+  const t = thickness || "1.5";
+  const lines = chartSvg.selectAll(".nv-line");
   if (lines.size() !== 0) {
     lines.style("stroke-width", t);
   }
 };
-var setTextStyle = exports.setTextStyle = function setTextStyle(properties, chartId) {
-  var charttext = _d3Setup.d3.select("#" + chartId + " svg").selectAll("text");
+const setTextStyle = (properties, chartId) => {
+  const charttext = d3.select("#" + chartId + " svg").selectAll("text");
   if (!charttext.empty()) {
     charttext.style(properties);
   }
 };
-var modifyLegendPosition = exports.modifyLegendPosition = function modifyLegendPosition(widgetContext, position, chartId) {
-  var _groups;
-  var showLegend = (0, _dataUtils.isShowLegend)(widgetContext.showlegend);
-  var legendWrap = _d3Setup.d3.select("#" + chartId + " .nv-legendWrap");
-  var legendPadding = 5;
-  if (!showLegend || !((_groups = legendWrap["_groups"]) !== null && _groups !== void 0 && (_groups = _groups[0]) !== null && _groups !== void 0 && _groups[0])) return;
+const modifyLegendPosition = (widgetContext, position, chartId) => {
+  var _a, _b, _c;
+  const showLegend = isShowLegend(widgetContext.showlegend);
+  const legendWrap = d3.select("#" + chartId + " .nv-legendWrap");
+  const legendPadding = 5;
+  if (!showLegend || !((_b = (_a = legendWrap["_groups"]) == null ? void 0 : _a[0]) == null ? void 0 : _b[0])) return;
   if (position === "bottom") {
-    var legendNode = legendWrap["_groups"][0][0];
-    var legendWrapHeight = (legendNode === null || legendNode === void 0 ? void 0 : legendNode.getBoundingClientRect().height) || 0;
-    var wrap = _d3Setup.d3.select("#" + chartId + " .nv-wrap");
-    var wrapTransform = (wrap.attr("transform") || "").replace(/, /g, ",");
-    var coordinates = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(wrapTransform);
-    var svgWrap = _d3Setup.d3.select("#" + chartId + " svg>.nvd3.nv-wrap");
-    var svgNode = svgWrap.node();
-    var chartHeight = svgNode ? svgNode.getBoundingClientRect().height : 0;
+    const legendNode = legendWrap["_groups"][0][0];
+    const legendWrapHeight = (legendNode == null ? void 0 : legendNode.getBoundingClientRect().height) || 0;
+    const wrap = d3.select("#" + chartId + " .nv-wrap");
+    const wrapTransform = (wrap.attr("transform") || "").replace(/, /g, ",");
+    const coordinates = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(wrapTransform);
+    const svgWrap = d3.select("#" + chartId + " svg>.nvd3.nv-wrap");
+    const svgNode = svgWrap.node();
+    let chartHeight = svgNode ? svgNode.getBoundingClientRect().height : 0;
     if (chartHeight === 0) {
-      var _svgEl$getBoundingCli;
-      var svgEl = _d3Setup.d3.select("#" + chartId + " svg").node();
-      chartHeight = ((_svgEl$getBoundingCli = svgEl === null || svgEl === void 0 ? void 0 : svgEl.getBoundingClientRect().height) !== null && _svgEl$getBoundingCli !== void 0 ? _svgEl$getBoundingCli : 0) - (svgEl ? legendWrapHeight + 15 : 0);
+      const svgEl = d3.select("#" + chartId + " svg").node();
+      chartHeight = ((_c = svgEl == null ? void 0 : svgEl.getBoundingClientRect().height) != null ? _c : 0) - (svgEl ? legendWrapHeight + 15 : 0);
     }
-    legendWrap.attr("transform", "translate(0 , " + (chartHeight - legendWrapHeight - legendPadding) + ")");
+    legendWrap.attr(
+      "transform",
+      "translate(0 , " + (chartHeight - legendWrapHeight - legendPadding) + ")"
+    );
     if (coordinates) {
       wrap.attr("transform", "translate(" + coordinates[1] + "," + legendPadding + ")");
     }
   }
 };
-var postPlotChartProcess = exports.postPlotChartProcess = function postPlotChartProcess(widgetContext, chartId) {
-  if ((0, _dataUtils.isLineTypeChart)(widgetContext.type)) {
+const postPlotChartProcess = (widgetContext, chartId) => {
+  if (isLineTypeChart(widgetContext.type)) {
     setLineThickness(chartId, widgetContext.linethickness);
     highlightPoints(chartId, !!widgetContext.highlightpoints);
   }
 };
-var initChart = exports.initChart = function initChart(widgetContext, xDomainValues, yDomainValues, propertyValueMap, isPreview) {
-  var _chart$legend, _propertyValueMap$leg, _themes$propertyValue, _themes$Terrestrial, _chart$tooltip;
+const initChart = (widgetContext, xDomainValues, yDomainValues, propertyValueMap, isPreview) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   propertyValueMap = initProperties(widgetContext, propertyValueMap);
-  var chart;
-  var colors = [];
-  var xaxislabel;
-  var yaxislabel;
-  var labelConfig;
-  var barSpacing;
-  var showLegend;
-  var xAxisValue;
-  var hasMultipleYValues = false;
-  var xValue = {};
-  var yValue = {};
-  var dateList = ["01/01/2001", "01/01/2002", "01/01/2003"];
+  let chart;
+  let colors = [];
+  let xaxislabel;
+  let yaxislabel;
+  let labelConfig;
+  let barSpacing;
+  let showLegend;
+  let xAxisValue;
+  let hasMultipleYValues = false;
+  const xValue = {};
+  const yValue = {};
+  const dateList = ["01/01/2001", "01/01/2002", "01/01/2003"];
   switch (widgetContext.type) {
     case "Column":
-      barSpacing = (0, _dataUtils.getNumberValue)(propertyValueMap.barspacing, _dataUtils.getBarSpacingValue) || _constants.barSpacingMap.medium;
-      chart = _d3Setup.nv.models.multiBarChart().x(function (d) {
-        return d.x;
-      }).y(function (d) {
-        return d.y;
-      }).reduceXTicks(propertyValueMap.reducexticks).rotateLabels(0).showControls(false).stacked(propertyValueMap.viewtype === "Stacked").groupSpacing(barSpacing);
+      barSpacing = getNumberValue(propertyValueMap.barspacing, getBarSpacingValue) || barSpacingMap.medium;
+      chart = nv.models.multiBarChart().x((d) => d.x).y((d) => d.y).reduceXTicks(propertyValueMap.reducexticks).rotateLabels(0).showControls(false).stacked(propertyValueMap.viewtype === "Stacked").groupSpacing(barSpacing);
       break;
     case "Cumulative Line":
-      chart = _d3Setup.nv.models.cumulativeLineChart().x(function (d) {
-        return d[0];
-      }).y(function (d) {
-        return d[1];
-      }).showControls(false).useInteractiveGuideline(propertyValueMap.tooltips).interpolate(propertyValueMap.interpolation);
+      chart = nv.models.cumulativeLineChart().x((d) => d[0]).y((d) => d[1]).showControls(false).useInteractiveGuideline(propertyValueMap.tooltips).interpolate(propertyValueMap.interpolation);
       break;
     case "Line":
-      chart = _d3Setup.nv.models.lineChart().useInteractiveGuideline(propertyValueMap.tooltips).interpolate(propertyValueMap.interpolation);
+      chart = nv.models.lineChart().useInteractiveGuideline(propertyValueMap.tooltips).interpolate(propertyValueMap.interpolation);
       break;
     case "Area":
-      chart = _d3Setup.nv.models.stackedAreaChart().x(function (d) {
-        return d.x;
-      }).y(function (d) {
-        return d.y;
-      }).clipEdge(true).showControls(false).style(propertyValueMap.areaviewtype).useInteractiveGuideline(propertyValueMap.tooltips).interpolate(propertyValueMap.interpolation);
+      chart = nv.models.stackedAreaChart().x((d) => d.x).y((d) => d.y).clipEdge(true).showControls(false).style(propertyValueMap.areaviewtype).useInteractiveGuideline(propertyValueMap.tooltips).interpolate(propertyValueMap.interpolation);
       break;
     case "Bar":
-      barSpacing = (0, _dataUtils.getNumberValue)(propertyValueMap.barspacing, _dataUtils.getBarSpacingValue) || _constants.barSpacingMap.medium;
-      chart = _d3Setup.nv.models.multiBarHorizontalChart().x(function (d) {
-        return d.x;
-      }).y(function (d) {
-        return d.y;
-      }).showControls(false).stacked(propertyValueMap.viewtype === "Stacked").showValues(propertyValueMap.showvalues).groupSpacing(barSpacing);
+      barSpacing = getNumberValue(propertyValueMap.barspacing, getBarSpacingValue) || barSpacingMap.medium;
+      chart = nv.models.multiBarHorizontalChart().x((d) => d.x).y((d) => d.y).showControls(false).stacked(propertyValueMap.viewtype === "Stacked").showValues(propertyValueMap.showvalues).groupSpacing(barSpacing);
       break;
     case "Pie":
     case "Donut":
-      labelConfig = (0, _dataUtils.getLabelValues)(propertyValueMap.showlabels, propertyValueMap.showlabelsoutside, "value");
-      chart = _d3Setup.nv.models.pieChart().x(function (d) {
-        return d.x;
-      }).y(function (d) {
-        return d.y;
-      }).showLabels(labelConfig.showlabels).labelType(propertyValueMap.labeltype).valueFormat(_d3Setup.d3.format("%")).title(propertyValueMap.centerlabel).labelThreshold(propertyValueMap.labelthreshold || 0.01).labelsOutside(labelConfig.showlabelsoutside);
-      if ((0, _dataUtils.isDonutChart)(widgetContext.type)) {
+      labelConfig = getLabelValues(
+        propertyValueMap.showlabels,
+        propertyValueMap.showlabelsoutside,
+        "value"
+      );
+      chart = nv.models.pieChart().x((d) => d.x).y((d) => d.y).showLabels(labelConfig.showlabels).labelType(propertyValueMap.labeltype).valueFormat(d3.format("%")).title(propertyValueMap.centerlabel).labelThreshold(propertyValueMap.labelthreshold || 0.01).labelsOutside(labelConfig.showlabelsoutside);
+      if (isDonutChart(widgetContext.type)) {
         chart.donut(true);
       }
       if (propertyValueMap.labeltype === "key-value") {
-        chart.labelType(function (d) {
-          var _d$data$x, _d$data, _d$data$y, _d$data2;
-          return ((_d$data$x = (_d$data = d.data) === null || _d$data === void 0 ? void 0 : _d$data.x) !== null && _d$data$x !== void 0 ? _d$data$x : "") + " " + ((_d$data$y = (_d$data2 = d.data) === null || _d$data2 === void 0 ? void 0 : _d$data2.y) !== null && _d$data$y !== void 0 ? _d$data$y : "");
+        chart.labelType((d) => {
+          var _a2, _b2, _c2, _d2;
+          return ((_b2 = (_a2 = d.data) == null ? void 0 : _a2.x) != null ? _b2 : "") + " " + ((_d2 = (_c2 = d.data) == null ? void 0 : _c2.y) != null ? _d2 : "");
         });
       }
       break;
     case "Bubble":
-      chart = _d3Setup.nv.models.scatterChart().x(function (d) {
-        return d.x;
-      }).y(function (d) {
-        return d.y;
-      }).showDistX(propertyValueMap.showxdistance).showDistY(propertyValueMap.showydistance);
+      chart = nv.models.scatterChart().x((d) => d.x).y((d) => d.y).showDistX(propertyValueMap.showxdistance).showDistY(propertyValueMap.showydistance);
       break;
   }
   if (xDomainValues) {
-    var _xDomainValues$min, _xDomainValues$min2, _xDomainValues$max, _xDomainValues$max2;
-    xValue.min = ((_xDomainValues$min = xDomainValues.min) === null || _xDomainValues$min === void 0 ? void 0 : _xDomainValues$min.x) || ((_xDomainValues$min2 = xDomainValues.min) === null || _xDomainValues$min2 === void 0 ? void 0 : _xDomainValues$min2[0]);
-    xValue.max = ((_xDomainValues$max = xDomainValues.max) === null || _xDomainValues$max === void 0 ? void 0 : _xDomainValues$max.x) || ((_xDomainValues$max2 = xDomainValues.max) === null || _xDomainValues$max2 === void 0 ? void 0 : _xDomainValues$max2[0]);
-    if ((0, _dataUtils.areMinMaxValuesValid)(xValue)) {
-      xValue.min = (0, _dataUtils.getYScaleMinValue)(xValue.min);
+    xValue.min = ((_a = xDomainValues.min) == null ? void 0 : _a.x) || ((_b = xDomainValues.min) == null ? void 0 : _b[0]);
+    xValue.max = ((_c = xDomainValues.max) == null ? void 0 : _c.x) || ((_d = xDomainValues.max) == null ? void 0 : _d[0]);
+    if (areMinMaxValuesValid(xValue)) {
+      xValue.min = getYScaleMinValue(xValue.min);
       chart.xDomain([xValue.min, xValue.max]);
     }
   }
   if (yDomainValues) {
-    var _yDomainValues$min, _yDomainValues$min2, _yDomainValues$max, _yDomainValues$max2;
-    yValue.min = ((_yDomainValues$min = yDomainValues.min) === null || _yDomainValues$min === void 0 ? void 0 : _yDomainValues$min.y) || ((_yDomainValues$min2 = yDomainValues.min) === null || _yDomainValues$min2 === void 0 ? void 0 : _yDomainValues$min2[1]);
-    yValue.max = ((_yDomainValues$max = yDomainValues.max) === null || _yDomainValues$max === void 0 ? void 0 : _yDomainValues$max.y) || ((_yDomainValues$max2 = yDomainValues.max) === null || _yDomainValues$max2 === void 0 ? void 0 : _yDomainValues$max2[1]);
-    if ((0, _dataUtils.areMinMaxValuesValid)(yValue)) {
-      yValue.min = (0, _dataUtils.getYScaleMinValue)(yValue.min);
+    yValue.min = ((_e = yDomainValues.min) == null ? void 0 : _e.y) || ((_f = yDomainValues.min) == null ? void 0 : _f[1]);
+    yValue.max = ((_g = yDomainValues.max) == null ? void 0 : _g.y) || ((_h = yDomainValues.max) == null ? void 0 : _h[1]);
+    if (areMinMaxValuesValid(yValue)) {
+      yValue.min = getYScaleMinValue(yValue.min);
       chart.yDomain([yValue.min, yValue.max]);
     }
   }
-  (_chart$legend = chart.legend) === null || _chart$legend === void 0 || _chart$legend.vers(((_propertyValueMap$leg = propertyValueMap.legendtype) === null || _propertyValueMap$leg === void 0 ? void 0 : _propertyValueMap$leg.toLowerCase()) || "furious");
-  if (!(0, _lodashEs.includes)(_constants.chartTypes, widgetContext.type)) {
-    chart = _d3Setup.nv.models.multiBarChart().x(function (d) {
-      return d.x;
-    }).y(function (d) {
-      return d.y;
-    });
+  (_j = chart.legend) == null ? void 0 : _j.vers(((_i = propertyValueMap.legendtype) == null ? void 0 : _i.toLowerCase()) || "furious");
+  if (!includes(chartTypes, widgetContext.type)) {
+    chart = nv.models.multiBarChart().x((d) => d.x).y((d) => d.y);
   }
-  if ((0, _dataUtils.isPieType)(widgetContext.type)) {
+  if (isPieType(widgetContext.type)) {
     if (propertyValueMap.labeltype === "percent") {
-      chart.valueFormat(_d3Setup.d3.format("%"));
+      chart.valueFormat(d3.format("%"));
     } else {
-      chart.valueFormat(function (d) {
-        return (0, _formatUtils.getNumberFormatedData)(propertyValueMap.ynumberformat, d);
-      });
+      chart.valueFormat((d) => getNumberFormatedData(propertyValueMap.ynumberformat, d));
     }
     customiseTooltip(chart, propertyValueMap, widgetContext);
   } else {
-    var _widgetContext$xaxisd, _widgetContext$yaxisd, _widgetContext$yaxisd2, _widgetContext$yaxisd3;
     chart.showXAxis(propertyValueMap.showxaxis).showYAxis(propertyValueMap.showyaxis);
     chart.legendPosition(propertyValueMap.showlegend);
-    xaxislabel = propertyValueMap.xaxislabel || (0, _formatUtils.prettifyLabels)((_widgetContext$xaxisd = widgetContext.xaxisdatakey) !== null && _widgetContext$xaxisd !== void 0 ? _widgetContext$xaxisd : "") || "x caption";
-    yaxislabel = propertyValueMap.yaxislabel || (0, _formatUtils.prettifyLabels)((_widgetContext$yaxisd = widgetContext.yaxisdatakey) !== null && _widgetContext$yaxisd !== void 0 ? _widgetContext$yaxisd : "") || "y caption";
-    if (((_widgetContext$yaxisd2 = (_widgetContext$yaxisd3 = widgetContext.yaxisdatakey) === null || _widgetContext$yaxisd3 === void 0 || (_widgetContext$yaxisd3 = _widgetContext$yaxisd3.split(",")) === null || _widgetContext$yaxisd3 === void 0 ? void 0 : _widgetContext$yaxisd3.length) !== null && _widgetContext$yaxisd2 !== void 0 ? _widgetContext$yaxisd2 : 0) > 1) {
+    xaxislabel = propertyValueMap.xaxislabel || prettifyLabels((_k = widgetContext.xaxisdatakey) != null ? _k : "") || "x caption";
+    yaxislabel = propertyValueMap.yaxislabel || prettifyLabels((_l = widgetContext.yaxisdatakey) != null ? _l : "") || "y caption";
+    if (((_o = (_n = (_m = widgetContext.yaxisdatakey) == null ? void 0 : _m.split(",")) == null ? void 0 : _n.length) != null ? _o : 0) > 1) {
       hasMultipleYValues = true;
     }
-    if (!hasMultipleYValues && !(0, _dataUtils.isBubbleChart)(widgetContext.type)) {
+    if (!hasMultipleYValues && !isBubbleChart(widgetContext.type)) {
       customiseTooltip(chart, propertyValueMap, widgetContext, yaxislabel);
     }
     xaxislabel += propertyValueMap.xunits ? "(" + propertyValueMap.xunits + ")" : "";
     yaxislabel += propertyValueMap.yunits ? "(" + propertyValueMap.yunits + ")" : "";
     chart.xAxis.axisLabel(xaxislabel).axisLabelDistance(propertyValueMap.xaxislabeldistance).staggerLabels(propertyValueMap.staggerlabels);
-    if (propertyValueMap.xdateformat || isPreview && !(0, _dataUtils.isBubbleChart)(widgetContext.type)) {
-      if ((0, _dataUtils.isLineTypeChart)(widgetContext.type)) {
-        chart.xAxis.tickFormat(function (d) {
-          var _widgetContext$xDataK;
-          xAxisValue = isPreview ? dateList[d - 1] : (_widgetContext$xDataK = widgetContext.xDataKeyArr) === null || _widgetContext$xDataK === void 0 ? void 0 : _widgetContext$xDataK[d];
-          return (0, _formatUtils.getDateFormatedData)(propertyValueMap.xdateformat, xAxisValue);
+    if (propertyValueMap.xdateformat || isPreview && !isBubbleChart(widgetContext.type)) {
+      if (isLineTypeChart(widgetContext.type)) {
+        chart.xAxis.tickFormat((d) => {
+          var _a2;
+          xAxisValue = isPreview ? dateList[d - 1] : (_a2 = widgetContext.xDataKeyArr) == null ? void 0 : _a2[d];
+          return getDateFormatedData(propertyValueMap.xdateformat, xAxisValue);
         });
       } else {
-        chart.xAxis.tickFormat(function (d) {
-          return (0, _formatUtils.getDateFormatedData)(propertyValueMap.xdateformat, d);
-        });
+        chart.xAxis.tickFormat((d) => getDateFormatedData(propertyValueMap.xdateformat, d));
       }
     } else if (propertyValueMap.xnumberformat) {
-      chart.xAxis.tickFormat(function (d) {
-        return (0, _formatUtils.getNumberFormatedData)(propertyValueMap.xnumberformat, d);
-      });
+      chart.xAxis.tickFormat((d) => getNumberFormatedData(propertyValueMap.xnumberformat, d));
     } else {
-      if ((0, _dataUtils.isLineTypeChart)(widgetContext.type)) {
-        chart.xAxis.tickFormat(function (d) {
-          var _widgetContext$xDataK2;
-          return (_widgetContext$xDataK2 = widgetContext.xDataKeyArr) === null || _widgetContext$xDataK2 === void 0 ? void 0 : _widgetContext$xDataK2[d];
+      if (isLineTypeChart(widgetContext.type)) {
+        chart.xAxis.tickFormat((d) => {
+          var _a2;
+          return (_a2 = widgetContext.xDataKeyArr) == null ? void 0 : _a2[d];
         });
       }
     }
-    chart.yAxis.axisLabel(yaxislabel).axisLabelDistance(propertyValueMap.yaxislabeldistance).staggerLabels(propertyValueMap.staggerlabels).tickFormat(function (d) {
-      var _propertyValueMap;
-      return (0, _formatUtils.getNumberFormatedData)((_propertyValueMap = propertyValueMap) === null || _propertyValueMap === void 0 ? void 0 : _propertyValueMap.ynumberformat, d);
-    });
-    if ((0, _dataUtils.isBarChart)(widgetContext.type)) {
-      chart.valueFormat(function (d) {
-        var _propertyValueMap2;
-        return (0, _formatUtils.getNumberFormatedData)((_propertyValueMap2 = propertyValueMap) === null || _propertyValueMap2 === void 0 ? void 0 : _propertyValueMap2.ynumberformat, d);
-      });
+    chart.yAxis.axisLabel(yaxislabel).axisLabelDistance(propertyValueMap.yaxislabeldistance).staggerLabels(propertyValueMap.staggerlabels).tickFormat((d) => getNumberFormatedData(propertyValueMap == null ? void 0 : propertyValueMap.ynumberformat, d));
+    if (isBarChart(widgetContext.type)) {
+      chart.valueFormat((d) => getNumberFormatedData(propertyValueMap == null ? void 0 : propertyValueMap.ynumberformat, d));
     }
   }
-  if ((0, _lodashEs.isString)(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
-    colors = (0, _lodashEs.split)(propertyValueMap.customcolors, ",");
+  if (isString(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
+    colors = split(propertyValueMap.customcolors, ",");
   }
-  if ((0, _lodashEs.isArray)(propertyValueMap.customcolors)) {
+  if (isArray(propertyValueMap.customcolors)) {
     colors = propertyValueMap.customcolors;
   }
-  showLegend = (0, _dataUtils.isShowLegend)(propertyValueMap.showlegend);
-  if ((0, _dataUtils.isPieType)(widgetContext.type)) {
-    chart.showLegend(showLegend).margin({
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    });
+  showLegend = isShowLegend(propertyValueMap.showlegend);
+  if (isPieType(widgetContext.type)) {
+    chart.showLegend(showLegend).margin({ top: 0, right: 0, bottom: 0, left: 0 });
   } else {
     chart.showLegend(showLegend).margin({
       top: propertyValueMap.offsettop,
@@ -277,19 +243,14 @@ var initChart = exports.initChart = function initChart(widgetContext, xDomainVal
       left: propertyValueMap.offsetleft
     });
   }
-  // Match Angular chart.utils.ts: pass the palette array so NVD3 uses ordinal colors by
-  // slice index (same order as datum array). No keyed/hash mapping.
-  var defaultPalette = colors.length > 0 ? colors : ((_themes$propertyValue = _constants.themes[propertyValueMap.theme]) === null || _themes$propertyValue === void 0 ? void 0 : _themes$propertyValue.colors) || ((_themes$Terrestrial = _constants.themes["Terrestrial"]) === null || _themes$Terrestrial === void 0 ? void 0 : _themes$Terrestrial.colors) || [];
+  const defaultPalette = colors.length > 0 ? colors : ((_p = themes[propertyValueMap.theme]) == null ? void 0 : _p.colors) || ((_q = themes["Terrestrial"]) == null ? void 0 : _q.colors) || [];
   chart.color(defaultPalette);
-  (_chart$tooltip = chart.tooltip) === null || _chart$tooltip === void 0 || _chart$tooltip.enabled(propertyValueMap.tooltips);
+  (_r = chart.tooltip) == null ? void 0 : _r.enabled(propertyValueMap.tooltips);
   widgetContext.message = propertyValueMap.nodatamessage || "No data found";
   chart.noData(widgetContext.message);
-  if ((0, _dataUtils.isLineTypeChart)(widgetContext.type) && widgetContext.highlightpoints) {
-    var _chart$dispatch;
-    (_chart$dispatch = chart.dispatch) === null || _chart$dispatch === void 0 || _chart$dispatch.on("stateChange", function () {
-      setTimeout(function () {
-        return postPlotChartProcess(widgetContext, widgetContext.$id || "");
-      }, 100);
+  if (isLineTypeChart(widgetContext.type) && widgetContext.highlightpoints) {
+    (_s = chart.dispatch) == null ? void 0 : _s.on("stateChange", () => {
+      setTimeout(() => postPlotChartProcess(widgetContext, widgetContext.$id || ""), 100);
     });
   }
   if (widgetContext.showlegend && (widgetContext.type === "Donut" || widgetContext.type === "Pie")) {
@@ -299,61 +260,61 @@ var initChart = exports.initChart = function initChart(widgetContext, xDomainVal
   }
   return chart;
 };
-var isShowLegendValue = exports.isShowLegendValue = function isShowLegendValue(value) {
+const isShowLegendValue = (value) => {
   if (value === "false" || value === false) return false;
   if (value === "true" || value === true) return true;
   return value === "hide" ? false : true;
 };
-var setLabelsMaxWidth = exports.setLabelsMaxWidth = function setLabelsMaxWidth(chartId, chartDataLength, fontsize, type) {
-  var fontsizeNum = parseInt(fontsize || "12", 10) || 12;
-  var isBarchart = (0, _dataUtils.isBarChart)(type);
-  var chartSvg = _d3Setup.d3.select("#" + chartId + " svg");
-  var xTicks = chartSvg.select("g.nv-x").selectAll("g.tick").select("text");
-  var tickWidth = 0;
-  var firstDist;
-  var found = false;
-  xTicks.each(function () {
+const setLabelsMaxWidth = (chartId, chartDataLength, fontsize, type) => {
+  var _a;
+  const fontsizeNum = parseInt(fontsize || "12", 10) || 12;
+  const isBarchart = isBarChart(type);
+  const chartSvg = d3.select("#" + chartId + " svg");
+  const xTicks = chartSvg.select("g.nv-x").selectAll("g.tick").select("text");
+  let tickWidth = 0;
+  let firstDist;
+  let found = false;
+  xTicks.each(function() {
     if (found) return;
-    var el = _d3Setup.d3.select(this);
-    var textContent = el.text();
-    var opacity = el.style("opacity");
+    const el = d3.select(this);
+    const textContent = el.text();
+    const opacity = el.style("opacity");
     if (textContent && opacity === "1") {
-      var parentTransform = _d3Setup.d3.select(this.parentNode).attr("transform") || "";
-      var transformParts = parentTransform.split(",");
-      var xDist = parseFloat((transformParts[0] || "").replace(/translate\(/, ""));
-      var yDist = parseFloat(transformParts[1] || "0");
-      var tickDist;
+      const parentTransform = d3.select(this.parentNode).attr("transform") || "";
+      const transformParts = parentTransform.split(",");
+      const xDist = parseFloat((transformParts[0] || "").replace(/translate\(/, ""));
+      const yDist = parseFloat(transformParts[1] || "0");
+      let tickDist;
       if (!isBarchart && xDist > 0) {
         tickDist = xDist;
       } else if (yDist > 0) {
         tickDist = yDist;
       }
-      if (firstDist !== undefined && tickDist !== undefined) {
+      if (firstDist !== void 0 && tickDist !== void 0) {
         tickWidth = Math.abs(tickDist - firstDist);
         found = true;
         return;
       }
-      if (tickDist !== undefined) {
+      if (tickDist !== void 0) {
         firstDist = tickDist;
       }
     }
   });
-  var maxLength;
+  let maxLength;
   if (isBarchart) {
-    var _svgWrapper$getBoundi;
-    var barWrapper = chartSvg.select("g.nv-wrap>g>g.nv-barsWrap").node();
-    var yAxisWrapper = chartSvg.select("g.nv-wrap>g>g.nv-y").node();
-    var svgWrapper = chartSvg.node();
-    var totalHeight = barWrapper ? barWrapper.getBoundingClientRect().height : 0;
-    var labelsAvailableWidth = yAxisWrapper && svgWrapper ? svgWrapper.getBoundingClientRect().width - yAxisWrapper.getBoundingClientRect().width : (_svgWrapper$getBoundi = svgWrapper === null || svgWrapper === void 0 ? void 0 : svgWrapper.getBoundingClientRect().width) !== null && _svgWrapper$getBoundi !== void 0 ? _svgWrapper$getBoundi : 0;
+    const barWrapper = chartSvg.select("g.nv-wrap>g>g.nv-barsWrap").node();
+    const yAxisWrapper = chartSvg.select("g.nv-wrap>g>g.nv-y").node();
+    const svgWrapper = chartSvg.node();
+    const totalHeight = barWrapper ? barWrapper.getBoundingClientRect().height : 0;
+    const labelsAvailableWidth = yAxisWrapper && svgWrapper ? svgWrapper.getBoundingClientRect().width - yAxisWrapper.getBoundingClientRect().width : (_a = svgWrapper == null ? void 0 : svgWrapper.getBoundingClientRect().width) != null ? _a : 0;
     maxLength = Math.round(labelsAvailableWidth / fontsizeNum);
     if (tickWidth > 0 && tickWidth < fontsizeNum && totalHeight > 0) {
-      var maxNoLabels = totalHeight / fontsizeNum;
-      var nthElement = Math.ceil(chartDataLength / maxNoLabels);
+      const maxNoLabels = totalHeight / fontsizeNum;
+      const nthElement = Math.ceil(chartDataLength / maxNoLabels);
       if (nthElement > 0 && isFinite(nthElement)) {
-        chartSvg.select("g.nv-x").selectAll("g.tick").select("text").each(function (_d, i) {
+        chartSvg.select("g.nv-x").selectAll("g.tick").select("text").each(function(_d, i) {
           if (i % nthElement !== 0) {
-            _d3Setup.d3.select(this).attr("opacity", "0");
+            d3.select(this).attr("opacity", "0");
           }
         });
       }
@@ -363,94 +324,74 @@ var setLabelsMaxWidth = exports.setLabelsMaxWidth = function setLabelsMaxWidth(c
   }
   maxLength = Math.abs(maxLength);
   if (maxLength === 0) return;
-  xTicks.each(function () {
-    var el = this;
+  xTicks.each(function() {
+    const el = this;
     if (el.textContent && el.textContent.length > maxLength) {
       el.textContent = el.textContent.substr(0, maxLength) + "...";
     }
   });
 };
-
-/** Horizontal inset for center label auto-scaling, as a fraction of the pie group width. */
-var DONUT_CENTER_LABEL_INSET_RATIO = 0.06;
-
-/**
- * Sets the center label for donut charts.
- * Ported from Angular chart.component.ts setDonutCenterLabel().
- */
-var setDonutCenterLabel = exports.setDonutCenterLabel = function setDonutCenterLabel(chartId, labelValue) {
-  var chartSvg = _d3Setup.d3.select("#" + chartId + " svg");
-  var pieGroups = chartSvg.select(".nv-wrap.nv-pie").select(".nv-pie");
-
-  // Never call .text("") on the nv-pie <g>: it clears textContent and removes *all*
-  // descendants, including NVD3's g.nv-slice/path elements (donut ring disappears).
+const DONUT_CENTER_LABEL_INSET_RATIO = 0.06;
+const setDonutCenterLabel = (chartId, labelValue) => {
+  const chartSvg = d3.select("#" + chartId + " svg");
+  const pieGroups = chartSvg.select(".nv-wrap.nv-pie").select(".nv-pie");
   pieGroups.selectAll("text.nv-pie-title").remove();
-  pieGroups.append("text").attr("dy", ".35em").attr("text-anchor", "middle").attr("class", "nv-pie-title").text(labelValue).each(function () {
-    var _circ$node;
-    var d3text = _d3Setup.d3.select(this);
-    var circ = _d3Setup.d3.select(this.parentElement);
-    var totalWidth = Number(((_circ$node = circ.node()) === null || _circ$node === void 0 ? void 0 : _circ$node.getBoundingClientRect().width) || 0);
-    var inset = totalWidth * DONUT_CENTER_LABEL_INSET_RATIO;
-    var availWidth = Math.max(0, totalWidth - inset * 2);
-    var textWidth = this.getComputedTextLength();
-    var safeTextWidth = textWidth > 0 ? textWidth : 1;
+  pieGroups.append("text").attr("dy", ".35em").attr("text-anchor", "middle").attr("class", "nv-pie-title").text(labelValue).each(function() {
+    var _a;
+    const d3text = d3.select(this);
+    const circ = d3.select(this.parentElement);
+    const totalWidth = Number(((_a = circ.node()) == null ? void 0 : _a.getBoundingClientRect().width) || 0);
+    const inset = totalWidth * DONUT_CENTER_LABEL_INSET_RATIO;
+    const availWidth = Math.max(0, totalWidth - inset * 2);
+    const textWidth = this.getComputedTextLength();
+    const safeTextWidth = textWidth > 0 ? textWidth : 1;
     d3text.attr("data-scale", String(availWidth / safeTextWidth));
-  }).style("font-size", function () {
-    var fontSize = 16 * Number(_d3Setup.d3.select(this).attr("data-scale"));
+  }).style("font-size", function() {
+    const fontSize = 16 * Number(d3.select(this).attr("data-scale"));
     return fontSize > 24 ? "24px" : fontSize + "px";
   });
 };
-var angle = function angle(d) {
-  var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
+const angle = (d) => {
+  const a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
   return a > 90 ? a - 180 : a;
 };
-
-/**
- * Handles pie label rotation post-render.
- * Ported from Angular chart.component.ts postPlotProcess() pie section.
- */
-var rotatePieLabels = exports.rotatePieLabels = function rotatePieLabels(chartId) {
-  var chartSvg = _d3Setup.d3.select("#" + chartId + " svg");
-  var pieLabels = chartSvg.select(".nv-pieLabels").selectAll(".nv-label");
-  var pieGroups = chartSvg.select(".nv-pie").selectAll(".nv-slice");
-  var angleArray = [];
-  if (pieGroups !== null && pieGroups !== void 0 && pieGroups.size()) {
-    pieGroups.each(function () {
-      _d3Setup.d3.select(this).attr("transform", function (d) {
+const rotatePieLabels = (chartId) => {
+  const chartSvg = d3.select("#" + chartId + " svg");
+  const pieLabels = chartSvg.select(".nv-pieLabels").selectAll(".nv-label");
+  const pieGroups = chartSvg.select(".nv-pie").selectAll(".nv-slice");
+  const angleArray = [];
+  if (pieGroups == null ? void 0 : pieGroups.size()) {
+    pieGroups.each(function() {
+      d3.select(this).attr("transform", function(d) {
         console.log("d", d);
         angleArray.push(angle(d));
         return null;
       });
     });
-    pieLabels.each(function (_d, i) {
-      var group = _d3Setup.d3.select(this);
+    pieLabels.each(function(_d, i) {
+      const group = d3.select(this);
       group.select("text").attr("transform", "rotate(" + angleArray[i] + ")");
     });
   }
 };
-
-/**
- * Attaches click events to chart data points.
- * Ported from Angular chart.component.ts attachClickEvent().
- */
-var attachClickEvent = exports.attachClickEvent = function attachClickEvent(chartId, type, onSelect) {
+const attachClickEvent = (chartId, type, onSelect) => {
   if (!onSelect) return;
-  _d3Setup.d3.select("#" + chartId + " svg").selectAll(_constants.chartDataPointXpath[type] || "").style("pointer-events", "all").on("click", function (event, data) {
-    var _data$data, _data$;
-    var dataObj;
+  d3.select("#" + chartId + " svg").selectAll(chartDataPointXpath[type] || "").style("pointer-events", "all").on("click", (event, data) => {
+    var _a, _b;
+    let dataObj;
     switch (type) {
       case "Column":
       case "Bar":
-        dataObj = data === null || data === void 0 ? void 0 : data._dataObj;
+        dataObj = data == null ? void 0 : data._dataObj;
         break;
       case "Pie":
       case "Donut":
-        dataObj = data === null || data === void 0 || (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data._dataObj;
+        dataObj = (_a = data == null ? void 0 : data.data) == null ? void 0 : _a._dataObj;
         break;
       case "Area":
       case "Cumulative Line":
       case "Line":
-        dataObj = (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$._dataObj;
+        dataObj = (_b = data[0]) == null ? void 0 : _b._dataObj;
         break;
       case "Bubble":
         dataObj = data;
@@ -458,4 +399,19 @@ var attachClickEvent = exports.attachClickEvent = function attachClickEvent(char
     }
     onSelect(event, dataObj, data);
   });
-};
+};
+export {
+  attachClickEvent,
+  customiseTooltip,
+  highlightPoints,
+  initChart,
+  isShowLegend2 as isShowLegend,
+  isShowLegendValue,
+  modifyLegendPosition,
+  postPlotChartProcess,
+  rotatePieLabels,
+  setDonutCenterLabel,
+  setLabelsMaxWidth,
+  setLineThickness,
+  setTextStyle
+};