@apia/charts 0.3.6 → 1.0.0

package/dist/index.js

@@ -10,9 +10,8 @@ import { BarGroupHorizontal, BarGroup, LinePath, Line } from '@visx/shape';
 import { AxisLeft, AxisBottom } from '@visx/axis';
 import tinycolor from 'tinycolor2';
 import { localPoint } from '@visx/event';
-import { SimpleButton, useTooltip } from '@apia/components';
+import { ApiaUtil, SimpleButton } from '@apia/components';
 import { icons } from '@apia/icons';
-import { ApiaUtil } from '@apia/objects';
 import Pie from '@visx/shape/lib/shapes/Pie';
 import { min, max, extent } from 'd3-array';
 import * as allCurves from '@visx/curve';
@@ -49,7 +48,7 @@ const ColoredLegendItem = ({
     if (avoidEvent) {
       return;
     }
-    new ApiaUtil().tooltips.close();
+    new ApiaUtil().tooltips.closeAll();
     chartMethods(chartId, "highlight", "");
   }, [avoidEvent, chartId]);
   return /* @__PURE__ */ jsx(
@@ -59,7 +58,6 @@ const ColoredLegendItem = ({
       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
@@ -86,18 +84,17 @@ const NumberedLegendItem = ({
     if (avoidEvent) {
       return;
     }
-    new ApiaUtil().tooltips.close();
+    new ApiaUtil().tooltips.closeAll();
     chartMethods(chartId, "highlight", "");
   }, [avoidEvent, chartId]);
   return /* @__PURE__ */ jsx(
     SimpleButton,
     {
       variant: "link",
-      className: `${className != null ? className : ""} ${isHighlighted ? "highlight" : ""} legendItem`,
+      className: `${className != null ? className : ""} ${isHighlighted ? "highlight" : ""} ${isAnyHighlighted && !isHighlighted ? "isBlurred" : ""} legendItem`,
       sx: {
         opacity: isAnyHighlighted && !isHighlighted ? "0.15" : "1"
       },
-      title,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: title
@@ -111,6 +108,7 @@ const [legendContainerMethods, , LegendContainer] = makeImperativeComponent()({
   },
   methods: {
     highlight(setState, highlightedBarGroup) {
+      console.log(highlightedBarGroup);
       setState({ highlightedBarGroup });
     }
   },
@@ -210,6 +208,9 @@ const Bar$1 = ({
         } else {
           setIsHighlighted(barName === bar.key);
           setIsAnyHighlighted(barName !== bar.key && barName !== "");
+          const currentBar = document.querySelector(
+            `.${parsedData[barGroup.index].columnName}__${bar.key}`
+          );
           if (barName === bar.key && columnName === parsedData[barGroup.index].columnName) {
             new ApiaUtil().tooltips.open({
               children: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -228,6 +229,28 @@ const Bar$1 = ({
               attachToElement: () => ref.current,
               attachToElementAnchorPoint: "center"
             });
+          } else if (barName === bar.key && currentBar && columnName === "") {
+            new ApiaUtil().tooltips.open({
+              children: parsedData.map((dat, i) => {
+                return /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        color: currentBarColor
+                      },
+                      children: /* @__PURE__ */ jsx("strong", { children: dat.columnName })
+                    }
+                  ),
+                  chart.showValues && /* @__PURE__ */ jsx("div", { children: dat[barName] }),
+                  /* @__PURE__ */ jsx("div", { children: Object.keys(dat).find(
+                    (key) => dat[key] === dat[barName]
+                  ) }),
+                  parsedData[i + 1] && /* @__PURE__ */ jsx("hr", {})
+                ] }, `${dat.columnName}_${dat[barName]}`);
+              }),
+              attachToMousePosition: true
+            });
           }
         }
       } else if (barName.split(" - ").length === 2) {
@@ -260,94 +283,79 @@ const Bar$1 = ({
     }
   });
   const { chartId } = useContext(ChartContext);
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: bar.x + 5,
-        y: bar.y - 5,
-        width: bar.width,
-        height: bar.height,
-        textAnchor: "start",
-        style: {
-          display: isHighlighted ? "block" : "none",
-          opacity: isHighlighted ? 1 : 0,
-          transition: "opacity 500ms"
-        },
-        children: bar.value
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        as: "rect",
-        className: "chart__barRect",
-        ref,
-        sx: useMemo(
-          () => ({
-            fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
-            "&:hover": {
-              fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`
-            },
-            transition: "fill 500ms, opacity 500ms",
-            x: bar.x,
-            y: bar.y,
-            width: bar.width - effectiveMargin.left,
-            opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
-            height: bar.height > 0 ? bar.height : 0
-          }),
-          [
-            bar.height,
-            bar.width,
-            bar.x,
-            bar.y,
-            currentBarColor,
-            effectiveMargin.left,
-            isAnyHighlighted,
-            isHighlighted
-          ]
-        ),
-        onMouseEnter: (ev) => {
-          var _a2, _b, _c;
-          if (!isSingle) {
-            legendContainerMethods.highlight(chartId, bar.key);
-          }
-          chartMethods(
+  return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "rect",
+      className: `chart__barRect ${parsedData[barGroup.index].columnName}__${bar.key}`,
+      ref,
+      sx: useMemo(
+        () => ({
+          fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
+          "&:hover": {
+            fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`
+          },
+          transition: "fill 500ms, opacity 500ms",
+          x: bar.x,
+          y: bar.y,
+          width: bar.width - effectiveMargin.left,
+          opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
+          height: bar.height > 0 ? bar.height : 0
+        }),
+        [
+          bar.height,
+          bar.width,
+          bar.x,
+          bar.y,
+          currentBarColor,
+          effectiveMargin.left,
+          isAnyHighlighted,
+          isHighlighted
+        ]
+      ),
+      onMouseEnter: (ev) => {
+        var _a2, _b, _c;
+        if (!isSingle) {
+          legendContainerMethods.highlight(chartId, bar.key);
+        } else {
+          legendContainerMethods.highlight(
             chartId,
-            "highlight",
-            `${bar.key}_$_${parsedData[barGroup.index].columnName}`
+            parsedData[barGroup.index].columnName
           );
-          (_a2 = ev.target.classList) == null ? void 0 : _a2.add("over");
-          const point = {
-            x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
-            y: (_c = localPoint(ev)) == null ? void 0 : _c.y
-          };
-          if (!point || !chart.showValues)
-            return;
-        },
-        onMouseLeave: (ev) => {
-          var _a2;
-          if (!isSingle) {
-            legendContainerMethods.highlight(chartId, "");
-          }
-          chartMethods(chartId, "highlight", "");
-          (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
-        },
-        children: /* @__PURE__ */ jsx(
-          "animate",
-          {
-            attributeName: "width",
-            from: 0,
-            to: bar.width,
-            dur: "0.5s",
-            calcMode: "paced",
-            keySplines: "0.5 0 0.5 1;",
-            keyTimes: "0; 1"
-          }
-        )
-      }
-    )
-  ] });
+        }
+        chartMethods(
+          chartId,
+          "highlight",
+          `${bar.key}_$_${parsedData[barGroup.index].columnName}`
+        );
+        (_a2 = ev.target.classList) == null ? void 0 : _a2.add("over");
+        const point = {
+          x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
+          y: (_c = localPoint(ev)) == null ? void 0 : _c.y
+        };
+        if (!point || !chart.showValues)
+          return;
+      },
+      onMouseLeave: (ev) => {
+        var _a2;
+        legendContainerMethods.highlight(chartId, "");
+        chartMethods(chartId, "highlight", "");
+        (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
+      },
+      children: /* @__PURE__ */ jsx(
+        "animate",
+        {
+          attributeName: "width",
+          from: 0,
+          to: bar.width,
+          dur: "0.5s",
+          calcMode: "paced",
+          keySplines: "0.5 0 0.5 1;",
+          keyTimes: "0; 1"
+        }
+      )
+    }
+  ) });
 };
 
 function getBarColor(colors, index, alwaysDiffer = false) {
@@ -363,7 +371,7 @@ function getBarColor(colors, index, alwaysDiffer = false) {
         innerIndex = index / module;
         count++;
       }
-      barColor = tinycolor(colors[index % module]).desaturate(count * 5).toHex();
+      barColor = tinycolor(colors[index % module]).desaturate(count * 5).toHex().startsWith("#") ? tinycolor(colors[index % module]).desaturate(count * 5).toHex() : `#${tinycolor(colors[index % module]).desaturate(count * 5).toHex()}`;
     }
   } else {
     if (colors[index]) {
@@ -675,12 +683,12 @@ const HorizontalBars = ({
               transform: "rotate(45deg)",
               transformOrigin: "attr(x) 18px"
             },
-            overflow: "auto",
+            overflow: "hidden",
             position: "relative",
-            height: `${chart.ratio.height}px`,
-            width: `${chart.ratio.width}px`
+            height: `${chart.ratio.height}px`
+            // width: `${chart.ratio.width}px`,
           };
-        }, [chart.ratio.height, chart.ratio.width, chartId, outerClassName]),
+        }, [chart.ratio.height, chartId, outerClassName]),
         children: /* @__PURE__ */ jsxs(
           "svg",
           {
@@ -768,9 +776,8 @@ const HorizontalBars = ({
                   top: innerHeight,
                   scale: xScale,
                   label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-                  tickLabelProps: {
-                    className: "tickLabel"
-                  },
+                  tickLabelProps: { display: "none" },
+                  tickLineProps: { display: "none" },
                   labelOffset: 30
                 }
               )
@@ -1185,7 +1192,7 @@ const PieChart = ({
                     return pie.path(arc);
                   });
                   const result = pie.arcs.map((arc) => {
-                    var _a2, _b2;
+                    var _a2, _b2, _c2, _d2, _e;
                     const name = arc.data;
                     const arcPath = pie.path(arc);
                     return /* @__PURE__ */ jsx(
@@ -1195,9 +1202,13 @@ const PieChart = ({
                         chartId: id,
                         arcPath,
                         chart,
-                        actualColor: (_b2 = (_a2 = colorReference.find((color) => {
+                        actualColor: ((_a2 = colorReference.find((color) => {
                           return color.title === name.key;
-                        })) == null ? void 0 : _a2.color) != null ? _b2 : ""
+                        })) == null ? void 0 : _a2.color.startsWith("#")) ? (_c2 = (_b2 = colorReference.find((color) => {
+                          return color.title === name.key;
+                        })) == null ? void 0 : _b2.color) != null ? _c2 : "" : `#${(_e = (_d2 = colorReference.find((color) => {
+                          return color.title === name.key;
+                        })) == null ? void 0 : _d2.color) != null ? _e : ""}`
                       },
                       `${name.key}_${name.value}`
                     );
@@ -1269,7 +1280,7 @@ const Bar = ({
           setIsAnyHighlighted(
             barName !== parsedData[barGroup.index].columnName && barName !== ""
           );
-          if (barName === parsedData[barGroup.index].columnName && columnName === parsedData[barGroup.index].columnName) {
+          if (barName === parsedData[barGroup.index].columnName || columnName === parsedData[barGroup.index].columnName) {
             new ApiaUtil().tooltips.open({
               children: /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
@@ -1291,6 +1302,9 @@ const Bar = ({
         } else {
           setIsHighlighted(barName === bar.key);
           setIsAnyHighlighted(barName !== bar.key && barName !== "");
+          const currentBar = document.querySelector(
+            `.${parsedData[barGroup.index].columnName}__${bar.key}`
+          );
           if (barName === bar.key && columnName === parsedData[barGroup.index].columnName) {
             new ApiaUtil().tooltips.open({
               children: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1309,6 +1323,28 @@ const Bar = ({
               attachToElement: () => ref.current,
               attachToElementAnchorPoint: "center"
             });
+          } else if (barName === bar.key && currentBar && columnName === "") {
+            new ApiaUtil().tooltips.open({
+              children: parsedData.map((dat, i) => {
+                return /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        color: currentBarColor
+                      },
+                      children: /* @__PURE__ */ jsx("strong", { children: dat.columnName })
+                    }
+                  ),
+                  chart.showValues && /* @__PURE__ */ jsx("div", { children: dat[barName] }),
+                  /* @__PURE__ */ jsx("div", { children: Object.keys(dat).find(
+                    (key) => dat[key] === dat[barName]
+                  ) }),
+                  parsedData[i + 1] && /* @__PURE__ */ jsx("hr", {})
+                ] }, `${dat.columnName}_${dat[barName]}`);
+              }),
+              attachToMousePosition: true
+            });
           }
         }
       } else if (barName.split(" - ").length === 2) {
@@ -1341,107 +1377,93 @@ const Bar = ({
     }
   });
   const { chartId } = useContext(ChartContext);
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: bar.x + bar.width / 2,
-        y: bar.y - 5,
-        width: bar.width,
-        height: bar.height,
-        textAnchor: "middle",
-        style: {
-          display: isHighlighted ? "block" : "none",
-          opacity: isHighlighted ? 1 : 0,
-          transition: "opacity 500ms"
-        },
-        children: bar.value
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        as: "rect",
-        className: "chart__barRect",
-        ref,
-        sx: useMemo(
-          () => ({
-            fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
-            "&:hover": {
-              fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`
-            },
-            transition: "fill 500ms, opacity 500ms",
-            x: bar.x,
-            y: bar.y,
-            width: bar.width,
-            opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
-            height: bar.height > 0 ? bar.height : 0
-          }),
-          [
-            bar.height,
-            bar.width,
-            bar.x,
-            bar.y,
-            currentBarColor,
-            isAnyHighlighted,
-            isHighlighted
-          ]
-        ),
-        onMouseEnter: (ev) => {
-          var _a2, _b, _c;
-          if (!isSingle) {
-            legendContainerMethods.highlight(chartId, bar.key);
-          }
-          chartMethods(
+  return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "rect",
+      className: `chart__barRect ${parsedData[barGroup.index].columnName}__${bar.key}`,
+      ref,
+      sx: useMemo(
+        () => ({
+          fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
+          "&:hover": {
+            fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`
+          },
+          transition: "fill 500ms, opacity 500ms",
+          x: bar.x,
+          y: bar.y,
+          width: bar.width,
+          opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
+          height: bar.height > 0 ? bar.height : 0
+        }),
+        [
+          bar.height,
+          bar.width,
+          bar.x,
+          bar.y,
+          currentBarColor,
+          isAnyHighlighted,
+          isHighlighted
+        ]
+      ),
+      onMouseEnter: (ev) => {
+        var _a2, _b, _c;
+        console.log(bar.key, parsedData[barGroup.index].columnName);
+        if (!isSingle) {
+          legendContainerMethods.highlight(chartId, bar.key);
+        } else {
+          legendContainerMethods.highlight(
             chartId,
-            "highlight",
-            `${bar.key}_$_${parsedData[barGroup.index].columnName}`
+            parsedData[barGroup.index].columnName
           );
-          (_a2 = ev.target.classList) == null ? void 0 : _a2.add("over");
-          const point = {
-            x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
-            y: (_c = localPoint(ev)) == null ? void 0 : _c.y
-          };
-          if (!point || !chart.showValues)
-            return;
-        },
-        onMouseLeave: (ev) => {
-          var _a2;
-          if (!isSingle) {
-            legendContainerMethods.highlight(chartId, "");
+        }
+        chartMethods(
+          chartId,
+          "highlight",
+          `${bar.key}_$_${parsedData[barGroup.index].columnName}`
+        );
+        (_a2 = ev.target.classList) == null ? void 0 : _a2.add("over");
+        const point = {
+          x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
+          y: (_c = localPoint(ev)) == null ? void 0 : _c.y
+        };
+        if (!point || !chart.showValues)
+          return;
+      },
+      onMouseLeave: (ev) => {
+        var _a2;
+        legendContainerMethods.highlight(chartId, "");
+        chartMethods(chartId, "highlight", "");
+        (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "height",
+            from: 0,
+            to: bar.height,
+            dur: "0.5s",
+            calcMode: "paced",
+            keySplines: "0.5 0 0.5 1;",
+            keyTimes: "0; 1"
           }
-          chartMethods(chartId, "highlight", "");
-          (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "animate",
-            {
-              attributeName: "height",
-              from: 0,
-              to: bar.height,
-              dur: "0.5s",
-              calcMode: "paced",
-              keySplines: "0.5 0 0.5 1;",
-              keyTimes: "0; 1"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "animate",
-            {
-              attributeName: "y",
-              from: bar.y + bar.height,
-              to: bar.y,
-              dur: "0.5s",
-              calcMode: "paced",
-              keySplines: "0.5 0 0.5 1;",
-              keyTimes: "0; 1"
-            }
-          )
-        ]
-      }
-    )
-  ] });
+        ),
+        /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "y",
+            from: bar.y + bar.height,
+            to: bar.y,
+            dur: "0.5s",
+            calcMode: "paced",
+            keySplines: "0.5 0 0.5 1;",
+            keyTimes: "0; 1"
+          }
+        )
+      ]
+    }
+  ) });
 };
 
 var __defProp$b = Object.defineProperty;
