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

package/components/chart/src/ChartRenderer.js

@@ -1,226 +1,244 @@
-"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);
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from "react";
+import { debounce } from "lodash-es";
+import { d3, nv } from "./d3Setup";
+import { styleProps } from "./constants";
+import {
+  initChart,
+  postPlotChartProcess,
+  setTextStyle,
+  setLabelsMaxWidth,
+  setDonutCenterLabel,
+  rotatePieLabels,
+  attachClickEvent
+} from "./chartUtils";
+import { isPieType, isAxisDomainValid, getXMinMaxValues, getYMinMaxValues } from "./dataUtils";
+import {
+  applyResponsivePieDonutLayout,
+  getChartLayoutContainer,
+  readLayoutBox,
+  syncPieChartWrapToContainer
+} from "./pieDonutResponsiveLayout";
+const ChartRenderer = ({
+  chartId,
+  processedData,
+  widgetContext,
+  chartDataLength,
+  binddataset,
+  onSelect,
+  onBeforerender,
+  props
+}) => {
+  const chartRef = useRef(null);
+  const resizeFnRef = useRef(null);
+  const svgRef = useRef(null);
+  const widgetContextRef = 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];
+  const buildStyleObj = useCallback(() => {
+    const styleObj = {};
+    const fontPropEntries = Object.entries(styleProps);
+    for (const [key, cssKey] of fontPropEntries) {
       if (key === "fontsize" || key === "fontunit") {
         styleObj[cssKey] = (props.fontsize || "12") + (props.fontunit || "px");
       } else {
-        var val = props[key];
+        const 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);
+  }, [
+    props.fontsize,
+    props.fontunit,
+    props.color,
+    props.fontfamily,
+    props.fontweight,
+    props.fontstyle,
+    props.textdecoration
+  ]);
+  const buildStyleObjRef = useRef(buildStyleObj);
   buildStyleObjRef.current = buildStyleObj;
-  (0, _react.useEffect)(function () {
-    if (!processedData || !_d3Setup.nv) return;
-    var xDomainValues;
-    var yDomainValues;
+  useEffect(() => {
+    if (!processedData || !nv) return;
+    let xDomainValues;
+    let 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 (isAxisDomainValid(widgetContext, "x")) {
+        xDomainValues = binddataset ? 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
-          }
-        };
+      if (isAxisDomainValid(widgetContext, "y")) {
+        yDomainValues = binddataset ? getYMinMaxValues(processedData) : { min: { y: 1 }, max: { y: 5 } };
       }
     }
-    var chart = (0, _chartUtils.initChart)(widgetContext, xDomainValues, yDomainValues, null, !binddataset);
+    let chart = initChart(widgetContext, xDomainValues, yDomainValues, null, !binddataset);
     if (onBeforerender) {
-      var overridden = onBeforerender(props, chart);
+      const 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");
+    const svgSelector = "#" + chartId + " svg";
+    const oldTicks = d3.select(svgSelector).select("g.nv-x").selectAll("g.tick");
     if (oldTicks.size()) {
       oldTicks.remove();
     }
-    var rafId = 0;
-    var clearRaf = function clearRaf() {
+    let rafId = 0;
+    const 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) {
+    const attachWindowResize = () => {
+      var _a;
+      if ((_a = resizeFnRef.current) == null ? void 0 : _a.clear) {
         resizeFnRef.current.clear();
       }
-      resizeFnRef.current = _d3Setup.nv.utils.windowResize(function () {
-        var el = document.getElementById(chartId);
+      resizeFnRef.current = nv.utils.windowResize(() => {
+        var _a2, _b;
+        const 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);
+          (_b = (_a2 = chartRef.current) == null ? void 0 : _a2.update) == null ? void 0 : _b.call(_a2);
+          postPlotChartProcess(widgetContextRef.current, chartId);
+          if (!isPieType(widgetContextRef.current.type)) {
+            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);
+    const runPostRender = () => {
+      var _a;
+      const ctx = widgetContextRef.current;
+      postPlotChartProcess(ctx, chartId);
+      if (isPieType(ctx.type)) {
+        const layoutEl = getChartLayoutContainer(chartId);
+        const box = layoutEl ? readLayoutBox(layoutEl) : null;
+        if (box) {
+          syncPieChartWrapToContainer(chartId, box.width, box.height);
+        }
+      }
+      if (!isPieType(ctx.type)) {
+        setLabelsMaxWidth(chartId, chartDataLength, props.fontsize, ctx.type);
       } else if (!ctx.showlabelsoutside) {
-        (0, _chartUtils.rotatePieLabels)(chartId);
+        rotatePieLabels(chartId);
       }
       if (ctx.type === "Donut" && ctx.centerlabel) {
-        (0, _chartUtils.setDonutCenterLabel)(chartId, ctx.centerlabel);
+        setDonutCenterLabel(chartId, ctx.centerlabel);
       }
-      (0, _chartUtils.setTextStyle)(buildStyleObjRef.current(), chartId);
-      if ((_resizeFnRef$current2 = resizeFnRef.current) !== null && _resizeFnRef$current2 !== void 0 && _resizeFnRef$current2.clear) {
+      setTextStyle(buildStyleObjRef.current(), chartId);
+      if ((_a = resizeFnRef.current) == null ? void 0 : _a.clear) {
         resizeFnRef.current.clear();
       }
-      if (!(0, _dataUtils.isPieType)(ctx.type)) {
+      if (!isPieType(ctx.type)) {
         attachWindowResize();
       }
     };
-    var drawChart = function drawChart() {
-      var c = chartRef.current;
+    const drawChart = () => {
+      const c = chartRef.current;
       if (!c) return false;
-      if ((0, _dataUtils.isPieType)(widgetContextRef.current.type)) {
-        if (!(0, _pieDonutResponsiveLayout.applyResponsivePieDonutLayout)(c, chartId, widgetContextRef.current)) {
+      if (isPieType(widgetContextRef.current.type)) {
+        if (!applyResponsivePieDonutLayout(c, chartId, widgetContextRef.current)) {
           return false;
         }
       }
-      _d3Setup.d3.select(svgSelector).datum(processedData).call(c);
+      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();
+    nv.addGraph(
+      () => {
+        if (isPieType(widgetContextRef.current.type)) {
+          let layoutAttempts = 0;
+          const maxLayoutAttempts = 120;
+          const tryDraw = () => {
+            if (drawChart()) {
+              clearRaf();
+              return;
+            }
+            if (++layoutAttempts >= maxLayoutAttempts) {
+              clearRaf();
+              return;
+            }
+            rafId = requestAnimationFrame(tryDraw);
+          };
+          tryDraw();
+        } else {
+          drawChart();
+        }
+        return chart;
+      },
+      () => {
+        setTimeout(() => {
+          attachClickEvent(
+            chartId,
+            widgetContext.type,
+            (event, selectedItem, selectedChartItem) => {
+              onSelect == null ? void 0 : onSelect(event, props, selectedItem, selectedChartItem);
+            }
+          );
+        }, 600);
       }
-      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;
+    );
+    return () => {
+      var _a;
       clearRaf();
-      if ((_resizeFnRef$current3 = resizeFnRef.current) !== null && _resizeFnRef$current3 !== void 0 && _resizeFnRef$current3.clear) {
+      if ((_a = resizeFnRef.current) == null ? void 0 : _a.clear) {
         resizeFnRef.current.clear();
       }
       resizeFnRef.current = null;
       chartRef.current = null;
-      _d3Setup.d3.selectAll(".nvtooltip").style("opacity", "0");
-      var svg = _d3Setup.d3.select(svgSelector);
+      d3.selectAll(".nvtooltip").style("opacity", "0");
+      const svg = 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);
+  useEffect(() => {
+    if (!isPieType(widgetContext.type)) return;
+    const el = getChartLayoutContainer(chartId);
     if (!el) return;
-    var debouncedOnResize = (0, _lodashEs.debounce)(function () {
-      var chart = chartRef.current;
+    const debouncedOnResize = debounce(() => {
+      const chart = chartRef.current;
       if (!chart) return;
-      var ctx = widgetContextRef.current;
-      if (!(0, _pieDonutResponsiveLayout.applyResponsivePieDonutLayout)(chart, chartId, ctx)) return;
+      const ctx = widgetContextRef.current;
+      if (!applyResponsivePieDonutLayout(chart, chartId, ctx)) return;
       chart.update();
-      (0, _chartUtils.postPlotChartProcess)(ctx, chartId);
+      postPlotChartProcess(ctx, chartId);
       if (!ctx.showlabelsoutside) {
-        (0, _chartUtils.rotatePieLabels)(chartId);
+        rotatePieLabels(chartId);
       }
       if (ctx.type === "Donut" && ctx.centerlabel) {
-        (0, _chartUtils.setDonutCenterLabel)(chartId, ctx.centerlabel);
+        setDonutCenterLabel(chartId, ctx.centerlabel);
       }
-      (0, _chartUtils.setTextStyle)(buildStyleObjRef.current(), chartId);
+      setTextStyle(buildStyleObjRef.current(), chartId);
     }, 100);
-    var ro = new ResizeObserver(function () {
-      return debouncedOnResize();
-    });
+    const ro = new ResizeObserver(() => debouncedOnResize());
     ro.observe(el);
-    return function () {
+    return () => {
       ro.disconnect();
       debouncedOnResize.cancel();
     };
   }, [chartId, widgetContext.type]);
-
-  // Separate effect for style-only changes
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     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
-  });
+    const styleObj = buildStyleObj();
+    setTextStyle(styleObj, chartId);
+  }, [
+    props.fontsize,
+    props.fontunit,
+    props.color,
+    props.fontfamily,
+    props.fontweight,
+    props.fontstyle,
+    props.textdecoration,
+    chartId,
+    buildStyleObj
+  ]);
+  return /* @__PURE__ */ jsx("svg", { ref: svgRef });
+};
+var ChartRenderer_default = ChartRenderer;
+export {
+  ChartRenderer_default as default
 };
-var _default = exports["default"] = ChartRenderer;