@konce-pt/react 0.18.0 → 0.18.1

package/dist/charts/chart.js

@@ -1,12 +1,35 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
-import { KptChartMotion, areaPath, axisBase, bandPath, bandScale, barLayout, chartScale, chartAccessibleName, chartDataTable, dataScale, deltaKind, domainScale, formatNumber, linePath, linearScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, sameChartShape, scaleRows, seriesColor, significantDelta, stackSeries, } from '@konce-pt/chart';
+import { KptChartMotion, areaPath, axisBase, axisLabelIndices, bandPath, bandScale, barLayout, chartScale, chartAccessibleName, chartDataTable, clampLabel, dataScale, deltaKind, domainScale, estimateLabelWidth, formatNumber, linePath, linearScale, pieSlices, plotArea, polarSlices, polarToCartesian, polygonPath, radarGrid, radarPoints, radialArea, sameChartShape, scaleRows, seriesColor, significantDelta, stackSeries, } from '@konce-pt/chart';
 import { cn } from "../internal/cn.js";
 import { useKptMotion } from "../motion/motion-context.js";
 import { useKptMessages } from "../i18n/i18n-context.js";
 import { KptChartLegend } from "./chart-legend.js";
 import { KptChartTooltip } from "./chart-tooltip.js";
+/** Wysokość linii etykiety kategorii na osi pionowej (słupki poziome) - jednostki viewBoxa. */
+const CATEGORY_LINE = 12;
+/**
+ * Etykiety osi poziomej: wszystkie, jeśli się mieszczą, inaczej równy podział 9/5/3/2
+ * (`axisLabelIndices`). Pełna nazwa każdej kategorii zostaje w pigułce prowadnicy i w dymku.
+ */
+function bottomLabels(labels, centers, y, width) {
+    const sizes = labels.map((l) => estimateLabelWidth(l));
+    const shown = new Set(axisLabelIndices(centers, sizes));
+    return labels.map((text, i) => ({
+        at: centers[i] ?? 0,
+        x: clampLabel(centers[i] ?? 0, sizes[i] ?? 0, 0, width),
+        y,
+        text,
+        anchor: 'middle',
+        visible: shown.has(i),
+    }));
+}
+/** Etykiety osi pionowej (słupki poziome): ten sam podział, rozmiarem jest wysokość linii. */
+function sideLabels(labels, centers, x) {
+    const shown = new Set(axisLabelIndices(centers, centers.map(() => CATEGORY_LINE), 2));
+    return labels.map((text, i) => ({ at: centers[i] ?? 0, x, y: (centers[i] ?? 0) + 3, text, anchor: 'end', visible: shown.has(i) }));
+}
 const VERTICAL_INSETS = { top: 12, right: 16, bottom: 28, left: 46 };
 const HORIZONTAL_INSETS = { top: 12, right: 16, bottom: 28, left: 76 };
 /** Szerokość pasma smugi światła (jednostki viewBoxa) - połowa po każdej stronie czoła fali. */
@@ -234,12 +257,8 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             text: formatNumber(t),
             anchor: 'end',
         }));
