@aivenio/aquarium 1.50.0 → 1.52.0

package/dist/charts.cjs

@@ -64,14 +64,15 @@ __export(charts_exports, {
   Cell: () => import_recharts7.Cell,
   Doughnut: () => Doughnut,
   DoughnutChart: () => DoughnutChart,
+  Legend: () => Legend,
   Line: () => Line,
   LineChart: () => LineChart,
-  Pie: () => Pie2,
+  Pie: () => Pie,
   PieChart: () => PieChart,
   Reference: () => Reference,
   ResponsiveContainer: () => ResponsiveContainer,
   Tooltip: () => Tooltip,
-  extractChildByName: () => extractChildByName,
+  extractChildByDisplayName: () => extractChildByDisplayName,
   getDisplayName: () => getDisplayName,
   getXAxisTicks: () => getXAxisTicks,
   renderXAxis: () => renderXAxis,
@@ -149,7 +150,7 @@ module.exports = __toCommonJS(charts_exports);
 
 // src/charts/AreaChart/AreaChart.tsx
 var import_react4 = __toESM(require("react"));
-var import_recharts4 = require("recharts");
+var import_recharts5 = require("recharts");
 
 // src/charts/Axis/Axis.tsx
 var import_react = __toESM(require("react"));
@@ -2001,11 +2002,14 @@ var getXAxisTicks = ({ dataKey, ticks: ticks2 }, chartProps) => {
   const [min = new Date(), max = new Date()] = extent(xValues);
   return time().domain([min, max]).ticks(ticks2).map((v) => v.valueOf());
 };
-var extractChildByName = (children, name) => {
+var extractChildByDisplayName = (children, name) => {
   const childIndex = children.findIndex((child) => getDisplayName(child.type) === name);
-  const foundChild = children.slice(childIndex, childIndex + 1);
+  if (childIndex === -1) {
+    return [void 0, children];
+  }
+  const foundChild = children.at(childIndex);
   const remainingChildren = children.slice(0, childIndex).concat(children.slice(childIndex + 1));
-  return { foundChild, children: remainingChildren };
+  return [foundChild, remainingChildren];
 };
 
 // src/charts/Axis/Axis.tsx
@@ -2066,6 +2070,28 @@ var CartesianGrid = Object.assign(
   import_recharts3.CartesianGrid
 );
 
+// src/charts/Tooltip/Tooltip.tsx
+var import_recharts4 = require("recharts");
+var contentStyle = {
+  boxShadow: "var(--aquarium-box-shadow-8dp)",
+  background: "#fff"
+};
+var itemStyle = {
+  display: "flex",
+  paddingTop: "2px",
+  paddingBottom: "2px"
+};
+var Tooltip = Object.assign(import_recharts4.Tooltip, {
+  DefaultContent: import_recharts4.DefaultTooltipContent
+});
+Tooltip.defaultProps = Object.assign({}, import_recharts4.Tooltip.defaultProps, {
+  separator: "",
+  isAnimationActive: false,
+  contentStyle,
+  itemStyle,
+  cursor: { stroke: "var(--aquarium-colors-grey-70)", strokeDasharray: "5" }
+});
+
 // src/charts/AreaChart/AreaChart.tsx
 var renderChildren = (props) => {
   return import_react4.default.Children.map(props.children, (child) => {
@@ -2086,10 +2112,12 @@ var renderChildren = (props) => {
   });
 };
 var AreaChart = (props) => {
+  const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
   return /* @__PURE__ */ import_react4.default.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react4.default.createElement(import_recharts4.AreaChart, {
+  }, /* @__PURE__ */ import_react4.default.createElement(import_recharts5.AreaChart, {
+    accessibilityLayer: tooltip !== void 0,
     data: props.data,
     style: { stroke: "#fff", strokeWidth: 1 },
     margin: {
@@ -2103,7 +2131,7 @@ var AreaChart = (props) => {
 var Area = Object.assign(
   (props) => {
     var _a;
-    return /* @__PURE__ */ import_react4.default.createElement(import_recharts4.Area, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react4.default.createElement(import_recharts5.Area, __spreadProps(__spreadValues({
       type: "monotone",
       strokeWidth: 2,
       dot: false
@@ -2113,9 +2141,9 @@ var Area = Object.assign(
       isAnimationActive: false
     }));
   },
-  import_recharts4.Area
+  import_recharts5.Area
 );
-Area.defaultProps = Object.assign({}, import_recharts4.Area.defaultProps, {
+Area.defaultProps = Object.assign({}, import_recharts5.Area.defaultProps, {
   fillOpacity: 0.1,
   fill: void 0
 });
@@ -2124,68 +2152,56 @@ AreaChart.Area = Area;
 // src/charts/BarChart/BarChart.tsx
 var import_react5 = __toESM(require("react"));
 var import_recharts6 = require("recharts");
-
-// src/charts/Tooltip/Tooltip.tsx
-var import_recharts5 = require("recharts");
-var contentStyle = {
-  boxShadow: "var(--aquarium-box-shadow-8dp)",
-  background: "#fff"
-};
-var itemStyle = {
-  display: "flex",
-  paddingTop: "2px",
-  paddingBottom: "2px"
-};
-var Tooltip = Object.assign(import_recharts5.Tooltip, {
-  DefaultContent: import_recharts5.DefaultTooltipContent
-});
-Tooltip.defaultProps = Object.assign({}, import_recharts5.Tooltip.defaultProps, {
-  separator: "",
-  isAnimationActive: false,
-  contentStyle,
-  itemStyle,
-  cursor: { stroke: "var(--aquarium-colors-grey-70)", strokeDasharray: "5" }
-});
-
-// src/charts/BarChart/BarChart.tsx
-var renderChildren2 = (props) => {
-  return import_react5.default.Children.map(props.children, (child) => {
-    switch (getDisplayName(child.type)) {
-      case Axis.XAxis.displayName: {
-        return renderXAxis(child, props);
-      }
-      case Axis.XAxis.Time.displayName: {
-        return renderXTimeAxis(child, props);
-      }
-      case Axis.YAxis.displayName: {
-        return renderYAxis(child, props);
-      }
-      case Tooltip.displayName: {
-        return /* @__PURE__ */ import_react5.default.createElement(Tooltip, __spreadProps(__spreadValues({}, child.props), {
-          cursor: false
-        }));
-      }
-      default: {
-        return child;
-      }
-    }
-  });
+var margin = {
+  top: 20,
+  right: 30,
+  left: 20,
+  bottom: 5
 };
 var BarChart = (props) => {
+  const [activeIndex, setActiveIndex] = import_react5.default.useState(void 0);
+  const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
+  const renderChildren3 = (props2) => {
+    return import_react5.default.Children.map(props2.children, (child) => {
+      switch (getDisplayName(child.type)) {
+        case Axis.XAxis.displayName: {
+          return renderXAxis(child, props2);
+        }
+        case Axis.XAxis.Time.displayName: {
+          return renderXTimeAxis(child, props2);
+        }
+        case Axis.YAxis.displayName: {
+          return renderYAxis(child, props2);
+        }
+        case import_recharts6.Bar.displayName: {
+          return import_react5.default.cloneElement(child, {
+            shape: (props3) => /* @__PURE__ */ import_react5.default.createElement(import_recharts6.Rectangle, __spreadProps(__spreadValues({}, props3), {
+              className: activeIndex !== void 0 ? "inactive" : void 0
+            }))
+          });
+        }
+        case Tooltip.displayName: {
+          return /* @__PURE__ */ import_react5.default.createElement(Tooltip, __spreadProps(__spreadValues({}, child.props), {
+            cursor: false
+          }));
+        }
+        default: {
+          return child;
+        }
+      }
+    });
+  };
   return /* @__PURE__ */ import_react5.default.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react5.default.createElement(import_recharts6.BarChart, {
-    data: props.data,
+  }, /* @__PURE__ */ import_react5.default.createElement(import_recharts6.BarChart, __spreadProps(__spreadValues({}, props), {
+    accessibilityLayer: tooltip !== void 0,
     barCategoryGap: "5%",
     style: { stroke: "#fff", strokeWidth: 1 },
-    margin: {
-      top: 20,
-      right: 30,
-      left: 20,
-      bottom: 5
-    }
-  }, /* @__PURE__ */ import_react5.default.createElement(CartesianGrid, null), renderChildren2(props)));
+    onMouseMove: (state) => setActiveIndex(state.isTooltipActive ? state.activeTooltipIndex : void 0),
+    onMouseLeave: () => setActiveIndex(void 0),
+    margin
+  }), /* @__PURE__ */ import_react5.default.createElement(CartesianGrid, null), renderChildren3(props)));
 };
 var Bar = Object.assign((props) => /* @__PURE__ */ import_react5.default.createElement(import_recharts6.Bar, __spreadProps(__spreadValues({}, props), {
   isAnimationActive: false
@@ -2197,11 +2213,29 @@ BarChart.Tooltip = Tooltip;
 var import_recharts7 = require("recharts");
 var import_recharts8 = require("recharts");
 
-// src/charts/LineChart/LineChart.tsx
+// src/charts/Legend/Legend.tsx
 var import_react6 = __toESM(require("react"));
 var import_recharts9 = require("recharts");
-var renderChildren3 = (props) => {
-  return import_react6.default.Children.map(props.children, (child) => {
+var Legend = import_react6.default.forwardRef((props, _ref) => {
+  return /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Legend, __spreadProps(__spreadValues({}, props), {
+    margin: __spreadProps(__spreadValues({}, props.margin), { top: 0 })
+  }));
+});
+Legend.displayName = "Legend";
+Legend.defaultProps = {
+  iconType: "circle",
+  iconSize: 8,
+  align: "left",
+  layout: "horizontal",
+  verticalAlign: "top",
+  margin: { top: 0 }
+};
+
+// src/charts/LineChart/LineChart.tsx
+var import_react7 = __toESM(require("react"));
+var import_recharts10 = require("recharts");
+var renderChildren2 = (props) => {
+  return import_react7.default.Children.map(props.children, (child) => {
     switch (getDisplayName(child.type)) {
       case Axis.XAxis.displayName: {
         return renderXAxis(child, props);
@@ -2219,10 +2253,11 @@ var renderChildren3 = (props) => {
   });
 };
 var LineChart = (props) => {
-  return /* @__PURE__ */ import_react6.default.createElement(ResponsiveContainer, {
+  const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
+  return /* @__PURE__ */ import_react7.default.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react6.default.createElement(import_recharts9.LineChart, {
+  }, /* @__PURE__ */ import_react7.default.createElement(import_recharts10.LineChart, {
     data: props.data,
     style: { stroke: "#fff", strokeWidth: 1 },
     margin: {
@@ -2230,27 +2265,29 @@ var LineChart = (props) => {
       right: 30,
       left: 20,
       bottom: 5
-    }
-  }, /* @__PURE__ */ import_react6.default.createElement(CartesianGrid, null), renderChildren3(props)));
+    },
+    accessibilityLayer: tooltip !== void 0
+  }, /* @__PURE__ */ import_react7.default.createElement(CartesianGrid, null), renderChildren2(props)));
 };
 var Line = Object.assign(
-  (props) => /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Line, __spreadProps(__spreadValues({
+  (props) => /* @__PURE__ */ import_react7.default.createElement(import_recharts10.Line, __spreadProps(__spreadValues({
     type: "monotone"
   }, props), {
     strokeWidth: 2,
     isAnimationActive: false,
     dot: false
   })),
-  import_recharts9.Line
+  import_recharts10.Line
 );
 LineChart.Line = Line;
 
 // src/charts/PieChart/DoughnutChart.tsx
 var import_react11 = __toESM(require("react"));
-var import_recharts11 = require("recharts");
+var import_isNil = __toESM(require("lodash/isNil"));
+var import_recharts12 = require("recharts");
 
 // src/charts/PieChart/ChartValue.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/utils/tailwind.ts
 var import_classnames = __toESM(require("classnames"));
@@ -2277,29 +2314,21 @@ function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, class
 // src/charts/PieChart/ChartValue.tsx
 var ChartValue = (props) => {
   const { value, unit: unit2, caption } = props;
-  return /* @__PURE__ */ import_react7.default.createElement("p", {
+  return /* @__PURE__ */ import_react8.default.createElement("p", {
     className: tw(
-      "typography-large-heading",
-      "text-center",
-      "leading-tight",
-      "absolute",
-      "top-1/2",
-      "left-1/2",
-      "transform",
-      "-translate-x-1/2",
-      "-translate-y-1/2"
+      "typography-large-heading text-grey-90 text-center leading-tight absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
     )
-  }, value, unit2, caption && /* @__PURE__ */ import_react7.default.createElement("span", {
-    className: tw("block", "typography-small")
+  }, value, unit2, caption && /* @__PURE__ */ import_react8.default.createElement("span", {
+    className: tw("block", "typography-small text-grey-60")
   }, caption));
 };
 
 // src/charts/PieChart/renderPieChildren.tsx
-var import_react9 = __toESM(require("react"));
-var import_recharts10 = require("recharts");
+var import_react10 = __toESM(require("react"));
+var import_recharts11 = require("recharts");
 
 // src/charts/PieChart/TooltipContentWrapper.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_isFunction = __toESM(require("lodash/isFunction"));
 var TooltipContentWrapper = (_a) => {
   var _b = _a, {
@@ -2315,28 +2344,28 @@ var TooltipContentWrapper = (_a) => {
     });
   });
   const propsWithPayload = __spreadProps(__spreadValues({}, props), { payload });
-  if (import_react8.default.isValidElement(content)) {
-    return import_react8.default.cloneElement(content, propsWithPayload);
+  if (import_react9.default.isValidElement(content)) {
+    return import_react9.default.cloneElement(content, propsWithPayload);
   }
   if ((0, import_isFunction.default)(content)) {
-    return import_react8.default.createElement(content, propsWithPayload);
+    return import_react9.default.createElement(content, propsWithPayload);
   }
-  return /* @__PURE__ */ import_react8.default.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react9.default.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
     payload
   }));
 };
 
 // src/charts/PieChart/renderPieChildren.tsx
 var renderPieChildren = (children) => {
-  return import_react9.default.Children.map(children, (child) => {
+  return import_react10.default.Children.map(children, (child) => {
     switch (getDisplayName(child.type)) {
       case Tooltip.displayName: {
-        return import_react9.default.cloneElement(child, { content: /* @__PURE__ */ import_react9.default.createElement(TooltipContentWrapper, {
+        return import_react10.default.cloneElement(child, { content: /* @__PURE__ */ import_react10.default.createElement(TooltipContentWrapper, {
           content: child.props.content
         }) });
       }
-      case DoughnutChart.Doughnut.displayName: {
-        return /* @__PURE__ */ import_react9.default.createElement(import_recharts10.Pie, __spreadValues({}, child.props));
+      case import_recharts11.Legend.displayName: {
+        return import_react10.default.cloneElement(child, { verticalAlign: "top", align: "center" });
       }
       default: {
         return child;
@@ -2345,90 +2374,104 @@ var renderPieChildren = (children) => {
   });
 };
 
-// src/charts/PieChart/renderScaledChartValue.tsx
-var import_react10 = __toESM(require("react"));
-var renderScaledChartValue = (props) => {
-  const refSize = 300;
-  const { containerWidth, containerHeight, chartValue } = props;
-  if (!containerWidth || !containerHeight) {
-    return null;
-  }
-  const scaleBy = containerWidth >= containerHeight ? containerHeight : containerWidth;
-  const scale = scaleBy / refSize;
-  const x = (containerWidth - refSize * scale) / (2 * scale);
-  const y = (containerHeight - refSize * scale) / (2 * scale);
-  return /* @__PURE__ */ import_react10.default.createElement("foreignObject", {
-    width: refSize,
-    height: refSize,
-    x,
-    y,
-    transform: `scale(${scale})`
-  }, chartValue);
-};
-
 // src/charts/PieChart/DoughnutChart.tsx
+var refSize = 300;
 var DoughnutChart = (props) => {
   const [containerWidth, setContainerWidth] = import_react11.default.useState(0);
   const [containerHeight, setContainerHeight] = import_react11.default.useState(0);
-  const { foundChild: chartValue, children } = extractChildByName(props.children, ChartValue.displayName);
+  const [activeIndex, setActiveIndex] = import_react11.default.useState(null);
+  const [chartValue, _children] = extractChildByDisplayName(props.children, ChartValue.displayName);
+  const [pie, children] = extractChildByDisplayName(_children, DoughnutChart.Doughnut.displayName);
+  const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
   const onResize = (w, h) => {
     setContainerWidth(w);
     setContainerHeight(h);
   };
-  const scaledChartValue = renderScaledChartValue({ chartValue, containerWidth, containerHeight });
+  const renderChartValue = ({ formattedGraphicalItems }) => {
+    var _a, _b, _c;
+    const pie2 = formattedGraphicalItems == null ? void 0 : formattedGraphicalItems[0];
+    const props2 = (_a = pie2 == null ? void 0 : pie2.props) != null ? _a : {};
+    const cx = (_b = props2.cx) != null ? _b : containerWidth / 2;
+    const cy = (_c = props2.cy) != null ? _c : containerHeight / 2;
+    if (!containerWidth || !containerHeight || (0, import_isNil.default)(chartValue)) {
+      return null;
+    }
+    const scaleBy = containerWidth >= containerHeight ? containerHeight : containerWidth;
+    const scale = scaleBy / refSize;
+    const yOffset = cy - containerHeight / 2;
+    const yMargin = (containerHeight - refSize * scale) / 2;
+    const x = cx - refSize / 2 * scale;
+    const y = (yOffset + yMargin) / scale;
+    return /* @__PURE__ */ import_react11.default.createElement("foreignObject", {
+      width: refSize,
+      height: refSize,
+      x,
+      y,
+      transform: `scale(${scale})`
+    }, chartValue);
+  };
+  const highlightActive = activeIndex !== null && tooltip;
   return /* @__PURE__ */ import_react11.default.createElement(ResponsiveContainer, {
     onResize,
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react11.default.createElement(import_recharts11.PieChart, null, scaledChartValue, renderPieChildren(children)));
+  }, /* @__PURE__ */ import_react11.default.createElement(import_recharts12.PieChart, null, chartValue && /* @__PURE__ */ import_react11.default.createElement(import_recharts12.Customized, {
+    component: renderChartValue
+  }), pie && /* @__PURE__ */ import_react11.default.createElement(import_recharts12.Pie, __spreadProps(__spreadValues({}, pie.props), {
+    onMouseEnter: (_, index) => setActiveIndex(index),
+    onMouseLeave: () => setActiveIndex(null),
+    activeIndex,
+    inactiveShape: { className: highlightActive ? "inactive" : void 0 },
+    activeShape: { className: highlightActive ? "active" : void 0 }
+  })), renderPieChildren(children)));
 };
-var Doughnut = Object.assign((props) => /* @__PURE__ */ import_react11.default.createElement(import_recharts11.Pie, __spreadValues({}, props)), import_recharts11.Pie);
-Doughnut.defaultProps = Object.assign({}, import_recharts11.Pie.defaultProps, {
+var Doughnut = Object.assign((props) => /* @__PURE__ */ import_react11.default.createElement(import_recharts12.Pie, __spreadValues({}, props)), import_recharts12.Pie);
+Doughnut.defaultProps = Object.assign({}, import_recharts12.Pie.defaultProps, {
   isAnimationActive: false,
   innerRadius: "60%",
   outerRadius: "80%"
 });
 DoughnutChart.Doughnut = Doughnut;
 DoughnutChart.ChartValue = ChartValue;
-DoughnutChart.Cell = import_recharts11.Cell;
+DoughnutChart.Cell = import_recharts12.Cell;
 
 // src/charts/PieChart/PieChart.tsx
 var import_react12 = __toESM(require("react"));
-var import_recharts12 = require("recharts");
+var import_recharts13 = require("recharts");
 var PieChart = (props) => {
   return /* @__PURE__ */ import_react12.default.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react12.default.createElement(import_recharts12.PieChart, {
+  }, /* @__PURE__ */ import_react12.default.createElement(import_recharts13.PieChart, {
     width: 500,
     height: 500
   }, renderPieChildren(props.children)));
 };
-var Pie2 = Object.assign((props) => /* @__PURE__ */ import_react12.default.createElement(import_recharts12.Pie, __spreadValues({}, props)), import_recharts12.Pie);
-Pie2.defaultProps = Object.assign({}, import_recharts12.Pie.defaultProps, {
+var Pie = Object.assign((props) => /* @__PURE__ */ import_react12.default.createElement(import_recharts13.Pie, __spreadValues({}, props)), import_recharts13.Pie);
+Pie.defaultProps = Object.assign({}, import_recharts13.Pie.defaultProps, {
   isAnimationActive: false,
   innerRadius: 0,
   outerRadius: "80%"
 });
-PieChart.Pie = Pie2;
-PieChart.Cell = import_recharts12.Cell;
+PieChart.Pie = Pie;
+PieChart.Cell = import_recharts13.Cell;
 
 // src/charts/Reference/Reference.tsx
 var import_react13 = __toESM(require("react"));
-var import_recharts13 = require("recharts");
+var import_recharts14 = require("recharts");
 var ReferenceLine = Object.assign(
-  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts13.ReferenceLine, __spreadProps(__spreadValues({}, props), {
+  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts14.ReferenceLine, __spreadProps(__spreadValues({}, props), {
     strokeDasharray: "9 3",
     strokeWidth: 2
   })),
-  import_recharts13.ReferenceLine
+  import_recharts14.ReferenceLine
 );
 var ReferenceArea = Object.assign(
-  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts13.ReferenceArea, __spreadProps(__spreadValues({}, props), {
+  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts14.ReferenceArea, __spreadProps(__spreadValues({}, props), {
     strokeWidth: 0,
     fillOpacity: 0.1
   })),
-  import_recharts13.ReferenceLine
+  import_recharts14.ReferenceLine
 );
 var Reference = {
   Line: ReferenceLine,
@@ -2445,6 +2488,7 @@ var Reference = {
   Cell,
   Doughnut,
   DoughnutChart,
+  Legend,
   Line,
   LineChart,
   Pie,
@@ -2452,7 +2496,7 @@ var Reference = {
   Reference,
   ResponsiveContainer,
   Tooltip,
-  extractChildByName,
+  extractChildByDisplayName,
   getDisplayName,
   getXAxisTicks,
   renderXAxis,