@cdx-ui/components 0.3.5 → 0.3.7

package/src/components/LineChart/styles.ts

@@ -0,0 +1,26 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export const lineChartRootVariants = cva('w-full max-w-full items-center gap-4');
+
+export const lineChartLegendVariants = cva(
+  'max-w-full flex-row flex-wrap items-center justify-center gap-x-4 gap-y-2',
+);
+
+export const lineChartLegendItemVariants = cva('flex-row items-center gap-1.5');
+
+export const lineChartLegendLabelVariants = cva('body-sm text-content-primary', {
+  variants: {
+    selected: {
+      true: 'font-medium text-content-primary',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});
+
+export type LineChartLegendLabelVariantProps = VariantProps<typeof lineChartLegendLabelVariants>;
+export const LINE_STROKE_WIDTH = 2;
+export const LINE_DOT_RADIUS = 3;
+export const LINE_ACTIVE_DOT_RADIUS = 5;

package/src/components/PieChart/geometry.ts

@@ -0,0 +1,295 @@
+export interface PieSliceInput {
+  readonly id: string;
+  readonly label: string;
+  readonly value: number;
+}
+
+export interface PieSliceLayout {
+  readonly id: string;
+  readonly index: number;
+  readonly label: string;
+  readonly value: number;
+  readonly percentage: number;
+  readonly startAngle: number;
+  readonly endAngle: number;
+  readonly path: string;
+}
+
+export interface PieRadii {
+  readonly cx: number;
+  readonly cy: number;
+  readonly outerRadius: number;
+  readonly innerRadius: number;
+}
+
+export interface SlicePathOptions extends PieRadii {
+  readonly startAngle: number;
+  readonly endAngle: number;
+  readonly cornerRadius?: number;
+}
+
+const FULL_CIRCLE = 359.999;
+const MAX_INNER_RADIUS_RATIO = 0.85;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function formatCoordinate(value: number): string {
+  'worklet';
+  const rounded = Math.round(value * 100) / 100;
+  return Object.is(rounded, -0) ? '0' : String(rounded);
+}
+
+function point(cx: number, cy: number, radius: number, angleFromTop: number) {
+  'worklet';
+  const radians = ((angleFromTop - 90) * Math.PI) / 180;
+  return {
+    x: cx + radius * Math.cos(radians),
+    y: cy + radius * Math.sin(radians),
+  };
+}
+
+function moveTo(x: number, y: number): string {
+  'worklet';
+  return `M ${formatCoordinate(x)} ${formatCoordinate(y)}`;
+}
+
+function lineTo(x: number, y: number): string {
+  'worklet';
+  return `L ${formatCoordinate(x)} ${formatCoordinate(y)}`;
+}
+
+function arcTo(
+  radius: number,
+  end: { readonly x: number; readonly y: number },
+  largeArc: 0 | 1,
+  sweep: 0 | 1,
+): string {
+  'worklet';
+  return `A ${formatCoordinate(radius)} ${formatCoordinate(radius)} 0 ${String(largeArc)} ${String(sweep)} ${formatCoordinate(end.x)} ${formatCoordinate(end.y)}`;
+}
+
+/**
+ * SVG arc commands cannot draw a 360° sweep in one segment, so a full ring is
+ * two semicircles.
+ */
+export function slicePath({
+  cx,
+  cy,
+  outerRadius,
+  innerRadius,
+  startAngle,
+  endAngle,
+  cornerRadius = 0,
+}: SlicePathOptions): string {
+  'worklet';
+  const sweep = endAngle - startAngle;
+  if (sweep <= 0 || outerRadius <= 0) {
+    return '';
+  }
+
+  const isFullCircle = sweep >= FULL_CIRCLE;
+  const drawEnd = isFullCircle ? startAngle + FULL_CIRCLE : endAngle;
+  const largeArc: 0 | 1 = sweep > 180 ? 1 : 0;
+
+  if (innerRadius <= 0) {
+    if (isFullCircle) {
+      const start = point(cx, cy, outerRadius, startAngle);
+      const mid = point(cx, cy, outerRadius, startAngle + 180);
+      return [
+        moveTo(start.x, start.y),
+        arcTo(outerRadius, mid, 1, 1),
+        arcTo(outerRadius, start, 1, 1),
+        'Z',
+      ].join(' ');
+    }
+
+    if (cornerRadius > 0) {
+      const sweepRad = (sweep * Math.PI) / 180;
+      const half = Math.sin(Math.min(sweepRad / 2, Math.PI / 2));
+      const maxRcByAngle = (outerRadius * half) / (1 + half) - 0.5;
+      const rc = Math.max(0, Math.min(cornerRadius, outerRadius / 2 - 0.5, maxRcByAngle));
+      if (rc >= 0.5) {
+        const alphaDeg = (Math.asin(rc / (outerRadius - rc)) * 180) / Math.PI;
+        const outerArcSweep = sweep - 2 * alphaDeg;
+        if (outerArcSweep > 0) {
+          const along = Math.sqrt((outerRadius - rc) ** 2 - rc ** 2);
+          const p1 = point(cx, cy, along, startAngle);
+          const p2 = point(cx, cy, outerRadius, startAngle + alphaDeg);
+          const p3 = point(cx, cy, outerRadius, endAngle - alphaDeg);
+          const p4 = point(cx, cy, along, endAngle);
+          return [
+            moveTo(cx, cy),
+            lineTo(p1.x, p1.y),
+            arcTo(rc, p2, 0, 1),
+            arcTo(outerRadius, p3, outerArcSweep > 180 ? 1 : 0, 1),
+            arcTo(rc, p4, 0, 1),
+            'Z',
+          ].join(' ');
+        }
+      }
+    }
+
+    const start = point(cx, cy, outerRadius, startAngle);
+    const end = point(cx, cy, outerRadius, drawEnd);
+    return [
+      moveTo(cx, cy),
+      lineTo(start.x, start.y),
+      arcTo(outerRadius, end, largeArc, 1),
+      'Z',
+    ].join(' ');
+  }
+
+  if (isFullCircle) {
+    const outerStart = point(cx, cy, outerRadius, startAngle);
+    const outerMid = point(cx, cy, outerRadius, startAngle + 180);
+    const innerStart = point(cx, cy, innerRadius, startAngle);
+    const innerMid = point(cx, cy, innerRadius, startAngle + 180);
+    return [
+      moveTo(outerStart.x, outerStart.y),
+      arcTo(outerRadius, outerMid, 1, 1),
+      arcTo(outerRadius, outerStart, 1, 1),
+      lineTo(innerStart.x, innerStart.y),
+      arcTo(innerRadius, innerMid, 1, 0),
+      arcTo(innerRadius, innerStart, 1, 0),
+      'Z',
+    ].join(' ');
+  }
+
+  // Rounded corner donut slice
+  if (cornerRadius > 0) {
+    const maxRcByThickness = (outerRadius - innerRadius) / 2 - 0.5;
+    const sweepRad = (sweep * Math.PI) / 180;
+    const maxSin = Math.sin(Math.min(sweepRad / 2.5, Math.PI / 2 - 0.05));
+    const maxRcByAngle = maxSin < 0.99 ? (innerRadius * maxSin) / (1 - maxSin) : maxRcByThickness;
+    const rc = Math.max(0, Math.min(cornerRadius, maxRcByThickness, maxRcByAngle));
+
+    if (rc >= 0.5) {
+      const alphaRad = Math.asin(rc / (outerRadius - rc));
+      const betaRad = Math.asin(rc / (innerRadius + rc));
+      const alphaDeg = (alphaRad * 180) / Math.PI;
+      const betaDeg = (betaRad * 180) / Math.PI;
+
+      const outerArcSweep = sweep - 2 * alphaDeg;
+      const innerArcSweep = sweep - 2 * betaDeg;
+
+      if (outerArcSweep > 0 && innerArcSweep > 0) {
+        const L_out = Math.sqrt((outerRadius - rc) ** 2 - rc ** 2);
+        const L_in = Math.sqrt((innerRadius + rc) ** 2 - rc ** 2);
+
+        const p1 = point(cx, cy, L_out, startAngle);
+        const p2 = point(cx, cy, outerRadius, startAngle + alphaDeg);
+        const p3 = point(cx, cy, outerRadius, endAngle - alphaDeg);
+        const p4 = point(cx, cy, L_out, endAngle);
+        const p5 = point(cx, cy, L_in, endAngle);
+        const p6 = point(cx, cy, innerRadius, endAngle - betaDeg);
+        const p7 = point(cx, cy, innerRadius, startAngle + betaDeg);
+        const p8 = point(cx, cy, L_in, startAngle);
+
+        return [
+          moveTo(p1.x, p1.y),
+          arcTo(rc, p2, 0, 1),
+          arcTo(outerRadius, p3, outerArcSweep > 180 ? 1 : 0, 1),
+          arcTo(rc, p4, 0, 1),
+          lineTo(p5.x, p5.y),
+          arcTo(rc, p6, 0, 1),
+          arcTo(innerRadius, p7, innerArcSweep > 180 ? 1 : 0, 0),
+          arcTo(rc, p8, 0, 1),
+          'Z',
+        ].join(' ');
+      }
+    }
+  }
+
+  const outerStart = point(cx, cy, outerRadius, startAngle);
+  const outerEnd = point(cx, cy, outerRadius, drawEnd);
+  const innerEnd = point(cx, cy, innerRadius, drawEnd);
+  const innerStart = point(cx, cy, innerRadius, startAngle);
+  return [
+    moveTo(outerStart.x, outerStart.y),
+    arcTo(outerRadius, outerEnd, largeArc, 1),
+    lineTo(innerEnd.x, innerEnd.y),
+    arcTo(innerRadius, innerStart, largeArc, 0),
+    'Z',
+  ].join(' ');
+}
+
+export function pieRadii(size: number, innerRadiusRatio: number): PieRadii {
+  const outerRadius = Math.max(size / 2 - 1, 0);
+  return {
+    cx: size / 2,
+    cy: size / 2,
+    outerRadius,
+    innerRadius: outerRadius * clamp(innerRadiusRatio, 0, MAX_INNER_RADIUS_RATIO),
+  };
+}
+
+/** `innerRadius` in pixels or as a percent of the outer radius, as a 0–1 ratio. */
+export function resolveInnerRadiusRatio(innerRadius: number | string, size: number): number {
+  const outerRadius = Math.max(size / 2 - 1, 0);
+  if (typeof innerRadius === 'string') {
+    const percent = Number.parseFloat(innerRadius);
+    return Number.isFinite(percent) ? percent / 100 : 0;
+  }
+  if (!Number.isFinite(innerRadius) || outerRadius <= 0) {
+    return 0;
+  }
+  return innerRadius / outerRadius;
+}
+
+export function layoutPieSlices({
+  data,
+  size,
+  innerRadiusRatio,
+  paddingAngle = 0,
+  cornerRadius,
+}: {
+  readonly data: readonly PieSliceInput[];
+  readonly size: number;
+  readonly innerRadiusRatio: number;
+  /** Degrees between neighboring slices. */
+  readonly paddingAngle?: number;
+  readonly cornerRadius?: number;
+}): PieSliceLayout[] {
+  const valid = data
+    .map((slice, index) => ({ slice, index }))
+    .filter(({ slice }) => Number.isFinite(slice.value) && slice.value > 0);
+
+  const total = valid.reduce((sum, item) => sum + item.slice.value, 0);
+  if (total <= 0 || size <= 0) {
+    return [];
+  }
+
+  const { cx, cy, outerRadius, innerRadius } = pieRadii(size, innerRadiusRatio);
+  const gap = valid.length > 1 && Number.isFinite(paddingAngle) ? Math.max(paddingAngle, 0) : 0;
+  let cursor = 0;
+
+  return valid.map(({ slice, index }) => {
+    const percentage = slice.value / total;
+    const sweep = percentage * 360;
+    const appliedGap = sweep > gap * 2 ? gap : 0;
+    const startAngle = cursor + appliedGap / 2;
+    const endAngle = cursor + sweep - appliedGap / 2;
+    cursor += sweep;
+
+    return {
+      id: slice.id,
+      index,
+      label: slice.label,
+      value: slice.value,
+      percentage,
+      startAngle,
+      endAngle,
+      path: slicePath({
+        cx,
+        cy,
+        outerRadius,
+        innerRadius,
+        startAngle,
+        endAngle,
+        cornerRadius,
+      }),
+    };
+  });
+}