@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/chart/src/chartUtils.js

@@ -0,0 +1,461 @@
+"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) {
+  if (!propertyValueMap || Object.keys(propertyValueMap).length === 0) {
+    propertyValueMap = {};
+  }
+  (0, _lodashEs.forEach)(_constants.basicProperties, function (prop) {
+    if ((0, _lodashEs.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;
+      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>";
+  });
+};
+var highlightPoints = exports.highlightPoints = function highlightPoints(chartId, highlightpoints) {
+  var chartSvg = chartId ? _d3Setup.d3.select("#" + chartId + " svg") : _d3Setup.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");
+  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");
+  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;
+  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;
+    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);
+    }
+    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)) {
+    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;
+  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"];
+  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);
+      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);
+      break;
+    case "Line":
+      chart = _d3Setup.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);
+      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);
+      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)) {
+        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 : "");
+        });
+      }
+      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);
+      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);
+      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);
+      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;
+    });
+  }
+  if ((0, _dataUtils.isPieType)(widgetContext.type)) {
+    if (propertyValueMap.labeltype === "percent") {
+      chart.valueFormat(_d3Setup.d3.format("%"));
+    } else {
+      chart.valueFormat(function (d) {
+        return (0, _formatUtils.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) {
+      hasMultipleYValues = true;
+    }
+    if (!hasMultipleYValues && !(0, _dataUtils.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);
+        });
+      } else {
+        chart.xAxis.tickFormat(function (d) {
+          return (0, _formatUtils.getDateFormatedData)(propertyValueMap.xdateformat, d);
+        });
+      }
+    } else if (propertyValueMap.xnumberformat) {
+      chart.xAxis.tickFormat(function (d) {
+        return (0, _formatUtils.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];
+        });
+      }
+    }
+    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);
+      });
+    }
+  }
+  if ((0, _lodashEs.isString)(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
+    colors = (0, _lodashEs.split)(propertyValueMap.customcolors, ",");
+  }
+  if ((0, _lodashEs.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
+    });
+  } else {
+    chart.showLegend(showLegend).margin({
+      top: propertyValueMap.offsettop,
+      right: propertyValueMap.offsetright,
+      bottom: propertyValueMap.offsetbottom,
+      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) || [];
+  chart.color(defaultPalette);
+  (_chart$tooltip = chart.tooltip) === null || _chart$tooltip === void 0 || _chart$tooltip.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 (widgetContext.showlegend && (widgetContext.type === "Donut" || widgetContext.type === "Pie")) {
+    if (widgetContext.showlegend === "right") {
+      chart.legendPosition("right");
+    }
+  }
+  return chart;
+};
+var isShowLegendValue = exports.isShowLegendValue = function 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 () {
+    if (found) return;
+    var el = _d3Setup.d3.select(this);
+    var textContent = el.text();
+    var 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;
+      if (!isBarchart && xDist > 0) {
+        tickDist = xDist;
+      } else if (yDist > 0) {
+        tickDist = yDist;
+      }
+      if (firstDist !== undefined && tickDist !== undefined) {
+        tickWidth = Math.abs(tickDist - firstDist);
+        found = true;
+        return;
+      }
+      if (tickDist !== undefined) {
+        firstDist = tickDist;
+      }
+    }
+  });
+  var 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;
+    maxLength = Math.round(labelsAvailableWidth / fontsizeNum);
+    if (tickWidth > 0 && tickWidth < fontsizeNum && totalHeight > 0) {
+      var maxNoLabels = totalHeight / fontsizeNum;
+      var nthElement = Math.ceil(chartDataLength / maxNoLabels);
+      if (nthElement > 0 && isFinite(nthElement)) {
+        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");
+          }
+        });
+      }
+    }
+  } else {
+    maxLength = Math.round(tickWidth / fontsizeNum);
+  }
+  maxLength = Math.abs(maxLength);
+  if (maxLength === 0) return;
+  xTicks.each(function () {
+    var 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).
+  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;
+    d3text.attr("data-scale", String(availWidth / safeTextWidth));
+  }).style("font-size", function () {
+    var fontSize = 16 * Number(_d3Setup.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;
+  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) {
+        console.log("d", d);
+        angleArray.push(angle(d));
+        return null;
+      });
+    });
+    pieLabels.each(function (_d, i) {
+      var group = _d3Setup.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) {
+  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;
+    switch (type) {
+      case "Column":
+      case "Bar":
+        dataObj = data === null || data === void 0 ? 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;
+        break;
+      case "Area":
+      case "Cumulative Line":
+      case "Line":
+        dataObj = (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$._dataObj;
+        break;
+      case "Bubble":
+        dataObj = data;
+        break;
+    }
+    onSelect(event, dataObj, data);
+  });
+};

