@sckyzo/cosmos-charts 0.2.0 → 0.3.0

package/dist/chunk-YWYF5CCJ.js

@@ -0,0 +1,61 @@
+"use client";
+import { clampTo, gaugeName } from './chunk-OCD6JIIX.js';
+import { CenterText } from './chunk-URNXLVSK.js';
+import { ANIMATION } from './chunk-5C2RLJYZ.js';
+import { frameProps } from './chunk-3N43QT36.js';
+import { TRACK } from './chunk-UATB2IRY.js';
+import { RadialBarChart, PolarAngleAxis, RadialBar } from 'recharts';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RadialGauge = ({
+  value,
+  label,
+  min,
+  max,
+  text,
+  ariaLabel,
+  hollow,
+  fill,
+  shape,
+  defs,
+  children,
+  height,
+  width
+}) => /* @__PURE__ */ jsxs(
+  RadialBarChart,
+  {
+    ...frameProps({
+      height,
+      width,
+      ariaLabel: gaugeName(ariaLabel ?? (label || "Gauge"), text),
+      keyboard: false
+    }),
+    data: [{ name: label, value: clampTo(value, min, max) }],
+    startAngle: 90,
+    endAngle: -270,
+    innerRadius: hollow,
+    outerRadius: "100%",
+    barCategoryGap: 0,
+    margin: { top: 0, right: 0, bottom: 0, left: 0 },
+    children: [
+      defs && /* @__PURE__ */ jsx("defs", { children: defs }),
+      /* @__PURE__ */ jsx(PolarAngleAxis, { type: "number", domain: [min, max], tick: false, axisLine: false }),
+      /* @__PURE__ */ jsx(
+        RadialBar,
+        {
+          dataKey: "value",
+          fill,
+          shape,
+          background: shape ? false : { fill: TRACK },
+          ...ANIMATION
+        }
+      ),
+      /* @__PURE__ */ jsx(CenterText, { value: text, label, valueSize: "var(--text-3xl, 1.875rem)" }),
+      children
+    ]
+  }
+);
+
+export { RadialGauge };
+//# sourceMappingURL=chunk-YWYF5CCJ.js.map
+//# sourceMappingURL=chunk-YWYF5CCJ.js.map

