rift-ds 1.0.0 → 1.1.0

package/components/Chart/PieChart.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useId, useCallback } from "react";
 import { ResponsiveContainer, PieChart as PieChart$1, Pie, Cell, Tooltip, Legend } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
@@ -33,6 +33,8 @@ const PieChart = ({
   bare = false,
   className = ""
 }) => {
+  const titleId = useId();
+  const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const defaultColors = getChartSeriesColors();
@@ -42,51 +44,60 @@ const PieChart = ({
     (props) => /* @__PURE__ */ jsx(PieChartTooltip, { ...props }),
     []
   );
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
-        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
-      ] }),
-      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
-      ] }, i)) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
-      /* @__PURE__ */ jsx(
-        Pie,
-        {
-          data,
-          dataKey: "value",
-          nameKey: "name",
-          cx: "50%",
-          cy: "50%",
-          innerRadius,
-          outerRadius,
-          strokeWidth: 2,
-          stroke: "var(--color-bg-container-primary)",
-          children: data.map((slice, i) => /* @__PURE__ */ jsx(
-            Cell,
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: "figure",
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": subtitle ? subtitleId : void 0,
+      children: [
+        (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+            title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
+          ] }),
+          summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
+          /* @__PURE__ */ jsx(
+            Pie,
             {
-              fill: slice.color || defaultColors[i % defaultColors.length]
-            },
-            slice.name
-          ))
-        }
-      ),
-      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      showLegend && /* @__PURE__ */ jsx(
-        Legend,
-        {
-          verticalAlign: "bottom",
-          iconType: "circle",
-          iconSize: 8,
-          formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: textSecondary, fontSize: 12 }, children: value })
-        }
-      )
-    ] }) }) })
-  ] });
+              data,
+              dataKey: "value",
+              nameKey: "name",
+              cx: "50%",
+              cy: "50%",
+              innerRadius,
+              outerRadius,
+              strokeWidth: 2,
+              stroke: "var(--color-bg-container-primary)",
+              children: data.map((slice, i) => /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  fill: slice.color || defaultColors[i % defaultColors.length]
+                },
+                slice.name
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+          showLegend && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              verticalAlign: "bottom",
+              iconType: "circle",
+              iconSize: 8,
+              formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: textSecondary, fontSize: 12 }, children: value })
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
 };
 export {
   PieChart

package/components/Chart/RadarChart.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useId, useCallback } from "react";
 import { ResponsiveContainer, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Tooltip, Radar, Legend } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