@@ -1486,7 +1508,7 @@ const VerticalBars = ({
 }) => {
   var _a;
   const effectiveMargin = parseMargin(margin);
-  if (!chart.showAxisYTitle) {
+  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
     effectiveMargin.left = 50;
   }
   let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
@@ -1792,7 +1814,7 @@ const VerticalBars = ({
                       stringValue = stringValue.replace(".", "");
                     }
                     const newValue = `${stringValue}${counter >= 0 ? units[counter] : ""}`;
-                    return /* @__PURE__ */ jsx(
+                    return /* @__PURE__ */ jsx(Fragment, { children: chart.showAxisYTitle && /* @__PURE__ */ jsx(
                       "text",
                       {
                         dx: props.dx,
@@ -1804,7 +1826,7 @@ const VerticalBars = ({
                         y: props.y,
                         children: newValue
                       }
-                    );
+                    ) });
                   }
                 }
               ),
@@ -1971,15 +1993,15 @@ function parseData(chart) {
 }
 const LineChart = ({
   chart,
-  margin = { top: 20, left: 100, bottom: 150, right: 70 },
+  margin = { top: 20, left: 100, bottom: 24, right: 0 },
   chartId,
   allowZoom
 }) => {
   const effectiveMargin = parseMargin(margin);
-  if (!chart.showAxisYTitle) {
+  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
     effectiveMargin.left = 50;
   }
-  let innerWidth = chart.ratio.width;
+  let innerWidth = chart.ratio.width - (effectiveMargin.left + effectiveMargin.right) / 2;
   let innerHeight = chart.ratio.height - (effectiveMargin.top + effectiveMargin.bottom) / 2;
   if (innerWidth > chart.ratio.maxWidth) {
     const newValues = adjustDimensions$1({
@@ -2010,14 +2032,14 @@ const LineChart = ({
   const xScaleRange = useMemo(() => {
     const rangeArr = [
       typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
-      innerWidth - effectiveMargin.left
+      innerWidth
     ];
     return divideRangeBetweenStrings(rangeArr[0], rangeArr[1], longestLine);
   }, [effectiveMargin, innerWidth, longestLine]);
   xScale.range(xScaleRange);
   const yScaleRange = useMemo(() => {
     const rangeArr = [
-      innerHeight - (effectiveMargin.top + effectiveMargin.bottom) / 2,
+      innerHeight - (effectiveMargin.top + effectiveMargin.bottom),
       typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
     ];
     return rangeArr;
@@ -2234,7 +2256,7 @@ const LineChart = ({
                 attachToElementAnchorPoint: "bottomRight"
               });
             } else {
-              new ApiaUtil().tooltips.close();
+              new ApiaUtil().tooltips.closeAll();
             }
           } else if (nearNodes.length === 0) {
             setCurrentCircle([]);
@@ -2296,7 +2318,7 @@ const LineChart = ({
                       (set) => set.columnName === column.name && set.key === coordinate.key
                     )) == null ? void 0 : _a2.color;
                     return /* @__PURE__ */ jsxs("g", { children: [
-                      /* @__PURE__ */ jsx(
+                      chart.showValues && /* @__PURE__ */ jsx(
                         "text",
                         {
                           x: xScale(getX(coordinate)) + 10,
@@ -2335,19 +2357,21 @@ const LineChart = ({
             {
               scale: actualYScale,
               left: effectiveMargin.left,
-              label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : ""
+              label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
+              tickLabelProps: {
+                display: chart.showAxisYTitle ? "auto" : "none"
+              }
             }
           ),
           /* @__PURE__ */ jsx(
             AxisBottom,
             {
-              top: innerHeight - (effectiveMargin.top + effectiveMargin.bottom) / 2,
+              top: innerHeight - (effectiveMargin.top + effectiveMargin.bottom),
               scale: xScale,
               label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-              tickLabelProps: {
-                className: "tickLabel"
-              },
-              labelOffset: 50
+              tickLabelProps: { display: "none" },
+              tickLineProps: { display: "none" },
+              labelOffset: 10
             }
           )
         ]
@@ -2379,21 +2403,6 @@ const WaterfallBar = ({
   columnName,
   chart
 }) => {
-  const { open } = useTooltip({
-    children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            color: step.color
-          },
-          children: /* @__PURE__ */ jsx("strong", { children: columnName })
-        }
-      ),
-      chart.showValues && /* @__PURE__ */ jsx("div", { children: step.y }),
-      /* @__PURE__ */ jsx("div", { children: step.x })
-    ] })
-  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Box,
@@ -2413,12 +2422,23 @@ const WaterfallBar = ({
           };
         }, [fill, height, width, x, y]),
         onMouseEnter: (ev) => {
-          open({
+          new ApiaUtil().tooltips.open({
+            children: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    color: step.color
+                  },
+                  children: /* @__PURE__ */ jsx("strong", { children: columnName })
+                }
+              ),
+              chart.showValues && /* @__PURE__ */ jsx("div", { children: step.y }),
+              /* @__PURE__ */ jsx("div", { children: step.x })
+            ] }),
             attachToElement: () => ev.target,
             attachToElementAnchorPoint: "center"
           });
-        },
-        onMouseLeave: () => {
         }
       }
     ),
@@ -2433,7 +2453,7 @@ const WaterfallBar = ({
         strokeDasharray: strokeDashArray
       }
     ),
-    /* @__PURE__ */ jsx("text", { textAnchor: "middle", x: textX, y: textY, children: textContent })
+    chart.showValues && /* @__PURE__ */ jsx("text", { textAnchor: "middle", x: textX, y: textY, children: textContent })
   ] });
 };
 
