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

package/components/chart/src/ChartRenderer.js

@@ -0,0 +1,226 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodashEs = require("lodash-es");
+var _d3Setup = require("./d3Setup");
+var _constants = require("./constants");
+var _chartUtils = require("./chartUtils");
+var _dataUtils = require("./dataUtils");
+var _pieDonutResponsiveLayout = require("./pieDonutResponsiveLayout");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var ChartRenderer = function ChartRenderer(_ref) {
+  var chartId = _ref.chartId,
+    processedData = _ref.processedData,
+    widgetContext = _ref.widgetContext,
+    chartDataLength = _ref.chartDataLength,
+    binddataset = _ref.binddataset,
+    onSelect = _ref.onSelect,
+    onBeforerender = _ref.onBeforerender,
+    props = _ref.props;
+  var chartRef = (0, _react.useRef)(null);
+  var resizeFnRef = (0, _react.useRef)(null);
+  var svgRef = (0, _react.useRef)(null);
+  var widgetContextRef = (0, _react.useRef)(widgetContext);
+  widgetContextRef.current = widgetContext;
+  var buildStyleObj = (0, _react.useCallback)(function () {
+    var styleObj = {};
+    var fontPropEntries = Object.entries(_constants.styleProps);
+    for (var _i = 0, _fontPropEntries = fontPropEntries; _i < _fontPropEntries.length; _i++) {
+      var _fontPropEntries$_i = (0, _slicedToArray2["default"])(_fontPropEntries[_i], 2),
+        key = _fontPropEntries$_i[0],
+        cssKey = _fontPropEntries$_i[1];
+      if (key === "fontsize" || key === "fontunit") {
+        styleObj[cssKey] = (props.fontsize || "12") + (props.fontunit || "px");
+      } else {
+        var val = props[key];
+        if (val) styleObj[cssKey] = val;
+      }
+    }
+    return styleObj;
+  }, [props.fontsize, props.fontunit, props.color, props.fontfamily, props.fontweight, props.fontstyle, props.textdecoration]);
+  var buildStyleObjRef = (0, _react.useRef)(buildStyleObj);
+  buildStyleObjRef.current = buildStyleObj;
+  (0, _react.useEffect)(function () {
+    if (!processedData || !_d3Setup.nv) return;
+    var xDomainValues;
+    var yDomainValues;
+    if (processedData.length > 0) {
+      if ((0, _dataUtils.isAxisDomainValid)(widgetContext, "x")) {
+        xDomainValues = binddataset ? (0, _dataUtils.getXMinMaxValues)(processedData[0]) : {
+          min: {
+            x: 1
+          },
+          max: {
+            x: 5
+          }
+        };
+      }
+      if ((0, _dataUtils.isAxisDomainValid)(widgetContext, "y")) {
+        yDomainValues = binddataset ? (0, _dataUtils.getYMinMaxValues)(processedData) : {
+          min: {
+            y: 1
+          },
+          max: {
+            y: 5
+          }
+        };
+      }
+    }
+    var chart = (0, _chartUtils.initChart)(widgetContext, xDomainValues, yDomainValues, null, !binddataset);
+    if (onBeforerender) {
+      var overridden = onBeforerender(props, chart);
+      if (overridden) chart = overridden;
+    }
+    chartRef.current = chart;
+    var svgSelector = "#" + chartId + " svg";
+
+    // Clear old ticks before rendering
+    var oldTicks = _d3Setup.d3.select(svgSelector).select("g.nv-x").selectAll("g.tick");
+    if (oldTicks.size()) {
+      oldTicks.remove();
+    }
+    var rafId = 0;
+    var clearRaf = function clearRaf() {
+      if (rafId !== 0) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+      }
+    };
+    var attachWindowResize = function attachWindowResize() {
+      var _resizeFnRef$current;
+      if ((_resizeFnRef$current = resizeFnRef.current) !== null && _resizeFnRef$current !== void 0 && _resizeFnRef$current.clear) {
+        resizeFnRef.current.clear();
+      }
+      resizeFnRef.current = _d3Setup.nv.utils.windowResize(function () {
+        var el = document.getElementById(chartId);
+        if (el && el.getBoundingClientRect().height) {
+          var _chartRef$current, _chartRef$current$upd;
+          (_chartRef$current = chartRef.current) === null || _chartRef$current === void 0 || (_chartRef$current$upd = _chartRef$current.update) === null || _chartRef$current$upd === void 0 || _chartRef$current$upd.call(_chartRef$current);
+          (0, _chartUtils.postPlotChartProcess)(widgetContextRef.current, chartId);
+          if (!(0, _dataUtils.isPieType)(widgetContextRef.current.type)) {
+            (0, _chartUtils.setLabelsMaxWidth)(chartId, chartDataLength, props.fontsize, widgetContextRef.current.type);
+          }
+        }
+      });
+    };
+    var runPostRender = function runPostRender() {
+      var _resizeFnRef$current2;
+      var ctx = widgetContextRef.current;
+      (0, _chartUtils.postPlotChartProcess)(ctx, chartId);
+      if (!(0, _dataUtils.isPieType)(ctx.type)) {
+        (0, _chartUtils.setLabelsMaxWidth)(chartId, chartDataLength, props.fontsize, ctx.type);
+      } else if (!ctx.showlabelsoutside) {
+        (0, _chartUtils.rotatePieLabels)(chartId);
+      }
+      if (ctx.type === "Donut" && ctx.centerlabel) {
+        (0, _chartUtils.setDonutCenterLabel)(chartId, ctx.centerlabel);
+      }
+      (0, _chartUtils.setTextStyle)(buildStyleObjRef.current(), chartId);
+      if ((_resizeFnRef$current2 = resizeFnRef.current) !== null && _resizeFnRef$current2 !== void 0 && _resizeFnRef$current2.clear) {
+        resizeFnRef.current.clear();
+      }
+      if (!(0, _dataUtils.isPieType)(ctx.type)) {
+        attachWindowResize();
+      }
+    };
+    var drawChart = function drawChart() {
+      var c = chartRef.current;
+      if (!c) return false;
+      if ((0, _dataUtils.isPieType)(widgetContextRef.current.type)) {
+        if (!(0, _pieDonutResponsiveLayout.applyResponsivePieDonutLayout)(c, chartId, widgetContextRef.current)) {
+          return false;
+        }
+      }
+      _d3Setup.d3.select(svgSelector).datum(processedData).call(c);
+      runPostRender();
+      return true;
+    };
+    _d3Setup.nv.addGraph(function () {
+      if ((0, _dataUtils.isPieType)(widgetContextRef.current.type)) {
+        var layoutAttempts = 0;
+        /** Stops rAF when the container stays unmeasurable (e.g. `display: none`). */
+        var maxLayoutAttempts = 120;
+        var _tryDraw = function tryDraw() {
+          if (drawChart()) {
+            clearRaf();
+            return;
+          }
+          if (++layoutAttempts >= maxLayoutAttempts) {
+            clearRaf();
+            return;
+          }
+          rafId = requestAnimationFrame(_tryDraw);
+        };
+        _tryDraw();
+      } else {
+        drawChart();
+      }
+      return chart;
+    }, function () {
+      setTimeout(function () {
+        (0, _chartUtils.attachClickEvent)(chartId, widgetContext.type, function (event, selectedItem, selectedChartItem) {
+          onSelect === null || onSelect === void 0 || onSelect(event, props, selectedItem, selectedChartItem);
+        });
+      }, 600);
+    });
+    return function () {
+      var _resizeFnRef$current3;
+      clearRaf();
+      if ((_resizeFnRef$current3 = resizeFnRef.current) !== null && _resizeFnRef$current3 !== void 0 && _resizeFnRef$current3.clear) {
+        resizeFnRef.current.clear();
+      }
+      resizeFnRef.current = null;
+      chartRef.current = null;
+      _d3Setup.d3.selectAll(".nvtooltip").style("opacity", "0");
+      var svg = _d3Setup.d3.select(svgSelector);
+      svg.selectAll("*").remove();
+    };
+  }, [processedData, widgetContext, chartId, binddataset, chartDataLength]);
+  (0, _react.useEffect)(function () {
+    if (!(0, _dataUtils.isPieType)(widgetContext.type)) return;
+    var el = (0, _pieDonutResponsiveLayout.getChartLayoutContainer)(chartId);
+    if (!el) return;
+    var debouncedOnResize = (0, _lodashEs.debounce)(function () {
+      var chart = chartRef.current;
+      if (!chart) return;
+      var ctx = widgetContextRef.current;
+      if (!(0, _pieDonutResponsiveLayout.applyResponsivePieDonutLayout)(chart, chartId, ctx)) return;
+      chart.update();
+      (0, _chartUtils.postPlotChartProcess)(ctx, chartId);
+      if (!ctx.showlabelsoutside) {
+        (0, _chartUtils.rotatePieLabels)(chartId);
+      }
+      if (ctx.type === "Donut" && ctx.centerlabel) {
+        (0, _chartUtils.setDonutCenterLabel)(chartId, ctx.centerlabel);
+      }
+      (0, _chartUtils.setTextStyle)(buildStyleObjRef.current(), chartId);
+    }, 100);
+    var ro = new ResizeObserver(function () {
+      return debouncedOnResize();
+    });
+    ro.observe(el);
+    return function () {
+      ro.disconnect();
+      debouncedOnResize.cancel();
+    };
+  }, [chartId, widgetContext.type]);
+
+  // Separate effect for style-only changes
+  (0, _react.useEffect)(function () {
+    if (!chartRef.current) return;
+    var styleObj = buildStyleObj();
+    (0, _chartUtils.setTextStyle)(styleObj, chartId);
+  }, [props.fontsize, props.fontunit, props.color, props.fontfamily, props.fontweight, props.fontstyle, props.textdecoration, chartId, buildStyleObj]);
+  return __jsx("svg", {
+    ref: svgRef
+  });
+};
+var _default = exports["default"] = ChartRenderer;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { WmChartProps } from "./types";
+declare const WmChart: React.FC<WmChartProps>;
+export default WmChart;