@@ -28,6 +28,8 @@ const RadarChart = ({
   bare = false,
   className = ""
 }) => {
+  const titleId = useId();
+  const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const textSecondary = getCSSVar("--color-text-secondary", "#303030");
@@ -38,54 +40,63 @@ const RadarChart = ({
     (props) => /* @__PURE__ */ jsx(RadarTooltip, { ...props }),
     []
   );
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
-        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
-      ] }),
-      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
-      ] }, i)) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "70%", children: [
-      /* @__PURE__ */ jsx(PolarGrid, { stroke: gridColor }),
-      /* @__PURE__ */ jsx(
-        PolarAngleAxis,
-        {
-          dataKey: categoryKey,
-          tick: { fill: textSecondary, fontSize: 12 }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        PolarRadiusAxis,
-        {
-          tick: { fill: textSecondary, fontSize: 10 },
-          axisLine: false,
-          tickCount: 5
-        }
-      ),
-      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      series.map((s, i) => /* @__PURE__ */ jsx(
-        Radar,
-        {
-          name: s.label,
-          dataKey: s.dataKey,
-          stroke: s.color || seriesColors[i % seriesColors.length],
-          fill: s.color || seriesColors[i % seriesColors.length],
-          fillOpacity: s.fillOpacity ?? 0.3
-        },
-        s.dataKey
-      )),
-      series.length > 1 && /* @__PURE__ */ jsx(
-        Legend,
-        {
-          wrapperStyle: { color: textSecondary, fontSize: 12 }
-        }
-      )
-    ] }) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: "figure",
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": subtitle ? subtitleId : void 0,
+      children: [
+        (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+            title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
+          ] }),
+          summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(RadarChart$1, { data, cx: "50%", cy: "50%", outerRadius: "70%", children: [
+          /* @__PURE__ */ jsx(PolarGrid, { stroke: gridColor }),
+          /* @__PURE__ */ jsx(
+            PolarAngleAxis,
+            {
+              dataKey: categoryKey,
+              tick: { fill: textSecondary, fontSize: 12 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PolarRadiusAxis,
+            {
+              tick: { fill: textSecondary, fontSize: 10 },
+              axisLine: false,
+              tickCount: 5
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+          series.map((s, i) => /* @__PURE__ */ jsx(
+            Radar,
+            {
+              name: s.label,
+              dataKey: s.dataKey,
+              stroke: s.color || seriesColors[i % seriesColors.length],
+              fill: s.color || seriesColors[i % seriesColors.length],
+              fillOpacity: s.fillOpacity ?? 0.3
+            },
+            s.dataKey
+          )),
+          series.length > 1 && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              wrapperStyle: { color: textSecondary, fontSize: 12 }
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
 };
 export {
   RadarChart

package/components/Chart/RadialChart.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useId, useCallback } from "react";
 import { ResponsiveContainer, RadialBarChart, PolarAngleAxis, RadialBar, Tooltip, Legend } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
@@ -36,6 +36,8 @@ const RadialChart = ({
   bare = false,
   className = ""
 }) => {
+  const titleId = useId();
+  const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const defaultColors = getChartSeriesColors();
@@ -50,64 +52,73 @@ const RadialChart = ({
     (props) => /* @__PURE__ */ jsx(RadialTooltip, { ...props }),
     []
   );
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
-        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
-      ] }),
-      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
-      ] }, i)) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
-      /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
-        RadialBarChart,
-        {
-          cx: "50%",
-          cy: "50%",
-          innerRadius,
-          outerRadius,
-          data: chartData,
-          startAngle: 90,
-          endAngle: -270,
-          barSize: 16,
-          children: [
-            /* @__PURE__ */ jsx(PolarAngleAxis, { type: "number", domain: [0, maxValue], tick: false }),
-            /* @__PURE__ */ jsx(
-              RadialBar,
-              {
-                background: { fill: bgColor },
-                dataKey: "value",
-                cornerRadius: 8
-              }
-            ),
-            /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-            showLegend && /* @__PURE__ */ jsx(
-              Legend,
-              {
-                verticalAlign: "bottom",
-                iconType: "circle",
-                iconSize: 8,
-                ...{ payload: chartData.map((d) => ({
-                  value: d.name,
-                  type: "circle",
-                  color: d.fill
-                  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                })) },
-                formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: textSecondary, fontSize: 12 }, children: value })
-              }
-            )
-          ]
-        }
-      ) }),
-      centerLabel && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__radial-center`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__radial-center-value`, children: centerLabel }),
-        centerSublabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__radial-center-sub`, children: centerSublabel })
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: "figure",
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": subtitle ? subtitleId : void 0,
+      children: [
+        (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+            title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
+          ] }),
+          summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
+          /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+            RadialBarChart,
+            {
+              cx: "50%",
+              cy: "50%",
+              innerRadius,
+              outerRadius,
+              data: chartData,
+              startAngle: 90,
+              endAngle: -270,
+              barSize: 16,
+              children: [
+                /* @__PURE__ */ jsx(PolarAngleAxis, { type: "number", domain: [0, maxValue], tick: false }),
+                /* @__PURE__ */ jsx(
+                  RadialBar,
+                  {
+                    background: { fill: bgColor },
+                    dataKey: "value",
+                    cornerRadius: 8
+                  }
+                ),
+                /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+                showLegend && /* @__PURE__ */ jsx(
+                  Legend,
+                  {
+                    verticalAlign: "bottom",
+                    iconType: "circle",
+                    iconSize: 8,
+                    ...{ payload: chartData.map((d) => ({
+                      value: d.name,
+                      type: "circle",
+                      color: d.fill
+                      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    })) },
+                    formatter: (value) => /* @__PURE__ */ jsx("span", { style: { color: textSecondary, fontSize: 12 }, children: value })
+                  }
+                )
+              ]
+            }
+          ) }),
+          centerLabel && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__radial-center`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__radial-center-value`, children: centerLabel }),
+            centerSublabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__radial-center-sub`, children: centerSublabel })
+          ] })
+        ] })
+      ]
+    }
+  );
 };
 export {
   RadialChart

package/components/Chart/ScatterChart.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useId, useCallback } from "react";
 import { ResponsiveContainer, ScatterChart as ScatterChart$1, CartesianGrid, XAxis, YAxis, ZAxis, Tooltip, Scatter, Legend } from "recharts";
 import { getChartSeriesColors } from "./palette.js";
 import "./Chart.css";
