@thl-ui/charts 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -22,6 +22,12 @@ export declare const chartColors: string[];
 export declare const colorAt: (i: number, s?: {
     color?: string;
 }) => string;
+/**
+ * Which x-axis labels to draw so they do not overlap: every `step`-th label, starting at 0.
+ * Width per label is estimated from the longest label (11px axis text ≈ 6.5px per character + 8px gap).
+ * Data points are unaffected; only the axis text is thinned.
+ */
+export declare function labelStep(labels: string[], plotWidth: number, charWidth?: number, gap?: number): number;
 /** "Nice" axis ticks. */
 export declare function niceTicks(min: number, max: number, count?: number): number[];
 /** Smooth path through points (monotone-ish cardinal spline). */

package/dist/index.js

@@ -8,6 +8,19 @@ export const chartColors = [
     'var(--thl-color-inverse)',
 ];
 export const colorAt = (i, s) => s?.color ?? chartColors[i % chartColors.length];
+/**
+ * Which x-axis labels to draw so they do not overlap: every `step`-th label, starting at 0.
+ * Width per label is estimated from the longest label (11px axis text ≈ 6.5px per character + 8px gap).
+ * Data points are unaffected; only the axis text is thinned.
+ */
+export function labelStep(labels, plotWidth, charWidth = 6.5, gap = 8) {
+    if (labels.length < 2)
+        return 1;
+    const longest = Math.max(...labels.map((l) => String(l).length));
+    const need = longest * charWidth + gap;
+    const slot = plotWidth / labels.length;
+    return Math.max(1, Math.ceil(need / Math.max(1, slot)));
+}
 /** "Nice" axis ticks. */
 export function niceTicks(min, max, count = 5) {
     if (min === max) {
@@ -41,6 +54,11 @@ export function smoothPath(pts, tension = 0.2) {
     }
     return d;
 }
+/** Labels with the ones that would overlap blanked out (positions stay, so indexes still match the data). */
+const thin = (labels, plotWidth) => {
+    const step = labelStep(labels, plotWidth);
+    return labels.map((l, i) => (i % step === 0 ? l : ''));
+};
 const linePath = (pts) => pts.map((p, i) => `${i ? 'L' : 'M'}${p[0]},${p[1]}`).join(' ');
 /** Line / area chart. */
 export function lineChart(series, labels, box, o = {}) {
@@ -56,7 +74,7 @@ export function lineChart(series, labels, box, o = {}) {
         height: box.height,
         plot: { x: f.x0, y: f.y0, width: f.w, height: f.h },
         yTicks: ticks.map((value) => ({ value, y: Number(sy(value).toFixed(2)) })),
-        xLabels: labels.map((label, i) => ({ label, x: Number(sx(i).toFixed(2)) })),
+        xLabels: thin(labels, f.w).map((label, i) => ({ label, x: Number(sx(i).toFixed(2)) })),
         series: series.map((s, si) => {
             const pts = s.data.map((v, i) => [Number(sx(i).toFixed(2)), Number(sy(v).toFixed(2))]);
             const line = o.smooth ? smoothPath(pts) : linePath(pts);
@@ -101,7 +119,7 @@ export function barChart(series, labels, box, o = {}) {
         height: box.height,
         plot: { x: f.x0, y: f.y0, width: f.w, height: f.h },
         yTicks: ticks.map((value) => ({ value, y: sy(value) })),
-        xLabels: labels.map((label, i) => ({ label, x: f.x0 + i * band + band / 2 })),
+        xLabels: thin(labels, f.w).map((label, i) => ({ label, x: f.x0 + i * band + band / 2 })),
         bars: bars.map((b) => ({ ...b, x: +b.x.toFixed(2), y: +b.y.toFixed(2), width: +b.width.toFixed(2), height: +Math.max(0, b.height).toFixed(2) })),
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thl-ui/charts",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "thl-ui charts: dependency-free SVG geometry for line, bar, pie and sparkline charts.",
   "keywords": [
     "thl-ui",