package/components/chart/src/chart.js

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodashEs = require("lodash-es");
+var _dataUtils = require("./dataUtils");
+var _constants = require("./constants");
+var _ChartRenderer = _interopRequireDefault(require("./ChartRenderer"));
+var _excluded = ["type", "dataset", "datasource", "xaxisdatakey", "yaxisdatakey", "groupby", "aggregation", "aggregationcolumn", "orderby", "className", "title", "subheading", "iconclass", "onSelect", "onTransform", "onBeforerender", "theme", "showlabels", "showlabelsoutside", "shape", "bubblesize", "offsettop", "offsetbottom", "offsetright", "offsetleft", "nodatamessage"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var WmChart = function WmChart(props) {
+  var _props$styles, _props$styles2;
+  var _props$type = props.type,
+    type = _props$type === void 0 ? "Column" : _props$type,
+    dataset = props.dataset,
+    datasource = props.datasource,
+    _props$xaxisdatakey = props.xaxisdatakey,
+    xaxisdatakey = _props$xaxisdatakey === void 0 ? "" : _props$xaxisdatakey,
+    _props$yaxisdatakey = props.yaxisdatakey,
+    yaxisdatakey = _props$yaxisdatakey === void 0 ? "" : _props$yaxisdatakey,
+    groupby = props.groupby,
+    aggregation = props.aggregation,
+    aggregationcolumn = props.aggregationcolumn,
+    orderby = props.orderby,
+    className = props.className,
+    title = props.title,
+    subheading = props.subheading,
+    iconclass = props.iconclass,
+    onSelect = props.onSelect,
+    onTransform = props.onTransform,
+    onBeforerender = props.onBeforerender,
+    theme = props.theme,
+    showlabelsProp = props.showlabels,
+    showlabelsoutsideProp = props.showlabelsoutside,
+    shape = props.shape,
+    bubblesize = props.bubblesize,
+    offsettop = props.offsettop,
+    offsetbottom = props.offsetbottom,
+    offsetright = props.offsetright,
+    offsetleft = props.offsetleft,
+    nodatamessage = props.nodatamessage,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var chartId = (0, _react.useMemo)(function () {
+    return "wmChart-" + (props.id || props.name || Math.random().toString(36).slice(2));
+  }, [props.id, props.name]);
+  var _useState = (0, _react.useState)([]),
+    processedData = _useState[0],
+    setProcessedData = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(""),
+    error = _useState3[0],
+    setError = _useState3[1];
+  var _useState4 = (0, _react.useState)(false),
+    isVisuallyGrouped = _useState4[0],
+    setIsVisuallyGrouped = _useState4[1];
+  var xDataKeyArrRef = (0, _react.useRef)([]);
+  var chartDataRef = (0, _react.useRef)([]);
+
+  /**
+   * True when the chart is bound to a datasource (matches Angular's binddataset
+   * which is the binding expression string — truthy as long as a binding exists,
+   * regardless of whether data rows have arrived yet).
+   */
+  var binddataset = (0, _react.useMemo)(function () {
+    if (datasource) return true;
+    if (dataset == null) return false;
+    if (typeof dataset === "string" && dataset === "") return false;
+    if ((0, _lodashEs.isArray)(dataset)) return dataset.length > 0;
+    if ((0, _lodashEs.isObject)(dataset)) {
+      var d = dataset;
+      if ((0, _lodashEs.keys)(d).length === 1 && d.dataValue === "") return false;
+      return true;
+    }
+    return false;
+  }, [dataset, datasource]);
+  var isLiveVariable = (0, _react.useMemo)(function () {
+    return datasource && datasource.category === "wm.LiveVariable";
+  }, [datasource]);
+
+  // Normalize showlabels for backwards compat
+  var showlabels = (0, _react.useMemo)(function () {
+    if (!(0, _lodashEs.includes)(["outside", "inside", "hide"], showlabelsProp)) {
+      var boolVal = (0, _dataUtils.getBooleanValue)(showlabelsProp);
+      var boolOutside = (0, _dataUtils.getBooleanValue)(showlabelsoutsideProp);
+      return boolVal ? boolOutside ? "outside" : "inside" : "hide";
+    }
+    return showlabelsProp || "outside";
+  }, [showlabelsProp, showlabelsoutsideProp]);
+  var resolvedTheme = (0, _react.useMemo)(function () {
+    if (theme) return theme;
+    return (0, _dataUtils.isPieType)(type) ? "Azure" : "Terrestrial";
+  }, [theme, type]);
+  var resolvedOffsets = (0, _react.useMemo)(function () {
+    if ((0, _dataUtils.isPieType)(type)) {
+      return {
+        offsettop: offsettop !== null && offsettop !== void 0 ? offsettop : 20,
+        offsetright: offsetright !== null && offsetright !== void 0 ? offsetright : 0,
+        offsetbottom: offsetbottom !== null && offsetbottom !== void 0 ? offsetbottom : 0,
+        offsetleft: offsetleft !== null && offsetleft !== void 0 ? offsetleft : 0
+      };
+    }
+    return {
+      offsettop: offsettop !== null && offsettop !== void 0 ? offsettop : 25,
+      offsetright: offsetright !== null && offsetright !== void 0 ? offsetright : 25,
+      offsetbottom: offsetbottom !== null && offsetbottom !== void 0 ? offsetbottom : 55,
+      offsetleft: offsetleft !== null && offsetleft !== void 0 ? offsetleft : 75
+    };
+  }, [type, offsettop, offsetright, offsetbottom, offsetleft]);
+  var widgetContext = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
+      type: type,
+      xaxisdatakey: xaxisdatakey,
+      yaxisdatakey: yaxisdatakey,
+      groupby: groupby,
+      aggregation: aggregation,
+      aggregationcolumn: aggregationcolumn,
+      orderby: orderby,
+      theme: resolvedTheme,
+      showlabels: showlabels,
+      showlabelsoutside: showlabelsoutsideProp,
+      shape: shape,
+      bubblesize: bubblesize,
+      nodatamessage: nodatamessage || "No Data Available."
+    }, resolvedOffsets), {}, {
+      $id: chartId,
+      xDataKeyArr: xDataKeyArrRef.current,
+      binddataset: binddataset,
+      centerlabel: rest.centerlabel,
+      highlightpoints: rest.highlightpoints,
+      linethickness: rest.linethickness,
+      showlegend: rest.showlegend,
+      fontsize: rest.fontsize,
+      fontunit: rest.fontunit
+    });
+  }, [type, xaxisdatakey, yaxisdatakey, groupby, aggregation, aggregationcolumn, orderby, resolvedTheme, showlabels, showlabelsoutsideProp, shape, bubblesize, nodatamessage, resolvedOffsets, chartId, binddataset, rest]);
+  var doPlotChart = (0, _react.useCallback)(function () {
+    setError("");
+    setIsLoading(true);
+    var data = chartDataRef.current;
+
+    // Fire onTransform callback
+    if (onTransform) {
+      var transformed = onTransform(null, props);
+      if (transformed && (0, _lodashEs.isArray)(transformed)) {
+        data = transformed;
+        chartDataRef.current = data;
+      }
+    }
+    var groupingDetails = (0, _dataUtils.getGroupingDetails)(groupby, aggregation, aggregationcolumn, xaxisdatakey, yaxisdatakey);
+    if (binddataset && isLiveVariable && (0, _dataUtils.isDataFilteringEnabled)(isVisuallyGrouped, groupby, aggregation, aggregationcolumn, orderby)) {
+      (0, _dataUtils.getAggregatedData)(datasource, groupby, aggregation, aggregationcolumn, xaxisdatakey, yaxisdatakey, orderby, function (aggData) {
+        chartDataRef.current = aggData;
+        plotWithCurrentData(aggData, groupingDetails);
+      }, function () {
+        setError("Error fetching data");
+        setIsLoading(false);
+      });
+    } else {
+      if (data && isLiveVariable && (0, _dataUtils.isGroupByEnabled)(groupby) && groupingDetails.isVisuallyGrouped) {
+        var grouped = (0, _dataUtils.getVisuallyGroupedData)(data, groupingDetails.visualGroupingColumn, type, xaxisdatakey, yaxisdatakey, undefined, xDataKeyArrRef.current, groupby, orderby);
+        setIsVisuallyGrouped(true);
+        setProcessedData(grouped);
+        setIsLoading(false);
+      } else {
+        plotWithCurrentData(data, groupingDetails);
+      }
+    }
+  }, [binddataset, isLiveVariable, datasource, groupby, aggregation, aggregationcolumn, orderby, xaxisdatakey, yaxisdatakey, type, isVisuallyGrouped, onTransform, props, shape, bubblesize]);
+  var plotWithCurrentData = (0, _react.useCallback)(function (data, groupingDetails) {
+    if (groupingDetails.isVisuallyGrouped && !(0, _dataUtils.isPieType)(type)) {
+      setIsVisuallyGrouped(true);
+      setProcessedData(data);
+    } else {
+      xDataKeyArrRef.current = [];
+      if (!binddataset) {
+        xDataKeyArrRef.current = (0, _toConsumableArray2["default"])(_constants.dateList);
+        var sampleContext = {
+          type: type,
+          yaxisdatakey: yaxisdatakey,
+          shape: shape
+        };
+        setProcessedData((0, _dataUtils.getSampleData)(sampleContext));
+      } else {
+        var processed = (0, _dataUtils.processChartData)(data, type, xaxisdatakey, yaxisdatakey, undefined, xDataKeyArrRef.current, bubblesize, shape);
+        setProcessedData(processed);
+      }
+    }
+    setIsLoading(false);
+  }, [type, xaxisdatakey, yaxisdatakey, binddataset, bubblesize, shape]);
+  var debouncedPlotChart = (0, _react.useMemo)(function () {
+    return (0, _lodashEs.debounce)(doPlotChart, 100);
+  }, [doPlotChart]);
+
+  // Handle dataset changes
+  (0, _react.useEffect)(function () {
+    var chartData = dataset;
+    if (!chartData && !binddataset) {
+      setIsVisuallyGrouped(false);
+    }
+    if (isLiveVariable) {
+      chartData = chartData || "";
+    } else if (chartData && (0, _typeof2["default"])(chartData) === "object" && !(0, _lodashEs.isArray)(chartData)) {
+      if (chartData.dataValue === "" && (0, _lodashEs.keys)(chartData).length === 1) {
+        chartData = "";
+      }
+    }
+    if (!(0, _lodashEs.isArray)(chartData) && (0, _lodashEs.isObject)(chartData)) {
+      chartData = [chartData];
+    }
+    chartDataRef.current = (0, _lodashEs.isArray)(chartData) ? chartData : [];
+    var shouldFetchAggregated = isLiveVariable && (0, _dataUtils.isDataFilteringEnabled)(false, groupby, aggregation, aggregationcolumn, orderby);
+    if (chartData || shouldFetchAggregated) {
+      debouncedPlotChart();
+    }
+    return function () {
+      debouncedPlotChart.cancel();
+    };
+  }, [dataset, binddataset, isLiveVariable, debouncedPlotChart, groupby, aggregation, aggregationcolumn, orderby]);
+
+  // Replot on property changes (type, axes, theme, etc.)
+  (0, _react.useEffect)(function () {
+    var canFetchViaAggregation = binddataset && isLiveVariable && (0, _dataUtils.isDataFilteringEnabled)(isVisuallyGrouped, groupby, aggregation, aggregationcolumn, orderby);
+    if (binddataset && (chartDataRef.current.length > 0 || canFetchViaAggregation)) {
+      debouncedPlotChart();
+    } else if (!binddataset) {
+      debouncedPlotChart();
+    }
+  }, [type, xaxisdatakey, yaxisdatakey, groupby, aggregation, aggregationcolumn, orderby, resolvedTheme, showlabels, resolvedOffsets, rest.showlegend, rest.legendtype, rest.tooltips, rest.showxaxis, rest.showyaxis, rest.viewtype, rest.areaviewtype, rest.interpolation, rest.barspacing, rest.donutratio, rest.centerlabel, rest.customcolors, rest.highlightpoints, rest.linethickness, rest.staggerlabels, rest.reducexticks, rest.showvalues, rest.showxdistance, rest.showydistance, rest.labeltype, rest.labelthreshold, rest.xaxislabel, rest.yaxislabel, rest.xnumberformat, rest.xdateformat, rest.ynumberformat, rest.xunits, rest.yunits, rest.xdomain, rest.ydomain, rest.xaxislabeldistance, rest.yaxislabeldistance, shape, bubblesize, nodatamessage]);
+  var containerStyle = _objectSpread(_objectSpread({}, props === null || props === void 0 ? void 0 : props.styles), {}, {
+    width: (props === null || props === void 0 || (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.width) || (props === null || props === void 0 ? void 0 : props.width) || undefined,
+    height: (props === null || props === void 0 || (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.height) || (props === null || props === void 0 ? void 0 : props.height) || undefined
+  });
+  var isValidAxis = binddataset ? xaxisdatakey && yaxisdatakey : true;
+  return __jsx("div", {
+    id: chartId,
+    className: "app-chart ".concat(title ? "panel" : "", " ").concat(className || ""),
+    style: containerStyle,
+    hidden: props === null || props === void 0 ? void 0 : props.hidden,
+    show: props === null || props === void 0 ? void 0 : props.show,
+    name: props === null || props === void 0 ? void 0 : props.name
+  }, title && __jsx("div", {
+    className: "panel-heading"
+  }, iconclass && __jsx("i", {
+    className: iconclass
+  }), __jsx("span", {
+    className: "chart-title"
+  }, title), subheading && __jsx("span", {
+    className: "chart-subheading"
+  }, subheading)), __jsx("div", {
+    className: "app-chart-inner"
+  }, isValidAxis ? __jsx(_ChartRenderer["default"], {
+    chartId: chartId,
+    processedData: processedData,
+    widgetContext: widgetContext,
+    chartDataLength: chartDataRef.current.length,
+    binddataset: binddataset,
+    onSelect: onSelect,
+    onBeforerender: onBeforerender,
+    props: props
+  }) : __jsx("div", {
+    className: "wm-content-info"
+  }, __jsx("p", null, nodatamessage || "No Data Available.")), error && __jsx("div", {
+    className: "wm-content-info wm-content-error"
+  }, __jsx("p", null, error)), isLoading && __jsx("div", {
+    className: "app-spinner"
+  }, __jsx("i", {
+    className: "fa fa-spinner fa-spin"
+  }), __jsx("span", null, rest.loadingdatamsg || "Loading..."))));
+};
+var _default = exports["default"] = WmChart;

package/components/chart/src/chartStyles.generated.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Auto-generated by scripts/generate-chart-assets.js — do not edit.
+ * nvd3: @wavemaker/nvd3/build/nv.d3.min.css
+ * wm overrides: src/components/chart/src/wm-chart.css (optional)
+ */
+export declare const nvd3Css: string;
+export declare const wmChartCss: string;

package/components/chart/src/chartStyles.generated.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wmChartCss = exports.nvd3Css = void 0;
+/* eslint-disable max-len */
+/**
+ * Auto-generated by scripts/generate-chart-assets.js — do not edit.
+ * nvd3: @wavemaker/nvd3/build/nv.d3.min.css
+ * wm overrides: src/components/chart/src/wm-chart.css (optional)
+ */
+var nvd3Css = exports.nvd3Css = ".nvtooltip h3,.nvtooltip p{margin:0;text-align:center}.nv-distx,.nv-disty,.nv-noninteractive,.nvd3 .nv-axis,.nvd3 .nv-interactiveGuideLine,.nvd3.nv-pie .nv-label,.nvd3.nv-sparklineplus g.nv-hoverValue,.nvtooltip{pointer-events:none}.nvd3 .nv-axis{opacity:1}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero,.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .nv-axisMaxMin text,.nvtooltip table td.key.total{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nvd3 .nv-axis.nv-disabled,.nvd3 .nv-controlsWrap .nv-legend .nv-check-box .nv-check{opacity:0}.nvd3 .nv-bars rect{fill-opacity:.75;-webkit-transition:fill-opacity 250ms linear;transition:fill-opacity 250ms linear}.nvd3 .nv-bars rect.hover,.nvd3 .nv-boxplot circle:hover,.nvd3 .nv-boxplot rect:hover,.nvd3 .nv-candlestickBar .nv-ticks rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover,.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-scatter .nv-point.hover,.nvd3.nv-bullet .nv-measure:hover,.nvd3.nv-linePlusBar .nv-bar rect:hover,.nvd3.nv-pie .hover path{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:lightblue}.nvd3 .nv-bars text{fill:rgba(0,0,0,0)}.nvd3 .nv-bars .hover text{fill:rgba(0,0,0,1)}.nvd3 .nv-discretebar .nv-groups rect,.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect{stroke-opacity:0;-webkit-transition:fill-opacity 250ms linear;transition:fill-opacity 250ms linear}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:rgba(0,0,0,1);stroke:rgba(0,0,0,0)}.nvd3 .nv-boxplot circle{fill-opacity:0.5}.nvd3 line.nv-boxplot-median{stroke:black}.nv-boxplot-tick:hover{stroke-width:2.5px}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-markerLine{stroke:#000;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-candlestickBar .nv-ticks .nv-tick,.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:1px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.hover,.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:2px}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.positive rect,.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-candlestickBar .nv-ticks .nv-tick.negative rect,.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.with-transitions .nv-candlestickBar .nv-ticks .nv-tick,.with-transitions .nvd3 .nv-groups .nv-point{-webkit-transition:stroke-width 250ms linear,stroke-opacity 250ms linear;transition:stroke-width 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-candlestickBar .nv-ticks line{stroke:#333}.nv-force-node{stroke:#fff;stroke-width:1.5px}.nv-force-link{stroke:#999;stroke-opacity:.6}.nv-force-node text{stroke-width:0}.nvd3 .nv-check-box .nv-box{fill-opacity:0;stroke-width:2}.nvd3 .nv-check-box .nv-check{fill-opacity:0;stroke-width:4}.nvd3 .nv-hoverArea,.nvd3 .nv-series.nv-disabled .nv-check-box .nv-check,.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point,.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3 .nv-groups path.nv-line,.nvd3.nv-sparkline path{fill:none}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.nvd3 .nv-groups .nv-point.hover,.nvd3.nv-scatter .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}svg.nvd3-svg{-webkit-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;height:100%}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);border-radius:5px}.nvd3 text{font:12px Arial,sans-serif}.nvtooltip h3,.nvtooltip table td.key{font-weight:400}.nvd3 .title{font:bold 14px Arial,sans-serif}.nvd3 .nv-background{fill:white;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .selection{fill-opacity:.125;shape-rendering:crispEdges}.nv-brush .handle path{fill:#eee;stroke:#666}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .nv-disabled circle{fill-opacity:0}.nvd3 .nv-brush .selection{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}@media print{.nvd3 text{stroke-width:0;fill-opacity:1}}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3 .background path{fill:none;stroke:#EEE;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke-opacity:.7}.nvd3 .nv-parallelCoordinates-brush .selection{fill:#fff;fill-opacity:.6;stroke:gray;shape-rendering:crispEdges}.nvd3 .nv-parallelCoordinates .hover{fill-opacity:1;stroke-width:3px}.nvd3 .missingValuesline line{fill:none;stroke:black;stroke-width:1;stroke-opacity:1;stroke-dasharray:5,5}.nvd3.nv-pie path{stroke-opacity:0;-webkit-transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear;transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear;stroke:#fff;stroke-width:1px;stroke-opacity:1;fill-opacity:.7}.nvd3.nv-pie .nv-pie-title{font-size:24px;fill:rgba(19,196,249,0.59)}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;-webkit-transition:fill-opacity 250ms linear,stroke-opacity 250ms linear;transition:fill-opacity 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvtooltip{position:absolute;background-color:#fff;color:#000;padding:1px;border:1px solid rgba(0,0,0,.5);z-index:10000;display:block;font-family:Arial,sans-serif;font-size:13px;text-align:left;white-space:nowrap;-webkit-user-select:none;-ms-user-select:none;user-select:none;background:rgba(255,255,255,.8);border-radius:4px}.nvtooltip.with-transitions,.with-transitions .nvtooltip{-webkit-transition:opacity 50ms linear 0.2s;transition:opacity 50ms linear 0.2s}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{padding:4px 14px;line-height:18px;background-color:rgba(247,247,247,.75);color:#000;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.nvtooltip p{padding:5px 14px}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table td.percent{color:#a9a9a9}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{vertical-align:middle;width:12px;height:12px;border:1px solid #999}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{pointer-events:none;display:none}.nvd3 line.nv-guideline{stroke:#ccc}\n";
+var wmChartCss = exports.wmChartCss = "";

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

@@ -0,0 +1,26 @@
+import type { WidgetContext } from "./types";
+export { isShowLegend } from "./dataUtils";
+export declare const customiseTooltip: (chart: any, propertyValueMap: any, widgetContext: WidgetContext, label?: string) => void;
+export declare const highlightPoints: (chartId: string | null, highlightpoints: boolean) => void;
+export declare const setLineThickness: (chartId: string | null, thickness: string | undefined) => void;
+export declare const setTextStyle: (properties: Record<string, string>, chartId: string) => void;
+export declare const modifyLegendPosition: (widgetContext: WidgetContext, position: string, chartId: string) => void;
+export declare const postPlotChartProcess: (widgetContext: WidgetContext, chartId: string) => void;
+export declare const initChart: (widgetContext: WidgetContext, xDomainValues: any, yDomainValues: any, propertyValueMap: any, isPreview: boolean) => any;
+export declare const isShowLegendValue: (value: any) => boolean;
+export declare const setLabelsMaxWidth: (chartId: string, chartDataLength: number, fontsize: string | undefined, type: string) => void;
+/**
+ * Sets the center label for donut charts.
+ * Ported from Angular chart.component.ts setDonutCenterLabel().
+ */
+export declare const setDonutCenterLabel: (chartId: string, labelValue: string) => void;
+/**
+ * Handles pie label rotation post-render.
+ * Ported from Angular chart.component.ts postPlotProcess() pie section.
+ */
+export declare const rotatePieLabels: (chartId: string) => void;
+/**
+ * Attaches click events to chart data points.
+ * Ported from Angular chart.component.ts attachClickEvent().
+ */
+export declare const attachClickEvent: (chartId: string, type: string, onSelect?: (event: MouseEvent, selectedItem: any, selectedChartItem: any) => void) => void;