-        const catLabels = view.labels.map((label, i) => ({
-            x: xAt(i),
-            y: plot.y + plot.height + 18,
-            text: label,
-            anchor: 'middle',
-        }));
+        const catLabels = bottomLabels(view.labels, view.labels.map((_, i) => xAt(i)), plot.y + plot.height + 18, width);
+        const catTicks = view.labels.map((_, i) => ({ x: xAt(i), y: plot.y + plot.height }));
         const series = active.map(({ s, i }, k) => ({
             key: `ser:${s.name}`,
             name: s.name,
@@ -257,14 +276,16 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             : [];
         const crosshairCat = config.crosshair && activeIndex !== null ? catLabels[activeIndex] : undefined;
         // Prowadnica i pigułka jadą razem z dymkiem.
-        const crossX = crosshairCat ? (frame.tip?.x ?? crosshairCat.x) : 0;
+        const crossX = crosshairCat ? (frame.tip?.x ?? crosshairCat.at) : 0;
         const pillWidth = crosshairCat ? Math.max(28, crosshairCat.text.length * 7 + 16) : 0;
+        // Pigułka przy skrajnej kategorii przesuwa się do środka zamiast wyjść poza viewBox.
+        const pillX = crosshairCat ? clampLabel(crossX, pillWidth, 0, width) : 0;
         /** Najbliższa kategoria w całym obszarze wykresu: wiersze wszystkich serii, dymek nad najwyższym punktem. */
         const onMove = (event) => {
             const p = svgPoint(event);
             if (!p || !series.length)
                 return;
-            const idx = nearestIndex(catLabels.map((l) => l.x), p.x);
+            const idx = nearestIndex(catLabels.map((l) => l.at), p.x);
             if (keepTip(idx))
                 return;
             const hits = series.map((s) => ({ s, pt: s.points[idx] })).filter((e) => !!e.pt);
@@ -278,7 +299,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             if (moved && tipMotion())
                 setRipple({ id: ++rippleId.current, x: top.pt.x, y: top.pt.y, color: top.s.color });
         };
-        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), crosshairCat ? (_jsx("line", { className: "kpt-chart__crosshair", x1: crossX, y1: plot.y, x2: crossX, y2: plot.y + plot.height })) : null, _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), crosshairCat ? (_jsxs("g", { className: "kpt-chart__cat-active", children: [_jsx("rect", { x: crossX - pillWidth / 2, y: crosshairCat.y - 13, width: pillWidth, height: 18, rx: 9 }), _jsx("text", { x: crossX, y: crosshairCat.y, textAnchor: "middle", children: crosshairCat.text })] })) : null, ghostState
+        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), crosshairCat ? (_jsx("line", { className: "kpt-chart__crosshair", x1: crossX, y1: plot.y, x2: crossX, y2: plot.y + plot.height })) : null, _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels.filter((l) => l.visible)].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), _jsx("g", { className: "kpt-chart__cat-ticks", "aria-hidden": "true", children: catTicks.map((tk, i) => (_jsx("circle", { className: cn('kpt-chart__cat-tick', activeIndex === i && 'kpt-chart__cat-tick--active'), r: 2, cx: tk.x, cy: tk.y }, i))) }), crosshairCat ? (_jsxs("g", { className: "kpt-chart__cat-active", children: [_jsx("rect", { x: pillX - pillWidth / 2, y: crosshairCat.y - 13, width: pillWidth, height: 18, rx: 9 }), _jsx("text", { x: pillX, y: crosshairCat.y, textAnchor: "middle", children: crosshairCat.text })] })) : null, ghostState
                     ? series.map((s) => {
                         const prev = ghostState.prev[s.i] ?? [];
                         const next = ghostState.next[s.i] ?? [];
@@ -332,9 +353,10 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
                 text: formatNumber(t.value),
                 anchor: 'middle',
             }));
+        const centers = view.labels.map((_, i) => cat.center(i));
         const catLabels = vertical
