@apia/charts 0.2.4 → 0.3.2

package/dist/index.js

@@ -31,7 +31,7 @@ function parseMargin(margin = {
 
 const ChartContext = createContext({});
 
-const LegendItem = ({
+const ColoredLegendItem = ({
   groupId,
   title,
   color,
@@ -56,10 +56,44 @@ const LegendItem = ({
   return /* @__PURE__ */ jsx(
     SimpleButton,
     {
-      variant: "icon-outline",
-      className: `${className != null ? className : ""} ${isHighlighted ? "highlight" : ""} legendItem`,
+      variant: "link",
+      className: `${className != null ? className : ""} ${isHighlighted ? "highlight" : ""} ${isAnyHighlighted && !isHighlighted ? "isBlurred" : ""} legendItem`,
       iconColor: color || "black",
       icon: color === "transparent" ? void 0 : icons.SquareFilled,
+      title,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: title
+    }
+  );
+};
+
+const NumberedLegendItem = ({
+  groupId,
+  title,
+  className,
+  isHighlighted,
+  isAnyHighlighted,
+  avoidEvent
+}) => {
+  const { chartId } = useContext(ChartContext);
+  const handleMouseEnter = useCallback(() => {
+    if (avoidEvent) {
+      return;
+    }
+    chartMethods(chartId, "highlight", groupId);
+  }, [avoidEvent, chartId, groupId]);
+  const handleMouseLeave = useCallback(() => {
+    if (avoidEvent) {
+      return;
+    }
+    chartMethods(chartId, "highlight", "");
+  }, [avoidEvent, chartId]);
+  return /* @__PURE__ */ jsx(
+    SimpleButton,
+    {
+      variant: "link",
+      className: `${className != null ? className : ""} ${isHighlighted ? "highlight" : ""} legendItem`,
       sx: {
         opacity: isAnyHighlighted && !isHighlighted ? "0.15" : "1"
       },
@@ -80,10 +114,15 @@ const [legendContainerMethods, , LegendContainer] = makeImperativeComponent()({
       setState({ highlightedBarGroup });
     }
   },
-  Component: ({ references, highlightedBarGroup, avoidEvent }) => {
-    return /* @__PURE__ */ jsx(Box, { className: `legendContainer`, children: references.map((data) => {
+  Component: ({
+    references,
+    highlightedBarGroup,
+    avoidEvent,
+    useNumbered
+  }) => {
+    return /* @__PURE__ */ jsx(Box, { className: `legendContainer`, children: !useNumbered ? references.map((data) => {
       return /* @__PURE__ */ jsx(
-        LegendItem,
+        ColoredLegendItem,
         {
           isHighlighted: data.title === highlightedBarGroup,
           isAnyHighlighted: highlightedBarGroup !== "",
@@ -94,6 +133,19 @@ const [legendContainerMethods, , LegendContainer] = makeImperativeComponent()({
         },
         data.title
       );
+    }) : references.map((data, i) => {
+      return /* @__PURE__ */ jsx(
+        NumberedLegendItem,
+        {
+          isHighlighted: data.title === highlightedBarGroup,
+          isAnyHighlighted: highlightedBarGroup !== "",
+          groupId: data.title,
+          position: `${i + 1}`,
+          title: data.title,
+          avoidEvent: avoidEvent != null ? avoidEvent : false
+        },
+        data.title
+      );
     }) });
   }
 });
@@ -133,8 +185,15 @@ const Bar$1 = ({
   useImperativeComponentEvents({
     highlight(barName) {
       if (barName.split(" - ").length === 1) {
-        setIsHighlighted(barName === bar.key);
-        setIsAnyHighlighted(barName !== bar.key && barName !== "");
+        if (arrayOrArray(chart.dataSets.data).length === 1) {
+          setIsHighlighted(barName === parsedData[barGroup.index].columnName);
+          setIsAnyHighlighted(
+            barName !== parsedData[barGroup.index].columnName && barName !== ""
+          );
+        } else {
+          setIsHighlighted(barName === bar.key);
+          setIsAnyHighlighted(barName !== bar.key && barName !== "");
+        }
       } else if (barName.split(" - ").length === 2) {
         setIsHighlighted(
           barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key
@@ -446,7 +505,7 @@ const HorizontalBars = ({
     }
     return xScaleLog;
   }, [isLogScale, xScaleLine, xScaleLog]);
-  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
+  const id = useMemo(() => `HorizontalBars${uniqueId()}`, []);
   useLayoutEffect(() => {
     document.querySelectorAll(
       `#${id} .__${chartId != null ? chartId : outerClassName}`
@@ -499,13 +558,49 @@ const HorizontalBars = ({
     });
     return returnColumnsArray;
   });
-  const colorReference = setsWithColor.map((column) => {
-    var _a2;
-    return {
-      color: (_a2 = column[0].color) != null ? _a2 : "",
-      title: column[0].columnName
-    };
-  });
+  const colorReference = arrayOrArray(chart.dataSets.data).map(
+    (data, index) => {
+      const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
+      const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(
+        styles ? styles.schema : [
+          "#7ad6f4",
+          "#45bdee",
+          "#28a7ea",
+          "#006cbb",
+          "#034698",
+          "#032f64"
+        ]
+      ).length > 0 ? getBarColor(
+        arrayOrArray(
+          styles ? styles.schema : [
+            "#7ad6f4",
+            "#45bdee",
+            "#28a7ea",
+            "#006cbb",
+            "#034698",
+            "#032f64"
+          ]
+        ),
+        index,
+        isSingle
+      ) : "";
+      return {
+        color: dataColor,
+        title: data.name
+      };
+    }
+  );
+  let numberReference = [];
+  if (colorReference.length === 1) {
+    numberReference = arrayOrArray(
+      arrayOrArray(chart.dataSets.data)[0].sets
+    ).map((data, index) => {
+      return {
+        color: `${index + 1}`,
+        title: data.key
+      };
+    });
+  }
   arrayOrArray(chart.dataSets.data).map((data) => {
     const returnArray = [];
     arrayOrArray(data.sets).forEach((set) => {
@@ -524,7 +619,7 @@ const HorizontalBars = ({
       {
         ref: boxRef,
         id,
-        className: `${outerClassName != null ? outerClassName : ""} ${chartId} ${chart.title}`,
+        className: `${outerClassName != null ? outerClassName : ""} ${chartId} ${chart.title} chartBox`,
         sx: React.useMemo(() => {
           return {
             [`.__${chartId != null ? chartId : outerClassName}`]: {
@@ -634,7 +729,20 @@ const HorizontalBars = ({
         )
       }
     ),
-    colorReference.length > 1 && /* @__PURE__ */ jsx(LegendContainer, { id: chartId, references: colorReference })
+    colorReference.length !== 0 && /* @__PURE__ */ jsx(
+      LegendContainer,
+      {
+        id: chartId,
+        references: (
+          // hideLegendsColors
+          //   ? colorReference.map((ref) => {
+          //       return { ...ref, color: 'transparent' };
+          //     })
+          colorReference.length === 1 && numberReference.length > 0 ? numberReference : colorReference
+        ),
+        useNumbered: colorReference.length === 1
+      }
+    )
   ] });
 };
 
@@ -959,7 +1067,7 @@ const PieChart = ({
       Box,
       {
         ref: boxRef,
-        className: `${className ? className : ""} ${chartId}`,
+        className: `${className ? className : ""} ${chartId} chartBox`,
         sx: { textAlign: "center", pb: spacing(5) },
         children: /* @__PURE__ */ jsx(
           "svg",
@@ -1073,8 +1181,15 @@ const Bar = ({
   useImperativeComponentEvents({
     highlight(barName) {
       if (barName.split(" - ").length === 1) {
-        setIsHighlighted(barName === bar.key);
-        setIsAnyHighlighted(barName !== bar.key && barName !== "");
+        if (arrayOrArray(chart.dataSets.data).length === 1) {
+          setIsHighlighted(barName === parsedData[barGroup.index].columnName);
+          setIsAnyHighlighted(
+            barName !== parsedData[barGroup.index].columnName && barName !== ""
+          );
+        } else {
+          setIsHighlighted(barName === bar.key);
+          setIsAnyHighlighted(barName !== bar.key && barName !== "");
+        }
       } else if (barName.split(" - ").length === 2) {
         setIsHighlighted(
           barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key
@@ -1220,7 +1335,7 @@ function adjustDimensions$2({
 }
 const getXValue = (d) => d.columnName;
 const VerticalBars = ({
-  margin = { top: 20, left: 100, bottom: 150, right: 20 },
+  margin = { top: 20, left: 100, bottom: 24, right: 0 },
   chart,
   className,
   chartId,
@@ -1270,11 +1385,19 @@ const VerticalBars = ({
   const xScale = scaleBand({
     range: [
       typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
-      innerWidth
+      chart.ratio.width
     ],
     domain: parsedData.map(getXValue),
     padding: 0.2
   });
+  const numericXScale = scaleBand({
+    range: [
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
+      chart.ratio.width
+    ],
+    domain: parsedData.map((_, i) => `${i + 1}`),
+    padding: 0.2
+  });
   const columnGroupScale = scaleBand({
     domain: columnNames,
     range: [0, xScale.bandwidth()]
@@ -1327,7 +1450,6 @@ const VerticalBars = ({
   useLayoutEffect(() => {
     document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
       const box = current.getBoundingClientRect();
-      console.log(box);
       if (box.width > 125) {
         current.style.width = "125px";
         current.style.overflow = "hidden";
@@ -1412,6 +1534,17 @@ const VerticalBars = ({
       };
     }
   );
+  let numberReference = [];
+  if (colorReference.length === 1) {
+    numberReference = arrayOrArray(
+      arrayOrArray(chart.dataSets.data)[0].sets
+    ).map((data, index) => {
+      return {
+        color: `${index + 1}`,
+        title: data.key
+      };
+    });
+  }
   arrayOrArray(chart.dataSets.data).map((data) => {
     const returnArray = [];
     arrayOrArray(data.sets).forEach((set) => {
@@ -1430,7 +1563,7 @@ const VerticalBars = ({
       {
         ref: boxRef,
         id,
-        className: `${className != null ? className : ""} ${chart.title}`,
+        className: `${className != null ? className : ""} ${chart.title} chartBox`,
         sx: {
           overflow: "hidden"
         },
@@ -1448,7 +1581,7 @@ const VerticalBars = ({
                   xScale,
                   yScale,
                   left: 0,
-                  width: innerWidth,
+                  width: chart.ratio.width,
                   height: innerHeight,
                   numTicksRows: 10,
                   numTicksColumns: 10,
@@ -1503,19 +1636,56 @@ const VerticalBars = ({
                 {
                   scale: yScale,
                   left: effectiveMargin.left,
-                  label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : ""
+                  label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
+                  tickComponent: (props) => {
+                    var _a2;
+                    let value = Number((_a2 = props.formattedValue) == null ? void 0 : _a2.replace(",", ""));
+                    let counter = -1;
+                    const units = ["k", "M", "G", "T", "P", "E", "Z", "Y", "R", "Q"];
+                    while (value >= 1e3) {
+                      value = value / 1e3;
+                      counter++;
+                    }
+                    let stringValue = `${value}`;
+                    if (stringValue.length > 3) {
+                      stringValue = stringValue.slice(0, 3);
+                    }
+                    if (stringValue.endsWith(".")) {
+                      stringValue = stringValue.replace(".", "");
+                    }
+                    const newValue = `${stringValue}${counter >= 0 ? units[counter] : ""}`;
+                    return /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        dx: props.dx,
+                        dy: props.dy,
+                        fill: props.fill,
+                        fontSize: props.fontSize,
+                        textAnchor: props.textAnchor,
+                        x: props.x,
+                        y: props.y,
+                        children: newValue
+                      }
+                    );
+                  }
                 }
               ),
               /* @__PURE__ */ jsx(
                 AxisBottom,
                 {
                   top: innerHeight,
-                  scale: xScale,
+                  scale: colorReference.length === 1 && numberReference.length > 0 ? numericXScale : xScale,
                   label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-                  tickLabelProps: {
-                    className: "tickLabel",
-                    textAnchor: "start"
-                  },
+                  tickLabelProps: (
+                    // colorReference.length === 1 && numberReference.length > 0
+                    //   ? {}
+                    //   : {
+                    //       className: 'tickLabel',
+                    //       textAnchor: 'start',
+                    //     }
+                    { display: "none" }
+                  ),
+                  tickLineProps: { display: "none" },
                   labelOffset: 50
                 }
               )
@@ -1524,7 +1694,7 @@ const VerticalBars = ({
         )
       }
     ),
-    colorReference.length > 1 && /* @__PURE__ */ jsx(
+    colorReference.length !== 0 && /* @__PURE__ */ jsx(
       LegendContainer,
       {
         id: chartId,
@@ -1533,8 +1703,9 @@ const VerticalBars = ({
           //   ? colorReference.map((ref) => {
           //       return { ...ref, color: 'transparent' };
           //     })
-          colorReference
-        )
+          colorReference.length === 1 && numberReference.length > 0 ? numberReference : colorReference
+        ),
+        useNumbered: colorReference.length === 1
       }
     )
   ] });
@@ -1832,7 +2003,7 @@ const LineChart = ({
     !allowZoom
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { id, ref: boxRef, children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Box, { id, ref: boxRef, className: "chartBox", children: /* @__PURE__ */ jsxs(
       "svg",
       {
         ref: elementRef,
@@ -2277,91 +2448,99 @@ const WaterfallBars = (_a) => {
         setCurrent: setCurrentPie
       }
     ) }),
-    /* @__PURE__ */ jsx(Box, { id, className, ref: boxRef, children: /* @__PURE__ */ jsx(
-      "svg",
+    /* @__PURE__ */ jsx(
+      Box,
       {
-        height: chart.ratio.height,
-        width: chart.ratio.width,
-        ref: elementRef,
-        children: /* @__PURE__ */ jsxs(Group, { left: effectiveMargin.left, top: effectiveMargin.top, children: [
-          /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: innerWidth, strokeDasharray: "5" }),
-          steps.map((step, index) => {
-            var _a3;
-            const x = xScale(step.x);
-            const y = yScale(Math.max(step.start, step.end));
-            if (x == null || y == null) {
-              return null;
-            }
-            const barHeight = Math.abs(yScale(step.start) - yScale(step.end));
-            const isLast = index === steps.length - 1;
-            const linePadding = 2;
-            const x1 = x + xScale.bandwidth() + linePadding;
-            const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;
-            const lineY = step.end < step.start ? y + barHeight : y;
-            const labelOffset = 10;
-            const labelY = yScale(step.end) + (step.y < 0 ? labelOffset : -labelOffset);
-            let currentYValue = 0;
-            steps.filter((_, i) => {
-              var _a4;
-              if (((_a4 = chart.showTotal) != null ? _a4 : true) && !steps[i + 1]) {
-                return false;
-              }
-              return i <= index;
-            }).forEach((step2) => {
-              currentYValue += Number(step2.y);
-            });
-            return /* @__PURE__ */ jsx(
-              WaterfallBar,
-              {
-                chart,
-                columnName: chartNames[currentPie],
-                fill: step.color,
-                height: barHeight,
-                isLast,
-                lineY,
-                step,
-                stroke: waterfallColors.stepConnector,
-                strokeDashArray: 2,
-                textContent: ((_a3 = chart.showTotal) != null ? _a3 : true) ? step.y : currentYValue,
-                textX: x + xScale.bandwidth() / 2,
-                textY: labelY + 5,
-                width: xScale.bandwidth(),
-                x,
-                y,
-                x1,
-                x2
-              },
-              index
-            );
-          }),
-          /* @__PURE__ */ jsx(
-            AxisLeft,
-            {
-              label: "",
-              scale: yScale,
-              hideAxisLine: true,
-              hideTicks: true,
-              tickLabelProps: () => ({
-                textAnchor: "end",
-                verticalAnchor: "middle"
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AxisBottom,
-            {
-              scale: xScale,
-              top: innerHeight,
-              tickLabelProps: () => ({
-                textAnchor: "middle",
-                verticalAnchor: "middle",
-                className: "tickLabel"
-              })
-            }
-          )
-        ] })
+        id,
+        className: `${className ? className : ""} chartBox`,
+        ref: boxRef,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            height: chart.ratio.height,
+            width: chart.ratio.width,
+            ref: elementRef,
+            children: /* @__PURE__ */ jsxs(Group, { left: effectiveMargin.left, top: effectiveMargin.top, children: [
+              /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: innerWidth, strokeDasharray: "5" }),
+              steps.map((step, index) => {
+                var _a3;
+                const x = xScale(step.x);
+                const y = yScale(Math.max(step.start, step.end));
+                if (x == null || y == null) {
+                  return null;
+                }
+                const barHeight = Math.abs(yScale(step.start) - yScale(step.end));
+                const isLast = index === steps.length - 1;
+                const linePadding = 2;
+                const x1 = x + xScale.bandwidth() + linePadding;
+                const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;
+                const lineY = step.end < step.start ? y + barHeight : y;
+                const labelOffset = 10;
+                const labelY = yScale(step.end) + (step.y < 0 ? labelOffset : -labelOffset);
+                let currentYValue = 0;
+                steps.filter((_, i) => {
+                  var _a4;
+                  if (((_a4 = chart.showTotal) != null ? _a4 : true) && !steps[i + 1]) {
+                    return false;
+                  }
+                  return i <= index;
+                }).forEach((step2) => {
+                  currentYValue += Number(step2.y);
+                });
+                return /* @__PURE__ */ jsx(
+                  WaterfallBar,
+                  {
+                    chart,
+                    columnName: chartNames[currentPie],
+                    fill: step.color,
+                    height: barHeight,
+                    isLast,
+                    lineY,
+                    step,
+                    stroke: waterfallColors.stepConnector,
+                    strokeDashArray: 2,
+                    textContent: ((_a3 = chart.showTotal) != null ? _a3 : true) ? step.y : currentYValue,
+                    textX: x + xScale.bandwidth() / 2,
+                    textY: labelY + 5,
+                    width: xScale.bandwidth(),
+                    x,
+                    y,
+                    x1,
+                    x2
+                  },
+                  index
+                );
+              }),
+              /* @__PURE__ */ jsx(
+                AxisLeft,
+                {
+                  label: "",
+                  scale: yScale,
+                  hideAxisLine: true,
+                  hideTicks: true,
+                  tickLabelProps: () => ({
+                    textAnchor: "end",
+                    verticalAnchor: "middle"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AxisBottom,
+                {
+                  scale: xScale,
+                  top: innerHeight,
+                  tickLabelProps: () => ({
+                    textAnchor: "middle",
+                    verticalAnchor: "middle",
+                    className: "tickLabel"
+                  })
+                }
+              )
+            ] })
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx(
       LegendContainer,
       {
@@ -2466,19 +2645,44 @@ const [, chartMethods, ChartRenderer] = makeImperativeComponent()({
           lineHeight: "1em"
         }
       },
+      ".chartBox": {
+        position: "sticky",
+        top: "0",
+        background: "white",
+        zIndex: "1"
+      },
       ".legendContainer": {
         display: "flex",
-        flexDirection: "row",
-        gap: spacing(3),
-        flexWrap: "wrap"
+        flexDirection: "column",
+        gap: spacing(2),
+        overflow: "hidden",
+        alignItems: "start",
+        button: () => ({
+          justifyContent: "start",
+          textAlign: "start",
+          width: "100%",
+          textDecoration: "none",
+          svg: {
+            paddingLeft: spacing(1)
+          }
+        })
       },
       ".chart__combo__wrapper": {
         position: "absolute"
       },
-      ".legendItem .button__content": {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        wordWrap: "normal"
+      ".legendItem": {
+        transition: "opacity 200ms",
+        "&.isBlurred": {
+          opacity: "0.15"
+        },
+        ".button__content": {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          wordWrap: "normal",
+          display: "block",
+          whiteSpace: "nowrap",
+          p: spacing(1)
+        }
       }
     },
     // eslint-disable-next-line react/display-name
@@ -2528,6 +2732,50 @@ const [, chartMethods, ChartRenderer] = makeImperativeComponent()({
   )
 });
 
+const EmptyGrid = ({ width }) => {
+  const xScale = scaleBand({
+    range: [0, width != null ? width : 400],
+    domain: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
+    padding: 0.2
+  });
+  const yScale = scaleBand({
+    range: [0, 400],
+    domain: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
+    padding: 0.2
+  });
+  return /* @__PURE__ */ jsxs("svg", { height: 400, width: width != null ? width : 400, children: [
+    /* @__PURE__ */ jsx(
+      Grid.Grid,
+      {
+        height: 400,
+        width: width != null ? width : 400,
+        numTicksRows: 10,
+        numTicksColumns: 10,
+        xScale,
+        yScale
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AxisLeft,
+      {
+        scale: yScale,
+        left: 20,
+        hideTicks: true,
+        tickLabelProps: { display: "none" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AxisBottom,
+      {
+        scale: xScale,
+        top: 380,
+        hideTicks: true,
+        tickLabelProps: { display: "none" }
+      }
+    )
+  ] });
+};
+
 var __defProp$7 = Object.defineProperty;
 var __defProps$5 = Object.defineProperties;
 var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
@@ -3303,7 +3551,7 @@ const Counter = ({
   panelId
 }) => {
   var _a, _b;
-  const [value, setValue] = useState(currentValue);
+  const [value, setValue] = useState(currentValue != null ? currentValue : 0);
   const diameter = Math.min(height, width);
   const offset = 20;
   const domainMax = (_a = noNaN(maxValue)) != null ? _a : valueRanges[valueRanges.length - 1];
@@ -3353,7 +3601,7 @@ const Counter = ({
     /* @__PURE__ */ jsx(
       "svg",
       __spreadProps$1(__spreadValues$3({}, gauge.getSVGProps()), {
-        height: Math.max(width, height),
+        height,
         width: actualWidth,
         viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
         children: /* @__PURE__ */ jsx("g", { id: "arcs", children: addBorder && /* @__PURE__ */ jsx(
@@ -3375,14 +3623,14 @@ const Counter = ({
     /* @__PURE__ */ jsx(
       "svg",
       {
-        height: Math.max(width, height),
+        height,
         width: actualWidth,
         style: { position: "absolute", left: 0, top: 0 },
         children: /* @__PURE__ */ jsx(
           "text",
           {
             x: actualWidth / 2,
-            y: Math.max(width, height) / 2,
+            y: height / 2,
             textAnchor: "middle",
             style: {
               fontSize: `${currentValueFontSize != null ? currentValueFontSize : 30}px`,
@@ -3846,4 +4094,4 @@ const WidgetContainer = ({ data }) => {
   ) });
 };
 
-export { ChartRenderer, WidgetContainer };
+export { ChartRenderer, EmptyGrid, WidgetContainer };