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

package/components/chart/src/chart.js

@@ -1,177 +1,276 @@
-"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 () {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { isArray, isObject, keys, debounce, includes } from "lodash-es";
+import {
+  processChartData,
+  getVisuallyGroupedData,
+  getGroupingDetails,
+  getSampleData,
+  getAggregatedData,
+  isGroupByEnabled,
+  isDataFilteringEnabled,
+  isPieType,
+  getBooleanValue
+} from "./dataUtils";
+import { AXIS_CHART_DEFAULT_OFFSETS, dateList, PIE_CHART_DEFAULT_OFFSETS } from "./constants";
+import ChartRenderer from "./ChartRenderer";
+const WmChart = (props) => {
+  var _b, _c;
+  const _a = props, {
+    type = "Column",
+    dataset,
+    datasource,
+    xaxisdatakey = "",
+    yaxisdatakey = "",
+    groupby,
+    aggregation,
+    aggregationcolumn,
+    orderby,
+    className,
+    title,
+    subheading,
+    iconclass,
+    onSelect,
+    onTransform,
+    onBeforerender,
+    theme,
+    showlabels: showlabelsProp,
+    showlabelsoutside: showlabelsoutsideProp,
+    shape,
+    bubblesize,
+    offsettop,
+    offsetbottom,
+    offsetright,
+    offsetleft,
+    nodatamessage
+  } = _a, rest = __objRest(_a, [
+    "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"
+  ]);
+  const chartId = useMemo(
+    () => "wmChart-" + (props.id || props.name || Math.random().toString(36).slice(2)),
+    [props.id, props.name]
+  );
+  const [processedData, setProcessedData] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [isVisuallyGrouped, setIsVisuallyGrouped] = useState(false);
+  const xDataKeyArrRef = useRef([]);
+  const chartDataRef = useRef([]);
+  const binddataset = useMemo(() => {
     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;
+    if (isArray(dataset)) return dataset.length > 0;
+    if (isObject(dataset)) {
+      const d = dataset;
+      if (keys(d).length === 1 && d.dataValue === "") return false;
       return true;
     }
     return false;
   }, [dataset, datasource]);
-  var isLiveVariable = (0, _react.useMemo)(function () {
+  const isLiveVariable = useMemo(() => {
     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);
+  const showlabels = useMemo(() => {
+    if (!includes(["outside", "inside", "hide"], showlabelsProp)) {
+      const boolVal = getBooleanValue(showlabelsProp);
+      const boolOutside = getBooleanValue(showlabelsoutsideProp);
       return boolVal ? boolOutside ? "outside" : "inside" : "hide";
     }
     return showlabelsProp || "outside";
   }, [showlabelsProp, showlabelsoutsideProp]);
-  var resolvedTheme = (0, _react.useMemo)(function () {
+  const resolvedTheme = useMemo(() => {
     if (theme) return theme;
-    return (0, _dataUtils.isPieType)(type) ? "Azure" : "Terrestrial";
+    return isPieType(type) ? "Azure" : "Terrestrial";
   }, [theme, type]);
-  var resolvedOffsets = (0, _react.useMemo)(function () {
-    if ((0, _dataUtils.isPieType)(type)) {
+  const resolvedOffsets = useMemo(() => {
+    if (isPieType(type)) {
+      const coalescePieOffset = (value, axisDefault, pieDefault) => {
+        if (value === void 0 || value === null) return pieDefault;
+        if (value === axisDefault) return pieDefault;
+        return value;
+      };
       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
+        offsettop: coalescePieOffset(
+          offsettop,
+          AXIS_CHART_DEFAULT_OFFSETS.offsettop,
+          PIE_CHART_DEFAULT_OFFSETS.offsettop
+        ),
+        offsetright: coalescePieOffset(
+          offsetright,
+          AXIS_CHART_DEFAULT_OFFSETS.offsetright,
+          PIE_CHART_DEFAULT_OFFSETS.offsetright
+        ),
+        offsetbottom: coalescePieOffset(
+          offsetbottom,
+          AXIS_CHART_DEFAULT_OFFSETS.offsetbottom,
+          PIE_CHART_DEFAULT_OFFSETS.offsetbottom
+        ),
+        offsetleft: coalescePieOffset(
+          offsetleft,
+          AXIS_CHART_DEFAULT_OFFSETS.offsetleft,
+          PIE_CHART_DEFAULT_OFFSETS.offsetleft
+        )
       };
     }
     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
+      offsettop: offsettop != null ? offsettop : AXIS_CHART_DEFAULT_OFFSETS.offsettop,
+      offsetright: offsetright != null ? offsetright : AXIS_CHART_DEFAULT_OFFSETS.offsetright,
+      offsetbottom: offsetbottom != null ? offsetbottom : AXIS_CHART_DEFAULT_OFFSETS.offsetbottom,
+      offsetleft: offsetleft != null ? offsetleft : AXIS_CHART_DEFAULT_OFFSETS.offsetleft
     };
   }, [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,
+  const widgetContext = useMemo(
+    () => __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
+      type,
+      xaxisdatakey,
+      yaxisdatakey,
+      groupby,
+      aggregation,
+      aggregationcolumn,
+      orderby,
       theme: resolvedTheme,
-      showlabels: showlabels,
+      showlabels,
       showlabelsoutside: showlabelsoutsideProp,
-      shape: shape,
-      bubblesize: bubblesize,
+      shape,
+      bubblesize,
       nodatamessage: nodatamessage || "No Data Available."
-    }, resolvedOffsets), {}, {
+    }), resolvedOffsets), {
       $id: chartId,
       xDataKeyArr: xDataKeyArrRef.current,
-      binddataset: 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 () {
+    }),
+    [
+      type,
+      xaxisdatakey,
+      yaxisdatakey,
+      groupby,
+      aggregation,
+      aggregationcolumn,
+      orderby,
+      resolvedTheme,
+      showlabels,
+      showlabelsoutsideProp,
+      shape,
+      bubblesize,
+      nodatamessage,
+      resolvedOffsets,
+      chartId,
+      binddataset,
+      rest
+    ]
+  );
+  const doPlotChart = useCallback(() => {
     setError("");
     setIsLoading(true);
-    var data = chartDataRef.current;
-
-    // Fire onTransform callback
+    let data = chartDataRef.current;
     if (onTransform) {
-      var transformed = onTransform(null, props);
-      if (transformed && (0, _lodashEs.isArray)(transformed)) {
+      const transformed = onTransform(null, props);
+      if (transformed && 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);
-      });
+    const groupingDetails = getGroupingDetails(
+      groupby,
+      aggregation,
+      aggregationcolumn,
+      xaxisdatakey,
+      yaxisdatakey
+    );
+    if (binddataset && isLiveVariable && isDataFilteringEnabled(isVisuallyGrouped, groupby, aggregation, aggregationcolumn, orderby)) {
+      getAggregatedData(
+        datasource,
+        groupby,
+        aggregation,
+        aggregationcolumn,
+        xaxisdatakey,
+        yaxisdatakey,
+        orderby,
+        (aggData) => {
+          chartDataRef.current = aggData;
+          plotWithCurrentData(aggData, groupingDetails);
+        },
+        () => {
+          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);
+      if (data && isLiveVariable && isGroupByEnabled(groupby) && groupingDetails.isVisuallyGrouped) {
+        const grouped = getVisuallyGroupedData(
+          data,
+          groupingDetails.visualGroupingColumn,
+          type,
+          xaxisdatakey,
+          yaxisdatakey,
+          void 0,
+          xDataKeyArrRef.current,
+          groupby,
+          orderby
+        );
         setIsVisuallyGrouped(true);
         setProcessedData(grouped);
         setIsLoading(false);
@@ -179,106 +278,185 @@ var WmChart = function WmChart(props) {
         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));
+  }, [
+    binddataset,
+    isLiveVariable,
+    datasource,
+    groupby,
+    aggregation,
+    aggregationcolumn,
+    orderby,
+    xaxisdatakey,
+    yaxisdatakey,
+    type,
+    isVisuallyGrouped,
+    onTransform,
+    props,
+    shape,
+    bubblesize
+  ]);
+  const plotWithCurrentData = useCallback(
+    (data, groupingDetails) => {
+      if (groupingDetails.isVisuallyGrouped && !isPieType(type)) {
+        setIsVisuallyGrouped(true);
+        setProcessedData(data);
       } else {
-        var processed = (0, _dataUtils.processChartData)(data, type, xaxisdatakey, yaxisdatakey, undefined, xDataKeyArrRef.current, bubblesize, shape);
-        setProcessedData(processed);
+        xDataKeyArrRef.current = [];
+        if (!binddataset) {
+          xDataKeyArrRef.current = [...dateList];
+          const sampleContext = { type, yaxisdatakey, shape };
+          setProcessedData(getSampleData(sampleContext));
+        } else {
+          const processed = processChartData(
+            data,
+            type,
+            xaxisdatakey,
+            yaxisdatakey,
+            void 0,
+            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;
+      setIsLoading(false);
+    },
+    [type, xaxisdatakey, yaxisdatakey, binddataset, bubblesize, shape]
+  );
+  const debouncedPlotChart = useMemo(() => debounce(doPlotChart, 100), [doPlotChart]);
+  useEffect(() => {
+    let 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) {
+    } else if (chartData && typeof chartData === "object" && !isArray(chartData)) {
+      if (chartData.dataValue === "" && keys(chartData).length === 1) {
         chartData = "";
       }
     }
-    if (!(0, _lodashEs.isArray)(chartData) && (0, _lodashEs.isObject)(chartData)) {
+    if (!isArray(chartData) && isObject(chartData)) {
       chartData = [chartData];
     }
-    chartDataRef.current = (0, _lodashEs.isArray)(chartData) ? chartData : [];
-    var shouldFetchAggregated = isLiveVariable && (0, _dataUtils.isDataFilteringEnabled)(false, groupby, aggregation, aggregationcolumn, orderby);
+    chartDataRef.current = isArray(chartData) ? chartData : [];
+    const shouldFetchAggregated = isLiveVariable && isDataFilteringEnabled(false, groupby, aggregation, aggregationcolumn, orderby);
     if (chartData || shouldFetchAggregated) {
       debouncedPlotChart();
     }
-    return function () {
+    return () => {
       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);
+  }, [
+    dataset,
+    binddataset,
+    isLiveVariable,
+    debouncedPlotChart,
+    groupby,
+    aggregation,
+    aggregationcolumn,
+    orderby
+  ]);
+  useEffect(() => {
+    const canFetchViaAggregation = binddataset && isLiveVariable && 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
+  }, [
+    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
+  ]);
+  const containerStyle = __spreadProps(__spreadValues({}, props == null ? void 0 : props.styles), {
+    width: ((_b = props == null ? void 0 : props.styles) == null ? void 0 : _b.width) || (props == null ? void 0 : props.width) || void 0,
+    height: ((_c = props == null ? void 0 : props.styles) == null ? void 0 : _c.height) || (props == null ? void 0 : props.height) || void 0
   });
-  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..."))));
+  const isValidAxis = binddataset ? xaxisdatakey && yaxisdatakey : true;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: chartId,
+      className: `app-chart ${title ? "panel" : ""} ${className || ""}`,
+      style: containerStyle,
+      hidden: props == null ? void 0 : props.hidden,
+      show: props == null ? void 0 : props.show,
+      name: props == null ? void 0 : props.name,
+      children: [
+        title && /* @__PURE__ */ jsxs("div", { className: "panel-heading", children: [
+          iconclass && /* @__PURE__ */ jsx("i", { className: iconclass }),
+          /* @__PURE__ */ jsx("span", { className: "chart-title", children: title }),
+          subheading && /* @__PURE__ */ jsx("span", { className: "chart-subheading", children: subheading })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "app-chart-inner", children: [
+          isValidAxis ? /* @__PURE__ */ jsx(
+            ChartRenderer,
+            {
+              chartId,
+              processedData,
+              widgetContext,
+              chartDataLength: chartDataRef.current.length,
+              binddataset,
+              onSelect,
+              onBeforerender,
+              props
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "wm-content-info", children: /* @__PURE__ */ jsx("p", { children: nodatamessage || "No Data Available." }) }),
+          error && /* @__PURE__ */ jsx("div", { className: "wm-content-info wm-content-error", children: /* @__PURE__ */ jsx("p", { children: error }) }),
+          isLoading && /* @__PURE__ */ jsxs("div", { className: "app-spinner", children: [
+            /* @__PURE__ */ jsx("i", { className: "fa fa-spinner fa-spin" }),
+            /* @__PURE__ */ jsx("span", { children: rest.loadingdatamsg || "Loading..." })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var chart_default = WmChart;
+export {
+  chart_default as default
 };
-var _default = exports["default"] = WmChart;