@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/Sparkline.cjs

@@ -0,0 +1,117 @@
+"use client";
+'use strict';
+
+var chunkGVTMZYOM_cjs = require('./chunk-GVTMZYOM.cjs');
+var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.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 react = require('react');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Sparkline = ({
+  data,
+  color = chunkLT3UC65O_cjs.SERIES[0],
+  variant = "area",
+  label = "value",
+  formatValue,
+  min,
+  max,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 60,
+  width
+}) => {
+  const uid = chunkK3R7JGOW_cjs.safeId(react.useId());
+  const name = ariaLabel ?? `Trend of ${label}`;
+  if (chunkK3R7JGOW_cjs.hasNoData([{ data }])) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  if (variant === "bar") {
+    const fillFor = (value) => value < 0 ? chunkLT3UC65O_cjs.ERROR : void 0;
+    const hasNegative = data.some((value) => value < 0);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      recharts.BarChart,
+      {
+        ...chunk6NRRABPF_cjs.frameProps({ height, width, ariaLabel: name, keyboard: false }),
+        data: data.map((value, i) => ({ i, value })),
+        margin: { top: 6, right: 4, bottom: 4, left: 4 },
+        barCategoryGap: "20%",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { hide: true, dataKey: "i" }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { hide: true, domain: [min ?? Math.min(0, ...data), max ?? Math.max(0, ...data)] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Tooltip,
+            {
+              content: /* @__PURE__ */ jsxRuntime.jsx(chunkT3K6Q34U_cjs.ChartTooltip, { format: formatValue, hideTitle: true, colorOf: fillFor }),
+              cursor: { fill: chunkLT3UC65O_cjs.BORDER, fillOpacity: 0.35 },
+              offset: 12,
+              allowEscapeViewBox: { x: true, y: true },
+              animationDuration: 100
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Bar,
+            {
+              name: label,
+              dataKey: "value",
+              fill: color,
+              maxBarSize: 14,
+              shape: chunkGVTMZYOM_cjs.roundedBarShape({ layout: "horizontal", radius: 2, dataKey: "value", fillFor }),
+              ...chunkTYQWZR3S_cjs.ANIMATION
+            }
+          ),
+          hasNegative && /* @__PURE__ */ jsxRuntime.jsx(recharts.ReferenceLine, { y: 0, stroke: chunkLT3UC65O_cjs.BORDER, strokeDasharray: "3 3", ifOverflow: "hidden" }),
+          children
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.AreaChart,
+    {
+      ...chunk6NRRABPF_cjs.frameProps({ height, width, ariaLabel: name, keyboard: false }),
+      data: data.map((value, i) => ({ i, value })),
+      margin: { top: 6, right: 4, bottom: 4, left: 4 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: uid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.32 }),
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { hide: true, domain: [min ?? "dataMin", max ?? "dataMax"] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            content: /* @__PURE__ */ jsxRuntime.jsx(chunkT3K6Q34U_cjs.ChartTooltip, { format: formatValue, hideTitle: true }),
+            cursor: false,
+            offset: 12,
+            allowEscapeViewBox: { x: true, y: true },
+            animationDuration: 100
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Area,
+          {
+            name: label,
+            dataKey: "value",
+            type: "monotone",
+            stroke: color,
+            strokeWidth: 2,
+            fill: variant === "area" ? `url(#${uid})` : "none",
+            dot: false,
+            activeDot: { r: 4, fill: chunkLT3UC65O_cjs.PANEL, stroke: color, strokeWidth: 2 },
+            ...chunkTYQWZR3S_cjs.ANIMATION
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+exports.Sparkline = Sparkline;
+//# sourceMappingURL=Sparkline.cjs.map
+//# sourceMappingURL=Sparkline.cjs.map

package/dist/Sparkline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Sparkline.tsx"],"names":["SERIES","safeId","useId","hasNoData","ChartEmpty","ERROR","jsxs","BarChart","frameProps","jsx","XAxis","YAxis","Tooltip","ChartTooltip","BORDER","Bar","roundedBarShape","ANIMATION","ReferenceLine","AreaChart","Area","PANEL"],"mappings":"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","file":"Sparkline.cjs","sourcesContent":["import { useId } from 'react';\nimport { Area, AreaChart, Bar, BarChart, ReferenceLine, Tooltip, XAxis, YAxis } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { ChartTooltip } from './core/ChartTooltip';\nimport { BORDER, ERROR, PANEL, SERIES } from './core/colors';\nimport { hasNoData, safeId } from './core/data';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { roundedBarShape } from './core/roundedBar';\nimport type { ChartEmptyProps, ChartProps } from './types';\n\nexport type SparklineProps = ChartProps &\n  ChartEmptyProps & {\n    data: number[];\n    /** A CSS color. Default: the accent. */\n    color?: string;\n    /**\n     * `area` (default), `line`, or `bar`: narrow columns in `color`, the ones below zero in the\n     * danger color under a dashed zero line.\n     */\n    variant?: 'line' | 'area' | 'bar';\n    /** Names the value in the tooltip. Default `value`. Drawn as plain text. */\n    label?: string;\n    /** Format the tooltip value (default `String`). */\n    formatValue?: (value: number) => string;\n    /**\n     * Bottom of the scale. Default: the lowest value of `data`, so each sparkline fills its\n     * height; for `bar`, the lower of 0 and the lowest value, since a bar scale that does not\n     * start at zero exaggerates the differences. Set the same `min` and `max` on sparklines that\n     * are read against each other.\n     */\n    min?: number;\n    /** Top of the scale. Default: the highest value of `data` (for `bar`, at least 0). */\n    max?: number;\n  };\n\nexport const Sparkline = ({\n  data,\n  color = SERIES[0],\n  variant = 'area',\n  label = 'value',\n  formatValue,\n  min,\n  max,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 60,\n  width,\n}: SparklineProps) => {\n  const uid = safeId(useId());\n  const name = ariaLabel ?? `Trend of ${label}`;\n  if (hasNoData([{ data }])) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  if (variant === 'bar') {\n    const fillFor = (value: number) => (value < 0 ? ERROR : undefined);\n    const hasNegative = data.some((value) => value < 0);\n    return (\n      <BarChart\n        {...frameProps({ height, width, ariaLabel: name, keyboard: false })}\n        data={data.map((value, i) => ({ i, value }))}\n        margin={{ top: 6, right: 4, bottom: 4, left: 4 }}\n        barCategoryGap=\"20%\"\n      >\n        <XAxis hide dataKey=\"i\" />\n        <YAxis hide domain={[min ?? Math.min(0, ...data), max ?? Math.max(0, ...data)]} />\n        <Tooltip\n          content={<ChartTooltip format={formatValue} hideTitle colorOf={fillFor} />}\n          cursor={{ fill: BORDER, fillOpacity: 0.35 }}\n          offset={12}\n          allowEscapeViewBox={{ x: true, y: true }}\n          animationDuration={100}\n        />\n        <Bar\n          name={label}\n          dataKey=\"value\"\n          fill={color}\n          maxBarSize={14}\n          shape={roundedBarShape({ layout: 'horizontal', radius: 2, dataKey: 'value', fillFor })}\n          {...ANIMATION}\n        />\n        {hasNegative && (\n          <ReferenceLine y={0} stroke={BORDER} strokeDasharray=\"3 3\" ifOverflow=\"hidden\" />\n        )}\n        {children}\n      </BarChart>\n    );\n  }\n  return (\n    <AreaChart\n      // A sparkline is an image: the tooltip follows the pointer, and Tab skips it.\n      {...frameProps({ height, width, ariaLabel: name, keyboard: false })}\n      data={data.map((value, i) => ({ i, value }))}\n      margin={{ top: 6, right: 4, bottom: 4, left: 4 }}\n    >\n      <defs>\n        <linearGradient id={uid} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={color} stopOpacity={0.32} />\n          <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n        </linearGradient>\n      </defs>\n      {/* The scale fits the data unless pinned. */}\n      <YAxis hide domain={[min ?? 'dataMin', max ?? 'dataMax']} />\n      <Tooltip\n        content={<ChartTooltip format={formatValue} hideTitle />}\n        cursor={false}\n        offset={12}\n        allowEscapeViewBox={{ x: true, y: true }}\n        animationDuration={100}\n      />\n      <Area\n        name={label}\n        dataKey=\"value\"\n        type=\"monotone\"\n        stroke={color}\n        strokeWidth={2}\n        fill={variant === 'area' ? `url(#${uid})` : 'none'}\n        dot={false}\n        activeDot={{ r: 4, fill: PANEL, stroke: color, strokeWidth: 2 }}\n        {...ANIMATION}\n      />\n      {children}\n    </AreaChart>\n  );\n};\n"]}

package/dist/Sparkline.js

@@ -0,0 +1,115 @@
+"use client";
+import { roundedBarShape } from './chunk-GDZLYYL2.js';
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { ChartTooltip } from './chunk-VIOSQN4Z.js';
+import { safeId, hasNoData } from './chunk-UJIV5PVI.js';
+import { ChartEmpty, frameProps } from './chunk-3N43QT36.js';
+import { BORDER, ERROR, SERIES, PANEL } from './chunk-UATB2IRY.js';
+import { useId } from 'react';
+import { BarChart, XAxis, YAxis, Tooltip, Bar, ReferenceLine, AreaChart, Area } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Sparkline = ({
+  data,
+  color = SERIES[0],
+  variant = "area",
+  label = "value",
+  formatValue,
+  min,
+  max,
+  emptyMessage = "No data",
+  ariaLabel,
+  children,
+  height = 60,
+  width
+}) => {
+  const uid = safeId(useId());
+  const name = ariaLabel ?? `Trend of ${label}`;
+  if (hasNoData([{ data }])) {
+    return /* @__PURE__ */ jsx(ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+  }
+  if (variant === "bar") {
+    const fillFor = (value) => value < 0 ? ERROR : void 0;
+    const hasNegative = data.some((value) => value < 0);
+    return /* @__PURE__ */ jsxs(
+      BarChart,
+      {
+        ...frameProps({ height, width, ariaLabel: name, keyboard: false }),
+        data: data.map((value, i) => ({ i, value })),
+        margin: { top: 6, right: 4, bottom: 4, left: 4 },
+        barCategoryGap: "20%",
+        children: [
+          /* @__PURE__ */ jsx(XAxis, { hide: true, dataKey: "i" }),
+          /* @__PURE__ */ jsx(YAxis, { hide: true, domain: [min ?? Math.min(0, ...data), max ?? Math.max(0, ...data)] }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: /* @__PURE__ */ jsx(ChartTooltip, { format: formatValue, hideTitle: true, colorOf: fillFor }),
+              cursor: { fill: BORDER, fillOpacity: 0.35 },
+              offset: 12,
+              allowEscapeViewBox: { x: true, y: true },
+              animationDuration: 100
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Bar,
+            {
+              name: label,
+              dataKey: "value",
+              fill: color,
+              maxBarSize: 14,
+              shape: roundedBarShape({ layout: "horizontal", radius: 2, dataKey: "value", fillFor }),
+              ...ANIMATION
+            }
+          ),
+          hasNegative && /* @__PURE__ */ jsx(ReferenceLine, { y: 0, stroke: BORDER, strokeDasharray: "3 3", ifOverflow: "hidden" }),
+          children
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    AreaChart,
+    {
+      ...frameProps({ height, width, ariaLabel: name, keyboard: false }),
+      data: data.map((value, i) => ({ i, value })),
+      margin: { top: 6, right: 4, bottom: 4, left: 4 },
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: uid, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.32 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ jsx(YAxis, { hide: true, domain: [min ?? "dataMin", max ?? "dataMax"] }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(ChartTooltip, { format: formatValue, hideTitle: true }),
+            cursor: false,
+            offset: 12,
+            allowEscapeViewBox: { x: true, y: true },
+            animationDuration: 100
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Area,
+          {
+            name: label,
+            dataKey: "value",
+            type: "monotone",
+            stroke: color,
+            strokeWidth: 2,
+            fill: variant === "area" ? `url(#${uid})` : "none",
+            dot: false,
+            activeDot: { r: 4, fill: PANEL, stroke: color, strokeWidth: 2 },
+            ...ANIMATION
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+
+export { Sparkline };
+//# sourceMappingURL=Sparkline.js.map
+//# sourceMappingURL=Sparkline.js.map

package/dist/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Sparkline.tsx"],"names":[],"mappings":"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","file":"Sparkline.js","sourcesContent":["import { useId } from 'react';\nimport { Area, AreaChart, Bar, BarChart, ReferenceLine, Tooltip, XAxis, YAxis } from 'recharts';\nimport { ANIMATION } from './core/animation';\nimport { ChartTooltip } from './core/ChartTooltip';\nimport { BORDER, ERROR, PANEL, SERIES } from './core/colors';\nimport { hasNoData, safeId } from './core/data';\nimport { ChartEmpty, frameProps } from './core/frame';\nimport { roundedBarShape } from './core/roundedBar';\nimport type { ChartEmptyProps, ChartProps } from './types';\n\nexport type SparklineProps = ChartProps &\n  ChartEmptyProps & {\n    data: number[];\n    /** A CSS color. Default: the accent. */\n    color?: string;\n    /**\n     * `area` (default), `line`, or `bar`: narrow columns in `color`, the ones below zero in the\n     * danger color under a dashed zero line.\n     */\n    variant?: 'line' | 'area' | 'bar';\n    /** Names the value in the tooltip. Default `value`. Drawn as plain text. */\n    label?: string;\n    /** Format the tooltip value (default `String`). */\n    formatValue?: (value: number) => string;\n    /**\n     * Bottom of the scale. Default: the lowest value of `data`, so each sparkline fills its\n     * height; for `bar`, the lower of 0 and the lowest value, since a bar scale that does not\n     * start at zero exaggerates the differences. Set the same `min` and `max` on sparklines that\n     * are read against each other.\n     */\n    min?: number;\n    /** Top of the scale. Default: the highest value of `data` (for `bar`, at least 0). */\n    max?: number;\n  };\n\nexport const Sparkline = ({\n  data,\n  color = SERIES[0],\n  variant = 'area',\n  label = 'value',\n  formatValue,\n  min,\n  max,\n  emptyMessage = 'No data',\n  ariaLabel,\n  children,\n  height = 60,\n  width,\n}: SparklineProps) => {\n  const uid = safeId(useId());\n  const name = ariaLabel ?? `Trend of ${label}`;\n  if (hasNoData([{ data }])) {\n    return <ChartEmpty message={emptyMessage} ariaLabel={name} height={height} width={width} />;\n  }\n  if (variant === 'bar') {\n    const fillFor = (value: number) => (value < 0 ? ERROR : undefined);\n    const hasNegative = data.some((value) => value < 0);\n    return (\n      <BarChart\n        {...frameProps({ height, width, ariaLabel: name, keyboard: false })}\n        data={data.map((value, i) => ({ i, value }))}\n        margin={{ top: 6, right: 4, bottom: 4, left: 4 }}\n        barCategoryGap=\"20%\"\n      >\n        <XAxis hide dataKey=\"i\" />\n        <YAxis hide domain={[min ?? Math.min(0, ...data), max ?? Math.max(0, ...data)]} />\n        <Tooltip\n          content={<ChartTooltip format={formatValue} hideTitle colorOf={fillFor} />}\n          cursor={{ fill: BORDER, fillOpacity: 0.35 }}\n          offset={12}\n          allowEscapeViewBox={{ x: true, y: true }}\n          animationDuration={100}\n        />\n        <Bar\n          name={label}\n          dataKey=\"value\"\n          fill={color}\n          maxBarSize={14}\n          shape={roundedBarShape({ layout: 'horizontal', radius: 2, dataKey: 'value', fillFor })}\n          {...ANIMATION}\n        />\n        {hasNegative && (\n          <ReferenceLine y={0} stroke={BORDER} strokeDasharray=\"3 3\" ifOverflow=\"hidden\" />\n        )}\n        {children}\n      </BarChart>\n    );\n  }\n  return (\n    <AreaChart\n      // A sparkline is an image: the tooltip follows the pointer, and Tab skips it.\n      {...frameProps({ height, width, ariaLabel: name, keyboard: false })}\n      data={data.map((value, i) => ({ i, value }))}\n      margin={{ top: 6, right: 4, bottom: 4, left: 4 }}\n    >\n      <defs>\n        <linearGradient id={uid} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor={color} stopOpacity={0.32} />\n          <stop offset=\"100%\" stopColor={color} stopOpacity={0} />\n        </linearGradient>\n      </defs>\n      {/* The scale fits the data unless pinned. */}\n      <YAxis hide domain={[min ?? 'dataMin', max ?? 'dataMax']} />\n      <Tooltip\n        content={<ChartTooltip format={formatValue} hideTitle />}\n        cursor={false}\n        offset={12}\n        allowEscapeViewBox={{ x: true, y: true }}\n        animationDuration={100}\n      />\n      <Area\n        name={label}\n        dataKey=\"value\"\n        type=\"monotone\"\n        stroke={color}\n        strokeWidth={2}\n        fill={variant === 'area' ? `url(#${uid})` : 'none'}\n        dot={false}\n        activeDot={{ r: 4, fill: PANEL, stroke: color, strokeWidth: 2 }}\n        {...ANIMATION}\n      />\n      {children}\n    </AreaChart>\n  );\n};\n"]}

package/dist/StrokedGauge.cjs

@@ -0,0 +1,94 @@
+"use client";
+'use strict';
+
+var chunkMN4CDVOS_cjs = require('./chunk-MN4CDVOS.cjs');
+var chunkAAYHG7YK_cjs = require('./chunk-AAYHG7YK.cjs');
+require('./chunk-X3YZP5WF.cjs');
+require('./chunk-TYQWZR3S.cjs');
+require('./chunk-6NRRABPF.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+var RADIAN = Math.PI / 180;
+var arcPath = (cx, cy, r, from, to) => {
+  const at = (angle) => `${cx + r * Math.cos(-angle * RADIAN)} ${cy + r * Math.sin(-angle * RADIAN)}`;
+  const sweep = Math.abs(to - from);
+  if (sweep >= 359.99)
+    return `M${at(from)} A${r} ${r} 0 1 1 ${at(from - 180)} A${r} ${r} 0 1 1 ${at(from)}`;
+  return `M${at(from)} A${r} ${r} 0 ${sweep > 180 ? 1 : 0} 1 ${at(to)}`;
+};
+var dashes = (thickness, r) => {
+  const circumference = 2 * Math.PI * r;
+  const step = circumference / Math.max(1, Math.round(circumference / (thickness * 2)));
+  const dash = thickness * 0.4;
+  return `${dash} ${step - dash}`;
+};
+var dashedGauge = (color) => ({
+  cx = 0,
+  cy = 0,
+  innerRadius = 0,
+  outerRadius = 0,
+  startAngle = 0,
+  endAngle = 0
+}) => {
+  const thickness = Number(outerRadius) - Number(innerRadius);
+  const r = (Number(outerRadius) + Number(innerRadius)) / 2;
+  const [x, y, from, to] = [cx, cy, startAngle, endAngle].map(Number);
+  const stroke = {
+    fill: "none",
+    strokeWidth: thickness,
+    strokeLinecap: "round",
+    strokeDasharray: dashes(thickness, r)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: "recharts-radial-bar-background-sector",
+        d: arcPath(x, y, r, from, from - 360),
+        stroke: chunkLT3UC65O_cjs.TRACK,
+        ...stroke
+      }
+    ),
+    Math.abs(to - from) >= 0.01 && /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: "recharts-radial-bar-sector",
+        d: arcPath(x, y, r, from, to),
+        stroke: color,
+        ...stroke
+      }
+    )
+  ] });
+};
+var StrokedGauge = ({
+  value,
+  label = "",
+  color = chunkLT3UC65O_cjs.SERIES[0],
+  min = 0,
+  max = 100,
+  formatValue = chunkAAYHG7YK_cjs.percent,
+  ariaLabel,
+  children,
+  height = 280,
+  width
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  chunkMN4CDVOS_cjs.RadialGauge,
+  {
+    value,
+    label,
+    min,
+    max,
+    text: formatValue(value),
+    ariaLabel,
+    hollow: "88%",
+    shape: dashedGauge(color),
+    height,
+    width,
+    children
+  }
+);
+
+exports.StrokedGauge = StrokedGauge;
+//# sourceMappingURL=StrokedGauge.cjs.map
+//# sourceMappingURL=StrokedGauge.cjs.map

package/dist/StrokedGauge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/StrokedGauge.tsx"],"names":["jsx","TRACK","SERIES","percent","RadialGauge"],"mappings":"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","file":"StrokedGauge.cjs","sourcesContent":["import type { SectorProps } from 'recharts';\nimport { SERIES, TRACK } from './core/colors';\nimport { percent } from './core/gauge';\nimport { RadialGauge } from './core/RadialGauge';\nimport type { ChartProps } from './types';\n\nexport type StrokedGaugeProps = ChartProps & {\n  value: number;\n  label?: string;\n  /** Color of the arc. Default: the accent. */\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  /** Format the center value, from `value` itself (not its share of the range). Default: `92%`. */\n  formatValue?: (value: number) => string;\n};\n\nconst RADIAN = Math.PI / 180;\n\n// A Recharts sector is a filled shape, which cannot be dashed: the arc is\n// drawn as a stroke of the sector's thickness along its middle line. Recharts\n// angles run counter-clockwise from the right; the arc goes clockwise.\nconst arcPath = (cx: number, cy: number, r: number, from: number, to: number) => {\n  const at = (angle: number) =>\n    `${cx + r * Math.cos(-angle * RADIAN)} ${cy + r * Math.sin(-angle * RADIAN)}`;\n  const sweep = Math.abs(to - from);\n  // A single arc cannot close a circle: two halves.\n  if (sweep >= 359.99)\n    return `M${at(from)} A${r} ${r} 0 1 1 ${at(from - 180)} A${r} ${r} 0 1 1 ${at(from)}`;\n  return `M${at(from)} A${r} ${r} 0 ${sweep > 180 ? 1 : 0} 1 ${at(to)}`;\n};\n\n// Round dashes a little longer than the ring is thick, spaced so a whole\n// number of them closes the circle: the arc and the track share the pattern\n// and the same start, so the arc lights the dashes of the track.\nconst dashes = (thickness: number, r: number) => {\n  const circumference = 2 * Math.PI * r;\n  const step = circumference / Math.max(1, Math.round(circumference / (thickness * 2)));\n  const dash = thickness * 0.4;\n  return `${dash} ${step - dash}`;\n};\n\n// The whole circle in the same dashes, from the same start, behind the arc: the\n// shape draws both from one set of sector props, so the arc lights the dashes\n// of the track. It is called for an empty arc too.\nconst dashedGauge =\n  (color: string) =>\n  ({\n    cx = 0,\n    cy = 0,\n    innerRadius = 0,\n    outerRadius = 0,\n    startAngle = 0,\n    endAngle = 0,\n  }: SectorProps) => {\n    const thickness = Number(outerRadius) - Number(innerRadius);\n    const r = (Number(outerRadius) + Number(innerRadius)) / 2;\n    const [x, y, from, to] = [cx, cy, startAngle, endAngle].map(Number);\n    const stroke = {\n      fill: 'none',\n      strokeWidth: thickness,\n      strokeLinecap: 'round' as const,\n      strokeDasharray: dashes(thickness, r),\n    };\n    return (\n      <g>\n        <path\n          className=\"recharts-radial-bar-background-sector\"\n          d={arcPath(x, y, r, from, from - 360)}\n          stroke={TRACK}\n          {...stroke}\n        />\n        {/* A zero-length arc would still draw its round cap. */}\n        {Math.abs(to - from) >= 0.01 && (\n          <path\n            className=\"recharts-radial-bar-sector\"\n            d={arcPath(x, y, r, from, to)}\n            stroke={color}\n            {...stroke}\n          />\n        )}\n      </g>\n    );\n  };\n\nexport const StrokedGauge = ({\n  value,\n  label = '',\n  color = SERIES[0],\n  min = 0,\n  max = 100,\n  formatValue = percent,\n  ariaLabel,\n  children,\n  height = 280,\n  width,\n}: StrokedGaugeProps) => (\n  <RadialGauge\n    value={value}\n    label={label}\n    min={min}\n    max={max}\n    text={formatValue(value)}\n    ariaLabel={ariaLabel}\n    hollow=\"88%\"\n    shape={dashedGauge(color)}\n    height={height}\n    width={width}\n  >\n    {children}\n  </RadialGauge>\n);\n"]}

package/dist/StrokedGauge.js

@@ -0,0 +1,92 @@
+"use client";
+import { RadialGauge } from './chunk-YWYF5CCJ.js';
+import { percent } from './chunk-OCD6JIIX.js';
+import './chunk-URNXLVSK.js';
+import './chunk-5C2RLJYZ.js';
+import './chunk-3N43QT36.js';
+import { SERIES, TRACK } from './chunk-UATB2IRY.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var RADIAN = Math.PI / 180;
+var arcPath = (cx, cy, r, from, to) => {
+  const at = (angle) => `${cx + r * Math.cos(-angle * RADIAN)} ${cy + r * Math.sin(-angle * RADIAN)}`;
+  const sweep = Math.abs(to - from);
+  if (sweep >= 359.99)
+    return `M${at(from)} A${r} ${r} 0 1 1 ${at(from - 180)} A${r} ${r} 0 1 1 ${at(from)}`;
+  return `M${at(from)} A${r} ${r} 0 ${sweep > 180 ? 1 : 0} 1 ${at(to)}`;
+};
+var dashes = (thickness, r) => {
+  const circumference = 2 * Math.PI * r;
+  const step = circumference / Math.max(1, Math.round(circumference / (thickness * 2)));
+  const dash = thickness * 0.4;
+  return `${dash} ${step - dash}`;
+};
+var dashedGauge = (color) => ({
+  cx = 0,
+  cy = 0,
+  innerRadius = 0,
+  outerRadius = 0,
+  startAngle = 0,
+  endAngle = 0
+}) => {
+  const thickness = Number(outerRadius) - Number(innerRadius);
+  const r = (Number(outerRadius) + Number(innerRadius)) / 2;
+  const [x, y, from, to] = [cx, cy, startAngle, endAngle].map(Number);
+  const stroke = {
+    fill: "none",
+    strokeWidth: thickness,
+    strokeLinecap: "round",
+    strokeDasharray: dashes(thickness, r)
+  };
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: "recharts-radial-bar-background-sector",
+        d: arcPath(x, y, r, from, from - 360),
+        stroke: TRACK,
+        ...stroke
+      }
+    ),
+    Math.abs(to - from) >= 0.01 && /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: "recharts-radial-bar-sector",
+        d: arcPath(x, y, r, from, to),
+        stroke: color,
+        ...stroke
+      }
+    )
+  ] });
+};
+var StrokedGauge = ({
+  value,
+  label = "",
+  color = SERIES[0],
+  min = 0,
+  max = 100,
+  formatValue = percent,
+  ariaLabel,
+  children,
+  height = 280,
+  width
+}) => /* @__PURE__ */ jsx(
+  RadialGauge,
+  {
+    value,
+    label,
+    min,
+    max,
+    text: formatValue(value),
+    ariaLabel,
+    hollow: "88%",
+    shape: dashedGauge(color),
+    height,
+    width,
+    children
+  }
+);
+
+export { StrokedGauge };
+//# sourceMappingURL=StrokedGauge.js.map
+//# sourceMappingURL=StrokedGauge.js.map

package/dist/StrokedGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/StrokedGauge.tsx"],"names":[],"mappings":"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","file":"StrokedGauge.js","sourcesContent":["import type { SectorProps } from 'recharts';\nimport { SERIES, TRACK } from './core/colors';\nimport { percent } from './core/gauge';\nimport { RadialGauge } from './core/RadialGauge';\nimport type { ChartProps } from './types';\n\nexport type StrokedGaugeProps = ChartProps & {\n  value: number;\n  label?: string;\n  /** Color of the arc. Default: the accent. */\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  /** Format the center value, from `value` itself (not its share of the range). Default: `92%`. */\n  formatValue?: (value: number) => string;\n};\n\nconst RADIAN = Math.PI / 180;\n\n// A Recharts sector is a filled shape, which cannot be dashed: the arc is\n// drawn as a stroke of the sector's thickness along its middle line. Recharts\n// angles run counter-clockwise from the right; the arc goes clockwise.\nconst arcPath = (cx: number, cy: number, r: number, from: number, to: number) => {\n  const at = (angle: number) =>\n    `${cx + r * Math.cos(-angle * RADIAN)} ${cy + r * Math.sin(-angle * RADIAN)}`;\n  const sweep = Math.abs(to - from);\n  // A single arc cannot close a circle: two halves.\n  if (sweep >= 359.99)\n    return `M${at(from)} A${r} ${r} 0 1 1 ${at(from - 180)} A${r} ${r} 0 1 1 ${at(from)}`;\n  return `M${at(from)} A${r} ${r} 0 ${sweep > 180 ? 1 : 0} 1 ${at(to)}`;\n};\n\n// Round dashes a little longer than the ring is thick, spaced so a whole\n// number of them closes the circle: the arc and the track share the pattern\n// and the same start, so the arc lights the dashes of the track.\nconst dashes = (thickness: number, r: number) => {\n  const circumference = 2 * Math.PI * r;\n  const step = circumference / Math.max(1, Math.round(circumference / (thickness * 2)));\n  const dash = thickness * 0.4;\n  return `${dash} ${step - dash}`;\n};\n\n// The whole circle in the same dashes, from the same start, behind the arc: the\n// shape draws both from one set of sector props, so the arc lights the dashes\n// of the track. It is called for an empty arc too.\nconst dashedGauge =\n  (color: string) =>\n  ({\n    cx = 0,\n    cy = 0,\n    innerRadius = 0,\n    outerRadius = 0,\n    startAngle = 0,\n    endAngle = 0,\n  }: SectorProps) => {\n    const thickness = Number(outerRadius) - Number(innerRadius);\n    const r = (Number(outerRadius) + Number(innerRadius)) / 2;\n    const [x, y, from, to] = [cx, cy, startAngle, endAngle].map(Number);\n    const stroke = {\n      fill: 'none',\n      strokeWidth: thickness,\n      strokeLinecap: 'round' as const,\n      strokeDasharray: dashes(thickness, r),\n    };\n    return (\n      <g>\n        <path\n          className=\"recharts-radial-bar-background-sector\"\n          d={arcPath(x, y, r, from, from - 360)}\n          stroke={TRACK}\n          {...stroke}\n        />\n        {/* A zero-length arc would still draw its round cap. */}\n        {Math.abs(to - from) >= 0.01 && (\n          <path\n            className=\"recharts-radial-bar-sector\"\n            d={arcPath(x, y, r, from, to)}\n            stroke={color}\n            {...stroke}\n          />\n        )}\n      </g>\n    );\n  };\n\nexport const StrokedGauge = ({\n  value,\n  label = '',\n  color = SERIES[0],\n  min = 0,\n  max = 100,\n  formatValue = percent,\n  ariaLabel,\n  children,\n  height = 280,\n  width,\n}: StrokedGaugeProps) => (\n  <RadialGauge\n    value={value}\n    label={label}\n    min={min}\n    max={max}\n    text={formatValue(value)}\n    ariaLabel={ariaLabel}\n    hollow=\"88%\"\n    shape={dashedGauge(color)}\n    height={height}\n    width={width}\n  >\n    {children}\n  </RadialGauge>\n);\n"]}