@apia/charts 2.0.9 → 2.0.11

package/dist/index.js

@@ -1,1456 +1,3 @@
-import { jsx, jsxs } from '@apia/theme/jsx-runtime';
-import { noNaN, animate, addBoundary, getIndex, arrayOrArray, getValueByPath } from '@apia/util';
-import { Box, createElement, useThemeUI } from '@apia/theme';
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { useGauge } from 'use-gauge';
-import tinycolor from 'tinycolor2';
-import { uniqueId } from 'lodash-es';
-import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, BarController, BarElement, PieController, ArcElement, LineController } from 'chart.js';
-import { Chart as Chart$1 } from 'react-chartjs-2';
-import { createPlotlyRenderers, PivotTableUI, TableRenderers } from '@imc-trading/react-pivottable';
-
-const START_ANGLE$5 = 30;
-const END_ANGLE$5 = 330;
-const SpeedMeter = ({
-  backgroundColor,
-  colorRanges,
-  currentValue,
-  currentValueColor,
-  currentValueFontSize,
-  height,
-  maxValue,
-  minValue,
-  pointerColor,
-  scaleValuesSize,
-  valueRanges,
-  width
-}) => {
-  const value = currentValue;
-  const diameter = Math.min(height, width);
-  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
-  const domainMin = noNaN(minValue) ?? valueRanges[0];
-  const offset = 20;
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$5,
-    endAngle: END_ANGLE$5,
-    numTicks: valueRanges[valueRanges.length - 1] / 10 + 1,
-    diameter
-  });
-  const needle = gauge.getNeedleProps({
-    value: 0,
-    baseRadius: 12,
-    tipRadius: 2
-  });
-  function getColor(value2) {
-    const index = valueRanges.findIndex(
-      (range) => noNaN(value2) <= noNaN(range)
-    );
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return colorRanges[index];
-  }
-  const angle = (END_ANGLE$5 - START_ANGLE$5) * value / (domainMax - domainMin);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ...gauge.getSVGProps(),
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
-      children: [
-        /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              ...gauge.getArcProps({
-                offset: offset - 5,
-                startAngle: 0,
-                endAngle: 360
-              }),
-              stroke: "gray",
-              fill: backgroundColor ?? "none",
-              strokeLinecap: "round",
-              strokeWidth: 5
-            }
-          ),
-          valueRanges.map((innerValue, i) => {
-            const valueToAngle = (value2) => {
-              const angleRange = END_ANGLE$5 - START_ANGLE$5;
-              const valueRange = domainMax - domainMin;
-              const angle2 = START_ANGLE$5 + (value2 - domainMin) / valueRange * angleRange;
-              return Math.round(angle2);
-            };
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  ...gauge.getArcProps({
-                    offset: -50,
-                    startAngle: i === 0 ? START_ANGLE$5 : valueToAngle(innerValue),
-                    endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$5 : valueToAngle(valueRanges[i + 1])
-                  }),
-                  stroke: getColor(innerValue),
-                  opacity: "0.8",
-                  fill: "none",
-                  strokeLinecap: "round",
-                  strokeWidth: 2
-                }
-              ),
-              /* @__PURE__ */ createElement(
-                "path",
-                {
-                  ...gauge.getArcProps({
-                    offset: -55,
-                    startAngle: i === 0 ? START_ANGLE$5 : valueToAngle(innerValue),
-                    endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$5 : valueToAngle(valueRanges[i + 1])
-                  }),
-                  key: `${innerValue}_${i}`,
-                  stroke: getColor(innerValue),
-                  opacity: "0.8",
-                  fill: "none",
-                  strokeLinecap: "round",
-                  strokeWidth: 2
-                }
-              )
-            ] }, `${innerValue}_${i}`);
-          })
-        ] }),
-        /* @__PURE__ */ jsx("g", { id: "ticks", children: gauge.ticks.map((angle2) => {
-          const angleToValue = (angle3) => {
-            const angleRange = END_ANGLE$5 - START_ANGLE$5;
-            const valueRange = domainMax - domainMin;
-            const value2 = domainMin + (angle3 - START_ANGLE$5) / angleRange * valueRange;
-            return Math.round(value2);
-          };
-          const asValue = angleToValue(angle2);
-          const showText = asValue % 10 === 0;
-          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "line",
-              {
-                stroke: "gray",
-                strokeWidth: showText ? 4 : 2,
-                ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
-              }
-            ),
-            showText && /* @__PURE__ */ jsx(
-              "text",
-              {
-                fill: "black",
-                ...gauge.getLabelProps({ angle: angle2, offset: 20 }),
-                style: { fontSize: `${scaleValuesSize ?? 30}px` },
-                children: asValue
-              }
-            )
-          ] }, `tick-group-${angle2}`);
-        }) }),
-        /* @__PURE__ */ jsxs("g", { id: "needle", children: [
-          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
-          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              fill: pointerColor,
-              opacity: "0.5",
-              ...needle.tip,
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "polyline",
-            {
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              },
-              fill: pointerColor,
-              opacity: "0.5",
-              points: needle.points
-            }
-          ),
-          /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            y: diameter / 2,
-            fill: currentValueColor,
-            style: { fontSize: `${currentValueFontSize ?? 30}px` },
-            children: value
-          }
-        ) })
-      ]
-    }
-  ) });
-};
-
-const START_ANGLE$4 = 45;
-const END_ANGLE$4 = 315;
-const Oxford = ({
-  backgroundColor,
-  colorRanges,
-  currentValue,
-  currentValueColor,
-  currentValueFontSize,
-  height,
-  maxValue,
-  minValue,
-  pointerColor,
-  scaleValuesSize,
-  valueRanges,
-  width
-}) => {
-  const value = currentValue;
-  const diameter = Math.min(height, width);
-  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
-  const domainMin = noNaN(minValue) ?? valueRanges[0];
-  const offset = 20;
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$4,
-    endAngle: END_ANGLE$4,
-    numTicks: 10 + 1,
-    diameter
-  });
-  const gauge2 = useGauge({
-    domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],
-    startAngle: START_ANGLE$4,
-    endAngle: END_ANGLE$4,
-    numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,
-    diameter
-  });
-  const needle = gauge.getNeedleProps({
-    value: 0,
-    baseRadius: 12,
-    tipRadius: 2
-  });
-  const angle = (END_ANGLE$4 - START_ANGLE$4) * value / (domainMax - domainMin);
-  function getColor(value2) {
-    const index = valueRanges.findIndex(
-      (range) => noNaN(value2) <= noNaN(range)
-    );
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return colorRanges[index];
-  }
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ...gauge.getSVGProps(),
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
-      children: [
-        /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              ...gauge.getArcProps({
-                offset: offset - 5,
-                startAngle: 0,
-                endAngle: 360
-              }),
-              stroke: "black",
-              opacity: "1",
-              fill: backgroundColor !== "" && backgroundColor !== void 0 ? tinycolor(backgroundColor).setAlpha(0.5).toPercentageRgbString() : "none",
-              strokeLinecap: "round",
-              strokeWidth: 5,
-              vectorEffect: "non-scaling-stroke"
-            }
-          ),
-          valueRanges.map((innerValue, i) => {
-            if (!valueRanges[i + 1]) {
-              return null;
-            }
-            const valueToAngle = (value2) => {
-              const angleRange = END_ANGLE$4 - START_ANGLE$4;
-              const valueRange = domainMax - domainMin;
-              const angle2 = START_ANGLE$4 + (value2 - domainMin) / valueRange * angleRange;
-              return Math.round(angle2);
-            };
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  ...gauge.getArcProps({
-                    offset: offset - 5,
-                    startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
-                    endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
-                  }),
-                  stroke: "black",
-                  opacity: "0.8",
-                  fill: "none",
-                  strokeLinecap: "square",
-                  strokeWidth: 5,
-                  vectorEffect: "non-scaling-stroke"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  ...gauge.getArcProps({
-                    offset: -20,
-                    startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
-                    endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
-                  }),
-                  stroke: getColor(innerValue),
-                  opacity: "0.1",
-                  fill: "none",
-                  strokeLinecap: "butt",
-                  strokeWidth: 75,
-                  vectorEffect: "non-scaling-stroke"
-                }
-              ),
-              /* @__PURE__ */ createElement(
-                "path",
-                {
-                  ...gauge.getArcProps({
-                    offset: -55,
-                    startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
-                    endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
-                  }),
-                  key: `${innerValue}_${i}`,
-                  stroke: getColor(innerValue) || "#999",
-                  opacity: "0.8",
-                  fill: "none",
-                  strokeLinecap: "butt",
-                  strokeWidth: 10,
-                  vectorEffect: "non-scaling-stroke"
-                }
-              )
-            ] }, `${innerValue}_${i}`);
-          })
-        ] }),
-        /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
-          gauge.ticks.map((angle2, i) => {
-            const angleToValue = (angle3) => {
-              const angleRange = END_ANGLE$4 - START_ANGLE$4;
-              const valueRange = domainMax - domainMin;
-              const value2 = domainMin + (angle3 - START_ANGLE$4) / angleRange * valueRange;
-              return Math.round(value2);
-            };
-            const asValue = angleToValue(angle2);
-            const showText = asValue % 10 === 0;
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "line",
-                {
-                  stroke: "gray",
-                  strokeWidth: showText ? 4 : 2,
-                  ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 }),
-                  vectorEffect: "non-scaling-stroke"
-                }
-              ),
-              showText && /* @__PURE__ */ jsx(
-                "text",
-                {
-                  fill: "black",
-                  ...gauge.getLabelProps({
-                    angle: angle2,
-                    offset: 20
-                  }),
-                  style: {
-                    fontSize: `${scaleValuesSize ?? 30}px`
-                  },
-                  children: asValue
-                }
-              )
-            ] }, `tick-group-${angle2}_ ${i}`);
-          }),
-          gauge2.ticks.map((angle2, i) => {
-            return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
-              "line",
-              {
-                stroke: "gray",
-                strokeWidth: 2,
-                ...gauge.getTickProps({
-                  angle: angle2,
-                  length: 3
-                }),
-                vectorEffect: "non-scaling-stroke"
-              }
-            ) }, `tick-group-${angle2}_ ${i}_2`);
-          })
-        ] }),
-        /* @__PURE__ */ jsxs("g", { id: "needle", children: [
-          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
-          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              fill: pointerColor,
-              opacity: "0.5",
-              ...needle.tip,
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "polyline",
-            {
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              },
-              fill: pointerColor,
-              opacity: "0.5",
-              points: needle.points
-            }
-          ),
-          /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            alignmentBaseline: "text-before-edge",
-            y: diameter / 5,
-            style: { fontSize: `${currentValueFontSize ?? 30}px` },
-            fill: currentValueColor,
-            children: value
-          }
-        ) })
-      ]
-    }
-  ) });
-};
-
-const START_ANGLE$3 = 0;
-const END_ANGLE$3 = 360;
-const Counter = ({
-  addBorder = false,
-  colorRanges,
-  currentValue,
-  valueRanges,
-  maxValue,
-  minValue,
-  currentValueFontSize
-}) => {
-  const [value, setValue] = useState(noNaN(currentValue) ?? 0);
-  const actualWidth = (currentValueFontSize ?? 80) * 3 * 0.8;
-  const diameter = actualWidth;
-  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
-  const domainMin = noNaN(minValue) ?? valueRanges[0];
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$3,
-    endAngle: END_ANGLE$3,
-    numTicks: 0,
-    diameter
-  });
-  function getColor(value2) {
-    const index = valueRanges.findIndex(
-      (range) => noNaN(value2) <= noNaN(range)
-    );
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return colorRanges[index - 1] ?? colorRanges[index];
-  }
-  const lastCurrentValue = useRef(0);
-  useEffect(() => {
-    const difference = noNaN(currentValue) - lastCurrentValue.current;
-    return animate(
-      500,
-      (progress) => {
-        const step = addBoundary(
-          difference * progress + lastCurrentValue.current,
-          domainMin,
-          domainMax
-        );
-        setValue(Math.round(step));
-      },
-      () => {
-        lastCurrentValue.current = noNaN(currentValue);
-      }
-    );
-  }, [noNaN(currentValue)]);
-  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, className: "widgetContainer__Counter", children: [
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        ...gauge.getSVGProps(),
-        height: actualWidth,
-        width: actualWidth,
-        viewBox: void 0,
-        children: /* @__PURE__ */ jsx("g", { id: "arcs", children: addBorder && `${value}`.length < 4 && /* @__PURE__ */ jsx(
-          "ellipse",
-          {
-            cx: actualWidth / 2,
-            cy: actualWidth / 2,
-            rx: actualWidth / 2 - 5,
-            ry: actualWidth / 2 - 5,
-            stroke: "gray",
-            opacity: "0.2",
-            fill: "none",
-            strokeLinecap: "round",
-            strokeWidth: 2
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        height: actualWidth,
-        width: actualWidth,
-        style: { position: "absolute", left: 0, top: 0 },
-        children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: actualWidth / 2,
-            y: actualWidth / 2 - 5,
-            textAnchor: "middle",
-            style: {
-              fontSize: `${currentValueFontSize ?? 80}px`,
-              transition: "fill 0.5s"
-            },
-            alignmentBaseline: "central",
-            fill: getColor(value),
-            children: value
-          }
-        )
-      }
-    )
-  ] });
-};
-
-const START_ANGLE$2 = 0;
-const END_ANGLE$2 = 360;
-const TLight = ({
-  addBorder = false,
-  colorRanges,
-  maxValue,
-  minValue,
-  currentValue,
-  height,
-  valueRanges,
-  width,
-  currentValueColor,
-  currentValueFontSize
-}) => {
-  const [value, setValue] = useState(noNaN(currentValue));
-  const diameter = Math.min(height, width);
-  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
-  const domainMin = noNaN(minValue) ?? valueRanges[0];
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$2,
-    endAngle: END_ANGLE$2,
-    numTicks: 0,
-    diameter
-  });
-  function getColor(value2) {
-    const index = valueRanges.findIndex((range) => value2 < range);
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return colorRanges[index - 1] ?? colorRanges[index];
-  }
-  const hasRendered = useRef(false);
-  const onRenderSvg = useCallback(
-    (el) => {
-      if (!el || hasRendered.current)
-        return;
-      hasRendered.current = true;
-      const svgElement = el;
-      const pathElement = el.querySelector("#TLight_arcs");
-      if (!(svgElement && pathElement)) {
-        return;
-      }
-      const pathBox = pathElement.getBoundingClientRect();
-      const svgBox = svgElement.getBoundingClientRect();
-      const pathX = pathBox.x - svgBox.x;
-      const pathY = pathBox.y - svgBox.y;
-      const viewBox = `${pathX - diameter / 2} ${pathY - diameter / 2} ${diameter} ${diameter}`;
-      svgElement.setAttribute("viewBox", viewBox);
-      svgElement.style.visibility = "visible";
-    },
-    [diameter]
-  );
-  const lastCurrentValue = useRef(0);
-  useEffect(() => {
-    const difference = noNaN(currentValue) - lastCurrentValue.current;
-    return animate(
-      500,
-      (progress) => {
-        const step = addBoundary(
-          difference * progress + lastCurrentValue.current,
-          domainMin,
-          domainMax
-        );
-        setValue(Math.round(step));
-      },
-      () => {
-        lastCurrentValue.current = noNaN(currentValue);
-      }
-    );
-  }, [noNaN(currentValue)]);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ...gauge.getSVGProps(),
-      style: { visibility: "hidden" },
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      id: "TLight_svg",
-      ref: onRenderSvg,
-      viewBox: `-${diameter / 2} -${diameter / 2} ${diameter} ${diameter}`,
-      children: [
-        /* @__PURE__ */ jsxs("g", { id: "TLight_arcs", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              ...gauge.getArcProps({
-                startAngle: START_ANGLE$2,
-                endAngle: END_ANGLE$2
-              }),
-              fill: getColor(value),
-              id: "TLight_path",
-              style: { transition: "fill 0.3s" }
-            }
-          ),
-          addBorder && /* @__PURE__ */ jsx(
-            "path",
-            {
-              ...gauge.getArcProps({
-                offset: -2.5,
-                startAngle: START_ANGLE$2,
-                endAngle: END_ANGLE$2
-              }),
-              stroke: "black",
-              fill: "transparent",
-              strokeLinecap: "round",
-              strokeWidth: 5,
-              id: "TLight_path"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            style: { fontSize: `${currentValueFontSize ?? 100}pt` },
-            alignmentBaseline: "central",
-            fill: currentValueColor,
-            children: value
-          }
-        ) })
-      ]
-    }
-  ) });
-};
-
-const colorGetter = (valueRanges, colorRanges, innerValue) => {
-  let color = "";
-  valueRanges.forEach((value, index) => {
-    if (value >= innerValue && valueRanges[index - 1] <= innerValue) {
-      color = colorRanges[index - 1];
-    }
-  });
-  return color;
-};
-function getColor(valueRanges, colorRanges, value) {
-  const index = valueRanges.findIndex((range) => noNaN(value) <= noNaN(range));
-  if (index === -1) {
-    return colorRanges[0];
-  }
-  return colorRanges[index];
-}
-function getInnerColor(valueRanges, colorRanges, value) {
-  const index = valueRanges.findIndex((range) => value < range);
-  if (index === -1) {
-    return colorRanges[0];
-  }
-  console.log({ colorRanges, index });
-  return colorRanges[index - 1] ?? colorRanges[index];
-}
-const valueToTickPercent = (domainMax, baseValue, value) => {
-  const range = domainMax - (baseValue ?? 0);
-  const percentage = 100 - (value - (baseValue ?? 0)) / range * 100;
-  return Math.round(percentage);
-};
-
-const valueToPercent = (domainMax, baseValue, value) => {
-  const range = domainMax - (baseValue ?? 0);
-  const percentage = 100 - (value - (baseValue ?? 0)) / range * 100;
-  const test = percentage * 69 / 100;
-  return Math.round(test);
-};
-
-const useCustomWidget = ({
-  maxValue,
-  minValue,
-  currentValue,
-  uId
-}) => {
-  const baseValue = minValue;
-  const domainMax = maxValue;
-  const [yDifference, setYDifference] = useState(0);
-  const svgRect = useRef({});
-  const pathRect = useRef({});
-  const onRenderRect = useCallback(
-    (el) => {
-      if (!el)
-        return;
-      const svgElement = el.closest("svg");
-      const pathElement = svgElement?.querySelector(`#path_${uId}`);
-      if (!svgElement)
-        throw new Error("No svg");
-      if (!pathElement)
-        throw new Error("No path");
-      const svgBox = svgElement.getBoundingClientRect();
-      const pathBox = pathElement.getBoundingClientRect();
-      const pathY2 = pathBox.y - svgBox.y;
-      svgRect.current = svgBox;
-      pathRect.current = pathBox;
-      setYDifference(pathY2);
-    },
-    [uId]
-  );
-  const pathX = noNaN(pathRect.current.x - svgRect.current.x);
-  const pathY = noNaN(pathRect.current.y - svgRect.current.y);
-  const pathWidth = noNaN(pathRect.current.width);
-  const pathHeight = noNaN(pathRect.current.height);
-  const viewBox = `${pathX} ${pathY} ${pathWidth} ${pathHeight}`;
-  const rectProps = {
-    y: noNaN(
-      valueToPercent(domainMax, baseValue, currentValue) * pathHeight / 100 + yDifference
-    ),
-    x: pathX,
-    width: pathWidth,
-    height: pathHeight,
-    style: {
-      visibility: "visible",
-      transition: "y 0.5s, fill 0.5s"
-    }
-  };
-  return {
-    rectRef: onRenderRect,
-    svgViewBox: viewBox,
-    rectProps,
-    pathX,
-    pathY,
-    pathRect,
-    svgRect
-  };
-};
-
-const Thermometer = ({
-  colorRanges,
-  maxValue,
-  minValue,
-  currentValue,
-  height,
-  valueRanges,
-  width,
-  currentValueFontSize
-}) => {
-  const value = currentValue;
-  const baseValue = noNaN(minValue) ?? valueRanges[0];
-  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
-  const pathDValue = `m 179.6875,717.73633 c -0.45013,0 -0.8125,0.36237 -0.8125,0.8125 l 0,8.46289 a 2.3125,2.3125 0 0 0 -1.5,2.16211 2.3125,2.3125 0 0 0 2.3125,2.3125 2.3125,2.3125 0 0 0 2.3125,-2.3125 2.3125,2.3125 0 0 0 -1.5,-2.16211 l 0,-8.46289 c 0,-0.45013 -0.36237,-0.8125 -0.8125,-0.8125 z`;
-  const uId = useMemo(() => uniqueId(), []);
-  const { rectProps, rectRef, svgViewBox, pathX, pathY } = useCustomWidget({
-    currentValue: value,
-    maxValue: domainMax,
-    minValue: baseValue,
-    uId
-  });
-  const boxValues = {
-    height: noNaN(Math.max(width, height) - Math.max(width, height) * 0.31),
-    width: noNaN(Math.max(width, height)),
-    x: pathX,
-    y: pathY
-  };
-  const tickArray = valueRanges.map((val, i) => {
-    return {
-      height: boxValues.height * (valueToTickPercent(domainMax, baseValue, val) / 100),
-      color: !valueRanges[i + 1] ? "black" : colorGetter(valueRanges, colorRanges, val),
-      value: val
-    };
-  });
-  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        height: Math.max(width, height),
-        width: Math.max(width, height),
-        id: `svg_${uId}`,
-        viewBox: svgViewBox,
-        style: { position: "relative", top: "10px" },
-        children: [
-          /* @__PURE__ */ jsx("clipPath", { id: "clipPath", children: /* @__PURE__ */ jsx("path", { d: pathDValue }) }),
-          /* @__PURE__ */ jsx("mask", { id: "myMask", children: /* @__PURE__ */ jsx("path", { d: pathDValue, id: "maskPath", fill: "white" }) }),
-          /* @__PURE__ */ jsx("path", { d: pathDValue, id: `path_${uId}`, fill: "white" }),
-          /* @__PURE__ */ jsx(
-            "rect",
-            {
-              fill: getInnerColor(valueRanges, colorRanges, value),
-              id: `rect_${uId}`,
-              mask: "url(#myMask)",
-              ref: rectRef,
-              ...rectProps
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: pathDValue,
-              id: "path",
-              fill: "none",
-              stroke: "white",
-              strokeWidth: 10,
-              clipPath: "url(#clipPath)",
-              vectorEffect: "non-scaling-stroke"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              clipPath: "url(#clipPath)",
-              d: pathDValue,
-              id: "path",
-              fill: "none",
-              stroke: "black",
-              strokeWidth: 5,
-              vectorEffect: "non-scaling-stroke"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        height: Math.max(width, height) + 10,
-        width: Math.max(width, height),
-        style: { position: "absolute", left: 0, top: 0 },
-        children: [
-          boxValues.x && /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-            "text",
-            {
-              x: Math.max(width, height) / 2,
-              y: Math.max(width, height) - Math.max(width, height) / 6 + 10,
-              style: {
-                fontSize: `${noNaN(currentValueFontSize) ?? 50}px`
-              },
-              textAnchor: "middle",
-              alignmentBaseline: "central",
-              vectorEffect: "non-scaling-stroke",
-              children: value
-            }
-          ) }),
-          tickArray.map((tick, i) => {
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: i === 0 ? Math.max(width, height) / 2 + 30 : Math.max(width, height) / 2 + 20,
-                  y: tick.height + 10,
-                  width: "15px",
-                  height: "3px",
-                  vectorEffect: "non-scaling-stroke",
-                  fill: getColor(valueRanges, colorRanges, tick.value)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "text",
-                {
-                  x: i === 0 ? Math.max(width, height) - Math.max(width, height) / 3 + 10 : Math.max(width, height) - Math.max(width, height) / 3,
-                  y: tickArray[i + 1] ? tick.height + 16 : tick.height + 1.5,
-                  textAnchor: "middle",
-                  alignmentBaseline: tickArray[i + 1] ? "auto" : "text-before-edge",
-                  children: tick.value
-                }
-              )
-            ] }, i);
-          })
-        ]
-      }
-    )
-  ] });
-};
-
-const START_ANGLE$1 = 90;
-const END_ANGLE$1 = 270;
-const Scale = ({
-  currentValue,
-  currentValueFontSize,
-  height,
-  maxValue,
-  minValue,
-  pointerColor,
-  scaleValuesSize,
-  valueRanges,
-  width
-}) => {
-  const allTicks = false;
-  const value = currentValue;
-  const diameter = Math.min(height, width);
-  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
-  const domainMin = noNaN(minValue) ?? valueRanges[0];
-  const offset = 20;
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$1,
-    endAngle: END_ANGLE$1,
-    numTicks: 10 + 1,
-    diameter
-  });
-  useGauge({
-    domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],
-    startAngle: START_ANGLE$1,
-    endAngle: END_ANGLE$1,
-    numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,
-    diameter
-  });
-  const needle = gauge.getNeedleProps({
-    value: 0,
-    baseRadius: 12,
-    tipRadius: 2
-  });
-  const angle = (END_ANGLE$1 - START_ANGLE$1) * value / (domainMax - domainMin);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ...gauge.getSVGProps(),
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter / 2 + offset * 2}`,
-      children: [
-        /* @__PURE__ */ jsx("g", { id: "arcs", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            ...gauge.getArcProps({
-              offset: offset - 5,
-              startAngle: 90,
-              endAngle: 270
-            }),
-            stroke: "gray",
-            opacity: "0.2",
-            fill: "none",
-            strokeLinecap: "round",
-            strokeWidth: 5
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
-          gauge.ticks.map((angle2) => {
-            const angleToValue = (angle3) => {
-              const angleRange = END_ANGLE$1 - START_ANGLE$1;
-              const valueRange = domainMax - domainMin;
-              const value2 = domainMin + (angle3 - START_ANGLE$1) / angleRange * valueRange;
-              return Math.round(value2);
-            };
-            const asValue = angleToValue(angle2);
-            const showText = asValue % 10 === 0;
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "line",
-                {
-                  stroke: "gray",
-                  strokeWidth: showText ? 4 : 2,
-                  ...gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })
-                }
-              ),
-              showText && /* @__PURE__ */ jsx(
-                "text",
-                {
-                  fill: "black",
-                  ...gauge.getLabelProps({ angle: angle2, offset: 20 }),
-                  style: { fontSize: `${scaleValuesSize ?? 30}px` },
-                  children: asValue
-                }
-              )
-            ] }, `tick-group-${angle2}`);
-          }),
-          allTicks 
-        ] }),
-        /* @__PURE__ */ jsxs("g", { id: "needle", children: [
-          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base, r: 20 }),
-          /* @__PURE__ */ jsx("circle", { fill: pointerColor, ...needle.base }),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              fill: pointerColor,
-              opacity: "0.5",
-              ...needle.tip,
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "polyline",
-            {
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              },
-              fill: pointerColor,
-              opacity: "0.5",
-              points: needle.points
-            }
-          ),
-          /* @__PURE__ */ jsx("circle", { fill: "white", ...needle.base, r: 4 })
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            style: { fontSize: `${currentValueFontSize ?? 30}px` },
-            y: -diameter / 4 + 20,
-            children: value
-          }
-        ) })
-      ]
-    }
-  ) });
-};
-
-const START_ANGLE = 0;
-const END_ANGLE = 360;
-const Ring = ({
-  colorRanges,
-  maxValue,
-  minValue,
-  currentValue,
-  height,
-  valueRanges,
-  ringEmptyColor,
-  ringWidth,
-  width,
-  currentValueColor,
-  currentValueFontSize
-}) => {
-  const [value, setValue] = useState(currentValue);
-  const diameter = Math.min(height, width);
-  const offset = 20;
-  const domainMax = noNaN(maxValue) ?? valueRanges[valueRanges.length - 1];
-  const domainMin = noNaN(minValue) ?? valueRanges[0];
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE,
-    endAngle: END_ANGLE,
-    numTicks: 0,
-    diameter
-  });
-  const lastCurrentValue = useRef(0);
-  useEffect(() => {
-    const difference = currentValue - lastCurrentValue.current;
-    return animate(
-      500,
-      (progress) => {
-        const step = addBoundary(
-          difference * progress + lastCurrentValue.current,
-          domainMin,
-          domainMax
-        );
-        setValue(Math.round(step));
-      },
-      () => {
-        lastCurrentValue.current = currentValue;
-      }
-    );
-  }, [currentValue]);
-  function getColor(value2) {
-    const index = valueRanges.findIndex((range) => value2 <= range);
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return colorRanges[index - 1] ?? colorRanges[index];
-  }
-  const valueToAngle = (value2) => {
-    const angleRange = 360;
-    const valueRange = domainMax - domainMin;
-    const angle = (value2 - domainMin) / valueRange * angleRange;
-    return Math.round(angle);
-  };
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      ...gauge.getSVGProps(),
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
-      children: [
-        /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              ...gauge.getArcProps({
-                offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
-                startAngle: START_ANGLE,
-                endAngle: END_ANGLE
-              }),
-              stroke: ringEmptyColor ?? "transparent",
-              fill: "none",
-              strokeLinecap: "round",
-              strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              ...gauge.getArcProps({
-                offset: offset - ((noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0),
-                startAngle: 180,
-                endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
-              }),
-              stroke: getColor(value),
-              opacity: "0.8",
-              fill: "none",
-              strokeLinecap: "square",
-              strokeWidth: (noNaN(ringWidth) ?? 0) < 0 ? (noNaN(ringWidth) ?? 0) * 100 : noNaN(ringWidth) ?? 0,
-              style: {
-                transition: "stroke 0.5s"
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            style: { fontSize: `${currentValueFontSize ?? 30}px` },
-            alignmentBaseline: "central",
-            color: currentValueColor,
-            children: value
-          }
-        ) })
-      ]
-    }
-  ) });
-};
-
-const WidgetComponent = ({
-  data,
-  type
-}) => {
-  const CurrentWidget = getIndex(
-    [SpeedMeter, Oxford, Counter, TLight, Thermometer, Scale, Ring],
-    [
-      type === "SpeedMeter",
-      type === "Oxford",
-      type === "Counter",
-      type === "TLight",
-      type === "Thermometer",
-      type === "Scale",
-      type === "Ring"
-    ],
-    0
-  );
-  const wigetTypeData = data;
-  const widgetData = wigetTypeData;
-  let valueRanges = [];
-  let colorRanges = [];
-  if (data.zones && arrayOrArray(data.zones.Zone).length > 0) {
-    valueRanges = Array.from(
-      new Set(
-        arrayOrArray(data.zones.Zone).map((zone) => {
-          return [Number(zone.minimum), Number(zone.maximum)];
-        }).flat().sort((a, b) => a - b)
-      )
-    );
-    colorRanges = arrayOrArray(data.zones.Zone).map((zone) => {
-      return tinycolor(zone.color).setAlpha(1 - (255 - zone.transparency) / 255).toPercentageRgbString();
-    }).flat();
-  } else {
-    valueRanges = widgetData.valueRanges;
-    colorRanges = widgetData.colorRanges;
-  }
-  widgetData.colorRanges = colorRanges;
-  widgetData.valueRanges = valueRanges;
-  return /* @__PURE__ */ jsx(CurrentWidget, { ...widgetData });
-};
-
-Chart.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  BarController,
-  BarElement,
-  PieController,
-  ArcElement,
-  LineController
-);
-const ChartComponent = (props = {
-  chartData: { datasets: [{ data: [{ x: 0, y: 0 }] }] },
-  type: "bar",
-  indexAxis: "x",
-  showLegend: true,
-  showValues: true,
-  showXAxisValues: true,
-  showYAxisValues: true,
-  showTable: true,
-  xAxisTitle: "",
-  yAxisTitle: "",
-  aspectRatio: 2.5
-}) => {
-  const { theme } = useThemeUI();
-  if (!theme.layout)
-    console.error("The layout property is missing in the current theme");
-  const data = useMemo(() => {
-    const charts = theme.layout?.charts ?? {};
-    return {
-      datasets: (props.type === "waterfall" ? arrayOrArray(props.chartData.datasets).map((dataset) => {
-        let sum = 0;
-        const newData = dataset.data.map((dataValue) => {
-          if (typeof dataValue === "number") {
-            const currentValue = sum;
-            sum += dataValue;
-            return [currentValue, sum];
-          } else {
-            return dataValue;
-          }
-        });
-        return {
-          ...dataset,
-          data: newData
-        };
-      }) : props.chartData.datasets).map((dataset, datasetIndex) => {
-        const isSingle = arrayOrArray(props.chartData.datasets).every(
-          (dataset2) => arrayOrArray(dataset2.data).length === 1
-        ) || props.type === "pie";
-        return {
-          ...dataset,
-          backgroundColor: dataset.backgroundColor.map((color, i) => {
-            let schemaArray = [];
-            if (typeof color === "string") {
-              if (color in charts) {
-                const currentBackgroundStylescheme = {
-                  schema: getValueByPath(
-                    theme.colors,
-                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    charts[color.toLowerCase()]?.schema
-                  )
-                };
-                if (typeof currentBackgroundStylescheme.schema === "object" && currentBackgroundStylescheme.schema) {
-                  if (isSingle) {
-                    if (props.type === "pie") {
-                      schemaArray = Object.values(
-                        currentBackgroundStylescheme.schema
-                      ).map((varColor) => {
-                        return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
-                      });
-                    } else {
-                      schemaArray = new Array(6).fill(
-                        Object.values(currentBackgroundStylescheme.schema)[datasetIndex % 6]
-                      ).map((varColor) => {
-                        return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
-                      });
-                    }
-                  } else {
-                    schemaArray = new Array(6).fill(
-                      Object.values(currentBackgroundStylescheme.schema).map(
-                        (varColor) => {
-                          return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
-                        }
-                      )[datasetIndex % 6]
-                    );
-                  }
-                }
-              } else {
-                schemaArray = [color, color, color, color, color, color];
-              }
-            } else {
-              return color[datasetIndex % color.length];
-            }
-            return schemaArray[i % 6];
-          }),
-          borderColor: dataset.borderColor.map(
-            (color, i) => {
-              let schemaBorderArray = [];
-              if (typeof color === "string") {
-                if (color in charts) {
-                  const currentBorderStylescheme = {
-                    schema: getValueByPath(
-                      theme.colors,
-                      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                      charts[color.toLowerCase()]?.schema
-                    )
-                  };
-                  if (typeof currentBorderStylescheme.schema === "object" && currentBorderStylescheme.schema) {
-                    schemaBorderArray = Object.values(
-                      currentBorderStylescheme.schema
-                    ).map((varColor) => {
-                      return window.getComputedStyle(document.documentElement).getPropertyValue(varColor.slice(4, -1));
-                    });
-                  }
-                } else {
-                  schemaBorderArray = [
-                    color,
-                    color,
-                    color,
-                    color,
-                    color,
-                    color
-                  ];
-                }
-              } else {
-                return color[datasetIndex % color.length];
-              }
-              return schemaBorderArray[i % 6];
-            }
-          )
-        };
-      }),
-      labels: props.chartData.labels
-    };
-  }, [
-    props.chartData.datasets,
-    props.chartData.labels,
-    props.type,
-    theme.colors,
-    theme.layout
-  ]);
-  const options = useMemo(() => {
-    return {
-      plugins: {
-        legend: { position: "right", display: props.showLegend },
-        tooltip: {
-          callbacks: {
-            label(tooltipItem) {
-              const XLabel = tooltipItem.dataset.label ?? "";
-              let YValue = tooltipItem.formattedValue;
-              if (isNaN(parseFloat(YValue))) {
-                const arrayValue = tooltipItem.raw;
-                const realValue = arrayValue[1] - arrayValue[0];
-                YValue = `${realValue}`;
-              }
-              let finalString = "";
-              if (props.showLegend || props.type === "pie") {
-                finalString += XLabel;
-                if (props.showValues) {
-                  finalString += ": " + YValue;
-                }
-              } else if (props.showValues) {
-                finalString += YValue;
-              }
-              return finalString;
-            },
-            title(tooltipItems) {
-              if (props.type !== "pie" && !props.showXAxisValues && props.indexAxis === "x" || props.type !== "pie" && !props.showYAxisValues && props.indexAxis === "y" || props.type === "pie" && !props.showLegend) {
-                return "";
-              }
-              return tooltipItems[0].label;
-            }
-          },
-          enabled: (props.indexAxis === "y" ? props.showYAxisValues : props.showXAxisValues) || props.showValues || props.showLegend
-        }
-      },
-      aspectRatio: props.aspectRatio,
-      indexAxis: props.indexAxis,
-      scales: {
-        x: {
-          display: props.type !== "pie",
-          title: {
-            display: props.showXAxisValues,
-            text: props.indexAxis === "y" ? props.yAxisTitle : props.xAxisTitle
-          },
-          ticks: {
-            display: !!props.showXAxisValues
-          },
-          grid: {
-            display: props.showTable
-          }
-        },
-        y: {
-          axis: props.indexAxis === "y" ? "x" : "y",
-          display: props.type !== "pie",
-          title: {
-            display: props.showYAxisValues,
-            text: props.indexAxis === "y" ? props.xAxisTitle : props.yAxisTitle
-          },
-          ticks: {
-            display: !!props.showYAxisValues
-          },
-          grid: {
-            display: props.showTable
-          }
-        }
-      }
-    };
-  }, [
-    props.aspectRatio,
-    props.indexAxis,
-    props.showLegend,
-    props.showTable,
-    props.showValues,
-    props.showXAxisValues,
-    props.showYAxisValues,
-    props.type,
-    props.xAxisTitle,
-    props.yAxisTitle
-  ]);
-  return /* @__PURE__ */ jsx(
-    Chart$1,
-    {
-      id: props.id ?? void 0,
-      className: props.chartId ?? "",
-      type: props.type === "waterfall" ? "bar" : props.type,
-      options,
-      data
-    }
-  );
-};
-
-function R(props) {
-  const [Plot, setPlot] = useState(null);
-  const handleChange = useCallback((s) => {
-    setPivotState(() => {
-      return s;
-    });
-  }, []);
-  const [pivotState, setPivotState] = useState({
-    ...props,
-    onChange: handleChange
-  });
-  const imported = useRef(false);
-  useEffect(() => {
-    if (imported.current)
-      return;
-    imported.current = true;
-    import('react-plotly.js').then((Plot2) => {
-      setPlot(createPlotlyRenderers(Plot2.default.default));
-    });
-  }, []);
-  if (!Plot)
-    return null;
-  return /* @__PURE__ */ jsx(
-    PivotTableUI,
-    {
-      renderers: Object.assign({}, TableRenderers, Plot),
-      ...pivotState
-    }
-  );
-}
-const PivotTableComponent = (props) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      onClick: (ev) => ev.stopPropagation(),
-      onMouseDown: (ev) => ev.stopPropagation(),
-      onDrag: (ev) => ev.stopPropagation(),
-      onDragStart: (ev) => ev.stopPropagation(),
-      children: /* @__PURE__ */ jsx(R, { ...props })
-    }
-  );
-};
-
-export { ChartComponent, PivotTableComponent, WidgetComponent };
+export { WidgetComponent } from './widgets/WidgetComponent.js';
+export { ChartComponent } from './charts/chartJsRenderer/ChartComponent.js';
 //# sourceMappingURL=index.js.map