@@ -2532,8 +2552,9 @@ const WaterfallBars = (_a) => {
     allowZoom
   } = _b;
   var _a2;
+  console.log({ margin });
   const effectiveMargin = parseMargin(margin);
-  if (!chart.showAxisYTitle) {
+  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
     effectiveMargin.left = 50;
   }
   let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
@@ -2668,11 +2689,11 @@ const WaterfallBars = (_a) => {
                 {
                   label: "",
                   scale: yScale,
-                  hideAxisLine: true,
                   hideTicks: true,
                   tickLabelProps: () => ({
                     textAnchor: "end",
-                    verticalAnchor: "middle"
+                    verticalAnchor: "middle",
+                    display: chart.showAxisYTitle ? "auto" : "none"
                   })
                 }
               ),
@@ -2681,11 +2702,8 @@ const WaterfallBars = (_a) => {
                 {
                   scale: xScale,
                   top: innerHeight,
-                  tickLabelProps: () => ({
-                    textAnchor: "middle",
-                    verticalAnchor: "middle",
-                    className: "tickLabel"
-                  })
+                  tickLabelProps: { display: "none" },
+                  tickLineProps: { display: "none" }
                 }
               )
             ] })
@@ -3348,11 +3366,9 @@ const TLight = ({
       }
       const pathBox = pathElement.getBoundingClientRect();
       const svgBox = svgElement.getBoundingClientRect();
-      const pathWidth = pathBox.width;
-      const pathHeight = pathBox.height;
       const pathX = pathBox.x - svgBox.x;
       const pathY = pathBox.y - svgBox.y;
-      const viewBox = `${pathX - diameter / 2} ${pathY - diameter / 2} ${pathWidth} ${pathHeight}`;
+      const viewBox = `${pathX - diameter / 2} ${pathY - diameter / 2} ${diameter} ${diameter}`;
       svgElement.setAttribute("viewBox", viewBox);
       svgElement.style.visibility = "visible";
     },