package/dist/chunk-YWYF5CCJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/RadialGauge.tsx"],"names":[],"mappings":";;;;;;;;;AAkCO,IAAM,cAAc,CAAC;AAAA,EAC1B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,qBACE,IAAA;AAAA,EAAC,cAAA;AAAA,EAAA;AAAA,IACE,GAAG,UAAA,CAAW;AAAA,MACb,MAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,SAAA,CAAU,SAAA,KAAc,KAAA,IAAS,UAAU,IAAI,CAAA;AAAA,MAC1D,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,IAAA,EAAM,CAAC,EAAE,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,OAAA,CAAQ,KAAA,EAAO,GAAA,EAAK,GAAG,CAAA,EAAG,CAAA;AAAA,IACvD,UAAA,EAAY,EAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,WAAA,EAAa,MAAA;AAAA,IACb,WAAA,EAAY,MAAA;AAAA,IAEZ,cAAA,EAAgB,CAAA;AAAA,IAChB,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA,EAAE;AAAA,IAE9C,QAAA,EAAA;AAAA,MAAA,IAAA,oBAAQ,GAAA,CAAC,UAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBACrB,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,sBAChF,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,IAAA;AAAA,UACA,KAAA;AAAA,UAGA,UAAA,EAAY,KAAA,GAAQ,KAAA,GAAQ,EAAE,MAAM,KAAA,EAAM;AAAA,UACzC,GAAG;AAAA;AAAA,OACN;AAAA,0BACC,UAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAc,WAAU,2BAAA,EAA4B,CAAA;AAAA,MAC5E;AAAA;AAAA;AACH","file":"chunk-YWYF5CCJ.js","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { SectorProps } from 'recharts';\nimport { ANIMATION } from './animation';\nimport { TRACK } from './colors';\nimport { frameProps } from './frame';\nimport { clampTo, gaugeName } from './gauge';\nimport { CenterText } from './radial';\nimport type { ChartSize } from '../types';\n\ntype RadialGaugeProps = ChartSize & {\n  value: number;\n  label: string;\n  min: number;\n  max: number;\n  /** The value, formatted: the text in the middle and the end of the name. */\n  text: string;\n  ariaLabel?: string;\n  /** The share of the radius the ring leaves empty in the middle. */\n  hollow: string;\n  /** The fill of the arc: a color, or a `url(#…)` to what `defs` defines. */\n  fill?: string;\n  /** Draws the arc, and the track under it, in place of the filled sectors. */\n  shape?: (props: SectorProps) => ReactElement;\n  /** What the chart defines for `fill`, such as a gradient. */\n  defs?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * A full circle with one arc from the top, clockwise, on a neutral track, the\n * value in the middle over its label: the frame of `GradientRadial` and\n * `StrokedGauge`, which draw the arc and the track their own way. It is an image (out of the tab order) named by its value.\n */\nexport const RadialGauge = ({\n  value,\n  label,\n  min,\n  max,\n  text,\n  ariaLabel,\n  hollow,\n  fill,\n  shape,\n  defs,\n  children,\n  height,\n  width,\n}: RadialGaugeProps) => (\n  <RadialBarChart\n    {...frameProps({\n      height,\n      width,\n      ariaLabel: gaugeName(ariaLabel ?? (label || 'Gauge'), text),\n      keyboard: false,\n    })}\n    data={[{ name: label, value: clampTo(value, min, max) }]}\n    startAngle={90}\n    endAngle={-270}\n    innerRadius={hollow}\n    outerRadius=\"100%\"\n    // The arc is as thick as the ring: no gap between the bar and its band.\n    barCategoryGap={0}\n    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n  >\n    {defs && <defs>{defs}</defs>}\n    <PolarAngleAxis type=\"number\" domain={[min, max]} tick={false} axisLine={false} />\n    <RadialBar\n      dataKey=\"value\"\n      fill={fill}\n      shape={shape}\n      // Recharts draws a background sector of its own and cannot restyle it: a\n      // `shape` that draws the track too hides it.\n      background={shape ? false : { fill: TRACK }}\n      {...ANIMATION}\n    />\n    <CenterText value={text} label={label} valueSize=\"var(--text-3xl, 1.875rem)\" />\n    {children}\n  </RadialBarChart>\n);\n"]}

package/dist/chunk-Z4LZFMDH.cjs

@@ -0,0 +1,60 @@
+"use client";
+'use strict';
+
+var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
+var recharts = require('recharts');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DASH = "6 4";
+var BAND_LAYER = 50;
+var labelOf = (value, position) => ({
+  value,
+  position,
+  className: "recharts-reference-label",
+  fill: chunkLT3UC65O_cjs.MUTED,
+  style: { fontSize: chunkRLHGPHC7_cjs.TEXT_SIZE }
+});
+var referenceMarks = ({
+  referenceLines = [],
+  referenceBands = [],
+  axis = "y",
+  axisId
+}) => {
+  const onAxis = axisId === void 0 ? {} : { [`${axis}AxisId`]: axisId };
+  return [
+    ...referenceBands.map((band, i) => {
+      const [low, high] = [Math.min(band.from, band.to), Math.max(band.from, band.to)];
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.ReferenceArea,
+        {
+          ...{ [`${axis}1`]: low, [`${axis}2`]: high },
+          ...onAxis,
+          fill: chunkLT3UC65O_cjs.INTENT_COLORS[band.intent ?? "neutral"],
+          fillOpacity: 0.14,
+          ifOverflow: "extendDomain",
+          zIndex: BAND_LAYER,
+          label: band.label ? labelOf(band.label, "insideTopLeft") : void 0
+        },
+        `band-${i}`
+      );
+    }),
+    ...referenceLines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.ReferenceLine,
+      {
+        ...{ [axis]: line.value },
+        ...onAxis,
+        stroke: chunkLT3UC65O_cjs.INTENT_COLORS[line.intent ?? "neutral"],
+        strokeWidth: 1.5,
+        strokeDasharray: line.dashed ? DASH : void 0,
+        ifOverflow: "extendDomain",
+        label: line.label ? labelOf(line.label, "insideTopRight") : void 0
+      },
+      `line-${i}`
+    ))
+  ];
+};
+
+exports.referenceMarks = referenceMarks;
+//# sourceMappingURL=chunk-Z4LZFMDH.cjs.map
+//# sourceMappingURL=chunk-Z4LZFMDH.cjs.map