-            ? view.labels.map((l, i) => ({ x: cat.center(i), y: plot.y + plot.height + 18, text: l, anchor: 'middle' }))
-            : view.labels.map((l, i) => ({ x: plot.x - 8, y: cat.center(i) + 3, text: l, anchor: 'end' }));
+            ? bottomLabels(view.labels, centers, plot.y + plot.height + 18, width)
+            : sideLabels(view.labels, centers, plot.x - 8);
         const bars = layout.bars.map((b, order) => ({
             b,
             order,
@@ -371,7 +393,7 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             const p = svgPoint(event);
             if (!p)
                 return;
-            const idx = nearestIndex(catLabels.map((l) => (vertical ? l.x : l.y - 3)), vertical ? p.x : p.y);
+            const idx = nearestIndex(catLabels.map((l) => l.at), vertical ? p.x : p.y);
             if (keepTip(idx))
                 return;
             const group = bars.filter((e) => e.b.categoryIndex === idx);
@@ -379,11 +401,11 @@ export function KptChart({ config, width = 600, height = 360, locale, dictionary
             if (!group.length || !center)
                 return;
             const label = config.labels[idx] ?? '';
-            const x = vertical ? center.x : Math.max(...group.map((e) => e.tipX));
-            const y = vertical ? Math.min(...group.map((e) => e.tipY)) : center.y - 3;
+            const x = vertical ? center.at : Math.max(...group.map((e) => e.tipX));
+            const y = vertical ? Math.min(...group.map((e) => e.tipY)) : center.at;
             openTip(x, y, label, group.map((e) => row(e.name, label, e.b.value, e.color)), idx);
         };
-        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), ghostBars.length ? (_jsx("g", { className: "kpt-chart__ghost", "aria-hidden": "true", children: ghostBars.map((g) => (_jsx("path", { className: "kpt-chart__ghost-bar", d: g.path }, g.key))) })) : null, _jsx("g", { className: "kpt-chart__bars", "data-orientation": orientation, children: bars.map((e) => (_jsx("path", { className: cn('kpt-chart__bar', dim(e.key) && 'kpt-chart__series--dim'), d: e.b.path, style: { fill: e.color, ['--kpt-chart-i']: e.order } }, `${e.key}#${e.order}`))) }), ghostBars.length ? (_jsx("g", { className: "kpt-chart__ghost", "aria-hidden": "true", children: ghostBars.map((g) => (_jsx("rect", { className: "kpt-chart__delta-bar", "data-kind": g.kind, rx: 2, ...g.delta }, g.key))) })) : null, sheen
+        return (_jsxs(_Fragment, { children: [_jsx("g", { className: "kpt-chart__grid", children: grid.map((g, i) => (_jsx("line", { className: "kpt-chart__gridline", x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 }, i))) }), _jsx("g", { className: "kpt-chart__axis", children: [...valueLabels, ...catLabels.filter((l) => l.visible)].map((l, i) => (_jsx("text", { x: l.x, y: l.y, textAnchor: l.anchor, children: l.text }, i))) }), ghostBars.length ? (_jsx("g", { className: "kpt-chart__ghost", "aria-hidden": "true", children: ghostBars.map((g) => (_jsx("path", { className: "kpt-chart__ghost-bar", d: g.path }, g.key))) })) : null, _jsx("g", { className: "kpt-chart__bars", "data-orientation": orientation, children: bars.map((e) => (_jsx("path", { className: cn('kpt-chart__bar', dim(e.key) && 'kpt-chart__series--dim'), d: e.b.path, style: { fill: e.color, ['--kpt-chart-i']: e.order } }, `${e.key}#${e.order}`))) }), ghostBars.length ? (_jsx("g", { className: "kpt-chart__ghost", "aria-hidden": "true", children: ghostBars.map((g) => (_jsx("rect", { className: "kpt-chart__delta-bar", "data-kind": g.kind, rx: 2, ...g.delta }, g.key))) })) : null, sheen
                     ? bars.map((e) => (_jsx("path", { className: "kpt-chart__sheen-bar", d: e.b.path, fill: `url(#${sheenId})`, style: { opacity: sheen.opacity * 0.7 }, "aria-hidden": "true" }, `${e.key}#${e.order}`)))
                     : null, _jsx("rect", { className: "kpt-chart__hover", x: plot.x, y: plot.y, width: plot.width, height: plot.height, onPointerMove: onMove, onPointerLeave: hideTip })] }));
     })();

package/dist/charts/llms.txt

@@ -32,6 +32,16 @@ takes, because both read it from `@konce-pt/chart`.
   `area`). The axis covers the totals; the tooltip shows the values of the series, not the totals
 - The rules live in `@konce-pt/chart`: `axisScale`, `chartScale`, `stackSeries`, `bandPath` (tested)
 
