pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/charts/Charts.variants.js

@@ -10,7 +10,7 @@ export const BAR_LIST_TRACK_HEIGHT = 6;
 export function resolveBarListColors(colors) {
   return {
     label: colors.fg.default,
-    value: colors.fg.muted,
+    valueColor: colors.fg.muted,
     track: colors.bg.sunken,
     fill: colors.accent.solid
   };
@@ -56,4 +56,527 @@ export const barListTrackStructure = createThemedVariants(theme => ({
     overflow: "hidden"
   }
 }));
+
+// ---------------------------------------------------------------------------------------------
+// BarChart / LineChart / PieChart — axed, gridded, multi-series charts added alongside the three
+// primitives above. Same no-React/no-svg contract; same RoleColors-only colour resolution.
+// ---------------------------------------------------------------------------------------------
+
+/** Same touch-target floor as Select/Button (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
+export const CHART_MIN_TOUCH_TARGET = 44;
+/** Symmetric hit-area expansion so a drawn mark smaller than 44dp still meets the touch-target
+ *  floor, on whichever axis is short — a thin bar and a slim pie wedge fail on different axes. */
+export function hitSlopFor(width, height, minTarget = CHART_MIN_TOUCH_TARGET) {
+  const horizontal = Math.max(0, Math.ceil((minTarget - width) / 2));
+  const vertical = Math.max(0, Math.ceil((minTarget - height) / 2));
+  return {
+    top: vertical,
+    bottom: vertical,
+    left: horizontal,
+    right: horizontal
+  };
+}
+/**
+ * `border.interactive` is the one border role proven ≥ 3:1 against `bg.surface`/`bg.canvas` on
+ * every brand × mode (`roleColors.test.ts`) — `border.default` is the decorative card-outline
+ * rung and isn't held to that bar, so it can't stand in for a gridline.
+ */
+export function resolveChartAxisColors(colors) {
+  return {
+    label: colors.fg.muted,
+    gridline: colors.border.interactive
+  };
+}
+
+/**
+ * Five role-derived hues for data series with no natural closed union (categorical breakdowns).
+ * Every entry measures ≥ 3:1 against `bg.surface` for all 9 brands × both modes (`Charts.test.ts`)
+ * — `status.*.text`, deliberately not `status.*.solid`: the solid fills are tuned for a label
+ * drawn ON them (badges) and measure as low as 2.0:1 against `bg.surface` on several brands in
+ * light mode, while `status.*.text` clears 5.9:1 everywhere.
+ */
+export function resolveCategoricalRamp(colors) {
+  return [colors.accent.solid, colors.status.info.text, colors.status.success.text, colors.status.warning.text, colors.status.danger.text];
+}
+
+/** Wraps around the 5-hue ramp for a 6th+ series — an explicit per-series `color` is the escape
+ *  hatch for a chart that needs more distinguishable hues than the role table has, the same
+ *  documented exception `BarList`'s per-item `color` already establishes. */
+export function categoricalColorAt(colors, index) {
+  const ramp = resolveCategoricalRamp(colors);
+  return ramp[(index % ramp.length + ramp.length) % ramp.length];
+}
+function roundFloat(value) {
+  return Math.round(value * 1e6) / 1e6;
+}
+/** Nearest "nice" step for a raw division — 1, 2, 2.5, 5 or 10 × a power of ten. The 2.5 rung is
+ *  what turns a raw /4 step of 25 into itself instead of rounding down to 20. */
+function niceStep(rawStep) {
+  if (!Number.isFinite(rawStep) || rawStep <= 0) return 1;
+  const exponent = Math.floor(Math.log10(rawStep));
+  const fraction = rawStep / 10 ** exponent;
+  let niceFraction;
+  if (fraction < 1.5) niceFraction = 1;else if (fraction < 2.25) niceFraction = 2;else if (fraction < 3.75) niceFraction = 2.5;else if (fraction < 7.5) niceFraction = 5;else niceFraction = 10;
+  return niceFraction * 10 ** exponent;
+}
+
+/**
+ * "Nice numbers" axis ticks (Heckbert): a human-readable step (0/25/50/75/100), never a raw
+ * division like 0/23.7/47.4. `min === max` (all-equal or single-value data) degenerates to a
+ * fixed small band instead of dividing a zero-width range.
+ */
+export function niceScale(min, max, tickCount = 5) {
+  const count = Math.max(2, Math.floor(Number.isFinite(tickCount) ? tickCount : 5));
+  let lo = Number.isFinite(min) ? min : 0;
+  let hi = Number.isFinite(max) ? max : 0;
+  if (lo > hi) {
+    const swap = lo;
+    lo = hi;
+    hi = swap;
+  }
+  if (lo === hi) {
+    if (lo === 0) return {
+      min: 0,
+      max: 1,
+      step: 1,
+      ticks: [0, 1]
+    };
+    const pad = Math.abs(lo);
+    lo -= pad;
+    hi += pad;
+  }
+  const step = niceStep((hi - lo) / (count - 1));
+  const niceMin = roundFloat(Math.floor(lo / step) * step);
+  const niceMax = roundFloat(Math.ceil(hi / step) * step);
+  const steps = Math.round((niceMax - niceMin) / step);
+  const ticks = Array.from({
+    length: steps + 1
+  }, (_, i) => roundFloat(niceMin + i * step));
+  return {
+    min: niceMin,
+    max: niceMax,
+    step: roundFloat(step),
+    ticks
+  };
+}
+
+/** Linear value → pixel scaling. A zero-span domain (all-equal data) lands on the range midpoint
+ *  instead of dividing by zero; a non-finite value falls back to `rangeStart`. */
+export function scaleValue(value, domainMin, domainMax, rangeStart, rangeEnd) {
+  if (!Number.isFinite(value)) return rangeStart;
+  const span = domainMax - domainMin;
+  if (span === 0) return (rangeStart + rangeEnd) / 2;
+  const t = (value - domainMin) / span;
+  return rangeStart + t * (rangeEnd - rangeStart);
+}
+export function finiteOrZero(value) {
+  return Number.isFinite(value) ? value : 0;
+}
+
+/** `1200 -> "1,200"`. The default `yAxisFormatter` for both `BarChart` and `LineChart`. */
+export function defaultNumberFormatter(value) {
+  if (!Number.isFinite(value)) return "0";
+  return Math.round(value).toLocaleString("en-US");
+}
+
+// ---- BarChart geometry ----
+
+export const BAR_GROUP_GAP_RATIO = 0.2;
+export const BAR_SERIES_GAP_RATIO = 0.12;
+/** One category's horizontal "band": `bandWidth` split into a gap plus a `groupWidth` that holds
+ *  either one bar (simple/stacked) or `seriesCount` bars side by side (grouped). */
+export function resolveBarLayout(categoryCount, seriesCount, plotWidth, stacked) {
+  const categories = Math.max(1, categoryCount);
+  const series = Math.max(1, seriesCount);
+  const bandWidth = plotWidth / categories;
+  const groupWidth = bandWidth * (1 - BAR_GROUP_GAP_RATIO);
+  if (stacked || series === 1) {
+    return {
+      bandWidth,
+      groupWidth,
+      barWidth: groupWidth
+    };
+  }
+  const gapTotal = groupWidth * BAR_SERIES_GAP_RATIO * (series - 1);
+  const barWidth = Math.max(0, (groupWidth - gapTotal) / series);
+  return {
+    bandWidth,
+    groupWidth,
+    barWidth
+  };
+}
+
+/** Left edge (plot-relative) of one bar within its category band. */
+export function resolveBarX(categoryIndex, seriesIndex, seriesCount, layout, stacked) {
+  const groupLeft = categoryIndex * layout.bandWidth + (layout.bandWidth - layout.groupWidth) / 2;
+  if (stacked || seriesCount === 1) return groupLeft;
+  const gap = layout.groupWidth * BAR_SERIES_GAP_RATIO;
+  return groupLeft + seriesIndex * (layout.barWidth + gap);
+}
+/**
+ * The y-domain across every category, baseline pinned to 0 (bars always read from zero). Stacked
+ * mode walks each category's own running cumulative sum and tracks its full min/max extent —
+ * the identical math the stacked bar geometry itself uses, so the axis and the bars can never
+ * disagree about where the stack reaches.
+ */
+export function resolveBarChartDomain(data, stacked) {
+  let min = 0;
+  let max = 0;
+  for (const datum of data) {
+    const finite = datum.values.filter(value => Number.isFinite(value));
+    if (finite.length === 0) continue;
+    if (stacked) {
+      let running = 0;
+      for (const value of finite) {
+        running += value;
+        min = Math.min(min, running);
+        max = Math.max(max, running);
+      }
+    } else {
+      max = Math.max(max, ...finite);
+      min = Math.min(min, ...finite);
+    }
+  }
+  return {
+    min,
+    max
+  };
+}
+/** "Bar chart, 4 categories, highest Revenue at 1,200" — the accessibility label IS the chart for
+ *  a screen reader, so it names the count and the single tallest bar drawn, across every series. */
+export function summarizeBarChart(data, formatter) {
+  if (data.length === 0) return "Bar chart, no data";
+  let highestLabel = data[0]?.label ?? "";
+  let highestValue = Number.NEGATIVE_INFINITY;
+  for (const datum of data) {
+    for (const raw of datum.values) {
+      if (!Number.isFinite(raw)) continue;
+      if (raw > highestValue) {
+        highestValue = raw;
+        highestLabel = datum.label;
+      }
+    }
+  }
+  const noun = data.length === 1 ? "category" : "categories";
+  if (!Number.isFinite(highestValue)) return `Bar chart, ${data.length} ${noun}`;
+  return `Bar chart, ${data.length} ${noun}, highest ${highestLabel} at ${formatter(highestValue)}`;
+}
+
+// ---- LineChart geometry ----
+
+export function resolveLineDomain(series) {
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (const s of series) {
+    for (const point of s.data) {
+      if (!Number.isFinite(point.y)) continue;
+      min = Math.min(min, point.y);
+      max = Math.max(max, point.y);
+    }
+  }
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return {
+    min: 0,
+    max: 0
+  };
+  return {
+    min,
+    max
+  };
+}
+
+/** Above this sample count, line/sparkline series are decimated before any geometry is built —
+ *  one svg node per sample is what makes a 5,000-point series unusable on a mid-tier phone. */
+export const MAX_RENDERED_POINTS = 200;
+
+/**
+ * Min/max bucket decimation down to ~`maxPoints`: both endpoints are kept, and the interior is
+ * split into equal buckets that each contribute their lowest and highest sample, in original
+ * order. Plain stride sampling would drop a one-sample spike; keeping each bucket's extremes
+ * preserves the visual envelope of the line at a fraction of the nodes.
+ */
+export function decimateSeries(data, value, maxPoints = MAX_RENDERED_POINTS) {
+  if (data.length <= maxPoints) return data;
+  const lastIndex = data.length - 1;
+  if (maxPoints < 4) return [data[0], data[lastIndex]];
+  const buckets = Math.floor((maxPoints - 2) / 2);
+  const interior = data.length - 2;
+  const result = [data[0]];
+  for (let bucket = 0; bucket < buckets; bucket++) {
+    const start = 1 + Math.floor(bucket * interior / buckets);
+    const end = 1 + Math.floor((bucket + 1) * interior / buckets);
+    let lowest = start;
+    let highest = start;
+    for (let i = start + 1; i < end; i++) {
+      const current = value(data[i]);
+      if (current < value(data[lowest])) lowest = i;
+      if (current > value(data[highest])) highest = i;
+    }
+    if (lowest === highest) result.push(data[lowest]);else if (lowest < highest) result.push(data[lowest], data[highest]);else result.push(data[highest], data[lowest]);
+  }
+  result.push(data[lastIndex]);
+  return result;
+}
+
+/** Non-finite samples are dropped (same contract as `Sparkline`), then the survivors are spaced
+ *  evenly across `width` BY INDEX, not by numeric `x` — so unevenly-spaced categories (weeks,
+ *  months) still lay out as a readable, evenly-ticked axis. A single survivor still plots as one
+ *  centred point. */
+export function resolveSeriesPoints(data, domainMin, domainMax, width, height) {
+  const finite = data.filter(point => Number.isFinite(point.y));
+  if (finite.length === 0) return [];
+  if (finite.length === 1) {
+    const only = finite[0];
+    return [{
+      x: roundFloat(width / 2),
+      y: roundFloat(scaleValue(only.y, domainMin, domainMax, height, 0))
+    }];
+  }
+  const stepX = width / (finite.length - 1);
+  return finite.map((point, index) => ({
+    x: roundFloat(index * stepX),
+    y: roundFloat(scaleValue(point.y, domainMin, domainMax, height, 0))
+  }));
+}
+function catmullRomToBezier(points) {
+  let d = "";
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i - 1] ?? points[i];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[i + 2] ?? p2;
+    const c1x = p1.x + (p2.x - p0.x) / 6;
+    const c1y = p1.y + (p2.y - p0.y) / 6;
+    const c2x = p2.x - (p3.x - p1.x) / 6;
+    const c2y = p2.y - (p3.y - p1.y) / 6;
+    d += ` C ${roundFloat(c1x)} ${roundFloat(c1y)} ${roundFloat(c2x)} ${roundFloat(c2y)} ${roundFloat(p2.x)} ${roundFloat(p2.y)}`;
+  }
+  return d;
+}
+
+/** A straight polyline by default; `curved` walks the same points through a Catmull-Rom spline
+ *  converted to cubic bézier segments, so a smoothed line still passes through every sample
+ *  instead of merely approaching it. */
+export function buildLinePath(points, curved) {
+  if (points.length === 0) return "";
+  const first = points[0];
+  if (points.length === 1) {
+    return `M ${roundFloat(first.x)} ${roundFloat(first.y)} L ${roundFloat(first.x)} ${roundFloat(first.y)}`;
+  }
+  if (!curved) {
+    return `M ${points.map(p => `${roundFloat(p.x)} ${roundFloat(p.y)}`).join(" L ")}`;
+  }
+  return `M ${roundFloat(first.x)} ${roundFloat(first.y)}${catmullRomToBezier(points)}`;
+}
+
+/** The line path plus a close down to `baselineY` — the plot's bottom edge, matching `Sparkline`'s
+ *  own area contract rather than the zero gridline (a chart with negative values has no single
+ *  "bottom" that both floors the fill and still reads as empty space). */
+export function buildAreaPath(points, baselineY, curved) {
+  if (points.length === 0) return "";
+  const line = buildLinePath(points, curved);
+  const first = points[0];
+  const last = points[points.length - 1];
+  return `${line} L ${roundFloat(last.x)} ${roundFloat(baselineY)} L ${roundFloat(first.x)} ${roundFloat(baselineY)} Z`;
+}
+export function summarizeLineChart(series) {
+  if (series.length === 0) return "Line chart, no data";
+  const names = series.map(s => s.name).join(", ");
+  return `Line chart, ${series.length} series: ${names}`;
+}
+
+// ---- PieChart geometry ----
+
+/** Drops non-finite/non-positive segments (same contract as `DonutChart`), then walks the
+ *  survivors into cumulative angles, 0° = top, increasing clockwise. Carries the original segment
+ *  as `source` so a caller's `onPressSegment` gets back its own object, not a reconstruction. */
+export function resolvePieWedges(segments, colors) {
+  const valid = segments.filter(segment => Number.isFinite(segment.value) && segment.value > 0);
+  const total = valid.reduce((sum, segment) => sum + segment.value, 0);
+  let angle = 0;
+  return valid.map((segment, index) => {
+    const fraction = total > 0 ? segment.value / total : 0;
+    const startAngle = angle;
+    const endAngle = angle + fraction * 360;
+    angle = endAngle;
+    return {
+      source: segment,
+      color: segment.color ?? categoricalColorAt(colors, index),
+      fraction,
+      percentage: Math.round(fraction * 1000) / 10,
+      startAngle,
+      endAngle
+    };
+  });
+}
+export function polarToCartesian(cx, cy, r, angleDeg) {
+  const rad = (angleDeg - 90) * Math.PI / 180;
+  return {
+    x: roundFloat(cx + r * Math.cos(rad)),
+    y: roundFloat(cy + r * Math.sin(rad))
+  };
+}
+
+/** A filled-wedge path: center → arc start → (clockwise) arc end → close. Callers special-case a
+ *  single 100% segment as a plain circle — an arc command can't describe a full sweep whose start
+ *  and end coincide. */
+export function describeWedge(cx, cy, r, startAngle, endAngle) {
+  const start = polarToCartesian(cx, cy, r, startAngle);
+  const end = polarToCartesian(cx, cy, r, endAngle);
+  const largeArcFlag = endAngle - startAngle > 180 ? 1 : 0;
+  return `M ${roundFloat(cx)} ${roundFloat(cy)} L ${start.x} ${start.y} A ${roundFloat(r)} ${roundFloat(r)} 0 ${largeArcFlag} 1 ${end.x} ${end.y} Z`;
+}
+/** Bounding box of a circular sector — samples the center, both arc endpoints, and every cardinal
+ *  point (0/90/180/270°) the sector actually sweeps past, so a wedge spanning a quadrant boundary
+ *  still gets a box that fully contains its curve, not just its two straight edges. Used to size
+ *  the touch-target overlay for a pressable wedge, since the wedge itself isn't rectangular. */
+export function resolveWedgeBoundingBox(cx, cy, r, startAngle, endAngle) {
+  const points = [{
+    x: cx,
+    y: cy
+  }, polarToCartesian(cx, cy, r, startAngle), polarToCartesian(cx, cy, r, endAngle)];
+  for (const cardinal of [0, 90, 180, 270, 360]) {
+    if (cardinal > startAngle && cardinal < endAngle) points.push(polarToCartesian(cx, cy, r, cardinal));
+  }
+  const xs = points.map(p => p.x);
+  const ys = points.map(p => p.y);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+export function summarizePieChart(segments) {
+  const valid = segments.filter(segment => Number.isFinite(segment.value) && segment.value > 0);
+  if (valid.length === 0) return "Pie chart, no data";
+  const total = valid.reduce((sum, segment) => sum + segment.value, 0);
+  let largest = valid[0];
+  for (const segment of valid) {
+    if (segment.value > largest.value) largest = segment;
+  }
+  const percentage = total > 0 ? Math.round(largest.value / total * 1000) / 10 : 0;
+  const noun = valid.length === 1 ? "segment" : "segments";
+  return `Pie chart, ${valid.length} ${noun}, largest ${largest.label} at ${percentage}%`;
+}
+
+// ---------------------------------------------------------------------------------------------
+// Non-colour series channels (WCAG 1.4.1 Use of Color)
+//
+// The categorical ramp is five HUES, and hue alone is not a usable series channel: measured across
+// all 9 brands × both modes, 179 of the 180 series-vs-series pairs fall below 3:1 luminance
+// separation (`Charts.test.ts`), so a colour-blind reader sees five near-identical marks. Every
+// multi-series chart therefore carries a SECOND, colour-independent channel keyed on the same
+// series index, plus a text legend naming the series.
+// ---------------------------------------------------------------------------------------------
+
+/** Marker shapes, one per ramp hue, wrapping for a 6th+ series exactly as the hues do. */
+export const SERIES_SHAPES = ["circle", "square", "triangle", "diamond", "cross"];
+
+/** Every shape except `circle`, which renders as a native `<Circle>` rather than a bezier path. */
+
+export function seriesShapeAt(index) {
+  const length = SERIES_SHAPES.length;
+  return SERIES_SHAPES[(index % length + length) % length];
+}
+
+/**
+ * `strokeDasharray` per series index — the line channel. Index 0 is solid (`undefined`, so the
+ * common single-series chart emits no dash prop at all), and the four patterns after it are
+ * separated by period AND by dash/gap ratio, not just length: two patterns that differ only in
+ * scale read as the same line at a glance.
+ */
+export const SERIES_DASH_PATTERNS = [undefined, [6, 3], [2, 3], [10, 3, 2, 3], [1, 4]];
+export function seriesDashAt(index) {
+  const length = SERIES_DASH_PATTERNS.length;
+  return SERIES_DASH_PATTERNS[(index % length + length) % length];
+}
+
+/** Half-extents chosen so each shape carries roughly the same visual weight as a circle of `r`. */
+const SQUARE_HALF_SIDE = 0.886;
+const TRIANGLE_CIRCUMRADIUS = 1.3;
+const DIAMOND_HALF_DIAGONAL = 1.25;
+const CROSS_ARM = 1.4;
+const CROSS_HALF_THICKNESS = 0.45;
+
+/**
+ * A closed svg path for one non-circular marker, centred on (`cx`, `cy`) and sized from `r` — the
+ * radius the equivalent circular marker would use.
+ */
+export function describeMarker(shape, cx, cy, r) {
+  const point = (x, y) => `${roundFloat(x)} ${roundFloat(y)}`;
+  switch (shape) {
+    case "square":
+      {
+        const h = r * SQUARE_HALF_SIDE;
+        return `M ${point(cx - h, cy - h)} L ${point(cx + h, cy - h)} L ${point(cx + h, cy + h)} L ${point(cx - h, cy + h)} Z`;
+      }
+    case "triangle":
+      {
+        const R = r * TRIANGLE_CIRCUMRADIUS;
+        const halfBase = R * Math.sqrt(3) / 2;
+        return `M ${point(cx, cy - R)} L ${point(cx + halfBase, cy + R / 2)} L ${point(cx - halfBase, cy + R / 2)} Z`;
+      }
+    case "diamond":
+      {
+        const d = r * DIAMOND_HALF_DIAGONAL;
+        return `M ${point(cx, cy - d)} L ${point(cx + d, cy)} L ${point(cx, cy + d)} L ${point(cx - d, cy)} Z`;
+      }
+    default:
+      {
+        const a = r * CROSS_ARM;
+        const t = r * CROSS_HALF_THICKNESS;
+        return `M ${point(cx - t, cy - a)} L ${point(cx + t, cy - a)} L ${point(cx + t, cy - t)}` + ` L ${point(cx + a, cy - t)} L ${point(cx + a, cy + t)} L ${point(cx + t, cy + t)}` + ` L ${point(cx + t, cy + a)} L ${point(cx - t, cy + a)} L ${point(cx - t, cy + t)}` + ` L ${point(cx - a, cy + t)} L ${point(cx - a, cy - t)} L ${point(cx - t, cy - t)} Z`;
+      }
+  }
+}
+
+/**
+ * Narrower than this and a knocked-out shape marker stops reading as a shape, so `BarChart` drops
+ * it and the bar falls back to the legend plus its fixed position in the group.
+ */
+export const BAR_MARKER_MIN_SPAN = 14;
+export const BAR_MARKER_RADIUS = 4;
+
+/** Hairline separators between stacked/adjacent segments — two ramp hues can sit at 1.02:1, which
+ *  merges them into one indistinguishable block without an explicit boundary. */
+export const SEGMENT_SEPARATOR_WIDTH = 1;
+
+/** Fraction of the ring a donut segment gives up so its boundary with the next one is visible. */
+export const DONUT_SEGMENT_GAP_RATIO = 0.006;
+
+// ---- Legend ----
+
+export const LEGEND_SWATCH_SIZE = 10;
+/** The line-glyph swatch is wider than the plain square: a dash pattern needs run-length to read. */
+export const LEGEND_GLYPH_WIDTH = 22;
+export const LEGEND_GLYPH_HEIGHT = 10;
+export const LEGEND_GLYPH_STROKE_WIDTH = 2;
+export const LEGEND_GLYPH_MARKER_RADIUS = 3;
+/** The knockout-shape swatch needs more room than the plain colour square to read as a shape. */
+export const LEGEND_MARK_SIZE = 14;
+export const chartLegendStructure = createThemedVariants(theme => ({
+  base: {
+    marginTop: theme.space[3],
+    rowGap: theme.space[2],
+    alignSelf: "stretch"
+  }
+}));
+export const chartLegendRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: theme.space[2]
+  }
+}));
+export const chartLegendSwatchStructure = createThemedVariants(theme => ({
+  base: {
+    width: LEGEND_SWATCH_SIZE,
+    height: LEGEND_SWATCH_SIZE,
+    borderRadius: theme.radii.sm
+  }
+}));
 //# sourceMappingURL=Charts.variants.js.map