origam 2.16.0 → 2.17.1

package/dist/src/composables/Chart/chart.composable.js

@@ -2,7 +2,7 @@ import {
   computed,
   ref
 } from "vue";
-import { CHART_STACKING } from "../../enums/index.js";
+import { CHART_SMOOTHING, CHART_STACKING, CHART_TYPE, INTENT } from "../../enums/index.js";
 import {
   arcPath,
   areaPath,
@@ -15,32 +15,61 @@ import {
   smoothPath,
   steppedPath
 } from "../../utils/Chart/path.util.js";
-import { CHART_Y_TICK_COUNT } from "../../consts/Chart/chart.const.js";
+import {
+  CHART_ANNOTATION_ARROWHEAD_MIN_SIZE,
+  CHART_ANNOTATION_ARROWHEAD_PRECISION,
+  CHART_ANNOTATION_ARROWHEAD_SPREAD,
+  CHART_ANNOTATION_ARROWHEAD_WIDTH_FACTOR,
+  CHART_ANNOTATION_DEFAULT_DY,
+  CHART_ANNOTATION_DEFAULT_RADIUS,
+  CHART_ANNOTATION_DEFAULT_WIDTH,
+  CHART_ANNOTATION_LABEL_CHAR_WIDTH,
+  CHART_ANNOTATION_LABEL_HEIGHT,
+  CHART_ANNOTATION_LABEL_MIN_WIDTH,
+  CHART_ANNOTATION_LABEL_PADDING,
+  CHART_BAR_SLOT_FILL_RATIO,
+  CHART_COLOR_FALLBACK,
+  CHART_DASH_ARRAY_DASHED,
+  CHART_DASH_ARRAY_DOTTED,
+  CHART_DASH_ARRAY_SOLID,
+  CHART_DEFAULT_PALETTE,
+  CHART_EPSILON,
+  CHART_NICE_STEP_LADDER,
+  CHART_PERCENT_MAX,
+  CHART_PERCENT_MIN,
+  CHART_PERCENT_TICK_STEP,
+  CHART_PIE_MIN_RADIUS,
+  CHART_PIE_RADIUS_INSET,
+  CHART_PLOT_BAND_DEFAULT_OPACITY,
+  CHART_PLOT_LINE_DEFAULT_WIDTH,
+  CHART_PLOT_LINE_LABEL_OFFSET,
+  CHART_PLOT_LINE_LABEL_TOP_OFFSET,
+  CHART_POINT_MARKER_RADIUS,
+  CHART_RADAR_MARKER_RADIUS,
+  CHART_RADAR_MIN_RADIUS,
+  CHART_RADAR_RADIUS_INSET,
+  CHART_SCATTER_DEFAULT_RADIUS,
+  CHART_SCATTER_MAX_RADIUS,
+  CHART_SCATTER_MIN_RADIUS,
+  CHART_SLICE_LABEL_PREFIX,
+  CHART_TICK_LABEL_PRECISION_FACTOR,
+  CHART_Y_TICK_COUNT
+} from "../../consts/Chart/chart.const.js";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util.js";
-const DEFAULT_PALETTE = [
-  "primary",
-  "success",
-  "warning",
-  "danger",
-  "info",
-  "secondary",
-  "ghost",
-  "neutral"
-];
 const resolveColor = (raw) => {
-  if (!raw) return "currentColor";
+  if (!raw) return CHART_COLOR_FALLBACK;
   if (/^(#|rgb|hsl|var|currentColor|transparent|linear-gradient|radial-gradient|conic-gradient)/i.test(raw)) {
     return raw;
   }
   if (isIntent(raw)) {
     return intentBgExpr(raw, "default");
   }
-  return "currentColor";
+  return CHART_COLOR_FALLBACK;
 };
 const dashArray = (dash) => {
-  if (dash === "dotted") return "2 4";
-  if (dash === "solid") return "none";
-  return "6 4";
+  if (dash === "dotted") return CHART_DASH_ARRAY_DOTTED;
+  if (dash === "solid") return CHART_DASH_ARRAY_SOLID;
+  return CHART_DASH_ARRAY_DASHED;
 };
 const resolveCategoryX = (value, categories, plotX0, plotX1) => {
   const idx = typeof value === "string" ? categories.indexOf(value) : value;
@@ -51,8 +80,8 @@ const resolveCategoryX = (value, categories, plotX0, plotX1) => {
 };
 export const computePlotBandGeometry = (band, scales, categories, plotX0, plotX1, plotY0, plotY1) => {
   const axis = band.axis ?? "y";
-  const fill = resolveColor(band.color ?? "warning");
-  const opacity = band.opacity ?? 0.15;
+  const fill = resolveColor(band.color ?? INTENT.WARNING);
+  const opacity = band.opacity ?? CHART_PLOT_BAND_DEFAULT_OPACITY;
   const labelColor = resolveColor(band.labelColor ?? void 0);
   if (axis === "y") {
     const fromPx2 = scales.y(Number(band.from));
@@ -99,8 +128,8 @@ export const computePlotBandGeometry = (band, scales, categories, plotX0, plotX1
 };
 export const computePlotLineGeometry = (line, scales, categories, plotX0, plotX1, plotY0, plotY1) => {
   const axis = line.axis ?? "y";
-  const stroke = resolveColor(line.color ?? "danger");
-  const strokeWidth = line.width ?? 1.5;
+  const stroke = resolveColor(line.color ?? INTENT.DANGER);
+  const strokeWidth = line.width ?? CHART_PLOT_LINE_DEFAULT_WIDTH;
   const strokeDasharray = dashArray(line.dash);
   if (axis === "y") {
     const py = scales.y(Number(line.value));
@@ -116,7 +145,7 @@ export const computePlotLineGeometry = (line, scales, categories, plotX0, plotX1
       strokeDasharray,
       label: line.label,
       labelX: isRight ? plotX1 : plotX0,
-      labelY: py - 4,
+      labelY: py - CHART_PLOT_LINE_LABEL_OFFSET,
       labelAnchor: isRight ? "end" : "start"
     };
   }
@@ -131,28 +160,29 @@ export const computePlotLineGeometry = (line, scales, categories, plotX0, plotX1
     strokeWidth,
     strokeDasharray,
     label: line.label,
-    labelX: px + 4,
-    labelY: plotY0 + 12,
+    labelX: px + CHART_PLOT_LINE_LABEL_OFFSET,
+    labelY: plotY0 + CHART_PLOT_LINE_LABEL_TOP_OFFSET,
     labelAnchor: "start"
   };
 };
 const arrowheadPoints = (tx, ty, hx, hy, size) => {
   const angle = Math.atan2(hy - ty, hx - tx);
-  const spread = Math.PI / 5;
+  const spread = CHART_ANNOTATION_ARROWHEAD_SPREAD;
   const left = angle + Math.PI - spread;
   const right = angle + Math.PI + spread;
   const lx = hx + size * Math.cos(left);
   const ly = hy + size * Math.sin(left);
   const rx = hx + size * Math.cos(right);
   const ry = hy + size * Math.sin(right);
-  return `${hx.toFixed(2)},${hy.toFixed(2)} ${lx.toFixed(2)},${ly.toFixed(2)} ${rx.toFixed(2)},${ry.toFixed(2)}`;
+  const p = CHART_ANNOTATION_ARROWHEAD_PRECISION;
+  return `${hx.toFixed(p)},${hy.toFixed(p)} ${lx.toFixed(p)},${ly.toFixed(p)} ${rx.toFixed(p)},${ry.toFixed(p)}`;
 };
 export const computeAnnotationGeometry = (anno, scales, categories, categoryCount) => {
-  const stroke = resolveColor(anno.color ?? "primary");
-  const strokeWidth = anno.width ?? 1.5;
+  const stroke = resolveColor(anno.color ?? INTENT.PRIMARY);
+  const strokeWidth = anno.width ?? CHART_ANNOTATION_DEFAULT_WIDTH;
   const dx = anno.dx ?? 0;
-  const dy = anno.dy ?? -14;
-  const radius = anno.radius ?? 12;
+  const dy = anno.dy ?? CHART_ANNOTATION_DEFAULT_DY;
+  const radius = anno.radius ?? CHART_ANNOTATION_DEFAULT_RADIUS;
   const ax = scales.x(anno.x, typeof anno.x === "number" ? anno.x : categories.indexOf(anno.x), categoryCount);
   const ay = scales.y(anno.y);
   const bxRaw = anno.x2 !== void 0 ? anno.x2 : anno.x;
@@ -174,7 +204,10 @@ export const computeAnnotationGeometry = (anno, scales, categories, categoryCoun
     text: anno.text
   };
   if (anno.kind === "arrow") {
-    const size = Math.max(6, strokeWidth * 4);
+    const size = Math.max(
+      CHART_ANNOTATION_ARROWHEAD_MIN_SIZE,
+      strokeWidth * CHART_ANNOTATION_ARROWHEAD_WIDTH_FACTOR
+    );
     return {
       ...base,
       arrowPoints: arrowheadPoints(ax, ay, base.bx, base.by, size)
@@ -182,10 +215,13 @@ export const computeAnnotationGeometry = (anno, scales, categories, categoryCoun
   }
   if (anno.kind === "label") {
     const text = anno.text ?? "";
-    const charWidth = 7;
-    const padding = 8;
-    const boxW = Math.max(48, text.length * charWidth + padding * 2);
-    const boxH = 24;
+    const charWidth = CHART_ANNOTATION_LABEL_CHAR_WIDTH;
+    const padding = CHART_ANNOTATION_LABEL_PADDING;
+    const boxW = Math.max(
+      CHART_ANNOTATION_LABEL_MIN_WIDTH,
+      text.length * charWidth + padding * 2
+    );
+    const boxH = CHART_ANNOTATION_LABEL_HEIGHT;
     const calloutX = ax + dx - boxW / 2;
     const calloutY = ay + dy - boxH;
     return {
@@ -209,7 +245,7 @@ const computeYRange = (series, stacked, stacking, yMinOverride, yMaxOverride) =>
   const visible = series.filter((s) => s.visible !== false);
   if (!visible.length) return { min: 0, max: 1 };
   if (stacked && stacking === CHART_STACKING.PERCENT) {
-    return { min: 0, max: 100 };
+    return { min: CHART_PERCENT_MIN, max: CHART_PERCENT_MAX };
   }
   if (stacked) {
     const dataLengths = visible.map((s) => s.data.length);
@@ -257,12 +293,8 @@ const niceStep = (range, count) => {
   const rough = range / count;
   const pow10 = Math.pow(10, Math.floor(Math.log10(rough)));
   const norm = rough / pow10;
-  let nice;
-  if (norm < 1.5) nice = 1;
-  else if (norm < 3) nice = 2;
-  else if (norm < 7) nice = 5;
-  else nice = 10;
-  return nice * pow10;
+  const rung = CHART_NICE_STEP_LADDER.find(({ below }) => norm < below) ?? CHART_NICE_STEP_LADDER[CHART_NICE_STEP_LADDER.length - 1];
+  return rung.step * pow10;
 };
 export const useChart = (options) => {
   const hover = ref(null);
@@ -312,7 +344,7 @@ export const useChart = (options) => {
     const { x0, x1, y0, y1 } = plot.value;
     const { min, max } = yRange.value;
     const cats = categories.value;
-    const yPxPerUnit = (y1 - y0) / Math.max(1e-9, max - min);
+    const yPxPerUnit = (y1 - y0) / Math.max(CHART_EPSILON, max - min);
     const x = (value, dataIndex, categoryCount) => {
       if (typeof value === "number" && !cats.length) {
         const count = categoryCount ?? Math.max(1, dataIndex ?? 0);
@@ -335,7 +367,7 @@ export const useChart = (options) => {
   const scaleY1 = computed(() => {
     const { y0, y1 } = plot.value;
     const { min, max } = secondaryYRange.value;
-    const yPxPerUnit = (y1 - y0) / Math.max(1e-9, max - min);
+    const yPxPerUnit = (y1 - y0) / Math.max(CHART_EPSILON, max - min);
     return (value) => {
       const px = y1 - (value - min) * yPxPerUnit;
       if (px < y0) return y0;
@@ -349,9 +381,9 @@ export const useChart = (options) => {
     let niceMax;
     let step;
     if (isPercentMode) {
-      niceMin = 0;
-      niceMax = 100;
-      step = 25;
+      niceMin = CHART_PERCENT_MIN;
+      niceMax = CHART_PERCENT_MAX;
+      step = CHART_PERCENT_TICK_STEP;
     } else {
       const { min, max } = yRange.value;
       step = niceStep(max - min, CHART_Y_TICK_COUNT);
@@ -360,16 +392,16 @@ export const useChart = (options) => {
     }
     const cats = categories.value;
     const allSeries = options.series();
-    const isBarMode = options.type() === "bar" || allSeries.some((s) => s.type === "bar");
+    const isBarMode = options.type() === CHART_TYPE.BAR || allSeries.some((s) => s.type === CHART_TYPE.BAR);
     const valueTicks = [];
-    for (let v = niceMin; v <= niceMax + 1e-9; v += step) {
-      const label = isPercentMode ? `${Math.round(v)}%` : String(Math.round(v * 1e3) / 1e3);
+    for (let v = niceMin; v <= niceMax + CHART_EPSILON; v += step) {
+      const label = isPercentMode ? `${Math.round(v)}%` : String(Math.round(v * CHART_TICK_LABEL_PRECISION_FACTOR) / CHART_TICK_LABEL_PRECISION_FACTOR);
       valueTicks.push({
         value: v,
         label,
         position: isBarMode ? (() => {
           const { x0, x1 } = plot.value;
-          const range = Math.max(1e-9, niceMax - niceMin);
+          const range = Math.max(CHART_EPSILON, niceMax - niceMin);
           const ratio = (v - niceMin) / range;
           return x0 + ratio * (x1 - x0);
         })() : scales.value.y(v)
@@ -390,7 +422,7 @@ export const useChart = (options) => {
     const secondary = options.secondaryYAxis?.();
     const axis1Series = options.series().filter((s) => (s.yAxis ?? 0) === 1 && s.visible !== false);
     const allSeries = options.series();
-    const isBarMode = options.type() === "bar" || allSeries.some((s) => s.type === "bar");
+    const isBarMode = options.type() === CHART_TYPE.BAR || allSeries.some((s) => s.type === CHART_TYPE.BAR);
     if (isBarMode) return [];
     if (!secondary && !axis1Series.length) return [];
     const { min, max } = secondaryYRange.value;
@@ -398,10 +430,10 @@ export const useChart = (options) => {
     const niceMin = Math.floor(min / step) * step;
     const niceMax = Math.ceil(max / step) * step;
     const out = [];
-    for (let v = niceMin; v <= niceMax + 1e-9; v += step) {
+    for (let v = niceMin; v <= niceMax + CHART_EPSILON; v += step) {
       out.push({
         value: v,
-        label: String(Math.round(v * 1e3) / 1e3),
+        label: String(Math.round(v * CHART_TICK_LABEL_PRECISION_FACTOR) / CHART_TICK_LABEL_PRECISION_FACTOR),
         position: scaleY1.value(v)
       });
     }
@@ -410,20 +442,20 @@ export const useChart = (options) => {
   const colorFor = (series, index) => {
     if (series.color) return resolveColor(series.color);
     const scheme = options.colorScheme();
-    const palette = scheme.length ? scheme : DEFAULT_PALETTE;
+    const palette = scheme.length ? scheme : CHART_DEFAULT_PALETTE;
     return resolveColor(palette[index % palette.length]);
   };
   const legend = computed(() => {
     const allSeries = options.series();
-    const pieSeriesList = allSeries.filter((s) => effectiveType(s) === "pie" || effectiveType(s) === "donut");
+    const pieSeriesList = allSeries.filter((s) => effectiveType(s) === CHART_TYPE.PIE || effectiveType(s) === CHART_TYPE.DONUT);
     const cats = options.categories();
-    const scheme = options.colorScheme().length ? options.colorScheme() : DEFAULT_PALETTE;
+    const scheme = options.colorScheme().length ? options.colorScheme() : CHART_DEFAULT_PALETTE;
     const hidden = options.hiddenLabels?.() ?? /* @__PURE__ */ new Set();
     if (pieSeriesList.length === 1 && pieSeriesList[0].data.length > 1) {
       const s = pieSeriesList[0];
       const data = s.data;
       return data.map((entry, i) => {
-        const label = cats[i] ?? (typeof entry === "object" && entry !== null ? String(entry.x) : `Slice ${i + 1}`);
+        const label = cats[i] ?? (typeof entry === "object" && entry !== null ? String(entry.x) : `${CHART_SLICE_LABEL_PREFIX} ${i + 1}`);
         const labelStr = String(label);
         const sliceSeries = {
           ...s,
@@ -477,7 +509,7 @@ export const useChart = (options) => {
           const y = typeof entry === "number" ? entry : entry?.y ?? 0;
           if (!offsets.has(i)) offsets.set(i, []);
           offsets.get(i)[dataIdx] = runningPct;
-          if (y > 0) runningPct += y / safeTot * 100;
+          if (y > 0) runningPct += y / safeTot * CHART_PERCENT_MAX;
         }
       }
     } else {
@@ -513,7 +545,7 @@ export const useChart = (options) => {
         const entry = s.data[dataIdx];
         const y = typeof entry === "number" ? entry : entry?.y ?? 0;
         if (!pctMap.has(i)) pctMap.set(i, []);
-        pctMap.get(i)[dataIdx] = y > 0 ? y / safeTot * 100 : 0;
+        pctMap.get(i)[dataIdx] = y > 0 ? y / safeTot * CHART_PERCENT_MAX : 0;
       }
     }
     return pctMap;
@@ -524,12 +556,15 @@ export const useChart = (options) => {
     const cats = categories.value;
     const { x0, x1, y0, y1, cx, cy } = plot.value;
     const smoothing = options.smoothing();
-    const pieSeriesList = series.filter((s) => effectiveType(s) === "pie" || effectiveType(s) === "donut");
+    const pieSeriesList = series.filter((s) => effectiveType(s) === CHART_TYPE.PIE || effectiveType(s) === CHART_TYPE.DONUT);
     if (pieSeriesList.length > 0) {
-      const outerR = Math.max(10, Math.min(x1 - x0, y1 - y0) / 2 - 4);
-      const isDonut = effectiveType(pieSeriesList[0]) === "donut";
+      const outerR = Math.max(
+        CHART_PIE_MIN_RADIUS,
+        Math.min(x1 - x0, y1 - y0) / 2 - CHART_PIE_RADIUS_INSET
+      );
+      const isDonut = effectiveType(pieSeriesList[0]) === CHART_TYPE.DONUT;
       const baseInner = isDonut ? outerR * options.donutHoleSize() : 0;
-      const scheme = options.colorScheme().length ? options.colorScheme() : DEFAULT_PALETTE;
+      const scheme = options.colorScheme().length ? options.colorScheme() : CHART_DEFAULT_PALETTE;
       const visibleSeries = pieSeriesList.filter((s) => s.visible !== false);
       if (visibleSeries.length === 0) return out;
       const bandThickness = (outerR - baseInner) / visibleSeries.length;
@@ -543,7 +578,7 @@ export const useChart = (options) => {
       const labelFor = (i, entry) => {
         if (cats2[i] != null) return String(cats2[i]);
         if (entry != null && typeof entry === "object") return String(entry.x);
-        return `Slice ${i + 1}`;
+        return `${CHART_SLICE_LABEL_PREFIX} ${i + 1}`;
       };
       for (let ringIdx = 0; ringIdx < visibleSeries.length; ringIdx++) {
         const s = visibleSeries[ringIdx];
@@ -587,29 +622,29 @@ export const useChart = (options) => {
       const yFn = seriesAxisIndex === 1 ? scaleY1.value : scales.value.y;
       const seriesRange = seriesAxisIndex === 1 ? secondaryYRange.value : yRange.value;
       const seriesBaseline = yFn(Math.max(0, seriesRange.min));
-      if (kind === "line" || kind === "area" || kind === "spline" || kind === "stepped-line") {
+      if (kind === CHART_TYPE.LINE || kind === CHART_TYPE.AREA || kind === CHART_TYPE.SPLINE || kind === CHART_TYPE.STEPPED_LINE) {
         const pts = normalised.map((p) => [
           scales.value.x(p.x, p.dataIndex, slotCount.value),
           yFn(p.y)
         ]);
-        const effectiveSmoothing = kind === "spline" && smoothing === "none" ? "monotone" : smoothing;
+        const effectiveSmoothing = kind === CHART_TYPE.SPLINE && smoothing === CHART_SMOOTHING.NONE ? CHART_SMOOTHING.MONOTONE : smoothing;
         let dLine;
         let areaMode = false;
-        if (kind === "stepped-line") {
+        if (kind === CHART_TYPE.STEPPED_LINE) {
           dLine = steppedPath(pts);
           areaMode = "stepped";
-        } else if (effectiveSmoothing === "monotone") {
+        } else if (effectiveSmoothing === CHART_SMOOTHING.MONOTONE) {
           dLine = monotonePath(pts);
           areaMode = "monotone";
-        } else if (effectiveSmoothing === "curve") {
+        } else if (effectiveSmoothing === CHART_SMOOTHING.CURVE) {
           dLine = smoothPath(pts);
           areaMode = true;
         } else {
           dLine = linePath(pts);
           areaMode = false;
         }
-        const length = kind === "stepped-line" ? steppedPathLength(pts) : computePathLength(pts);
-        if (kind === "area") {
+        const length = kind === CHART_TYPE.STEPPED_LINE ? steppedPathLength(pts) : computePathLength(pts);
+        if (kind === CHART_TYPE.AREA) {
           out.push({
             seriesIndex: seriesIdx,
             kind: "path",
@@ -627,14 +662,18 @@ export const useChart = (options) => {
           color,
           series: s,
           pathLength: length,
-          variant: kind === "area" ? "stroke" : void 0
+          variant: kind === CHART_TYPE.AREA ? "stroke" : void 0
         });
         {
           for (let dataIdx = 0; dataIdx < pts.length; dataIdx++) {
             out.push({
               seriesIndex: seriesIdx,
               kind: "circle",
-              circle: { cx: pts[dataIdx][0], cy: pts[dataIdx][1], r: 4 },
+              circle: {
+                cx: pts[dataIdx][0],
+                cy: pts[dataIdx][1],
+                r: CHART_POINT_MARKER_RADIUS
+              },
               color,
               series: s,
               dataIndex: dataIdx
@@ -643,16 +682,16 @@ export const useChart = (options) => {
         }
         continue;
       }
-      if (kind === "bar" || kind === "column") {
+      if (kind === CHART_TYPE.BAR || kind === CHART_TYPE.COLUMN) {
         const visibleCount = series.filter((other) => other.visible !== false).length;
         const groupCount = slotCount.value;
-        const slotPx = kind === "column" ? (x1 - x0) / Math.max(1, groupCount) : (y1 - y0) / Math.max(1, groupCount);
+        const slotPx = kind === CHART_TYPE.COLUMN ? (x1 - x0) / Math.max(1, groupCount) : (y1 - y0) / Math.max(1, groupCount);
         const stacked = options.stacked();
         const isPercent = stacked && effectiveStacking.value === CHART_STACKING.PERCENT;
         const visibleIdxInGroup = series.slice(0, seriesIdx).filter((other) => other.visible !== false).length;
         const stackOff = stackOffsets.value.get(seriesIdx) ?? [];
         const horizRange = yRange.value;
-        const horizSpan = Math.max(1e-9, horizRange.max - horizRange.min);
+        const horizSpan = Math.max(CHART_EPSILON, horizRange.max - horizRange.min);
         const xValuePx = (v) => {
           const ratio = (v - horizRange.min) / horizSpan;
           const px = x0 + ratio * (x1 - x0);
@@ -663,10 +702,10 @@ export const useChart = (options) => {
         for (let dataIdx = 0; dataIdx < normalised.length; dataIdx++) {
           const p = normalised[dataIdx];
           const renderY = isPercent ? percentValues.value.get(seriesIdx)?.[dataIdx] ?? 0 : p.y;
-          if (kind === "column") {
+          if (kind === CHART_TYPE.COLUMN) {
             const centerX = x0 + (dataIdx + 0.5) * slotPx;
-            const barWidth = stacked ? slotPx * 0.7 : slotPx * 0.7 / Math.max(1, visibleCount);
-            const left = stacked ? centerX - barWidth / 2 : centerX - slotPx * 0.7 / 2 + visibleIdxInGroup * barWidth;
+            const barWidth = stacked ? slotPx * CHART_BAR_SLOT_FILL_RATIO : slotPx * CHART_BAR_SLOT_FILL_RATIO / Math.max(1, visibleCount);
+            const left = stacked ? centerX - barWidth / 2 : centerX - slotPx * CHART_BAR_SLOT_FILL_RATIO / 2 + visibleIdxInGroup * barWidth;
             const offset = stacked ? stackOff[dataIdx] ?? 0 : 0;
             const top = yFn(renderY + offset);
             const base = yFn(offset);
@@ -686,8 +725,8 @@ export const useChart = (options) => {
           } else {
             const slots = Math.max(1, groupCount);
             const slotCenterY = slots === 1 ? (y0 + y1) / 2 : y0 + (dataIdx + 0.5) * slotPx;
-            const barHeight = stacked ? slotPx * 0.7 : slotPx * 0.7 / Math.max(1, visibleCount);
-            const top = stacked ? slotCenterY - barHeight / 2 : slotCenterY - slotPx * 0.7 / 2 + visibleIdxInGroup * barHeight;
+            const barHeight = stacked ? slotPx * CHART_BAR_SLOT_FILL_RATIO : slotPx * CHART_BAR_SLOT_FILL_RATIO / Math.max(1, visibleCount);
+            const top = stacked ? slotCenterY - barHeight / 2 : slotCenterY - slotPx * CHART_BAR_SLOT_FILL_RATIO / 2 + visibleIdxInGroup * barHeight;
             const offset = stacked ? stackOff[dataIdx] ?? 0 : 0;
             const rightPx = xValuePx(renderY + offset);
             const basePx = xValuePx(offset);
@@ -708,11 +747,8 @@ export const useChart = (options) => {
         }
         continue;
       }
-      if (kind === "scatter") {
-        const SCATTER_DEFAULT_R = 5;
-        const SCATTER_MIN_R = 5;
-        const SCATTER_MAX_R = 36;
-        const scatterSeries = series.filter((other) => effectiveType(other) === "scatter" && other.visible !== false);
+      if (kind === CHART_TYPE.SCATTER) {
+        const scatterSeries = series.filter((other) => effectiveType(other) === CHART_TYPE.SCATTER && other.visible !== false);
         let xMin = Infinity;
         let xMax = -Infinity;
         let zMin = Infinity;
@@ -731,7 +767,7 @@ export const useChart = (options) => {
             }
           }
         }
-        const xSpan = Math.max(1e-9, xMax - xMin);
+        const xSpan = Math.max(CHART_EPSILON, xMax - xMin);
         const xPx = (v) => {
           const ratio = (v - xMin) / xSpan;
           const px = x0 + ratio * (x1 - x0);
@@ -739,11 +775,11 @@ export const useChart = (options) => {
           if (px > x1) return x1;
           return px;
         };
-        const zSpan = Math.max(1e-9, zMax - zMin);
+        const zSpan = Math.max(CHART_EPSILON, zMax - zMin);
         const radiusFor = (z) => {
-          if (!hasZ || typeof z !== "number" || !Number.isFinite(z)) return SCATTER_DEFAULT_R;
+          if (!hasZ || typeof z !== "number" || !Number.isFinite(z)) return CHART_SCATTER_DEFAULT_RADIUS;
           const ratio = zSpan === 0 ? 0.5 : (z - zMin) / zSpan;
-          return SCATTER_MIN_R + ratio * (SCATTER_MAX_R - SCATTER_MIN_R);
+          return CHART_SCATTER_MIN_RADIUS + ratio * (CHART_SCATTER_MAX_RADIUS - CHART_SCATTER_MIN_RADIUS);
         };
         for (let dataIdx = 0; dataIdx < normalised.length; dataIdx++) {
           const p = normalised[dataIdx];
@@ -763,12 +799,15 @@ export const useChart = (options) => {
         }
         continue;
       }
-      if (kind === "radar") {
+      if (kind === CHART_TYPE.RADAR) {
         const axes = Math.max(cats.length, normalised.length);
         if (!axes) continue;
-        const radius = Math.max(10, Math.min(x1 - x0, y1 - y0) / 2 - 8);
+        const radius = Math.max(
+          CHART_RADAR_MIN_RADIUS,
+          Math.min(x1 - x0, y1 - y0) / 2 - CHART_RADAR_RADIUS_INSET
+        );
         const pts = normalised.map((p, i) => {
-          const yRangeSize = Math.max(1e-9, yRange.value.max - yRange.value.min);
+          const yRangeSize = Math.max(CHART_EPSILON, yRange.value.max - yRange.value.min);
           const ratio = (p.y - yRange.value.min) / yRangeSize;
           const angle = i / axes * Math.PI * 2;
           return polarToCartesian(cx, cy, radius * ratio, angle);
@@ -784,7 +823,7 @@ export const useChart = (options) => {
           out.push({
             seriesIndex: seriesIdx,
             kind: "circle",
-            circle: { cx: pts[i][0], cy: pts[i][1], r: 3.5 },
+            circle: { cx: pts[i][0], cy: pts[i][1], r: CHART_RADAR_MARKER_RADIUS },
             color,
             series: s,
             dataIndex: i

package/dist/src/composables/Clipboard/clipboard.composable.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-import type { IUseClipboardOptions } from '../../interfaces';
+import type { IUseClipboardOptions } from '../../interfaces/Clipboard/clipboard.interface';
 /**
  * Headless clipboard composable. Wraps the modern Clipboard API + a
  * legacy execCommand fallback and exposes a self-resetting `copied`

package/dist/src/composables/Code/code.composable.d.ts

@@ -1,4 +1,4 @@
-import type { IUseCodeReturn } from '../../interfaces';
+import type { IUseCodeReturn } from '../../interfaces/Code/code.interface';
 /**
  * Public hook — see `IUseCodeReturn` for the surface contract.
  */

package/dist/src/composables/CommandPalette/command.composable.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.resetCommandRegistryForTesting = resetCommandRegistryForTesting;
 exports.useCommand = useCommand;
 var _vue = require("vue");
-var _utils = require("../../utils/index.cjs");
+var _commons = require("../../utils/Commons/commons.util.cjs");
 const REGISTRY = {
   items: (0, _vue.ref)([]),
   isOpen: (0, _vue.ref)(false)
@@ -27,7 +27,7 @@ function useCommand() {
   const register = cmd => {
     upsert(cmd);
     const dispose = () => removeById(cmd.id);
-    (0, _utils.tryOnScopeDispose)(dispose);
+    (0, _commons.tryOnScopeDispose)(dispose);
     return dispose;
   };
   const unregister = id => removeById(id);

package/dist/src/composables/CommandPalette/command.composable.d.ts

@@ -1,8 +1,21 @@
-import type { IUseCommandReturn } from '../../interfaces';
-export type { IUseCommandReturn } from '../../interfaces';
+import type { IUseCommandReturn } from '../../interfaces/CommandPalette/command.interface';
+export type { IUseCommandReturn } from '../../interfaces/CommandPalette/command.interface';
 /*********************************************************
  * useCommand
  ********************************************************/
+/*********************************************************
+ * useCommand
+ *
+ * @description
+ * Registre des commandes de `<origam-command-palette>`. `register` ajoute ou
+ * remplace une commande par son `id` et retourne sa fonction de retrait.
+ *
+ * @description
+ * Le retrait est aussi branche sur `tryOnScopeDispose` : une commande
+ * enregistree depuis un `setup()` disparait avec le composant, sans que
+ * l'appelant ait a garder la fonction retournee. Hors d'un scope Vue, cet
+ * accrochage ne fait rien et c'est au consommateur d'appeler le retrait.
+ ********************************************************/
 export declare function useCommand(): IUseCommandReturn;
 /*********************************************************
  * Test helper

package/dist/src/composables/CommandPalette/command.composable.js

@@ -1,5 +1,5 @@
 import { computed, ref } from "vue";
-import { tryOnScopeDispose } from "../../utils/index.js";
+import { tryOnScopeDispose } from "../../utils/Commons/commons.util.js";
 const REGISTRY = {
   items: ref([]),
   isOpen: ref(false)

package/dist/src/composables/Commons/activator.composable.cjs

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useActivator = useActivator;
 var _vue = require("vue");
-var _composables = require("../../composables/index.cjs");
-var _consts = require("../../consts/index.cjs");
-var _utils = require("../../utils/index.cjs");
+var _delay = require("./delay.composable.cjs");
+var _commons = require("../../consts/Commons/commons.const.cjs");
+var _menu = require("../../consts/Menu/menu.const.cjs");
+var _activator = require("../../utils/Commons/activator.util.cjs");
+var _commons2 = require("../../utils/Commons/commons.util.cjs");
+var _getCurrentInstance = require("../../utils/Commons/getCurrentInstance.util.cjs");
 function useActivator(props, {
   isActive,
   isTop
 }) {
-  const vm = (0, _utils.getCurrentInstance)("useActivator");
+  const vm = (0, _getCurrentInstance.getCurrentInstance)("useActivator");
   const activatorEl = (0, _vue.ref)();
   let isHovered = false;
   let isFocused = false;
@@ -37,7 +40,7 @@ function useActivator(props, {
   const {
     runOpenDelay,
     runCloseDelay
-  } = (0, _composables.useDelay)(props, delayCallback);
+  } = (0, _delay.useDelay)(props, delayCallback);
   const cursorTarget = (0, _vue.ref)();
   const handleClick = e => {
     e.stopPropagation();
@@ -65,7 +68,7 @@ function useActivator(props, {
     runCloseDelay();
   };
   const handleFocus = e => {
-    if ((0, _utils.matchesSelector)(e.target, ":focus-visible") === false) return;
+    if ((0, _commons2.matchesSelector)(e.target, ":focus-visible") === false) return;
     isFocused = true;
     e.stopPropagation();
     activatorEl.value = e.currentTarget || e.target;
@@ -125,7 +128,7 @@ function useActivator(props, {
       };
     }
     if (props.closeOnContentClick) {
-      const menu = (0, _vue.inject)(_consts.ORIGAM_MENU_KEY, null);
+      const menu = (0, _vue.inject)(_menu.ORIGAM_MENU_KEY, null);
       events.onClick = () => {
         isActive.value = false;
         menu?.closeParents();
@@ -168,24 +171,24 @@ function useActivator(props, {
   (0, _vue.watchEffect)(() => {
     if (!activatorRef.value) return;
     (0, _vue.nextTick)(() => {
-      activatorEl.value = (0, _utils.refElement)(activatorRef.value);
+      activatorEl.value = (0, _commons2.refElement)(activatorRef.value);
     });
   });
   const targetRef = (0, _vue.ref)();
   const target = (0, _vue.computed)(() => {
     if (props.target === "cursor" && cursorTarget.value) return cursorTarget.value;
-    if (targetRef.value) return (0, _utils.refElement)(targetRef.value);
-    return (0, _utils.getTargetActivator)(props.target, vm) || activatorEl.value;
+    if (targetRef.value) return (0, _commons2.refElement)(targetRef.value);
+    return (0, _activator.getTargetActivator)(props.target, vm) || activatorEl.value;
   });
   const targetEl = (0, _vue.computed)(() => {
     return Array.isArray(target.value) ? void 0 : target.value;
   });
   let scope;
   (0, _vue.watch)(() => !!props.activator, val => {
-    if (val && _consts.IN_BROWSER) {
+    if (val && _commons.IN_BROWSER) {
       scope = (0, _vue.effectScope)();
       scope.run(() => {
-        (0, _utils.activator)(props, vm, {
+        (0, _activator.activator)(props, vm, {
           activatorEl,
           activatorEvents
         });