@aivenio/aquarium 1.42.0 → 1.44.0

package/dist/charts.cjs

@@ -55,12 +55,23 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/charts/index.ts
 var charts_exports = {};
 __export(charts_exports, {
+  Area: () => Area,
+  AreaChart: () => AreaChart,
   Axis: () => Axis,
   Bar: () => Bar,
   BarChart: () => BarChart,
   CartesianGrid: () => CartesianGrid,
+  Cell: () => import_recharts7.Cell,
+  Doughnut: () => Doughnut,
+  DoughnutChart: () => DoughnutChart,
+  Line: () => Line,
+  LineChart: () => LineChart,
+  Pie: () => Pie2,
+  PieChart: () => PieChart,
+  Reference: () => Reference,
   ResponsiveContainer: () => ResponsiveContainer,
   Tooltip: () => Tooltip,
+  extractChildByName: () => extractChildByName,
   getDisplayName: () => getDisplayName,
   getXAxisTicks: () => getXAxisTicks,
   renderXAxis: () => renderXAxis,
@@ -136,6 +147,10 @@ __export(charts_exports, {
 });
 module.exports = __toCommonJS(charts_exports);
 
+// src/charts/AreaChart/AreaChart.tsx
+var import_react4 = __toESM(require("react"));
+var import_recharts4 = require("recharts");
+
 // src/charts/Axis/Axis.tsx
 var import_react = __toESM(require("react"));
 var import_recharts = require("recharts");
@@ -1970,10 +1985,11 @@ var getDisplayName = (Comp) => {
 };
 var isDateArray = (arr) => arr.every(import_isDate.default);
 var getXAxisTicks = ({ dataKey, ticks: ticks2 }, chartProps) => {
+  var _a;
   if (!ticks2 || (0, import_isArray.default)(ticks2)) {
     return ticks2 != null ? ticks2 : void 0;
   }
-  const xValues = chartProps.data.map(
+  const xValues = ((_a = chartProps.data) != null ? _a : []).map(
     (datum) => typeof dataKey === "function" ? dataKey(datum) : dataKey ? datum[dataKey] : void 0
   );
   if (!isDateArray(xValues)) {
@@ -1985,6 +2001,12 @@ 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) => {
+  const childIndex = children.findIndex((child) => getDisplayName(child.type) === name);
+  const foundChild = children.slice(childIndex, childIndex + 1);
+  const remainingChildren = children.slice(0, childIndex).concat(children.slice(childIndex + 1));
+  return { foundChild, children: remainingChildren };
+};
 
 // src/charts/Axis/Axis.tsx
 var XTimeAxis = () => null;
@@ -2024,10 +2046,6 @@ var Axis = {
   YAxis
 };
 
-// src/charts/BarChart/BarChart.tsx
-var import_react4 = __toESM(require("react"));
-var import_recharts4 = require("recharts");
-
 // src/charts/Container/Container.tsx
 var import_react2 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
@@ -2048,7 +2066,7 @@ var CartesianGrid = Object.assign(
   import_recharts3.CartesianGrid
 );
 
-// src/charts/BarChart/BarChart.tsx
+// src/charts/AreaChart/AreaChart.tsx
 var renderChildren = (props) => {
   return import_react4.default.Children.map(props.children, (child) => {
     switch (getDisplayName(child.type)) {
@@ -2067,9 +2085,95 @@ var renderChildren = (props) => {
     }
   });
 };
+var AreaChart = (props) => {
+  const { data } = props;
+  return /* @__PURE__ */ import_react4.default.createElement(ResponsiveContainer, null, /* @__PURE__ */ import_react4.default.createElement(import_recharts4.AreaChart, {
+    width: 500,
+    height: 500,
+    data,
+    style: { stroke: "#fff", strokeWidth: 1 },
+    margin: {
+      top: 20,
+      right: 30,
+      left: 20,
+      bottom: 5
+    }
+  }, /* @__PURE__ */ import_react4.default.createElement(CartesianGrid, null), renderChildren(props)));
+};
+var Area = Object.assign(
+  (props) => {
+    var _a;
+    return /* @__PURE__ */ import_react4.default.createElement(import_recharts4.Area, __spreadProps(__spreadValues({
+      type: "monotone",
+      strokeWidth: 2,
+      dot: false
+    }, props), {
+      fill: (_a = props.fill) != null ? _a : props.stroke,
+      fillOpacity: 0.1,
+      isAnimationActive: false
+    }));
+  },
+  import_recharts4.Area
+);
+Area.defaultProps = Object.assign({}, import_recharts4.Area.defaultProps, {
+  fillOpacity: 0.1,
+  fill: void 0
+});
+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 BarChart = (props) => {
   const { data } = props;
-  return /* @__PURE__ */ import_react4.default.createElement(ResponsiveContainer, null, /* @__PURE__ */ import_react4.default.createElement(import_recharts4.BarChart, {
+  return /* @__PURE__ */ import_react5.default.createElement(ResponsiveContainer, null, /* @__PURE__ */ import_react5.default.createElement(import_recharts6.BarChart, {
     width: 500,
     height: 500,
     data,
@@ -2081,30 +2185,269 @@ var BarChart = (props) => {
       left: 20,
       bottom: 5
     }
-  }, /* @__PURE__ */ import_react4.default.createElement(CartesianGrid, null), renderChildren(props)));
+  }, /* @__PURE__ */ import_react5.default.createElement(CartesianGrid, null), renderChildren2(props)));
 };
-var Bar = Object.assign((props) => /* @__PURE__ */ import_react4.default.createElement(import_recharts4.Bar, __spreadProps(__spreadValues({}, props), {
+var Bar = Object.assign((props) => /* @__PURE__ */ import_react5.default.createElement(import_recharts6.Bar, __spreadProps(__spreadValues({}, props), {
   isAnimationActive: false
-})), import_recharts4.Bar);
+})), import_recharts6.Bar);
 BarChart.Bar = Bar;
+BarChart.Tooltip = Tooltip;
 
-// src/charts/Tooltip/Tooltip.tsx
-var import_recharts5 = require("recharts");
-var Tooltip = Object.assign(import_recharts5.Tooltip, {});
-Tooltip.defaultProps = Object.assign(import_recharts5.Tooltip.defaultProps, {
+// src/charts/Cell/Cell.tsx
+var import_recharts7 = require("recharts");
+var import_recharts8 = require("recharts");
+
+// src/charts/LineChart/LineChart.tsx
+var import_react6 = __toESM(require("react"));
+var import_recharts9 = require("recharts");
+var renderChildren3 = (props) => {
+  return import_react6.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);
+      }
+      default: {
+        return child;
+      }
+    }
+  });
+};
+var LineChart = (props) => {
+  const { data } = props;
+  return /* @__PURE__ */ import_react6.default.createElement(ResponsiveContainer, null, /* @__PURE__ */ import_react6.default.createElement(import_recharts9.LineChart, {
+    width: 500,
+    height: 500,
+    data,
+    style: { stroke: "#fff", strokeWidth: 1 },
+    margin: {
+      top: 20,
+      right: 30,
+      left: 20,
+      bottom: 5
+    }
+  }, /* @__PURE__ */ import_react6.default.createElement(CartesianGrid, null), renderChildren3(props)));
+};
+var Line = Object.assign(
+  (props) => /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Line, __spreadProps(__spreadValues({
+    type: "monotone"
+  }, props), {
+    strokeWidth: 2,
+    isAnimationActive: false,
+    dot: false
+  })),
+  import_recharts9.Line
+);
+LineChart.Line = Line;
+
+// src/charts/PieChart/DoughnutChart.tsx
+var import_react11 = __toESM(require("react"));
+var import_recharts11 = require("recharts");
+
+// src/charts/PieChart/ChartValue.tsx
+var import_react7 = __toESM(require("react"));
+
+// src/utils/tailwind.ts
+var import_classnames = __toESM(require("classnames"));
+function cleanClassNames(classNames) {
+  const tokens = classNames.split(/\s+/);
+  return tokens.filter((item) => item).join(" ");
+}
+function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
+  const result = (0, import_classnames.default)(
+    classesOrModifiers1,
+    classesOrModifiers2,
+    classesOrModifiers3,
+    classesOrModifiers4,
+    classesOrModifiers5,
+    classesOrModifiers6,
+    classesOrModifiers7,
+    classesOrModifiers8,
+    classesOrModifiers9,
+    classesOrModifiers10
+  );
+  return cleanClassNames(result);
+}
+
+// src/charts/PieChart/ChartValue.tsx
+var ChartValue = (props) => {
+  const { value, unit: unit2, caption } = props;
+  return /* @__PURE__ */ import_react7.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"
+    )
+  }, value, unit2, caption && /* @__PURE__ */ import_react7.default.createElement("span", {
+    className: tw("block", "typography-small")
+  }, caption));
+};
+
+// src/charts/PieChart/renderPieChildren.tsx
+var import_react9 = __toESM(require("react"));
+var import_recharts10 = require("recharts");
+
+// src/charts/PieChart/TooltipContentWrapper.tsx
+var import_react8 = __toESM(require("react"));
+var import_isFunction = __toESM(require("lodash/isFunction"));
+var TooltipContentWrapper = (_a) => {
+  var _b = _a, {
+    content
+  } = _b, props = __objRest(_b, [
+    "content"
+  ]);
+  var _a2;
+  const payload = (_a2 = props.payload) == null ? void 0 : _a2.map((entry) => {
+    var _a3;
+    return __spreadProps(__spreadValues({}, entry), {
+      color: (_a3 = entry.payload) == null ? void 0 : _a3.fill
+    });
+  });
+  const propsWithPayload = __spreadProps(__spreadValues({}, props), { payload });
+  if (import_react8.default.isValidElement(content)) {
+    return import_react8.default.cloneElement(content, propsWithPayload);
+  }
+  if ((0, import_isFunction.default)(content)) {
+    return import_react8.default.createElement(content, propsWithPayload);
+  }
+  return /* @__PURE__ */ import_react8.default.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
+    payload
+  }));
+};
+
+// src/charts/PieChart/renderPieChildren.tsx
+var renderPieChildren = (children) => {
+  return import_react9.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, {
+          content: child.props.content
+        }) });
+      }
+      case DoughnutChart.Doughnut.displayName: {
+        return /* @__PURE__ */ import_react9.default.createElement(import_recharts10.Pie, __spreadValues({}, child.props));
+      }
+      default: {
+        return child;
+      }
+    }
+  });
+};
+
+// 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 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 onResize = (w, h) => {
+    setContainerWidth(w);
+    setContainerHeight(h);
+  };
+  const scaledChartValue = renderScaledChartValue({ chartValue, containerWidth, containerHeight });
+  return /* @__PURE__ */ import_react11.default.createElement(ResponsiveContainer, {
+    onResize
+  }, /* @__PURE__ */ import_react11.default.createElement(import_recharts11.PieChart, null, scaledChartValue, 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, {
+  isAnimationActive: false,
+  innerRadius: "60%",
+  outerRadius: "80%"
+});
+DoughnutChart.Doughnut = Doughnut;
+DoughnutChart.ChartValue = ChartValue;
+DoughnutChart.Cell = import_recharts11.Cell;
+
+// src/charts/PieChart/PieChart.tsx
+var import_react12 = __toESM(require("react"));
+var import_recharts12 = require("recharts");
+var PieChart = (props) => {
+  return /* @__PURE__ */ import_react12.default.createElement(ResponsiveContainer, null, /* @__PURE__ */ import_react12.default.createElement(import_recharts12.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, {
   isAnimationActive: false,
-  contentStyle: { border: "1px solid rgb(0, 0, 0)", borderRadius: "1px", background: "#000" },
-  itemStyle: { display: "flex", paddingTop: "2px", paddingBottom: "2px" },
-  cursor: false
+  innerRadius: 0,
+  outerRadius: "80%"
 });
+PieChart.Pie = Pie2;
+PieChart.Cell = import_recharts12.Cell;
+
+// src/charts/Reference/Reference.tsx
+var import_react13 = __toESM(require("react"));
+var import_recharts13 = require("recharts");
+var ReferenceLine = Object.assign(
+  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts13.ReferenceLine, __spreadProps(__spreadValues({}, props), {
+    strokeDasharray: "9 3",
+    strokeWidth: 2
+  })),
+  import_recharts13.ReferenceLine
+);
+var ReferenceArea = Object.assign(
+  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts13.ReferenceArea, __spreadProps(__spreadValues({}, props), {
+    strokeWidth: 0,
+    fillOpacity: 0.1
+  })),
+  import_recharts13.ReferenceLine
+);
+var Reference = {
+  Line: ReferenceLine,
+  Area: ReferenceArea
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Area,
+  AreaChart,
   Axis,
   Bar,
   BarChart,
   CartesianGrid,
+  Cell,
+  Doughnut,
+  DoughnutChart,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  Reference,
   ResponsiveContainer,
   Tooltip,
+  extractChildByName,
   getDisplayName,
   getXAxisTicks,
   renderXAxis,