+## Category axis (line, bar)
+- When the category labels do not fit, the axis shows an even subset instead of overlapping text: all of
+  them if they fit, otherwise the densest split that fits - 9 labels (eighths of the axis), 5 (first, 1/4,
+  middle, 3/4, last), 3, and finally the two ends only. Horizontal bars apply the same rule to the rows
+- The choice is made in viewBox units, so it follows `width`, not the on-screen size; the outer labels and the
+  crosshair pill are shifted inward so they never leave the chart
+- A line chart marks every category with a small dot on the axis; the active one grows on hover. The full
+  name of any category stays in the crosshair pill and the tooltip
+- The rules live in `@konce-pt/chart`: `axisLabelIndices`, `estimateLabelWidth`, `clampLabel` (tested)
+
 ## The geometry lives in a package
 Scales, paths, bar layout and arcs come from `@konce-pt/chart` - pure functions with `node --test`
 coverage, shared with the Angular port. The component only turns them into SVG elements; there is

package/dist/charts-entry/public-api.d.ts

@@ -1,4 +1,4 @@
 export { KptChart } from '../charts/chart.tsx';
 export type { KptChartProps } from '../charts/chart.tsx';
-export type { KptChartConfig, KptChartSeries, KptChartType, KptLineInterpolation, KptBarOrientation, KptLegendOptions, KptLegendPosition, KptLegendTitle, KptAlign, KptPointStyle, KptTitleOptions, KptTooltipOptions, KptTooltipContext, KptAnimationOptions, KptFont, KptPadding, } from '@konce-pt/chart';
+export type { KptChartConfig, KptChartSeries, KptChartType, KptLineInterpolation, KptBarOrientation, KptLegendOptions, KptLegendPosition, KptLegendTitle, KptAlign, KptPointStyle, KptTitleOptions, KptTooltipOptions, KptTooltipContext, KptAnimationOptions, KptValueAxisOptions, KptFont, KptPadding, } from '@konce-pt/chart';
 export { KPT_CHART_PALETTE, seriesColor, linePath, areaPath, pieSlices, polarSlices, barLayout, radarGrid, radarPoints, niceScale, } from '@konce-pt/chart';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Open-source React 19 component library on the Koncept UI design system - the same kpt-* CSS layer and --kpt-* tokens as the Angular port. Zero runtime dependencies.",
   "license": "MIT",
   "author": "konce.pt",
@@ -65,19 +65,19 @@
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/backdrop": "0.18.0",
-    "@konce-pt/mention": "0.18.0",
-    "@konce-pt/chat": "0.18.0",
-    "@konce-pt/chart": "0.18.0",
-    "@konce-pt/speech": "0.18.0",
-    "@konce-pt/i18n": "0.18.0",
-    "@konce-pt/icons": "0.18.0",
-    "@konce-pt/motion": "0.18.0",
-    "@konce-pt/roadmap": "0.18.0",
-    "@konce-pt/datetime": "0.18.0",
-    "@konce-pt/table": "0.18.0",
-    "@konce-pt/tokens": "0.18.0",
-    "@konce-pt/map": "0.18.0"
+    "@konce-pt/backdrop": "0.18.1",
+    "@konce-pt/icons": "0.18.1",
+    "@konce-pt/chart": "0.18.1",
+    "@konce-pt/roadmap": "0.18.1",
+    "@konce-pt/mention": "0.18.1",
+    "@konce-pt/speech": "0.18.1",
+    "@konce-pt/motion": "0.18.1",
+    "@konce-pt/i18n": "0.18.1",
+    "@konce-pt/map": "0.18.1",
+    "@konce-pt/chat": "0.18.1",
+    "@konce-pt/tokens": "0.18.1",
+    "@konce-pt/datetime": "0.18.1",
+    "@konce-pt/table": "0.18.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",