@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/chart/src/chartUtils.js

@@ -0,0 +1,417 @@
+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 = {};
+  }
+  forEach(basicProperties, (prop) => {
+    if (isUndefined(propertyValueMap[prop])) {
+      propertyValueMap[prop] = widgetContext[prop];
+    }
+  });
+  return propertyValueMap;
+};
+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 ? void 0 : key.color) + ';"></div></td><td class="key">' + label + '</td><td class="value">' + yValue + "</td></tr></tbody></table>";
+  });
+};
+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");
+  }
+};
+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);
+  }
+};
+const setTextStyle = (properties, chartId) => {
+  const charttext = d3.select("#" + chartId + " svg").selectAll("text");
+  if (!charttext.empty()) {
+    charttext.style(properties);
+  }
+};
+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") {
+    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) {
+      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) + ")"
+    );
+    if (coordinates) {
+      wrap.attr("transform", "translate(" + coordinates[1] + "," + legendPadding + ")");
+    }
+  }
+};
+const postPlotChartProcess = (widgetContext, chartId) => {
+  if (isLineTypeChart(widgetContext.type)) {
+    setLineThickness(chartId, widgetContext.linethickness);
+    highlightPoints(chartId, !!widgetContext.highlightpoints);
+  }
+};
+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);
+  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 = 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 = nv.models.cumulativeLineChart().x((d) => d[0]).y((d) => d[1]).showControls(false).useInteractiveGuideline(propertyValueMap.tooltips).interpolate(propertyValueMap.interpolation);
+      break;
+    case "Line":
+      chart = nv.models.lineChart().useInteractiveGuideline(propertyValueMap.tooltips).interpolate(propertyValueMap.interpolation);
+      break;
+    case "Area":
+      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 = 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 = 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((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 = nv.models.scatterChart().x((d) => d.x).y((d) => d.y).showDistX(propertyValueMap.showxdistance).showDistY(propertyValueMap.showydistance);
+      break;
+  }
+  if (xDomainValues) {
+    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) {
+    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]);
+    }
+  }
+  (_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 (isPieType(widgetContext.type)) {
+    if (propertyValueMap.labeltype === "percent") {
+      chart.valueFormat(d3.format("%"));
+    } else {
+      chart.valueFormat((d) => getNumberFormatedData(propertyValueMap.ynumberformat, d));
+    }
+    customiseTooltip(chart, propertyValueMap, widgetContext);
+  } else {
+    chart.showXAxis(propertyValueMap.showxaxis).showYAxis(propertyValueMap.showyaxis);
+    chart.legendPosition(propertyValueMap.showlegend);
+    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 && !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 && !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((d) => getDateFormatedData(propertyValueMap.xdateformat, d));
+      }
+    } else if (propertyValueMap.xnumberformat) {
+      chart.xAxis.tickFormat((d) => getNumberFormatedData(propertyValueMap.xnumberformat, d));
+    } else {
+      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((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 (isString(propertyValueMap.customcolors) && propertyValueMap.customcolors) {
+    colors = split(propertyValueMap.customcolors, ",");
+  }
+  if (isArray(propertyValueMap.customcolors)) {
+    colors = propertyValueMap.customcolors;
+  }
+  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,
+      right: propertyValueMap.offsetright,
+      bottom: propertyValueMap.offsetbottom,
+      left: propertyValueMap.offsetleft
+    });
+  }
+  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);
+  (_r = chart.tooltip) == null ? void 0 : _r.enabled(propertyValueMap.tooltips);
+  widgetContext.message = propertyValueMap.nodatamessage || "No data found";
+  chart.noData(widgetContext.message);
+  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")) {
+    if (widgetContext.showlegend === "right") {
+      chart.legendPosition("right");
+    }
+  }
+  return chart;
+};
+const isShowLegendValue = (value) => {
+  if (value === "false" || value === false) return false;
+  if (value === "true" || value === true) return true;
+  return value === "hide" ? false : true;
+};
+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;
+    const el = d3.select(this);
+    const textContent = el.text();
+    const opacity = el.style("opacity");
+    if (textContent && opacity === "1") {
+      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 !== void 0 && tickDist !== void 0) {
+        tickWidth = Math.abs(tickDist - firstDist);
+        found = true;
+        return;
+      }
+      if (tickDist !== void 0) {
+        firstDist = tickDist;
+      }
+    }
+  });
+  let maxLength;
+  if (isBarchart) {
+    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) {
+      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) {
+          if (i % nthElement !== 0) {
+            d3.select(this).attr("opacity", "0");
+          }
+        });
+      }
+    }
+  } else {
+    maxLength = Math.round(tickWidth / fontsizeNum);
+  }
+  maxLength = Math.abs(maxLength);
+  if (maxLength === 0) return;
+  xTicks.each(function() {
+    const el = this;
+    if (el.textContent && el.textContent.length > maxLength) {
+      el.textContent = el.textContent.substr(0, maxLength) + "...";
+    }
+  });
+};
+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 _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() {
+    const fontSize = 16 * Number(d3.select(this).attr("data-scale"));
+    return fontSize > 24 ? "24px" : fontSize + "px";
+  });
+};
+const angle = (d) => {
+  const a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
+  return a > 90 ? a - 180 : a;
+};
+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) {
+      const group = d3.select(this);
+      group.select("text").attr("transform", "rotate(" + angleArray[i] + ")");
+    });
+  }
+};
+const attachClickEvent = (chartId, type, onSelect) => {
+  if (!onSelect) return;
+  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 ? void 0 : data._dataObj;
+        break;
+      case "Pie":
+      case "Donut":
+        dataObj = (_a = data == null ? void 0 : data.data) == null ? void 0 : _a._dataObj;
+        break;
+      case "Area":
+      case "Cumulative Line":
+      case "Line":
+        dataObj = (_b = data[0]) == null ? void 0 : _b._dataObj;
+        break;
+      case "Bubble":
+        dataObj = data;
+        break;
+    }
+    onSelect(event, dataObj, data);
+  });
+};
+export {
+  attachClickEvent,
+  customiseTooltip,
+  highlightPoints,
+  initChart,
+  isShowLegend2 as isShowLegend,
+  isShowLegendValue,
+  modifyLegendPosition,
+  postPlotChartProcess,
+  rotatePieLabels,
+  setDonutCenterLabel,
+  setLabelsMaxWidth,
+  setLineThickness,
+  setTextStyle
+};

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

@@ -0,0 +1,41 @@
+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[];
+/** Default axis-chart offsets from `DEFAULT_PROPS` — must not apply to pie/donut plots. */
+export declare const AXIS_CHART_DEFAULT_OFFSETS: {
+    readonly offsettop: 25;
+    readonly offsetright: 25;
+    readonly offsetbottom: 55;
+    readonly offsetleft: 75;
+};
+export declare const PIE_CHART_DEFAULT_OFFSETS: {
+    readonly offsettop: 20;
+    readonly offsetright: 0;
+    readonly offsetbottom: 0;
+    readonly offsetleft: 0;
+};
+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>;