package/dist/chunk-Z4LZFMDH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/reference.tsx"],"names":["MUTED","TEXT_SIZE","jsx","ReferenceArea","INTENT_COLORS","ReferenceLine"],"mappings":";;;;;;;;AAYA,IAAM,IAAA,GAAO,KAAA;AAEb,IAAM,UAAA,GAAa,EAAA;AAInB,IAAM,OAAA,GAAU,CAAC,KAAA,EAAe,QAAA,MAAkD;AAAA,EAChF,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,EAAW,0BAAA;AAAA,EACX,IAAA,EAAMA,uBAAA;AAAA,EACN,KAAA,EAAO,EAAE,QAAA,EAAUC,2BAAA;AACrB,CAAA,CAAA;AASO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,iBAAiB,EAAC;AAAA,EAClB,iBAAiB,EAAC;AAAA,EAClB,IAAA,GAAO,GAAA;AAAA,EACP;AACF,CAAA,KAAwB;AACtB,EAAA,MAAM,MAAA,GAAS,MAAA,KAAW,MAAA,GAAY,EAAC,GAAI,EAAE,CAAC,CAAA,EAAG,IAAI,CAAA,MAAA,CAAQ,GAAG,MAAA,EAAO;AACvE,EAAA,OAAO;AAAA,IACL,GAAG,cAAA,CAAe,GAAA,CAAI,CAAC,MAAM,CAAA,KAAM;AACjC,MAAA,MAAM,CAAC,GAAA,EAAK,IAAI,IAAI,CAAC,IAAA,CAAK,IAAI,IAAA,CAAK,IAAA,EAAM,IAAA,CAAK,EAAE,GAAG,IAAA,CAAK,GAAA,CAAI,KAAK,IAAA,EAAM,IAAA,CAAK,EAAE,CAAC,CAAA;AAC/E,MAAA,uBACEC,cAAA;AAAA,QAACC,sBAAA;AAAA,QAAA;AAAA,UAEE,GAAG,EAAE,CAAC,CAAA,EAAG,IAAI,CAAA,CAAA,CAAG,GAAG,GAAA,EAAK,CAAC,CAAA,EAAG,IAAI,CAAA,CAAA,CAAG,GAAG,IAAA,EAAK;AAAA,UAC3C,GAAG,MAAA;AAAA,UACJ,IAAA,EAAMC,+BAAA,CAAc,IAAA,CAAK,MAAA,IAAU,SAAS,CAAA;AAAA,UAC5C,WAAA,EAAa,IAAA;AAAA,UACb,UAAA,EAAW,cAAA;AAAA,UACX,MAAA,EAAQ,UAAA;AAAA,UACR,OAAO,IAAA,CAAK,KAAA,GAAQ,QAAQ,IAAA,CAAK,KAAA,EAAO,eAAe,CAAA,GAAI;AAAA,SAAA;AAAA,QAPtD,QAAQ,CAAC,CAAA;AAAA,OAQhB;AAAA,IAEJ,CAAC,CAAA;AAAA,IACD,GAAG,cAAA,CAAe,GAAA,CAAI,CAAC,MAAM,CAAA,qBAC3BF,cAAA;AAAA,MAACG,sBAAA;AAAA,MAAA;AAAA,QAEE,GAAG,EAAE,CAAC,IAAI,GAAG,KAAK,KAAA,EAAM;AAAA,QACxB,GAAG,MAAA;AAAA,QACJ,MAAA,EAAQD,+BAAA,CAAc,IAAA,CAAK,MAAA,IAAU,SAAS,CAAA;AAAA,QAC9C,WAAA,EAAa,GAAA;AAAA,QACb,eAAA,EAAiB,IAAA,CAAK,MAAA,GAAS,IAAA,GAAO,MAAA;AAAA,QACtC,UAAA,EAAW,cAAA;AAAA,QACX,OAAO,IAAA,CAAK,KAAA,GAAQ,QAAQ,IAAA,CAAK,KAAA,EAAO,gBAAgB,CAAA,GAAI;AAAA,OAAA;AAAA,MAPvD,QAAQ,CAAC,CAAA;AAAA,KASjB;AAAA,GACH;AACF","file":"chunk-Z4LZFMDH.cjs","sourcesContent":["import { ReferenceArea, ReferenceLine } from 'recharts';\nimport type { ChartReferenceProps } from '../types';\nimport { TEXT_SIZE } from './axes';\nimport { INTENT_COLORS, MUTED } from './colors';\n\ntype ReferenceOptions = ChartReferenceProps & {\n  /** The axis the values are read on: `y` (default), or `x` on a chart of horizontal bars. */\n  axis?: 'x' | 'y';\n  /** The id of that axis, when the chart has several. */\n  axisId?: string;\n};\n\nconst DASH = '6 4';\n// Behind the series (an area is at 100, a bar at 300) and above the grid.\nconst BAND_LAYER = 50;\n\n// Plain SVG text in the muted color: an amber or red label would not read on\n// the card in every theme, so the line and the band carry the intent.\nconst labelOf = (value: string, position: 'insideTopRight' | 'insideTopLeft') => ({\n  value,\n  position,\n  className: 'recharts-reference-label',\n  fill: MUTED,\n  style: { fontSize: TEXT_SIZE },\n});\n\n/**\n * The `ReferenceArea`s then the `ReferenceLine`s of a chart's `referenceBands`\n * and `referenceLines`, to render inside it, before `children`. A mark outside\n * the data makes the axis reach it (`ifOverflow=\"extendDomain\"`) instead of\n * vanishing. Colors come from `INTENT_COLORS`, so a theme switch repaints\n * them; labels are text, not markup.\n */\nexport const referenceMarks = ({\n  referenceLines = [],\n  referenceBands = [],\n  axis = 'y',\n  axisId,\n}: ReferenceOptions) => {\n  const onAxis = axisId === undefined ? {} : { [`${axis}AxisId`]: axisId };\n  return [\n    ...referenceBands.map((band, i) => {\n      const [low, high] = [Math.min(band.from, band.to), Math.max(band.from, band.to)];\n      return (\n        <ReferenceArea\n          key={`band-${i}`}\n          {...{ [`${axis}1`]: low, [`${axis}2`]: high }}\n          {...onAxis}\n          fill={INTENT_COLORS[band.intent ?? 'neutral']}\n          fillOpacity={0.14}\n          ifOverflow=\"extendDomain\"\n          zIndex={BAND_LAYER}\n          label={band.label ? labelOf(band.label, 'insideTopLeft') : undefined}\n        />\n      );\n    }),\n    ...referenceLines.map((line, i) => (\n      <ReferenceLine\n        key={`line-${i}`}\n        {...{ [axis]: line.value }}\n        {...onAxis}\n        stroke={INTENT_COLORS[line.intent ?? 'neutral']}\n        strokeWidth={1.5}\n        strokeDasharray={line.dashed ? DASH : undefined}\n        ifOverflow=\"extendDomain\"\n        label={line.label ? labelOf(line.label, 'insideTopRight') : undefined}\n      />\n    )),\n  ];\n};\n"]}