package/components/chart/src/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const chartTypes: string[];
+export declare const allShapes: string[];
+export declare const dateList: string[];
+export declare const themes: Record<string, {
+    colors: string[];
+    tooltip: {
+        backgroundColor: string;
+        textColor: string;
+    };
+}>;
+export declare const basicProperties: string[];
+export declare const barSpacingMap: Record<string, number>;
+export declare const donutRatioMap: Record<string, number>;
+export declare const barSpacingMapInvert: import("lodash").Dictionary<string>;
+export declare const donutRatioMapInvert: import("lodash").Dictionary<string>;
+export declare const tickformats: Record<string, {
+    prefix: string;
+    divider: number;
+}>;
+export declare const PREVIEW_CHART_ID = "#preview-chart";
+export declare const dataTypeJSON: string[];
+export declare const lineTypeCharts: string[];
+export declare const dataTypeArray: string[];
+export declare const SAMPLE_DATA: Record<string, string>;
+export declare const NONE = "none";
+export declare const chartDataPointXpath: Record<string, string>;
+export declare const styleProps: Record<string, string>;
+export declare const aggregationFnMap: Record<string, string>;

package/components/chart/src/constants.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tickformats = exports.themes = exports.styleProps = exports.lineTypeCharts = exports.donutRatioMapInvert = exports.donutRatioMap = exports.dateList = exports.dataTypeJSON = exports.dataTypeArray = exports.chartTypes = exports.chartDataPointXpath = exports.basicProperties = exports.barSpacingMapInvert = exports.barSpacingMap = exports.allShapes = exports.aggregationFnMap = exports.SAMPLE_DATA = exports.PREVIEW_CHART_ID = exports.NONE = void 0;
+var _lodashEs = require("lodash-es");
+var chartTypes = exports.chartTypes = ["Column", "Line", "Area", "Cumulative Line", "Bar", "Pie", "Donut", "Bubble"];
+var allShapes = exports.allShapes = ["circle", "square", "diamond", "cross", "triangle-up", "triangle-down"];
+var dateList = exports.dateList = ["01/01/2001", "01/01/2002", "01/01/2003"];
+var themes = exports.themes = {
+  Terrestrial: {
+    colors: ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"],
+    tooltip: {
+      backgroundColor: "#de7d28",
+      textColor: "#FFFFFF"
+    }
+  },
+  Annabelle: {
+    colors: ["#393b79", "#5254a3", "#6b6ecf", "#9c9ede", "#637939", "#8ca252", "#b5cf6b", "#cedb9c", "#8c6d31", "#bd9e39", "#e7ba52", "#e7cb94", "#843c39", "#ad494a", "#d6616b", "#e7969c", "#7b4173", "#a55194", "#ce6dbd", "#de9ed6"],
+    tooltip: {
+      backgroundColor: "#2e306f",
+      textColor: "#FFFFFF"
+    }
+  },
+  Azure: {
+    colors: ["#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d", "#fd8d3c", "#fdae6b", "#fdd0a2", "#31a354", "#74c476", "#a1d99b", "#c7e9c0", "#756bb1", "#9e9ac8", "#bcbddc", "#dadaeb", "#636363", "#969696", "#bdbdbd", "#d9d9d9"],
+    tooltip: {
+      backgroundColor: "#3182bd",
+      textColor: "#FFFFFF"
+    }
+  },
+  Retro: {
+    colors: ["#0ca7a1", "#ffa615", "#334957", "#acc5c2", "#988f90", "#8accc9", "#515151", "#f27861", "#36c9fd", "#794668", "#0f709d", "#0d2738", "#44be78", "#4a1839", "#6a393f", "#557d8b", "#6c331c", "#1c1c1c", "#861500", "#09562a"],
+    tooltip: {
+      backgroundColor: "#80513a",
+      textColor: "#FFFFFF"
+    }
+  },
+  Mellow: {
+    colors: ["#f0dcbf", "#88c877", "#aeb918", "#2e2c23", "#ddddd2", "#dfe956", "#4c963b", "#5d3801", "#e1eec3", "#cd8472", "#fcfab3", "#9a4635", "#9295ad", "#2e3f12", "#565677", "#557d8b", "#4f4d02", "#0c0c1b", "#833324", "#24120e"],
+    tooltip: {
+      backgroundColor: "#7c9e73",
+      textColor: "#FFFFFF"
+    }
+  },
+  Orient: {
+    colors: ["#a80000", "#cc6c3c", "#f0e400", "#000084", "#fccc6c", "#009c6c", "#cc309c", "#78cc00", "#fc84e4", "#48e4fc", "#4878d8", "#186c0c", "#606060", "#a8a8a8", "#000000", "#d7d7d7", "#75a06e", "#190d0b", "#888888", "#694b84"],
+    tooltip: {
+      backgroundColor: "#c14242",
+      textColor: "#FFFFFF"
+    }
+  },
+  GrayScale: {
+    colors: ["#141414", "#353535", "#5b5b5b", "#848484", "#a8a8a8", "#c3c3c3", "#e0e0e0", "#c8c8c8", "#a5a5a5", "#878787", "#656565", "#4e4e4e", "#303030", "#1c1c1c", "#4f4f4f", "#3b3b3b", "#757575", "#606060", "#868686", "#c1c1c1"],
+    tooltip: {
+      backgroundColor: "#575757",
+      textColor: "#FFFFFF"
+    }
+  },
+  Flyer: {
+    colors: ["#3f454c", "#5a646e", "#848778", "#cededf", "#74c4dd", "#0946ed", "#380bb1", "#000ff0", "#f54a23", "#1db262", "#bca3aa", "#ffa500", "#a86b32", "#63a18c", "#56795e", "#934343", "#b75f5f", "#752d2d", "#4e1111", "#920606"],
+    tooltip: {
+      backgroundColor: "#47637c",
+      textColor: "#FFFFFF"
+    }
+  },
+  Luminosity: {
+    colors: ["#FFFFFF", "#e4e4e4", "#00bcd4", "#f0dd2f", "#00aabf", "#018376", "#e91e63", "#39e5d4", "#ff6d6d", "#00ff76", "#ff9800", "#969696", "#ff4200", "#e00000", "#95cbe5", "#5331ff", "#fff4a7", "#e7a800", "#0061e4", "#d5e7ff"],
+    tooltip: {
+      backgroundColor: "#47637c",
+      textColor: "#FFFFFF"
+    }
+  }
+};
+var basicProperties = exports.basicProperties = ["xaxislabel", "yaxislabel", "xunits", "yunits", "xnumberformat", "xdateformat", "ynumberformat", "showvalues", "showlabels", "viewtype", "areaviewtype", "staggerlabels", "reducexticks", "offsettop", "offsetbottom", "offsetright", "offsetleft", "barspacing", "xaxislabeldistance", "yaxislabeldistance", "theme", "labeltype", "donutratio", "showlabelsoutside", "showxdistance", "showydistance", "shape", "nodatamessage", "captions", "showxaxis", "showyaxis", "centerlabel", "customcolors", "showlegend", "legendtype", "xdomain", "ydomain", "tooltips", "linethickness", "highlightpoints", "interpolation", "labelthreshold"];
+var barSpacingMap = exports.barSpacingMap = {
+  small: 0.3,
+  medium: 0.5,
+  large: 0.8
+};
+var donutRatioMap = exports.donutRatioMap = {
+  small: 0.3,
+  medium: 0.6,
+  large: 0.7
+};
+var barSpacingMapInvert = exports.barSpacingMapInvert = (0, _lodashEs.invert)(barSpacingMap);
+var donutRatioMapInvert = exports.donutRatioMapInvert = (0, _lodashEs.invert)(donutRatioMap);
+var tickformats = exports.tickformats = {
+  Thousand: {
+    prefix: "K",
+    divider: 1000
+  },
+  Million: {
+    prefix: "M",
+    divider: 1000000
+  },
+  Billion: {
+    prefix: "B",
+    divider: 1000000000
+  }
+};
+var PREVIEW_CHART_ID = exports.PREVIEW_CHART_ID = "#preview-chart";
+var dataTypeJSON = exports.dataTypeJSON = ["Column", "Line", "Pie", "Bar", "Donut", "Bubble"];
+var lineTypeCharts = exports.lineTypeCharts = ["Line", "Area", "Cumulative Line"];
+var dataTypeArray = exports.dataTypeArray = ["Cumulative Line", "Area"];
+var SAMPLE_DATA = exports.SAMPLE_DATA = {
+  group1: "Europe",
+  group2: "Asia",
+  group3: "America",
+  group4: "Australia"
+};
+var NONE = exports.NONE = "none";
+var chartDataPointXpath = exports.chartDataPointXpath = {
+  Column: "rect.nv-bar",
+  Bar: "g.nv-bar",
+  Area: ".nv-stackedarea .nv-point",
+  "Cumulative Line": ".nv-cumulativeLine .nv-scatterWrap path.nv-point",
+  Line: ".nv-lineChart .nv-scatterWrap path.nv-point",
+  Pie: ".nv-pieChart .nv-slice path",
+  Donut: ".nv-pieChart .nv-slice path",
+  Bubble: ".nv-scatterChart .nv-point-paths path"
+};
+var styleProps = exports.styleProps = {
+  fontunit: "font-size",
+  fontsize: "font-size",
+  color: "fill",
+  fontfamily: "font-family",
+  fontweight: "font-weight",
+  fontstyle: "font-style",
+  textdecoration: "text-decoration"
+};
+var aggregationFnMap = exports.aggregationFnMap = {
+  average: "AVG",
+  count: "COUNT",
+  maximum: "MAX",
+  minimum: "MIN",
+  sum: "SUM"
+};

package/components/chart/src/css.d.js

@@ -0,0 +1 @@
+"use strict";

package/components/chart/src/d3Setup.d.ts

@@ -0,0 +1,11 @@
+import * as d3 from "d3";
+declare let _nv: any;
+declare global {
+    interface Window {
+        d3: typeof d3;
+        nv: any;
+    }
+    var nv: any;
+}
+export { d3 };
+export { _nv as nv };