@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/ScatterChart.cjs

@@ -0,0 +1,134 @@
+"use client";
+'use strict';
+
+var chunkZ4LZFMDH_cjs = require('./chunk-Z4LZFMDH.cjs');
+var chunkGZRMVE4X_cjs = require('./chunk-GZRMVE4X.cjs');
+var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
+var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
+var chunkK3R7JGOW_cjs = require('./chunk-K3R7JGOW.cjs');
+var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var formatNumber = (value) => String(Number(value.toFixed(2)));
+var POINT_AREA = 113;
+var BUBBLE_AREAS = [60, 1100];
+var XYChart = ({
+  series,
+  bubbles,
+  colors,
+  formatX = formatNumber,
+  formatY = formatNumber,
+  xTitle,
+  yTitle,
+  referenceLines,
+  referenceBands,
+  showLegend,
+  legendPosition = "top",
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const hidden = chunkGZRMVE4X_cjs.useHiddenSeries();
+  const axis = chunkRLHGPHC7_cjs.useAxis();
+  const name = ariaLabel ?? `${bubbles ? "Bubble" : "Scatter"} chart: ${series.map((s) => s.name).join(", ")}`;
+  if (chunkK3R7JGOW_cjs.hasNoData(series)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const tooltip = ({ active, payload }) => {
+    const point = payload?.[0]?.payload;
+    if (!active || !point) return null;
+    const color = chunkLT3UC65O_cjs.seriesColor(point.series, colors);
+    const none = "transparent";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkT3K6Q34U_cjs.TooltipCard,
+      {
+        title: point.label,
+        rows: [
+          { name: series[point.series].name, value: "", color },
+          { name: xTitle ?? "x", value: formatX(point.x), color: none },
+          { name: yTitle ?? "y", value: formatY(point.y), color: none },
+          ...bubbles && point.z !== void 0 ? [{ name: bubbles.sizeTitle, value: bubbles.formatSize(point.z), color: none }] : []
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.ScatterChart,
+    {
+      ...chunk6NRRABPF_cjs.frameProps({ height, width, ariaLabel: name }),
+      margin: { top: 4, right: bubbles ? 24 : 12, bottom: 0, left: 0 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { stroke: chunkLT3UC65O_cjs.GRID, strokeDasharray: "4 4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            type: "number",
+            dataKey: "x",
+            name: xTitle ?? "x",
+            domain: ["auto", "auto"],
+            tickFormatter: formatX,
+            ...axis,
+            ...chunkRLHGPHC7_cjs.xAxisTitle(xTitle)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            type: "number",
+            dataKey: "y",
+            name: yTitle ?? "y",
+            domain: ["auto", "auto"],
+            width: "auto",
+            tickFormatter: formatY,
+            ...axis,
+            ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle)
+          }
+        ),
+        bubbles ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ZAxis, { type: "number", dataKey: "z", name: bubbles.sizeTitle, range: BUBBLE_AREAS }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ZAxis, { type: "number", range: [POINT_AREA, POINT_AREA] }),
+        (showLegend ?? series.length > 1) && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { ...chunkGZRMVE4X_cjs.legendProps(legendPosition, hidden) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: tooltip,
+            cursor: { stroke: chunkLT3UC65O_cjs.BORDER, strokeDasharray: "4 4" },
+            animationDuration: 150
+          }
+        ),
+        series.map((s, index) => {
+          const color = chunkLT3UC65O_cjs.seriesColor(index, colors);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Scatter,
+            {
+              name: s.name,
+              dataKey: chunkK3R7JGOW_cjs.seriesKey(index),
+              data: s.data.map((point) => ({ ...point, series: index })),
+              fill: color,
+              ...bubbles ? { fillOpacity: 0.6, stroke: color, strokeWidth: 1 } : {},
+              hide: hidden.hidden.has(chunkK3R7JGOW_cjs.seriesKey(index)),
+              ...chunkTYQWZR3S_cjs.ANIMATION
+            },
+            chunkK3R7JGOW_cjs.seriesKey(index)
+          );
+        }),
+        chunkZ4LZFMDH_cjs.referenceMarks({ referenceLines, referenceBands }),
+        children
+      ]
+    }
+  );
+};
+var ScatterChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(XYChart, { ...props });
+var BubbleChart = ({
+  sizeTitle = "Size",
+  formatSize = formatNumber,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(XYChart, { ...props, bubbles: { sizeTitle, formatSize } });
+
+exports.BubbleChart = BubbleChart;
+exports.ScatterChart = ScatterChart;
+//# sourceMappingURL=ScatterChart.cjs.map
+//# sourceMappingURL=ScatterChart.cjs.map

package/dist/ScatterChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ScatterChart.tsx"],"names":["useHiddenSeries","useAxis","hasNoData","ChartEmpty","seriesColor","jsx","TooltipCard","jsxs","RechartsScatterChart","frameProps","CartesianGrid","GRID","XAxis","xAxisTitle","YAxis","yAxisTitle","ZAxis","Legend","legendProps","Tooltip","BORDER","Scatter","seriesKey","ANIMATION","referenceMarks"],"mappings":"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","file":"ScatterChart.cjs","sourcesContent":["import {\n  CartesianGrid,\n  Legend,\n  Scatter,\n  ScatterChart as RechartsScatterChart,\n  Tooltip,\n  XAxis,\n  YAxis,\n  ZAxis,\n  type TooltipContentProps,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { BORDER, GRID, seriesColor } from './core/colors';\nimport { hasNoData, seriesKey } from './core/data';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { referenceMarks } from './core/reference';\nimport type { ChartEmptyProps, ChartLegendProps, ChartProps, ChartReferenceProps } from './types';\n\nexport type ScatterPoint = {\n  x: number;\n  y: number;\n  /** Names the point in the tooltip title: a node, a host, a rack. */\n  label?: string;\n};\n\nexport type BubblePoint = ScatterPoint & {\n  /** Third measure, drawn as the bubble size. */\n  z: number;\n};\n\ntype XYChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartReferenceProps & {\n    /** Title under the x-axis. Also labels the x value in the tooltip (default `x`). */\n    xTitle?: string;\n    /** Title beside the y-axis. Also labels the y value in the tooltip (default `y`). */\n    yTitle?: string;\n    /** Override the default Cosmos palette, one color per series. */\n    colors?: string[];\n    /** Format the x-axis labels and the tooltip's x value (default: at most two decimals). */\n    formatX?: (value: number) => string;\n    /** Format the y-axis labels and the tooltip's y value (default: at most two decimals). */\n    formatY?: (value: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n  };\n\nexport type ScatterChartProps = XYChartProps & {\n  series: { name: string; data: ScatterPoint[] }[];\n};\n\nexport type BubbleChartProps = XYChartProps & {\n  series: { name: string; data: BubblePoint[] }[];\n  /** Labels the size in the tooltip. Default `Size`. */\n  sizeTitle?: string;\n  /** Format the size in the tooltip (default: at most two decimals). */\n  formatSize?: (value: number) => string;\n};\n\n/** Drops the float noise of computed values: 33.333333 reads 33.33. */\nconst formatNumber = (value: number) => String(Number(value.toFixed(2)));\n\n// The area of a point, in px², for the Scatter chart: a 6px radius disc.\nconst POINT_AREA = 113;\n// The areas of the smallest and the largest bubble.\nconst BUBBLE_AREAS: [number, number] = [60, 1100];\n\ntype Bubbles = { sizeTitle: string; formatSize: (value: number) => string };\n\ntype XYProps = XYChartProps & {\n  series: { name: string; data: (ScatterPoint & { z?: number })[] }[];\n  bubbles?: Bubbles;\n};\n\nconst XYChart = ({\n  series,\n  bubbles,\n  colors,\n  formatX = formatNumber,\n  formatY = formatNumber,\n  xTitle,\n  yTitle,\n  referenceLines,\n  referenceBands,\n  showLegend,\n  legendPosition = 'top',\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width,\n}: XYProps) => {\n  const hidden = useHiddenSeries();\n  const axis = useAxis();\n  const name =\n    ariaLabel ?? `${bubbles ? 'Bubble' : 'Scatter'} chart: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n\n  // The card of the point under the pointer: its label, the series, then one\n  // row per measure.\n  const tooltip = ({ active, payload }: Partial<TooltipContentProps>) => {\n    const point = payload?.[0]?.payload as\n      (ScatterPoint & { z?: number; series: number }) | undefined;\n    if (!active || !point) return null;\n    const color = seriesColor(point.series, colors);\n    const none = 'transparent';\n    return (\n      <TooltipCard\n        title={point.label}\n        rows={[\n          { name: series[point.series].name, value: '', color },\n          { name: xTitle ?? 'x', value: formatX(point.x), color: none },\n          { name: yTitle ?? 'y', value: formatY(point.y), color: none },\n          ...(bubbles && point.z !== undefined\n            ? [{ name: bubbles.sizeTitle, value: bubbles.formatSize(point.z), color: none }]\n            : []),\n        ]}\n      />\n    );\n  };\n\n  return (\n    <RechartsScatterChart\n      {...frameProps({ height, width, ariaLabel: name })}\n      margin={{ top: 4, right: bubbles ? 24 : 12, bottom: 0, left: 0 }}\n    >\n      <CartesianGrid stroke={GRID} strokeDasharray=\"4 4\" />\n      <XAxis\n        type=\"number\"\n        dataKey=\"x\"\n        name={xTitle ?? 'x'}\n        domain={['auto', 'auto']}\n        tickFormatter={formatX}\n        {...axis}\n        {...xAxisTitle(xTitle)}\n      />\n      <YAxis\n        type=\"number\"\n        dataKey=\"y\"\n        name={yTitle ?? 'y'}\n        domain={['auto', 'auto']}\n        width=\"auto\"\n        tickFormatter={formatY}\n        {...axis}\n        {...yAxisTitle(yTitle)}\n      />\n      {bubbles ? (\n        <ZAxis type=\"number\" dataKey=\"z\" name={bubbles.sizeTitle} range={BUBBLE_AREAS} />\n      ) : (\n        <ZAxis type=\"number\" range={[POINT_AREA, POINT_AREA]} />\n      )}\n      {(showLegend ?? series.length > 1) && <Legend {...legendProps(legendPosition, hidden)} />}\n      <Tooltip\n        content={tooltip}\n        cursor={{ stroke: BORDER, strokeDasharray: '4 4' }}\n        animationDuration={150}\n      />\n      {series.map((s, index) => {\n        const color = seriesColor(index, colors);\n        return (\n          <Scatter\n            key={seriesKey(index)}\n            name={s.name}\n            dataKey={seriesKey(index)}\n            data={s.data.map((point) => ({ ...point, series: index }))}\n            fill={color}\n            // Translucent bubbles, outlined in their own color, keep the overlapping ones readable.\n            {...(bubbles ? { fillOpacity: 0.6, stroke: color, strokeWidth: 1 } : {})}\n            hide={hidden.hidden.has(seriesKey(index))}\n            {...ANIMATION}\n          />\n        );\n      })}\n      {referenceMarks({ referenceLines, referenceBands })}\n      {children}\n    </RechartsScatterChart>\n  );\n};\n\n/** Points on two numeric axes, e.g. latency against load, one point per node. */\nexport const ScatterChart = (props: ScatterChartProps) => <XYChart {...props} />;\n\n/** A scatter chart whose bubble size carries a third measure (`z`), e.g. request volume. */\nexport const BubbleChart = ({\n  sizeTitle = 'Size',\n  formatSize = formatNumber,\n  ...props\n}: BubbleChartProps) => <XYChart {...props} bubbles={{ sizeTitle, formatSize }} />;\n"]}

package/dist/ScatterChart.js

@@ -0,0 +1,131 @@
+"use client";
+import { referenceMarks } from './chunk-SGG7XKOY.js';
+import { useHiddenSeries, legendProps } from './chunk-6ALKZLN2.js';
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { useAxis, xAxisTitle, yAxisTitle } from './chunk-RILUG7JB.js';
+import { TooltipCard } from './chunk-VIOSQN4Z.js';
+import { hasNoData, seriesKey } from './chunk-UJIV5PVI.js';
+import { ChartEmpty, frameProps } from './chunk-3N43QT36.js';
+import { GRID, BORDER, seriesColor } from './chunk-UATB2IRY.js';
+import { ScatterChart as ScatterChart$1, CartesianGrid, XAxis, YAxis, ZAxis, Legend, Tooltip, Scatter } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var formatNumber = (value) => String(Number(value.toFixed(2)));
+var POINT_AREA = 113;
+var BUBBLE_AREAS = [60, 1100];
+var XYChart = ({
+  series,
+  bubbles,
+  colors,
+  formatX = formatNumber,
+  formatY = formatNumber,
+  xTitle,
+  yTitle,
+  referenceLines,
+  referenceBands,
+  showLegend,
+  legendPosition = "top",
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 320,
+  width
+}) => {
+  const hidden = useHiddenSeries();
+  const axis = useAxis();
+  const name = ariaLabel ?? `${bubbles ? "Bubble" : "Scatter"} chart: ${series.map((s) => s.name).join(", ")}`;
+  if (hasNoData(series)) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  const tooltip = ({ active, payload }) => {
+    const point = payload?.[0]?.payload;
+    if (!active || !point) return null;
+    const color = seriesColor(point.series, colors);
+    const none = "transparent";
+    return /* @__PURE__ */ jsx(
+      TooltipCard,
+      {
+        title: point.label,
+        rows: [
+          { name: series[point.series].name, value: "", color },
+          { name: xTitle ?? "x", value: formatX(point.x), color: none },
+          { name: yTitle ?? "y", value: formatY(point.y), color: none },
+          ...bubbles && point.z !== void 0 ? [{ name: bubbles.sizeTitle, value: bubbles.formatSize(point.z), color: none }] : []
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    ScatterChart$1,
+    {
+      ...frameProps({ height, width, ariaLabel: name }),
+      margin: { top: 4, right: bubbles ? 24 : 12, bottom: 0, left: 0 },
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { stroke: GRID, strokeDasharray: "4 4" }),
+        /* @__PURE__ */ jsx(
+          XAxis,
+          {
+            type: "number",
+            dataKey: "x",
+            name: xTitle ?? "x",
+            domain: ["auto", "auto"],
+            tickFormatter: formatX,
+            ...axis,
+            ...xAxisTitle(xTitle)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YAxis,
+          {
+            type: "number",
+            dataKey: "y",
+            name: yTitle ?? "y",
+            domain: ["auto", "auto"],
+            width: "auto",
+            tickFormatter: formatY,
+            ...axis,
+            ...yAxisTitle(yTitle)
+          }
+        ),
+        bubbles ? /* @__PURE__ */ jsx(ZAxis, { type: "number", dataKey: "z", name: bubbles.sizeTitle, range: BUBBLE_AREAS }) : /* @__PURE__ */ jsx(ZAxis, { type: "number", range: [POINT_AREA, POINT_AREA] }),
+        (showLegend ?? series.length > 1) && /* @__PURE__ */ jsx(Legend, { ...legendProps(legendPosition, hidden) }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: tooltip,
+            cursor: { stroke: BORDER, strokeDasharray: "4 4" },
+            animationDuration: 150
+          }
+        ),
+        series.map((s, index) => {
+          const color = seriesColor(index, colors);
+          return /* @__PURE__ */ jsx(
+            Scatter,
+            {
+              name: s.name,
+              dataKey: seriesKey(index),
+              data: s.data.map((point) => ({ ...point, series: index })),
+              fill: color,
+              ...bubbles ? { fillOpacity: 0.6, stroke: color, strokeWidth: 1 } : {},
+              hide: hidden.hidden.has(seriesKey(index)),
+              ...ANIMATION
+            },
+            seriesKey(index)
+          );
+        }),
+        referenceMarks({ referenceLines, referenceBands }),
+        children
+      ]
+    }
+  );
+};
+var ScatterChart = (props) => /* @__PURE__ */ jsx(XYChart, { ...props });
+var BubbleChart = ({
+  sizeTitle = "Size",
+  formatSize = formatNumber,
+  ...props
+}) => /* @__PURE__ */ jsx(XYChart, { ...props, bubbles: { sizeTitle, formatSize } });
+
+export { BubbleChart, ScatterChart };
+//# sourceMappingURL=ScatterChart.js.map
+//# sourceMappingURL=ScatterChart.js.map

package/dist/ScatterChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ScatterChart.tsx"],"names":["RechartsScatterChart"],"mappings":"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","file":"ScatterChart.js","sourcesContent":["import {\n  CartesianGrid,\n  Legend,\n  Scatter,\n  ScatterChart as RechartsScatterChart,\n  Tooltip,\n  XAxis,\n  YAxis,\n  ZAxis,\n  type TooltipContentProps,\n} from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { useAxis, xAxisTitle, yAxisTitle } from './core/axes';\nimport { TooltipCard } from './core/ChartTooltip';\nimport { legendProps, useHiddenSeries } from './core/ChartLegend';\nimport { BORDER, GRID, seriesColor } from './core/colors';\nimport { hasNoData, seriesKey } from './core/data';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { referenceMarks } from './core/reference';\nimport type { ChartEmptyProps, ChartLegendProps, ChartProps, ChartReferenceProps } from './types';\n\nexport type ScatterPoint = {\n  x: number;\n  y: number;\n  /** Names the point in the tooltip title: a node, a host, a rack. */\n  label?: string;\n};\n\nexport type BubblePoint = ScatterPoint & {\n  /** Third measure, drawn as the bubble size. */\n  z: number;\n};\n\ntype XYChartProps = ChartProps &\n  ChartEmptyProps &\n  ChartLegendProps &\n  ChartReferenceProps & {\n    /** Title under the x-axis. Also labels the x value in the tooltip (default `x`). */\n    xTitle?: string;\n    /** Title beside the y-axis. Also labels the y value in the tooltip (default `y`). */\n    yTitle?: string;\n    /** Override the default Cosmos palette, one color per series. */\n    colors?: string[];\n    /** Format the x-axis labels and the tooltip's x value (default: at most two decimals). */\n    formatX?: (value: number) => string;\n    /** Format the y-axis labels and the tooltip's y value (default: at most two decimals). */\n    formatY?: (value: number) => string;\n    /** Show the legend (auto-true when 2+ series). */\n    showLegend?: boolean;\n  };\n\nexport type ScatterChartProps = XYChartProps & {\n  series: { name: string; data: ScatterPoint[] }[];\n};\n\nexport type BubbleChartProps = XYChartProps & {\n  series: { name: string; data: BubblePoint[] }[];\n  /** Labels the size in the tooltip. Default `Size`. */\n  sizeTitle?: string;\n  /** Format the size in the tooltip (default: at most two decimals). */\n  formatSize?: (value: number) => string;\n};\n\n/** Drops the float noise of computed values: 33.333333 reads 33.33. */\nconst formatNumber = (value: number) => String(Number(value.toFixed(2)));\n\n// The area of a point, in px², for the Scatter chart: a 6px radius disc.\nconst POINT_AREA = 113;\n// The areas of the smallest and the largest bubble.\nconst BUBBLE_AREAS: [number, number] = [60, 1100];\n\ntype Bubbles = { sizeTitle: string; formatSize: (value: number) => string };\n\ntype XYProps = XYChartProps & {\n  series: { name: string; data: (ScatterPoint & { z?: number })[] }[];\n  bubbles?: Bubbles;\n};\n\nconst XYChart = ({\n  series,\n  bubbles,\n  colors,\n  formatX = formatNumber,\n  formatY = formatNumber,\n  xTitle,\n  yTitle,\n  referenceLines,\n  referenceBands,\n  showLegend,\n  legendPosition = 'top',\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 320,\n  width,\n}: XYProps) => {\n  const hidden = useHiddenSeries();\n  const axis = useAxis();\n  const name =\n    ariaLabel ?? `${bubbles ? 'Bubble' : 'Scatter'} chart: ${series.map((s) => s.name).join(', ')}`;\n  if (hasNoData(series)) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n\n  // The card of the point under the pointer: its label, the series, then one\n  // row per measure.\n  const tooltip = ({ active, payload }: Partial<TooltipContentProps>) => {\n    const point = payload?.[0]?.payload as\n      (ScatterPoint & { z?: number; series: number }) | undefined;\n    if (!active || !point) return null;\n    const color = seriesColor(point.series, colors);\n    const none = 'transparent';\n    return (\n      <TooltipCard\n        title={point.label}\n        rows={[\n          { name: series[point.series].name, value: '', color },\n          { name: xTitle ?? 'x', value: formatX(point.x), color: none },\n          { name: yTitle ?? 'y', value: formatY(point.y), color: none },\n          ...(bubbles && point.z !== undefined\n            ? [{ name: bubbles.sizeTitle, value: bubbles.formatSize(point.z), color: none }]\n            : []),\n        ]}\n      />\n    );\n  };\n\n  return (\n    <RechartsScatterChart\n      {...frameProps({ height, width, ariaLabel: name })}\n      margin={{ top: 4, right: bubbles ? 24 : 12, bottom: 0, left: 0 }}\n    >\n      <CartesianGrid stroke={GRID} strokeDasharray=\"4 4\" />\n      <XAxis\n        type=\"number\"\n        dataKey=\"x\"\n        name={xTitle ?? 'x'}\n        domain={['auto', 'auto']}\n        tickFormatter={formatX}\n        {...axis}\n        {...xAxisTitle(xTitle)}\n      />\n      <YAxis\n        type=\"number\"\n        dataKey=\"y\"\n        name={yTitle ?? 'y'}\n        domain={['auto', 'auto']}\n        width=\"auto\"\n        tickFormatter={formatY}\n        {...axis}\n        {...yAxisTitle(yTitle)}\n      />\n      {bubbles ? (\n        <ZAxis type=\"number\" dataKey=\"z\" name={bubbles.sizeTitle} range={BUBBLE_AREAS} />\n      ) : (\n        <ZAxis type=\"number\" range={[POINT_AREA, POINT_AREA]} />\n      )}\n      {(showLegend ?? series.length > 1) && <Legend {...legendProps(legendPosition, hidden)} />}\n      <Tooltip\n        content={tooltip}\n        cursor={{ stroke: BORDER, strokeDasharray: '4 4' }}\n        animationDuration={150}\n      />\n      {series.map((s, index) => {\n        const color = seriesColor(index, colors);\n        return (\n          <Scatter\n            key={seriesKey(index)}\n            name={s.name}\n            dataKey={seriesKey(index)}\n            data={s.data.map((point) => ({ ...point, series: index }))}\n            fill={color}\n            // Translucent bubbles, outlined in their own color, keep the overlapping ones readable.\n            {...(bubbles ? { fillOpacity: 0.6, stroke: color, strokeWidth: 1 } : {})}\n            hide={hidden.hidden.has(seriesKey(index))}\n            {...ANIMATION}\n          />\n        );\n      })}\n      {referenceMarks({ referenceLines, referenceBands })}\n      {children}\n    </RechartsScatterChart>\n  );\n};\n\n/** Points on two numeric axes, e.g. latency against load, one point per node. */\nexport const ScatterChart = (props: ScatterChartProps) => <XYChart {...props} />;\n\n/** A scatter chart whose bubble size carries a third measure (`z`), e.g. request volume. */\nexport const BubbleChart = ({\n  sizeTitle = 'Size',\n  formatSize = formatNumber,\n  ...props\n}: BubbleChartProps) => <XYChart {...props} bubbles={{ sizeTitle, formatSize }} />;\n"]}

package/dist/SemiCircleGauge.cjs

@@ -0,0 +1,142 @@
+"use client";
+'use strict';
+
+var chunkIW6EWB26_cjs = require('./chunk-IW6EWB26.cjs');
+var chunkAAYHG7YK_cjs = require('./chunk-AAYHG7YK.cjs');
+var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
+var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var RANGE_ROW = 20;
+var EDGE_ROW = 4;
+var valueSize = (radius) => radius >= 110 ? "var(--text-3xl, 1.875rem)" : radius >= 80 ? "var(--text-2xl, 1.5rem)" : "var(--text-xl, 1.25rem)";
+var Face = ({ radius, value, label, showRange, range }) => {
+  const area = recharts.usePlotArea();
+  if (!area) return null;
+  const cx = area.x + area.width / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("text", { "data-chart-center": "", textAnchor: "middle", pointerEvents: "none", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "tspan",
+        {
+          x: cx,
+          y: radius - (label ? 24 : 8),
+          fill: chunkLT3UC65O_cjs.TEXT,
+          fontWeight: 700,
+          style: { fontSize: valueSize(radius) },
+          children: value
+        }
+      ),
+      label && /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: cx, y: radius - 6, fill: chunkLT3UC65O_cjs.MUTED, style: { fontSize: "var(--text-xs, 0.75rem)" }, children: label })
+    ] }),
+    showRange && [-1, 1].map((side, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        "data-chart-range": "",
+        x: cx + side * radius,
+        y: radius + 14,
+        textAnchor: side < 0 ? "start" : "end",
+        fill: chunkLT3UC65O_cjs.MUTED,
+        pointerEvents: "none",
+        style: { fontSize: "var(--text-2xs, 0.6875rem)" },
+        children: range[i]
+      },
+      side
+    ))
+  ] });
+};
+var Target = ({ radius, thickness, share }) => {
+  const area = recharts.usePlotArea();
+  if (!area) return null;
+  const mark = chunkAAYHG7YK_cjs.arcMark(
+    { cx: area.x + area.width / 2, cy: radius },
+    { inner: radius - thickness - 4, outer: radius + 4 },
+    share
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-chart-target": "", pointerEvents: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { ...mark, stroke: chunkLT3UC65O_cjs.PANEL, strokeWidth: 6 }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { ...mark, stroke: chunkLT3UC65O_cjs.TEXT, strokeWidth: 3 })
+  ] });
+};
+var SemiCircleGauge = ({
+  value,
+  label = "",
+  color,
+  min = 0,
+  max = 100,
+  warnAt,
+  critAt,
+  formatValue = chunkAAYHG7YK_cjs.percent,
+  showRange = false,
+  target,
+  ariaLabel,
+  children,
+  height = 120,
+  width
+}) => {
+  const { ref: box, width: boxWidth } = chunkIW6EWB26_cjs.useElementWidth();
+  const text = formatValue(value);
+  const row = showRange ? RANGE_ROW : EDGE_ROW;
+  const radius = boxWidth === void 0 ? 0 : Math.floor(Math.min(boxWidth / 2, height - row));
+  const thickness = Math.min(24, Math.max(8, Math.round(radius * 0.2)));
+  const byStatus = warnAt !== void 0 || critAt !== void 0;
+  const arc = color ?? (byStatus ? chunkAAYHG7YK_cjs.statusColor(value, warnAt, critAt) : chunkLT3UC65O_cjs.SERIES[0]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: box,
+      style: { width: width ?? "100%", maxWidth: "100%", height: radius + row, minHeight: row },
+      children: radius > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.RadialBarChart,
+        {
+          ...chunk6NRRABPF_cjs.frameProps({
+            height: radius + row,
+            width: "100%",
+            ariaLabel: chunkAAYHG7YK_cjs.gaugeName(ariaLabel ?? (label || "Gauge"), text) + (target === void 0 ? "" : `, target ${formatValue(target)}`),
+            keyboard: false
+          }),
+          data: [{ name: label || "value", value: chunkAAYHG7YK_cjs.clampTo(value, min, max) }],
+          cx: "50%",
+          cy: radius,
+          startAngle: 180,
+          endAngle: 0,
+          innerRadius: radius - thickness,
+          outerRadius: radius,
+          barSize: thickness,
+          margin: { top: 0, right: 0, bottom: 0, left: 0 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.PolarAngleAxis, { type: "number", domain: [min, max], tick: false, axisLine: false }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.RadialBar,
+              {
+                dataKey: "value",
+                fill: arc,
+                cornerRadius: thickness / 2,
+                background: { fill: chunkLT3UC65O_cjs.TRACK, cornerRadius: thickness / 2 },
+                ...chunkTYQWZR3S_cjs.ANIMATION
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Face,
+              {
+                radius,
+                value: text,
+                label,
+                showRange,
+                range: [formatValue(min), formatValue(max)]
+              }
+            ),
+            target !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Target, { radius, thickness, share: chunkAAYHG7YK_cjs.rangeShare(target, min, max) }),
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+
+exports.SemiCircleGauge = SemiCircleGauge;
+//# sourceMappingURL=SemiCircleGauge.cjs.map
+//# sourceMappingURL=SemiCircleGauge.cjs.map

package/dist/SemiCircleGauge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SemiCircleGauge.tsx"],"names":["usePlotArea","jsxs","Fragment","jsx","TEXT","MUTED","arcMark","PANEL","percent","useElementWidth","statusColor","SERIES","RadialBarChart","frameProps","gaugeName","clampTo","PolarAngleAxis","RadialBar","TRACK","ANIMATION","rangeShare"],"mappings":"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","file":"SemiCircleGauge.cjs","sourcesContent":["import { PolarAngleAxis, RadialBar, RadialBarChart, usePlotArea } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { MUTED, PANEL, SERIES, TEXT, TRACK } from './core/colors';\nimport { frameProps } from './core/frame';\nimport { arcMark, clampTo, gaugeName, percent, rangeShare, statusColor } from './core/gauge';\nimport { useElementWidth } from './core/useElementWidth';\nimport type { ChartProps } from './types';\n\nexport type SemiCircleGaugeProps = Omit<ChartProps, 'height'> & {\n  value: number;\n  label?: string;\n  /**\n   * Color of the arc. Default: the accent, or the theme's status colors when\n   * `warnAt` or `critAt` is set.\n   */\n  color?: string;\n  /** Value at the start of the arc. Default 0. */\n  min?: number;\n  /** Value at the end of the arc, above `min`. Default 100. Out of range, the arc stops at an end. */\n  max?: number;\n  /**\n   * Value from which the arc turns to the theme's warning color. Setting it (or\n   * `critAt`) colors the arc by status: the theme's success color below, the\n   * warning color from `warnAt`, the critical color from `critAt`. Without\n   * either, the arc keeps one color, so a gauge where higher is better (an\n   * uptime, a score) does not turn red.\n   */\n  warnAt?: number;\n  /** Value from which the arc turns to the theme's critical color. See `warnAt`. */\n  critAt?: number;\n  /**\n   * Format the center value, from `value` itself (not its share of the range), and the\n   * `showRange` labels. Default: `67%`.\n   */\n  formatValue?: (value: number) => string;\n  /** Write `min` and `max`, formatted, under the two ends of the arc. Default off. */\n  showRange?: boolean;\n  /**\n   * A goal on the scale of `min`–`max`, drawn as a mark across the arc. Out of range, the mark\n   * stops at an end of the arc, as the arc does. The target, formatted by `formatValue`, is read\n   * after the value in the name of the gauge.\n   */\n  target?: number;\n  /**\n   * The most the gauge takes, in pixels (default 120). The arc is as wide as the box allows, up\n   * to this height: in a narrower box the gauge is shorter, never taller.\n   */\n  height?: number;\n};\n\n// Room under the arc: the `showRange` labels, and a margin without them.\nconst RANGE_ROW = 20;\nconst EDGE_ROW = 4;\n// The value, from the text tokens, large enough for the arc it sits in.\nconst valueSize = (radius: number) =>\n  radius >= 110\n    ? 'var(--text-3xl, 1.875rem)'\n    : radius >= 80\n      ? 'var(--text-2xl, 1.5rem)'\n      : 'var(--text-xl, 1.25rem)';\n\ntype FaceProps = {\n  radius: number;\n  value: string;\n  label: string;\n  showRange: boolean;\n  range: [string, string];\n};\n\n// The value over its label on the base of the arc, inside its hollow, and the\n// ends of the range under the two ends of the arc, starting at its outer edge\n// so a long one is not cut by the box. Plain SVG text.\nconst Face = ({ radius, value, label, showRange, range }: FaceProps) => {\n  const area = usePlotArea();\n  if (!area) return null;\n  const cx = area.x + area.width / 2;\n  return (\n    <>\n      <text data-chart-center=\"\" textAnchor=\"middle\" pointerEvents=\"none\">\n        <tspan\n          x={cx}\n          y={radius - (label ? 24 : 8)}\n          fill={TEXT}\n          fontWeight={700}\n          style={{ fontSize: valueSize(radius) }}\n        >\n          {value}\n        </tspan>\n        {label && (\n          <tspan x={cx} y={radius - 6} fill={MUTED} style={{ fontSize: 'var(--text-xs, 0.75rem)' }}>\n            {label}\n          </tspan>\n        )}\n      </text>\n      {showRange &&\n        ([-1, 1] as const).map((side, i) => (\n          <text\n            key={side}\n            data-chart-range=\"\"\n            x={cx + side * radius}\n            y={radius + 14}\n            textAnchor={side < 0 ? 'start' : 'end'}\n            fill={MUTED}\n            pointerEvents=\"none\"\n            style={{ fontSize: 'var(--text-2xs, 0.6875rem)' }}\n          >\n            {range[i]}\n          </text>\n        ))}\n    </>\n  );\n};\n\ntype TargetProps = { radius: number; thickness: number; share: number };\n\n// A radial mark across the arc, a little longer than it is thick: a dark line over a\n// halo in the card's color, so it reads on the arc, on the track and on the card.\nconst Target = ({ radius, thickness, share }: TargetProps) => {\n  const area = usePlotArea();\n  if (!area) return null;\n  const mark = arcMark(\n    { cx: area.x + area.width / 2, cy: radius },\n    { inner: radius - thickness - 4, outer: radius + 4 },\n    share\n  );\n  return (\n    <g data-chart-target=\"\" pointerEvents=\"none\" strokeLinecap=\"round\">\n      <line {...mark} stroke={PANEL} strokeWidth={6} />\n      <line {...mark} stroke={TEXT} strokeWidth={3} />\n    </g>\n  );\n};\n\nexport const SemiCircleGauge = ({\n  value,\n  label = '',\n  color,\n  min = 0,\n  max = 100,\n  warnAt,\n  critAt,\n  formatValue = percent,\n  showRange = false,\n  target,\n  ariaLabel,\n  children,\n  height = 120,\n  width,\n}: SemiCircleGaugeProps) => {\n  const { ref: box, width: boxWidth } = useElementWidth();\n  const text = formatValue(value);\n  const row = showRange ? RANGE_ROW : EDGE_ROW;\n  // The arc fills the width, up to the height it is allowed.\n  const radius = boxWidth === undefined ? 0 : Math.floor(Math.min(boxWidth / 2, height - row));\n  const thickness = Math.min(24, Math.max(8, Math.round(radius * 0.2)));\n  const byStatus = warnAt !== undefined || critAt !== undefined;\n  const arc = color ?? (byStatus ? statusColor(value, warnAt, critAt) : SERIES[0]);\n  return (\n    <div\n      ref={box}\n      style={{ width: width ?? '100%', maxWidth: '100%', height: radius + row, minHeight: row }}\n    >\n      {radius > 0 && (\n        <RadialBarChart\n          {...frameProps({\n            height: radius + row,\n            width: '100%',\n            ariaLabel:\n              gaugeName(ariaLabel ?? (label || 'Gauge'), text) +\n              (target === undefined ? '' : `, target ${formatValue(target)}`),\n            keyboard: false,\n          })}\n          data={[{ name: label || 'value', value: clampTo(value, min, max) }]}\n          cx=\"50%\"\n          cy={radius}\n          startAngle={180}\n          endAngle={0}\n          innerRadius={radius - thickness}\n          outerRadius={radius}\n          barSize={thickness}\n          margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n        >\n          <PolarAngleAxis type=\"number\" domain={[min, max]} tick={false} axisLine={false} />\n          <RadialBar\n            dataKey=\"value\"\n            fill={arc}\n            cornerRadius={thickness / 2}\n            background={{ fill: TRACK, cornerRadius: thickness / 2 }}\n            {...ANIMATION}\n          />\n          <Face\n            radius={radius}\n            value={text}\n            label={label}\n            showRange={showRange}\n            range={[formatValue(min), formatValue(max)]}\n          />\n          {target !== undefined && (\n            <Target radius={radius} thickness={thickness} share={rangeShare(target, min, max)} />\n          )}\n          {children}\n        </RadialBarChart>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/SemiCircleGauge.js

@@ -0,0 +1,140 @@
+"use client";
+import { useElementWidth } from './chunk-AOSO5QHL.js';
+import { percent, statusColor, rangeShare, clampTo, gaugeName, arcMark } from './chunk-OCD6JIIX.js';
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { frameProps } from './chunk-3N43QT36.js';
+import { SERIES, TRACK, TEXT, MUTED, PANEL } from './chunk-UATB2IRY.js';
+import { RadialBarChart, PolarAngleAxis, RadialBar, usePlotArea } from 'recharts';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var RANGE_ROW = 20;
+var EDGE_ROW = 4;
+var valueSize = (radius) => radius >= 110 ? "var(--text-3xl, 1.875rem)" : radius >= 80 ? "var(--text-2xl, 1.5rem)" : "var(--text-xl, 1.25rem)";
+var Face = ({ radius, value, label, showRange, range }) => {
+  const area = usePlotArea();
+  if (!area) return null;
+  const cx = area.x + area.width / 2;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("text", { "data-chart-center": "", textAnchor: "middle", pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx(
+        "tspan",
+        {
+          x: cx,
+          y: radius - (label ? 24 : 8),
+          fill: TEXT,
+          fontWeight: 700,
+          style: { fontSize: valueSize(radius) },
+          children: value
+        }
+      ),
+      label && /* @__PURE__ */ jsx("tspan", { x: cx, y: radius - 6, fill: MUTED, style: { fontSize: "var(--text-xs, 0.75rem)" }, children: label })
+    ] }),
+    showRange && [-1, 1].map((side, i) => /* @__PURE__ */ jsx(
+      "text",
+      {
+        "data-chart-range": "",
+        x: cx + side * radius,
+        y: radius + 14,
+        textAnchor: side < 0 ? "start" : "end",
+        fill: MUTED,
+        pointerEvents: "none",
+        style: { fontSize: "var(--text-2xs, 0.6875rem)" },
+        children: range[i]
+      },
+      side
+    ))
+  ] });
+};
+var Target = ({ radius, thickness, share }) => {
+  const area = usePlotArea();
+  if (!area) return null;
+  const mark = arcMark(
+    { cx: area.x + area.width / 2, cy: radius },
+    { inner: radius - thickness - 4, outer: radius + 4 },
+    share
+  );
+  return /* @__PURE__ */ jsxs("g", { "data-chart-target": "", pointerEvents: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { ...mark, stroke: PANEL, strokeWidth: 6 }),
+    /* @__PURE__ */ jsx("line", { ...mark, stroke: TEXT, strokeWidth: 3 })
+  ] });
+};
+var SemiCircleGauge = ({
+  value,
+  label = "",
+  color,
+  min = 0,
+  max = 100,
+  warnAt,
+  critAt,
+  formatValue = percent,
+  showRange = false,
+  target,
+  ariaLabel,
+  children,
+  height = 120,
+  width
+}) => {
+  const { ref: box, width: boxWidth } = useElementWidth();
+  const text = formatValue(value);
+  const row = showRange ? RANGE_ROW : EDGE_ROW;
+  const radius = boxWidth === void 0 ? 0 : Math.floor(Math.min(boxWidth / 2, height - row));
+  const thickness = Math.min(24, Math.max(8, Math.round(radius * 0.2)));
+  const byStatus = warnAt !== void 0 || critAt !== void 0;
+  const arc = color ?? (byStatus ? statusColor(value, warnAt, critAt) : SERIES[0]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: box,
+      style: { width: width ?? "100%", maxWidth: "100%", height: radius + row, minHeight: row },
+      children: radius > 0 && /* @__PURE__ */ jsxs(
+        RadialBarChart,
+        {
+          ...frameProps({
+            height: radius + row,
+            width: "100%",
+            ariaLabel: gaugeName(ariaLabel ?? (label || "Gauge"), text) + (target === void 0 ? "" : `, target ${formatValue(target)}`),
+            keyboard: false
+          }),
+          data: [{ name: label || "value", value: clampTo(value, min, max) }],
+          cx: "50%",
+          cy: radius,
+          startAngle: 180,
+          endAngle: 0,
+          innerRadius: radius - thickness,
+          outerRadius: radius,
+          barSize: thickness,
+          margin: { top: 0, right: 0, bottom: 0, left: 0 },
+          children: [
+            /* @__PURE__ */ jsx(PolarAngleAxis, { type: "number", domain: [min, max], tick: false, axisLine: false }),
+            /* @__PURE__ */ jsx(
+              RadialBar,
+              {
+                dataKey: "value",
+                fill: arc,
+                cornerRadius: thickness / 2,
+                background: { fill: TRACK, cornerRadius: thickness / 2 },
+                ...ANIMATION
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Face,
+              {
+                radius,
+                value: text,
+                label,
+                showRange,
+                range: [formatValue(min), formatValue(max)]
+              }
+            ),
+            target !== void 0 && /* @__PURE__ */ jsx(Target, { radius, thickness, share: rangeShare(target, min, max) }),
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+
+export { SemiCircleGauge };
+//# sourceMappingURL=SemiCircleGauge.js.map
+//# sourceMappingURL=SemiCircleGauge.js.map

package/dist/SemiCircleGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SemiCircleGauge.tsx"],"names":[],"mappings":";;;;;;;;;AAmDA,IAAM,SAAA,GAAY,EAAA;AAClB,IAAM,QAAA,GAAW,CAAA;AAEjB,IAAM,SAAA,GAAY,CAAC,MAAA,KACjB,MAAA,IAAU,MACN,2BAAA,GACA,MAAA,IAAU,KACR,yBAAA,GACA,yBAAA;AAaR,IAAM,IAAA,GAAO,CAAC,EAAE,MAAA,EAAQ,OAAO,KAAA,EAAO,SAAA,EAAW,OAAM,KAAiB;AACtE,EAAA,MAAM,OAAO,WAAA,EAAY;AACzB,EAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAClB,EAAA,MAAM,EAAA,GAAK,IAAA,CAAK,CAAA,GAAI,IAAA,CAAK,KAAA,GAAQ,CAAA;AACjC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,UAAK,mBAAA,EAAkB,EAAA,EAAG,UAAA,EAAW,QAAA,EAAS,eAAc,MAAA,EAC3D,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,CAAA,EAAG,EAAA;AAAA,UACH,CAAA,EAAG,MAAA,IAAU,KAAA,GAAQ,EAAA,GAAK,CAAA,CAAA;AAAA,UAC1B,IAAA,EAAM,IAAA;AAAA,UACN,UAAA,EAAY,GAAA;AAAA,UACZ,KAAA,EAAO,EAAE,QAAA,EAAU,SAAA,CAAU,MAAM,CAAA,EAAE;AAAA,UAEpC,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACC,KAAA,oBACC,GAAA,CAAC,OAAA,EAAA,EAAM,CAAA,EAAG,IAAI,CAAA,EAAG,MAAA,GAAS,CAAA,EAAG,IAAA,EAAM,OAAO,KAAA,EAAO,EAAE,QAAA,EAAU,yBAAA,IAC1D,QAAA,EAAA,KAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,IACC,SAAA,IACE,CAAC,EAAA,EAAI,CAAC,EAAY,GAAA,CAAI,CAAC,MAAM,CAAA,qBAC5B,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QAEC,kBAAA,EAAiB,EAAA;AAAA,QACjB,CAAA,EAAG,KAAK,IAAA,GAAO,MAAA;AAAA,QACf,GAAG,MAAA,GAAS,EAAA;AAAA,QACZ,UAAA,EAAY,IAAA,GAAO,CAAA,GAAI,OAAA,GAAU,KAAA;AAAA,QACjC,IAAA,EAAM,KAAA;AAAA,QACN,aAAA,EAAc,MAAA;AAAA,QACd,KAAA,EAAO,EAAE,QAAA,EAAU,4BAAA,EAA6B;AAAA,QAE/C,gBAAM,CAAC;AAAA,OAAA;AAAA,MATH;AAAA,KAWR;AAAA,GAAA,EACL,CAAA;AAEJ,CAAA;AAMA,IAAM,SAAS,CAAC,EAAE,MAAA,EAAQ,SAAA,EAAW,OAAM,KAAmB;AAC5D,EAAA,MAAM,OAAO,WAAA,EAAY;AACzB,EAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAClB,EAAA,MAAM,IAAA,GAAO,OAAA;AAAA,IACX,EAAE,IAAI,IAAA,CAAK,CAAA,GAAI,KAAK,KAAA,GAAQ,CAAA,EAAG,IAAI,MAAA,EAAO;AAAA,IAC1C,EAAE,KAAA,EAAO,MAAA,GAAS,YAAY,CAAA,EAAG,KAAA,EAAO,SAAS,CAAA,EAAE;AAAA,IACnD;AAAA,GACF;AACA,EAAA,4BACG,GAAA,EAAA,EAAE,mBAAA,EAAkB,IAAG,aAAA,EAAc,MAAA,EAAO,eAAc,OAAA,EACzD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAM,GAAG,IAAA,EAAM,MAAA,EAAQ,KAAA,EAAO,aAAa,CAAA,EAAG,CAAA;AAAA,wBAC9C,MAAA,EAAA,EAAM,GAAG,MAAM,MAAA,EAAQ,IAAA,EAAM,aAAa,CAAA,EAAG;AAAA,GAAA,EAChD,CAAA;AAEJ,CAAA;AAEO,IAAM,kBAAkB,CAAC;AAAA,EAC9B,KAAA;AAAA,EACA,KAAA,GAAQ,EAAA;AAAA,EACR,KAAA;AAAA,EACA,GAAA,GAAM,CAAA;AAAA,EACN,GAAA,GAAM,GAAA;AAAA,EACN,MAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA,GAAc,OAAA;AAAA,EACd,SAAA,GAAY,KAAA;AAAA,EACZ,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,GAAA;AAAA,EACT;AACF,CAAA,KAA4B;AAC1B,EAAA,MAAM,EAAE,GAAA,EAAK,GAAA,EAAK,KAAA,EAAO,QAAA,KAAa,eAAA,EAAgB;AACtD,EAAA,MAAM,IAAA,GAAO,YAAY,KAAK,CAAA;AAC9B,EAAA,MAAM,GAAA,GAAM,YAAY,SAAA,GAAY,QAAA;AAEpC,EAAA,MAAM,MAAA,GAAS,QAAA,KAAa,MAAA,GAAY,CAAA,GAAI,IAAA,CAAK,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,QAAA,GAAW,CAAA,EAAG,MAAA,GAAS,GAAG,CAAC,CAAA;AAC3F,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,GAAA,CAAI,EAAA,EAAI,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,MAAA,GAAS,GAAG,CAAC,CAAC,CAAA;AACpE,EAAA,MAAM,QAAA,GAAW,MAAA,KAAW,MAAA,IAAa,MAAA,KAAW,MAAA;AACpD,EAAA,MAAM,GAAA,GAAM,UAAU,QAAA,GAAW,WAAA,CAAY,OAAO,MAAA,EAAQ,MAAM,CAAA,GAAI,MAAA,CAAO,CAAC,CAAA,CAAA;AAC9E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,GAAA;AAAA,MACL,KAAA,EAAO,EAAE,KAAA,EAAO,KAAA,IAAS,MAAA,EAAQ,QAAA,EAAU,MAAA,EAAQ,MAAA,EAAQ,MAAA,GAAS,GAAA,EAAK,SAAA,EAAW,GAAA,EAAI;AAAA,MAEvF,mBAAS,CAAA,oBACR,IAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACE,GAAG,UAAA,CAAW;AAAA,YACb,QAAQ,MAAA,GAAS,GAAA;AAAA,YACjB,KAAA,EAAO,MAAA;AAAA,YACP,SAAA,EACE,SAAA,CAAU,SAAA,KAAc,KAAA,IAAS,OAAA,CAAA,EAAU,IAAI,CAAA,IAC9C,MAAA,KAAW,MAAA,GAAY,EAAA,GAAK,CAAA,SAAA,EAAY,WAAA,CAAY,MAAM,CAAC,CAAA,CAAA,CAAA;AAAA,YAC9D,QAAA,EAAU;AAAA,WACX,CAAA;AAAA,UACD,IAAA,EAAM,CAAC,EAAE,IAAA,EAAM,KAAA,IAAS,OAAA,EAAS,KAAA,EAAO,OAAA,CAAQ,KAAA,EAAO,GAAA,EAAK,GAAG,CAAA,EAAG,CAAA;AAAA,UAClE,EAAA,EAAG,KAAA;AAAA,UACH,EAAA,EAAI,MAAA;AAAA,UACJ,UAAA,EAAY,GAAA;AAAA,UACZ,QAAA,EAAU,CAAA;AAAA,UACV,aAAa,MAAA,GAAS,SAAA;AAAA,UACtB,WAAA,EAAa,MAAA;AAAA,UACb,OAAA,EAAS,SAAA;AAAA,UACT,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA,EAAE;AAAA,UAE/C,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAK,QAAA,EAAS,MAAA,EAAQ,CAAC,GAAA,EAAK,GAAG,CAAA,EAAG,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,CAAA;AAAA,4BAChF,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAQ,OAAA;AAAA,gBACR,IAAA,EAAM,GAAA;AAAA,gBACN,cAAc,SAAA,GAAY,CAAA;AAAA,gBAC1B,YAAY,EAAE,IAAA,EAAM,KAAA,EAAO,YAAA,EAAc,YAAY,CAAA,EAAE;AAAA,gBACtD,GAAG;AAAA;AAAA,aACN;AAAA,4BACA,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,MAAA;AAAA,gBACA,KAAA,EAAO,IAAA;AAAA,gBACP,KAAA;AAAA,gBACA,SAAA;AAAA,gBACA,OAAO,CAAC,WAAA,CAAY,GAAG,CAAA,EAAG,WAAA,CAAY,GAAG,CAAC;AAAA;AAAA,aAC5C;AAAA,YACC,MAAA,KAAW,MAAA,oBACV,GAAA,CAAC,MAAA,EAAA,EAAO,MAAA,EAAgB,SAAA,EAAsB,KAAA,EAAO,UAAA,CAAW,MAAA,EAAQ,GAAA,EAAK,GAAG,CAAA,EAAG,CAAA;AAAA,YAEpF;AAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ","file":"SemiCircleGauge.js","sourcesContent":["import { PolarAngleAxis, RadialBar, RadialBarChart, usePlotArea } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { MUTED, PANEL, SERIES, TEXT, TRACK } from './core/colors';\nimport { frameProps } from './core/frame';\nimport { arcMark, clampTo, gaugeName, percent, rangeShare, statusColor } from './core/gauge';\nimport { useElementWidth } from './core/useElementWidth';\nimport type { ChartProps } from './types';\n\nexport type SemiCircleGaugeProps = Omit<ChartProps, 'height'> & {\n  value: number;\n  label?: string;\n  /**\n   * Color of the arc. Default: the accent, or the theme's status colors when\n   * `warnAt` or `critAt` is set.\n   */\n  color?: string;\n  /** Value at the start of the arc. Default 0. */\n  min?: number;\n  /** Value at the end of the arc, above `min`. Default 100. Out of range, the arc stops at an end. */\n  max?: number;\n  /**\n   * Value from which the arc turns to the theme's warning color. Setting it (or\n   * `critAt`) colors the arc by status: the theme's success color below, the\n   * warning color from `warnAt`, the critical color from `critAt`. Without\n   * either, the arc keeps one color, so a gauge where higher is better (an\n   * uptime, a score) does not turn red.\n   */\n  warnAt?: number;\n  /** Value from which the arc turns to the theme's critical color. See `warnAt`. */\n  critAt?: number;\n  /**\n   * Format the center value, from `value` itself (not its share of the range), and the\n   * `showRange` labels. Default: `67%`.\n   */\n  formatValue?: (value: number) => string;\n  /** Write `min` and `max`, formatted, under the two ends of the arc. Default off. */\n  showRange?: boolean;\n  /**\n   * A goal on the scale of `min`–`max`, drawn as a mark across the arc. Out of range, the mark\n   * stops at an end of the arc, as the arc does. The target, formatted by `formatValue`, is read\n   * after the value in the name of the gauge.\n   */\n  target?: number;\n  /**\n   * The most the gauge takes, in pixels (default 120). The arc is as wide as the box allows, up\n   * to this height: in a narrower box the gauge is shorter, never taller.\n   */\n  height?: number;\n};\n\n// Room under the arc: the `showRange` labels, and a margin without them.\nconst RANGE_ROW = 20;\nconst EDGE_ROW = 4;\n// The value, from the text tokens, large enough for the arc it sits in.\nconst valueSize = (radius: number) =>\n  radius >= 110\n    ? 'var(--text-3xl, 1.875rem)'\n    : radius >= 80\n      ? 'var(--text-2xl, 1.5rem)'\n      : 'var(--text-xl, 1.25rem)';\n\ntype FaceProps = {\n  radius: number;\n  value: string;\n  label: string;\n  showRange: boolean;\n  range: [string, string];\n};\n\n// The value over its label on the base of the arc, inside its hollow, and the\n// ends of the range under the two ends of the arc, starting at its outer edge\n// so a long one is not cut by the box. Plain SVG text.\nconst Face = ({ radius, value, label, showRange, range }: FaceProps) => {\n  const area = usePlotArea();\n  if (!area) return null;\n  const cx = area.x + area.width / 2;\n  return (\n    <>\n      <text data-chart-center=\"\" textAnchor=\"middle\" pointerEvents=\"none\">\n        <tspan\n          x={cx}\n          y={radius - (label ? 24 : 8)}\n          fill={TEXT}\n          fontWeight={700}\n          style={{ fontSize: valueSize(radius) }}\n        >\n          {value}\n        </tspan>\n        {label && (\n          <tspan x={cx} y={radius - 6} fill={MUTED} style={{ fontSize: 'var(--text-xs, 0.75rem)' }}>\n            {label}\n          </tspan>\n        )}\n      </text>\n      {showRange &&\n        ([-1, 1] as const).map((side, i) => (\n          <text\n            key={side}\n            data-chart-range=\"\"\n            x={cx + side * radius}\n            y={radius + 14}\n            textAnchor={side < 0 ? 'start' : 'end'}\n            fill={MUTED}\n            pointerEvents=\"none\"\n            style={{ fontSize: 'var(--text-2xs, 0.6875rem)' }}\n          >\n            {range[i]}\n          </text>\n        ))}\n    </>\n  );\n};\n\ntype TargetProps = { radius: number; thickness: number; share: number };\n\n// A radial mark across the arc, a little longer than it is thick: a dark line over a\n// halo in the card's color, so it reads on the arc, on the track and on the card.\nconst Target = ({ radius, thickness, share }: TargetProps) => {\n  const area = usePlotArea();\n  if (!area) return null;\n  const mark = arcMark(\n    { cx: area.x + area.width / 2, cy: radius },\n    { inner: radius - thickness - 4, outer: radius + 4 },\n    share\n  );\n  return (\n    <g data-chart-target=\"\" pointerEvents=\"none\" strokeLinecap=\"round\">\n      <line {...mark} stroke={PANEL} strokeWidth={6} />\n      <line {...mark} stroke={TEXT} strokeWidth={3} />\n    </g>\n  );\n};\n\nexport const SemiCircleGauge = ({\n  value,\n  label = '',\n  color,\n  min = 0,\n  max = 100,\n  warnAt,\n  critAt,\n  formatValue = percent,\n  showRange = false,\n  target,\n  ariaLabel,\n  children,\n  height = 120,\n  width,\n}: SemiCircleGaugeProps) => {\n  const { ref: box, width: boxWidth } = useElementWidth();\n  const text = formatValue(value);\n  const row = showRange ? RANGE_ROW : EDGE_ROW;\n  // The arc fills the width, up to the height it is allowed.\n  const radius = boxWidth === undefined ? 0 : Math.floor(Math.min(boxWidth / 2, height - row));\n  const thickness = Math.min(24, Math.max(8, Math.round(radius * 0.2)));\n  const byStatus = warnAt !== undefined || critAt !== undefined;\n  const arc = color ?? (byStatus ? statusColor(value, warnAt, critAt) : SERIES[0]);\n  return (\n    <div\n      ref={box}\n      style={{ width: width ?? '100%', maxWidth: '100%', height: radius + row, minHeight: row }}\n    >\n      {radius > 0 && (\n        <RadialBarChart\n          {...frameProps({\n            height: radius + row,\n            width: '100%',\n            ariaLabel:\n              gaugeName(ariaLabel ?? (label || 'Gauge'), text) +\n              (target === undefined ? '' : `, target ${formatValue(target)}`),\n            keyboard: false,\n          })}\n          data={[{ name: label || 'value', value: clampTo(value, min, max) }]}\n          cx=\"50%\"\n          cy={radius}\n          startAngle={180}\n          endAngle={0}\n          innerRadius={radius - thickness}\n          outerRadius={radius}\n          barSize={thickness}\n          margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n        >\n          <PolarAngleAxis type=\"number\" domain={[min, max]} tick={false} axisLine={false} />\n          <RadialBar\n            dataKey=\"value\"\n            fill={arc}\n            cornerRadius={thickness / 2}\n            background={{ fill: TRACK, cornerRadius: thickness / 2 }}\n            {...ANIMATION}\n          />\n          <Face\n            radius={radius}\n            value={text}\n            label={label}\n            showRange={showRange}\n            range={[formatValue(min), formatValue(max)]}\n          />\n          {target !== undefined && (\n            <Target radius={radius} thickness={thickness} share={rangeShare(target, min, max)} />\n          )}\n          {children}\n        </RadialBarChart>\n      )}\n    </div>\n  );\n};\n"]}