@@ -34,6 +34,8 @@ const ScatterChart = ({
   bare = false,
   className = ""
 }) => {
+  const titleId = useId();
+  const subtitleId = useId();
   const baseClass = "ds-chart";
   const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
   const seriesColors = getChartSeriesColors();
@@ -44,55 +46,64 @@ const ScatterChart = ({
     (props) => /* @__PURE__ */ jsx(ScatterTooltip, { ...props, xLabel, yLabel }),
     [xLabel, yLabel]
   );
-  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
-        title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
-      ] }),
-      summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
-      ] }, i)) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(ScatterChart$1, { margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
-      /* @__PURE__ */ jsx(CartesianGrid, { stroke: gridColor }),
-      /* @__PURE__ */ jsx(
-        XAxis,
-        {
-          type: "number",
-          dataKey: xKey,
-          name: xLabel,
-          tick: { fill: textSecondary, fontSize: 12 },
-          tickLine: false,
-          axisLine: { stroke: gridColor }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        YAxis,
-        {
-          type: "number",
-          dataKey: yKey,
-          name: yLabel,
-          tick: { fill: textSecondary, fontSize: 12 },
-          tickLine: false,
-          axisLine: false
-        }
-      ),
-      /* @__PURE__ */ jsx(ZAxis, { range: [48, 48] }),
-      /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
-      datasets.map((ds, i) => /* @__PURE__ */ jsx(
-        Scatter,
-        {
-          name: ds.name,
-          data: ds.data,
-          fill: ds.color || seriesColors[i % seriesColors.length]
-        },
-        ds.name
-      )),
-      datasets.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
-    ] }) }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      role: "figure",
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": subtitle ? subtitleId : void 0,
+      children: [
+        (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
+            title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
+          ] }),
+          summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(ScatterChart$1, { margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { stroke: gridColor }),
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              type: "number",
+              dataKey: xKey,
+              name: xLabel,
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: { stroke: gridColor }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              type: "number",
+              dataKey: yKey,
+              name: yLabel,
+              tick: { fill: textSecondary, fontSize: 12 },
+              tickLine: false,
+              axisLine: false
+            }
+          ),
+          /* @__PURE__ */ jsx(ZAxis, { range: [48, 48] }),
+          /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+          datasets.map((ds, i) => /* @__PURE__ */ jsx(
+            Scatter,
+            {
+              name: ds.name,
+              data: ds.data,
+              fill: ds.color || seriesColors[i % seriesColors.length]
+            },
+            ds.name
+          )),
+          datasets.length > 1 && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { color: textSecondary, fontSize: 12 } })
+        ] }) }) })
+      ]
+    }
+  );
 };
 export {
   ScatterChart