@acronis-platform/ui-react 5.4.1 → 5.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/components/ui/area-chart/area-chart.js +107 -105
  2. package/dist/components/ui/area-chart/area-chart.js.map +1 -1
  3. package/dist/components/ui/bar-chart/bar-chart.js +135 -132
  4. package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
  5. package/dist/components/ui/chart/chart-format.js +36 -31
  6. package/dist/components/ui/chart/chart-format.js.map +1 -1
  7. package/dist/components/ui/chart/chart.js +9 -7
  8. package/dist/components/ui/chart/chart.js.map +1 -1
  9. package/dist/components/ui/chart/use-x-axis-layout.js +71 -0
  10. package/dist/components/ui/chart/use-x-axis-layout.js.map +1 -0
  11. package/dist/components/ui/composed-chart/composed-chart.js +141 -139
  12. package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
  13. package/dist/components/ui/confidence-cone/confidence-cone.js +70 -67
  14. package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
  15. package/dist/components/ui/histogram/histogram.js +54 -51
  16. package/dist/components/ui/histogram/histogram.js.map +1 -1
  17. package/dist/components/ui/line-chart/line-chart.js +119 -117
  18. package/dist/components/ui/line-chart/line-chart.js.map +1 -1
  19. package/dist/components/ui/scatter-chart/scatter-chart.js +53 -51
  20. package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
  21. package/dist/llms/area-chart.md +10 -1
  22. package/dist/llms/bar-chart.md +10 -1
  23. package/dist/llms/composed-chart.md +10 -1
  24. package/dist/llms/confidence-cone.md +10 -1
  25. package/dist/llms/histogram.md +10 -1
  26. package/dist/llms/line-chart.md +10 -1
  27. package/dist/llms/scatter-chart.md +10 -1
  28. package/dist/llms.txt +1 -1
  29. package/dist/src/components/ui/chart/chart-format.d.ts +10 -4
  30. package/dist/src/components/ui/chart/chart.d.ts +1 -1
  31. package/dist/src/components/ui/chart/use-x-axis-layout.d.ts +28 -0
  32. package/dist/ui-react.css +1 -1
  33. package/package.json +2 -2
package/dist/components/ui/scatter-chart/scatter-chart.js CHANGED
@@ -1,59 +1,45 @@
1
1
  "use client";
2
2
  import { cn as e } from "../../../lib/utils.js";
3
- import { ChartContainer as t, ChartLegend as n, ChartLegendContent as r, ChartTooltip as i, ChartTooltipContent as a, toCssKey as o } from "../chart/chart.js";
4
- import { resolveAnimation as s, resolveAxisDomain as c, resolveRotatedTickAnchor as l, resolveXAxisHeight as u, resolveXAxisTitle as d, resolveYAxisTitle as f } from "../chart/chart-format.js";
3
+ import { ChartContainer as t, ChartLegend as ee, ChartLegendContent as n, ChartTooltip as r, ChartTooltipContent as i, toCssKey as a } from "../chart/chart.js";
4
+ import { resolveAnimation as o, resolveAxisDomain as s, resolveRotatedTickAnchor as c, resolveXAxisTickLabels as l, resolveXAxisTitle as u, resolveYAxisTitle as d } from "../chart/chart-format.js";
5
+ import { mergeXAxisLayoutMargin as f, useXAxisLayout as te } from "../chart/use-x-axis-layout.js";
5
6
  import * as p from "react";
6
7
  import { jsx as m, jsxs as h } from "react/jsx-runtime";
7
8
  import { CartesianGrid as g, Scatter as _, ScatterChart as v, XAxis as y, YAxis as b, ZAxis as x } from "recharts";
8
9
  //#region src/components/ui/scatter-chart/scatter-chart.tsx
9
- var S = p.forwardRef(({ className: p, config: S, palette: C = {
10
+ var S = p.forwardRef(({ className: S, config: C, palette: w = {
10
11
  type: "diverging",
11
12
  pair: "teal-violet"
12
- }, series: w, xKey: T, yKey: E, zKey: D, zRange: O = [60, 400], shape: k = "circle", xAxisLabel: A, yAxisLabel: j, xUnit: M, yUnit: N, showGrid: P = !0, showTooltip: ee = !0, showLegend: F = !0, showXAxis: I = !0, showYAxis: L = !0, xTickFormatter: R, yTickFormatter: z, xAxisAngle: B, xAxisInterval: V, yAxisTickCount: H, yAxisDomain: U, gridDashed: W = !0, gridHorizontal: G, gridVertical: K, tooltipContent: q, animate: J, animationDuration: Y, animationBegin: X, animationEasing: Z, ...Q }, $) => {
13
- let te = s({
14
- animate: J,
15
- animationDuration: Y,
16
- animationBegin: X,
17
- animationEasing: Z
18
- }), ne = d(A, "insideBottom", -8), re = f(j), ie = c(U), ae = u(A, B);
13
+ }, series: T, xKey: E, yKey: D, zKey: O, zRange: k = [60, 400], shape: A = "circle", xAxisLabel: j, yAxisLabel: M, xUnit: N, yUnit: P, showGrid: F = !0, showTooltip: I = !0, showLegend: ne = !0, showXAxis: L = !0, showYAxis: R = !0, xTickFormatter: z, yTickFormatter: B, xAxisAngle: V, xAxisInterval: H, yAxisTickCount: U, yAxisDomain: W, gridDashed: G = !0, gridHorizontal: K, gridVertical: q, tooltipContent: J, animate: Y, animationDuration: X, animationBegin: Z, animationEasing: re, ...ie }, ae) => {
14
+ let oe = o({
15
+ animate: Y,
16
+ animationDuration: X,
17
+ animationBegin: Z,
18
+ animationEasing: re
19
+ }), se = u(j, "insideBottom", -8), ce = d(M), le = s(W), ue = l(T.flatMap(({ data: e }) => e.map((e) => e[E])), z), Q = p.useRef(null), $ = te(Q, V, j, ue.join("\0"));
19
20
  return /* @__PURE__ */ m("div", {
20
- ref: $,
21
- className: e(p),
22
- ...Q,
21
+ ref: ae,
22
+ className: e(S),
23
+ ...ie,
23
24
  children: /* @__PURE__ */ m(t, {
24
- config: S,
25
- palette: C,
25
+ ref: Q,
26
+ config: C,
27
+ palette: w,
26
28
  className: "size-full [&_.recharts-label]:fill-foreground",
27
29
  children: /* @__PURE__ */ h(v, {
28
- margin: {
30
+ margin: f({
29
31
  top: 16,
30
32
  right: 16,
31
33
  bottom: 16,
32
34
  left: 16
33
- },
35
+ }, $.margin),
34
36
  children: [
35
- P && /* @__PURE__ */ m(g, {
36
- horizontal: G ?? !0,
37
- vertical: K ?? !1,
38
- strokeDasharray: W ? "3 3" : void 0
37
+ F && /* @__PURE__ */ m(g, {
38
+ horizontal: K ?? !0,
39
+ vertical: q ?? !1,
40
+ strokeDasharray: G ? "3 3" : void 0
39
41
  }),
40
42
  /* @__PURE__ */ m(y, {
41
- type: "number",
42
- dataKey: T,
43
- name: T,
44
- unit: M,
45
- hide: !I,
46
- tickLine: !1,
47
- axisLine: !1,
48
- tickMargin: 8,
49
- tickFormatter: R,
50
- angle: B,
51
- interval: V,
52
- textAnchor: l(B),
53
- height: ae,
54
- label: ne
55
- }),
56
- /* @__PURE__ */ m(b, {
57
43
  type: "number",
58
44
  dataKey: E,
59
45
  name: E,
@@ -63,28 +49,44 @@ var S = p.forwardRef(({ className: p, config: S, palette: C = {
63
49
  axisLine: !1,
64
50
  tickMargin: 8,
65
51
  tickFormatter: z,
66
- tickCount: H,
67
- domain: ie,
68
- width: j ? 72 : void 0,
69
- label: re
52
+ angle: V,
53
+ interval: H,
54
+ textAnchor: c(V),
55
+ height: $.height,
56
+ label: se
70
57
  }),
71
- D && /* @__PURE__ */ m(x, {
58
+ /* @__PURE__ */ m(b, {
72
59
  type: "number",
73
60
  dataKey: D,
74
- range: O,
75
- name: D
61
+ name: D,
62
+ unit: P,
63
+ hide: !R,
64
+ tickLine: !1,
65
+ axisLine: !1,
66
+ tickMargin: 8,
67
+ tickFormatter: B,
68
+ tickCount: U,
69
+ domain: le,
70
+ width: M ? 72 : void 0,
71
+ label: ce
72
+ }),
73
+ O && /* @__PURE__ */ m(x, {
74
+ type: "number",
75
+ dataKey: O,
76
+ range: k,
77
+ name: O
76
78
  }),
77
- ee && /* @__PURE__ */ m(i, {
79
+ I && /* @__PURE__ */ m(r, {
78
80
  cursor: { strokeDasharray: "3 3" },
79
- content: q ?? /* @__PURE__ */ m(a, {})
81
+ content: J ?? /* @__PURE__ */ m(i, {})
80
82
  }),
81
- F && /* @__PURE__ */ m(n, { content: /* @__PURE__ */ m(r, {}) }),
82
- w.map((e) => /* @__PURE__ */ m(_, {
83
+ ne && /* @__PURE__ */ m(ee, { content: /* @__PURE__ */ m(n, {}) }),
84
+ T.map((e) => /* @__PURE__ */ m(_, {
83
85
  name: e.key,
84
86
  data: e.data,
85
- fill: `var(--color-${o(e.key)})`,
86
- shape: k,
87
- ...te
87
+ fill: `var(--color-${a(e.key)})`,
88
+ shape: A,
89
+ ...oe
88
90
  }, e.key))
89
91
  ]
90
92
  })
package/dist/components/ui/scatter-chart/scatter-chart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scatter-chart.js","names":[],"sources":["../../../../src/components/ui/scatter-chart/scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n CartesianGrid,\n Scatter,\n ScatterChart as RechartsScatterChart,\n XAxis,\n YAxis,\n ZAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAnimation,\n resolveAxisDomain,\n resolveRotatedTickAnchor,\n resolveXAxisHeight,\n resolveXAxisTitle,\n resolveYAxisTitle,\n type ChartConfig,\n type ChartPalette,\n toCssKey,\n type CartesianChartProps,\n type ChartAnimationProps,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. Unlike the\n// other chart types, a scatter has no visual \"mode\" to model as a CVA variant —\n// its shape is fixed (x/y points, optionally sized by z) and its expressiveness\n// comes from the data mapping. So there is no `cva` axis here (matches the\n// skill's \"usually none\"); marker `shape` and bubble sizing are plain props.\n// Each series carries its own point array (points aren't columns of a shared\n// row the way bar/line/area series are), so the API takes a `series` list rather\n// than `dataKeys` over one `data` array.\nexport type ScatterMarkerShape =\n | 'circle'\n | 'cross'\n | 'diamond'\n | 'square'\n | 'star'\n | 'triangle'\n | 'wye';\n\nexport interface ScatterSeries {\n /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */\n key: string;\n /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */\n data: ReadonlyArray<Record<string, number>>;\n}\n\nexport interface ScatterChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n CartesianChartProps,\n ChartAnimationProps {\n /**\n * The dataviz palette this chart's series are painted from. Series that\n * state no `color` of their own take a stop of it. See `ChartPalette`.\n */\n palette?: ChartPalette;\n /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */\n series: ScatterSeries[];\n /**\n * Per-series map of `label` / `icon` / `tone`, keyed by `series[].key`\n * (imported from the shared `Chart` primitives). Turned into `--color-<key>`\n * custom properties. Series take their colour from the container's `palette`;\n * each entry maps a key to a `label` and an optional `tone`.\n */\n config: ChartConfig;\n /** Numeric field for the horizontal axis. */\n xKey: string;\n /** Numeric field for the vertical axis. */\n yKey: string;\n /** Unit suffix appended to X-axis tick values (recharts `unit`). */\n xUnit?: string;\n /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */\n zKey?: string;\n /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */\n zRange?: [number, number];\n /** Marker shape for every point. */\n shape?: ScatterMarkerShape;\n showLegend?: boolean;\n}\n\nconst ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(\n (\n {\n className,\n config,\n palette = { type: 'diverging', pair: 'teal-violet' },\n series,\n xKey,\n yKey,\n zKey,\n zRange = [60, 400],\n shape = 'circle',\n xAxisLabel,\n yAxisLabel,\n xUnit,\n yUnit,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n showXAxis = true,\n showYAxis = true,\n xTickFormatter,\n yTickFormatter,\n xAxisAngle,\n xAxisInterval,\n yAxisTickCount,\n yAxisDomain,\n gridDashed = true,\n gridHorizontal,\n gridVertical,\n tooltipContent,\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n ...props\n },\n ref\n ) => {\n const animation = resolveAnimation({\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n });\n // Axis titles: the X title sits below the ticks; the Y title is rotated in\n // the left gutter. Passed to recharts' native `label` (themed via the\n // `.recharts-label` fill selector on the container).\n const xAxisTitle = resolveXAxisTitle(\n xAxisLabel,\n 'insideBottom',\n -8\n );\n const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n const yDomain = resolveAxisDomain(yAxisDomain);\n\n const xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n return (\n <div ref={ref} className={cn(className)} {...props}>\n <ChartContainer\n config={config}\n palette={palette}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsScatterChart\n margin={{ top: 16, right: 16, bottom: 16, left: 16 }}\n >\n {showGrid && (\n <CartesianGrid\n horizontal={gridHorizontal ?? true}\n vertical={gridVertical ?? false}\n strokeDasharray={gridDashed ? '3 3' : undefined}\n />\n )}\n <XAxis\n type=\"number\"\n dataKey={xKey}\n name={xKey}\n unit={xUnit}\n hide={!showXAxis}\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={xTickFormatter}\n angle={xAxisAngle}\n interval={xAxisInterval}\n textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n height={xAxisHeight}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n dataKey={yKey}\n name={yKey}\n unit={yUnit}\n hide={!showYAxis}\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={yTickFormatter}\n tickCount={yAxisTickCount}\n domain={yDomain}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {zKey && (\n <ZAxis type=\"number\" dataKey={zKey} range={zRange} name={zKey} />\n )}\n {showTooltip && (\n <ChartTooltip\n cursor={{ strokeDasharray: '3 3' }}\n content={tooltipContent ?? <ChartTooltipContent />}\n />\n )}\n {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n {series.map((s) => (\n <Scatter\n key={s.key}\n name={s.key}\n data={s.data as Record<string, number>[]}\n fill={`var(--color-${toCssKey(s.key)})`}\n shape={shape}\n {...animation}\n />\n ))}\n </RechartsScatterChart>\n </ChartContainer>\n </div>\n );\n }\n);\nScatterChart.displayName = 'ScatterChart';\n\nexport { ScatterChart };\n"],"mappings":";;;;;;;;AAyFA,IAAM,IAAe,EAAM,YAEvB,EACE,cACA,WACA,aAAU;CAAE,MAAM;CAAa,MAAM;AAAc,GACnD,WACA,SACA,SACA,SACA,YAAS,CAAC,IAAI,GAAG,GACjB,WAAQ,UACR,eACA,eACA,UACA,UACA,cAAW,IACX,kBAAc,IACd,gBAAa,IACb,eAAY,IACZ,eAAY,IACZ,mBACA,mBACA,eACA,kBACA,mBACA,gBACA,gBAAa,IACb,mBACA,iBACA,mBACA,YACA,sBACA,mBACA,oBACA,GAAG,KAEL,MACG;CACH,IAAM,KAAY,EAAiB;EACjC;EACA;EACA;EACA;CACF,CAAC,GAIK,KAAa,EACjB,GACA,gBACA,EACF,GACM,KAAa,EAAkB,CAAU,GAEzC,KAAU,EAAkB,CAAW,GAEvC,KAAc,EAAmB,GAAY,CAAU;CAE7D,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,CAAS;EAAG,GAAI;EAC3C,UAAA,kBAAC,GAAD;GACU;GACC;GACT,WAAU;GAEV,UAAA,kBAAC,GAAD;IACE,QAAQ;KAAE,KAAK;KAAI,OAAO;KAAI,QAAQ;KAAI,MAAM;IAAG;IADrD,UAAA;KAGG,KACC,kBAAC,GAAD;MACE,YAAY,KAAkB;MAC9B,UAAU,KAAgB;MAC1B,iBAAiB,IAAa,QAAQ,KAAA;KACvC,CAAA;KAEH,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,OAAO;MACP,UAAU;MACV,YAAY,EAAyB,CAAU;MAC/C,QAAQ;MACR,OAAO;KACR,CAAA;KACD,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,WAAW;MACX,QAAQ;MACR,OAAO,IAAa,KAAK,KAAA;MACzB,OAAO;KACR,CAAA;KACA,KACC,kBAAC,GAAD;MAAO,MAAK;MAAS,SAAS;MAAM,OAAO;MAAQ,MAAM;KAAO,CAAA;KAEjE,MACC,kBAAC,GAAD;MACE,QAAQ,EAAE,iBAAiB,MAAM;MACjC,SAAS,KAAkB,kBAAC,GAAD,CAAsB,CAAA;KAClD,CAAA;KAEF,KAAc,kBAAC,GAAD,EAAa,SAAS,kBAAC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAC7D,EAAO,KAAK,MACX,kBAAC,GAAD;MAEE,MAAM,EAAE;MACR,MAAM,EAAE;MACR,MAAM,eAAe,EAAS,EAAE,GAAG,EAAE;MAC9B;MACP,GAAI;KACL,GANM,EAAE,GAMR,CACF;IACmB;;EACR,CAAA;CACb,CAAA;AAET,CACF;AACA,EAAa,cAAc"}
1
+ {"version":3,"file":"scatter-chart.js","names":[],"sources":["../../../../src/components/ui/scatter-chart/scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n CartesianGrid,\n Scatter,\n ScatterChart as RechartsScatterChart,\n XAxis,\n YAxis,\n ZAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAnimation,\n resolveAxisDomain,\n resolveRotatedTickAnchor,\n resolveXAxisTitle,\n resolveYAxisTitle,\n type ChartConfig,\n type ChartPalette,\n toCssKey,\n type CartesianChartProps,\n type ChartAnimationProps,\n} from '../chart';\nimport {\n mergeXAxisLayoutMargin,\n useXAxisLayout,\n} from '../chart/use-x-axis-layout';\nimport { resolveXAxisTickLabels } from '../chart/chart-format';\n\n// A typed recharts composition over the shared `Chart` primitives. Unlike the\n// other chart types, a scatter has no visual \"mode\" to model as a CVA variant —\n// its shape is fixed (x/y points, optionally sized by z) and its expressiveness\n// comes from the data mapping. So there is no `cva` axis here (matches the\n// skill's \"usually none\"); marker `shape` and bubble sizing are plain props.\n// Each series carries its own point array (points aren't columns of a shared\n// row the way bar/line/area series are), so the API takes a `series` list rather\n// than `dataKeys` over one `data` array.\nexport type ScatterMarkerShape =\n | 'circle'\n | 'cross'\n | 'diamond'\n | 'square'\n | 'star'\n | 'triangle'\n | 'wye';\n\nexport interface ScatterSeries {\n /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */\n key: string;\n /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */\n data: ReadonlyArray<Record<string, number>>;\n}\n\nexport interface ScatterChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n CartesianChartProps,\n ChartAnimationProps {\n /**\n * The dataviz palette this chart's series are painted from. Series that\n * state no `color` of their own take a stop of it. See `ChartPalette`.\n */\n palette?: ChartPalette;\n /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */\n series: ScatterSeries[];\n /**\n * Per-series map of `label` / `icon` / `tone`, keyed by `series[].key`\n * (imported from the shared `Chart` primitives). Turned into `--color-<key>`\n * custom properties. Series take their colour from the container's `palette`;\n * each entry maps a key to a `label` and an optional `tone`.\n */\n config: ChartConfig;\n /** Numeric field for the horizontal axis. */\n xKey: string;\n /** Numeric field for the vertical axis. */\n yKey: string;\n /** Unit suffix appended to X-axis tick values (recharts `unit`). */\n xUnit?: string;\n /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */\n zKey?: string;\n /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */\n zRange?: [number, number];\n /** Marker shape for every point. */\n shape?: ScatterMarkerShape;\n showLegend?: boolean;\n}\n\nconst ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(\n (\n {\n className,\n config,\n palette = { type: 'diverging', pair: 'teal-violet' },\n series,\n xKey,\n yKey,\n zKey,\n zRange = [60, 400],\n shape = 'circle',\n xAxisLabel,\n yAxisLabel,\n xUnit,\n yUnit,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n showXAxis = true,\n showYAxis = true,\n xTickFormatter,\n yTickFormatter,\n xAxisAngle,\n xAxisInterval,\n yAxisTickCount,\n yAxisDomain,\n gridDashed = true,\n gridHorizontal,\n gridVertical,\n tooltipContent,\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n ...props\n },\n ref\n ) => {\n const animation = resolveAnimation({\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n });\n // Axis titles: the X title sits below the ticks; the Y title is rotated in\n // the left gutter. Passed to recharts' native `label` (themed via the\n // `.recharts-label` fill selector on the container).\n const xAxisTitle = resolveXAxisTitle(\n xAxisLabel,\n 'insideBottom',\n -8\n );\n const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n const yDomain = resolveAxisDomain(yAxisDomain);\n\n const xAxisTickLabels = resolveXAxisTickLabels(\n series.flatMap(({ data }) => data.map((row) => row[xKey])),\n xTickFormatter\n );\n const chartContainerRef = React.useRef<HTMLDivElement>(null);\n const xAxisLayout = useXAxisLayout(\n chartContainerRef,\n xAxisAngle,\n xAxisLabel,\n xAxisTickLabels.join('\\u0000')\n );\n\n return (\n <div ref={ref} className={cn(className)} {...props}>\n <ChartContainer\n ref={chartContainerRef}\n config={config}\n palette={palette}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsScatterChart\n margin={mergeXAxisLayoutMargin(\n { top: 16, right: 16, bottom: 16, left: 16 },\n xAxisLayout.margin\n )}\n >\n {showGrid && (\n <CartesianGrid\n horizontal={gridHorizontal ?? true}\n vertical={gridVertical ?? false}\n strokeDasharray={gridDashed ? '3 3' : undefined}\n />\n )}\n <XAxis\n type=\"number\"\n dataKey={xKey}\n name={xKey}\n unit={xUnit}\n hide={!showXAxis}\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={xTickFormatter}\n angle={xAxisAngle}\n interval={xAxisInterval}\n textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n height={xAxisLayout.height}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n dataKey={yKey}\n name={yKey}\n unit={yUnit}\n hide={!showYAxis}\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={yTickFormatter}\n tickCount={yAxisTickCount}\n domain={yDomain}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {zKey && (\n <ZAxis type=\"number\" dataKey={zKey} range={zRange} name={zKey} />\n )}\n {showTooltip && (\n <ChartTooltip\n cursor={{ strokeDasharray: '3 3' }}\n content={tooltipContent ?? <ChartTooltipContent />}\n />\n )}\n {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n {series.map((s) => (\n <Scatter\n key={s.key}\n name={s.key}\n data={s.data as Record<string, number>[]}\n fill={`var(--color-${toCssKey(s.key)})`}\n shape={shape}\n {...animation}\n />\n ))}\n </RechartsScatterChart>\n </ChartContainer>\n </div>\n );\n }\n);\nScatterChart.displayName = 'ScatterChart';\n\nexport { ScatterChart };\n"],"mappings":";;;;;;;;;AA6FA,IAAM,IAAe,EAAM,YAEvB,EACE,cACA,WACA,aAAU;CAAE,MAAM;CAAa,MAAM;AAAc,GACnD,WACA,SACA,SACA,SACA,YAAS,CAAC,IAAI,GAAG,GACjB,WAAQ,UACR,eACA,eACA,UACA,UACA,cAAW,IACX,iBAAc,IACd,iBAAa,IACb,eAAY,IACZ,eAAY,IACZ,mBACA,mBACA,eACA,kBACA,mBACA,gBACA,gBAAa,IACb,mBACA,iBACA,mBACA,YACA,sBACA,mBACA,qBACA,GAAG,MAEL,OACG;CACH,IAAM,KAAY,EAAiB;EACjC;EACA;EACA;EACA;CACF,CAAC,GAIK,KAAa,EACjB,GACA,gBACA,EACF,GACM,KAAa,EAAkB,CAAU,GAEzC,KAAU,EAAkB,CAAW,GAEvC,KAAkB,EACtB,EAAO,SAAS,EAAE,cAAW,EAAK,KAAK,MAAQ,EAAI,EAAK,CAAC,GACzD,CACF,GACM,IAAoB,EAAM,OAAuB,IAAI,GACrD,IAAc,GAClB,GACA,GACA,GACA,GAAgB,KAAK,IAAQ,CAC/B;CAEA,OACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,CAAS;EAAG,GAAI;EAC3C,UAAA,kBAAC,GAAD;GACE,KAAK;GACG;GACC;GACT,WAAU;GAEV,UAAA,kBAAC,GAAD;IACE,QAAQ,EACN;KAAE,KAAK;KAAI,OAAO;KAAI,QAAQ;KAAI,MAAM;IAAG,GAC3C,EAAY,MACd;IAJF,UAAA;KAMG,KACC,kBAAC,GAAD;MACE,YAAY,KAAkB;MAC9B,UAAU,KAAgB;MAC1B,iBAAiB,IAAa,QAAQ,KAAA;KACvC,CAAA;KAEH,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,OAAO;MACP,UAAU;MACV,YAAY,EAAyB,CAAU;MAC/C,QAAQ,EAAY;MACpB,OAAO;KACR,CAAA;KACD,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,MAAM;MACN,MAAM;MACN,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe;MACf,WAAW;MACX,QAAQ;MACR,OAAO,IAAa,KAAK,KAAA;MACzB,OAAO;KACR,CAAA;KACA,KACC,kBAAC,GAAD;MAAO,MAAK;MAAS,SAAS;MAAM,OAAO;MAAQ,MAAM;KAAO,CAAA;KAEjE,KACC,kBAAC,GAAD;MACE,QAAQ,EAAE,iBAAiB,MAAM;MACjC,SAAS,KAAkB,kBAAC,GAAD,CAAsB,CAAA;KAClD,CAAA;KAEF,MAAc,kBAAC,IAAD,EAAa,SAAS,kBAAC,GAAD,CAAqB,CAAA,EAAI,CAAA;KAC7D,EAAO,KAAK,MACX,kBAAC,GAAD;MAEE,MAAM,EAAE;MACR,MAAM,EAAE;MACR,MAAM,eAAe,EAAS,EAAE,GAAG,EAAE;MAC9B;MACP,GAAI;KACL,GANM,EAAE,GAMR,CACF;IACmB;;EACR,CAAA;CACb,CAAA;AAET,CACF;AACA,EAAa,cAAc"}
package/dist/llms/area-chart.md CHANGED
@@ -124,7 +124,7 @@ across brands until the real data-viz palette lands.
124
124
  | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |
125
125
  | `xTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each X-axis tick value. Unlike the `unit` suffix (append-only), a formatter transforms the value — abbreviate, prefix a symbol, or map to a label. Use formatCompactNumber / formatPercent / createTickFormatter from the shared Chart primitives, or any function. |
126
126
  | `yTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each Y-axis tick value (see xTickFormatter). |
127
- | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right); the tick anchor + axis height adjust. |
127
+ | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right). Every rendered tick remains visible: the chart reserves only the required space below the axis and at either endpoint, keeps bottom legends clear, and does not extend the data grid into that reserved side space. |
128
128
  | `xAxisInterval` | `number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart'` | — | no | X-axis tick density — a recharts placement strategy, or a fixed number of ticks to skip between two rendered ones (recharts interval: 0 shows every tick, 1 every other one, 2 every third). |
129
129
  | `yAxisTickCount` | `number` | — | no | Desired number of ticks on the value axis (recharts tickCount; a hint, not exact). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
130
130
  | `yAxisDomain` | `'auto' | 'dataMin-dataMax' | 'zero'` | — | no | Value-axis domain preset — auto (fit the data at both ends; the axis need not include 0), zero (anchor the axis at 0, which is also recharts' behaviour when the prop is omitted), or dataMin-dataMax (tight to the data, no padding). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
@@ -311,6 +311,15 @@ Scenario: Range brush keyboard and accessible name
311
311
  And each handle exposes brushAriaLabel as its accessible name
312
312
  ```
313
313
 
314
+ ```gherkin
315
+ Scenario: Rotated category labels fit their actual geometry
316
+ Given xAxisAngle is set and the rendered X-axis labels vary in length
317
+ Then every rendered endpoint label remains fully visible
318
+ And only the bottom and endpoint side room those labels require is reserved
319
+ And a bottom legend remains separated from the labels
320
+ And the data grid does not grow into the reserved side room
321
+ ```
322
+
314
323
  ## Accessibility
315
324
 
316
325
  - recharts' `accessibilityLayer` is **on by default** (recharts v3), giving the
package/dist/llms/bar-chart.md CHANGED
@@ -194,7 +194,7 @@ across brands until the real data-viz palette lands.
194
194
  | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |
195
195
  | `xTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each X-axis tick value. Unlike the `unit` suffix (append-only), a formatter transforms the value — abbreviate, prefix a symbol, or map to a label. Use formatCompactNumber / formatPercent / createTickFormatter from the shared Chart primitives, or any function. |
196
196
  | `yTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each Y-axis tick value (see xTickFormatter). |
197
- | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right); the tick anchor + axis height adjust. |
197
+ | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right). Every rendered tick remains visible: the chart reserves only the required space below the axis and at either endpoint, keeps bottom legends clear, and does not extend the data grid into that reserved side space. |
198
198
  | `xAxisInterval` | `number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart'` | — | no | X-axis tick density — a recharts placement strategy, or a fixed number of ticks to skip between two rendered ones (recharts interval: 0 shows every tick, 1 every other one, 2 every third). |
199
199
  | `yAxisTickCount` | `number` | — | no | Desired number of ticks on the value (Y) axis (recharts tickCount; a hint, not exact). |
200
200
  | `yAxisDomain` | `'auto' | 'dataMin-dataMax' | 'zero'` | — | no | Value-axis domain preset — auto (fit the data at both ends; the axis need not include 0), zero (anchor the axis at 0, which is also recharts' behaviour when the prop is omitted), or dataMin-dataMax (tight to the data, no padding). Applies to the value (Y) axis. |
@@ -431,6 +431,15 @@ Scenario: Active bar on hover
431
431
  And a bar that carries a barSettings track keeps that track while it is hovered
432
432
  ```
433
433
 
434
+ ```gherkin
435
+ Scenario: Rotated category labels fit their actual geometry
436
+ Given xAxisAngle is set and the rendered X-axis labels vary in length
437
+ Then every rendered endpoint label remains fully visible
438
+ And only the bottom and endpoint side room those labels require is reserved
439
+ And a bottom legend remains separated from the labels
440
+ And the data grid does not grow into the reserved side room
441
+ ```
442
+
434
443
  ## Accessibility
435
444
 
436
445
  Everything below the "Horizontal" heading applies to
package/dist/llms/composed-chart.md CHANGED
@@ -227,7 +227,7 @@ across brands until the real data-viz palette lands.
227
227
  | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |
228
228
  | `xTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each X-axis tick value. Unlike the `unit` suffix (append-only), a formatter transforms the value — abbreviate, prefix a symbol, or map to a label. Use formatCompactNumber / formatPercent / createTickFormatter from the shared Chart primitives, or any function. |
229
229
  | `yTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each Y-axis tick value (see xTickFormatter). |
230
- | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right); the tick anchor + axis height adjust. |
230
+ | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right). Every rendered tick remains visible: the chart reserves only the required space below the axis and at either endpoint, keeps bottom legends clear, and does not extend the data grid into that reserved side space. |
231
231
  | `xAxisInterval` | `number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart'` | — | no | X-axis tick density — a recharts placement strategy, or a fixed number of ticks to skip between two rendered ones (recharts interval: 0 shows every tick, 1 every other one, 2 every third). |
232
232
  | `yAxisTickCount` | `number` | — | no | Desired number of ticks on the value axis (recharts tickCount; a hint, not exact). Applies to whichever axis holds the values — Y by default, X with orientation="horizontal". |
233
233
  | `yAxisDomain` | `'auto' | 'dataMin-dataMax' | 'zero'` | — | no | Value-axis domain preset — auto (fit the data at both ends; the axis need not include 0), zero (anchor the axis at 0, which is also recharts' behaviour when the prop is omitted), or dataMin-dataMax (tight to the data, no padding). Applies to whichever axis holds the values — Y by default, X with orientation="horizontal". |
@@ -456,6 +456,15 @@ Scenario: Range brush keyboard and accessible name
456
456
  And each handle exposes brushAriaLabel as its accessible name
457
457
  ```
458
458
 
459
+ ```gherkin
460
+ Scenario: Rotated category labels fit their actual geometry
461
+ Given xAxisAngle is set and the rendered X-axis labels vary in length
462
+ Then every rendered endpoint label remains fully visible
463
+ And only the bottom and endpoint side room those labels require is reserved
464
+ And a bottom legend remains separated from the labels
465
+ And the data grid does not grow into the reserved side room
466
+ ```
467
+
459
468
  ## Accessibility
460
469
 
461
470
  - recharts' `accessibilityLayer` is **on by default** (recharts v3), giving the
package/dist/llms/confidence-cone.md CHANGED
@@ -130,7 +130,7 @@ Make the actual and forecast lines meet by giving the hand-off point both an
130
130
  | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |
131
131
  | `xTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each X-axis tick value. Unlike the `unit` suffix (append-only), a formatter transforms the value — abbreviate, prefix a symbol, or map to a label. Use formatCompactNumber / formatPercent / createTickFormatter from the shared Chart primitives, or any function. |
132
132
  | `yTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each Y-axis tick value (see xTickFormatter). |
133
- | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right); the tick anchor + axis height adjust. |
133
+ | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right). Every rendered tick remains visible: the chart reserves only the required space below the axis and at either endpoint, keeps bottom legends clear, and does not extend the data grid into that reserved side space. |
134
134
  | `xAxisInterval` | `number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart'` | — | no | X-axis tick density — a recharts placement strategy, or a fixed number of ticks to skip between two rendered ones (recharts interval: 0 shows every tick, 1 every other one, 2 every third). |
135
135
  | `yAxisTickCount` | `number` | — | no | Desired number of ticks on the value axis (recharts tickCount; a hint, not exact). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
136
136
  | `yAxisDomain` | `'auto' | 'dataMin-dataMax' | 'zero'` | — | no | Value-axis domain preset — auto (fit the data at both ends; the axis need not include 0), zero (anchor the axis at 0, which is also recharts' behaviour when the prop is omitted), or dataMin-dataMax (tight to the data, no padding). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
@@ -255,6 +255,15 @@ Scenario: Reduced motion
255
255
  And the same applies when rendering on the server
256
256
  ```
257
257
 
258
+ ```gherkin
259
+ Scenario: Rotated category labels fit their actual geometry
260
+ Given xAxisAngle is set and the rendered X-axis labels vary in length
261
+ Then every rendered endpoint label remains fully visible
262
+ And only the bottom and endpoint side room those labels require is reserved
263
+ And a bottom legend remains separated from the labels
264
+ And the data grid does not grow into the reserved side room
265
+ ```
266
+
258
267
  ## Accessibility
259
268
 
260
269
  - recharts' `accessibilityLayer` is **on by default** (recharts v3), giving the
package/dist/llms/histogram.md CHANGED
@@ -89,7 +89,7 @@ it is not color-stable across brands until the real data-viz palette lands.
89
89
  | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |
90
90
  | `xTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each X-axis tick value. Unlike the `unit` suffix (append-only), a formatter transforms the value — abbreviate, prefix a symbol, or map to a label. Use formatCompactNumber / formatPercent / createTickFormatter from the shared Chart primitives, or any function. |
91
91
  | `yTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each Y-axis tick value (see xTickFormatter). |
92
- | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right); the tick anchor + axis height adjust. |
92
+ | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right). Every rendered tick remains visible: the chart reserves only the required space below the axis and at either endpoint, keeps bottom legends clear, and does not extend the data grid into that reserved side space. |
93
93
  | `xAxisInterval` | `number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart'` | — | no | X-axis tick density — a recharts placement strategy, or a fixed number of ticks to skip between two rendered ones (recharts interval: 0 shows every tick, 1 every other one, 2 every third). |
94
94
  | `yAxisTickCount` | `number` | — | no | Desired number of ticks on the value axis (recharts tickCount; a hint, not exact). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
95
95
  | `yAxisDomain` | `'auto' | 'dataMin-dataMax' | 'zero'` | — | no | Value-axis domain preset — auto (fit the data at both ends; the axis need not include 0), zero (anchor the axis at 0, which is also recharts' behaviour when the prop is omitted), or dataMin-dataMax (tight to the data, no padding). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
@@ -168,6 +168,15 @@ Scenario: Reduced motion
168
168
  And the same applies when rendering on the server
169
169
  ```
170
170
 
171
+ ```gherkin
172
+ Scenario: Rotated category labels fit their actual geometry
173
+ Given xAxisAngle is set and the rendered X-axis labels vary in length
174
+ Then every rendered endpoint label remains fully visible
175
+ And only the bottom and endpoint side room those labels require is reserved
176
+ And a bottom legend remains separated from the labels
177
+ And the data grid does not grow into the reserved side room
178
+ ```
179
+
171
180
  ## Accessibility
172
181
 
173
182
  - recharts' `accessibilityLayer` is **on by default** (recharts v3), giving the
package/dist/llms/line-chart.md CHANGED
@@ -123,7 +123,7 @@ across brands until the real data-viz palette lands.
123
123
  | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |
124
124
  | `xTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each X-axis tick value. Unlike the `unit` suffix (append-only), a formatter transforms the value — abbreviate, prefix a symbol, or map to a label. Use formatCompactNumber / formatPercent / createTickFormatter from the shared Chart primitives, or any function. |
125
125
  | `yTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each Y-axis tick value (see xTickFormatter). |
126
- | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right); the tick anchor + axis height adjust. |
126
+ | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right). Every rendered tick remains visible: the chart reserves only the required space below the axis and at either endpoint, keeps bottom legends clear, and does not extend the data grid into that reserved side space. |
127
127
  | `xAxisInterval` | `number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart'` | — | no | X-axis tick density — a recharts placement strategy, or a fixed number of ticks to skip between two rendered ones (recharts interval: 0 shows every tick, 1 every other one, 2 every third). |
128
128
  | `yAxisTickCount` | `number` | — | no | Desired number of ticks on the value axis (recharts tickCount; a hint, not exact). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
129
129
  | `yAxisDomain` | `'auto' | 'dataMin-dataMax' | 'zero'` | — | no | Value-axis domain preset — auto (fit the data at both ends; the axis need not include 0), zero (anchor the axis at 0, which is also recharts' behaviour when the prop is omitted), or dataMin-dataMax (tight to the data, no padding). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
@@ -328,6 +328,15 @@ Scenario: Range brush keyboard and accessible name
328
328
  And each handle exposes brushAriaLabel as its accessible name
329
329
  ```
330
330
 
331
+ ```gherkin
332
+ Scenario: Rotated category labels fit their actual geometry
333
+ Given xAxisAngle is set and the rendered X-axis labels vary in length
334
+ Then every rendered endpoint label remains fully visible
335
+ And only the bottom and endpoint side room those labels require is reserved
336
+ And a bottom legend remains separated from the labels
337
+ And the data grid does not grow into the reserved side room
338
+ ```
339
+
331
340
  ## Accessibility
332
341
 
333
342
  - recharts' `accessibilityLayer` is **on by default** (recharts v3), giving the
package/dist/llms/scatter-chart.md CHANGED
@@ -124,7 +124,7 @@ across brands until the real data-viz palette lands.
124
124
  | `showYAxis` | `boolean` | `true` | no | Render the Y axis (its ticks and title). Set false to hide it. |
125
125
  | `xTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each X-axis tick value. Unlike the `unit` suffix (append-only), a formatter transforms the value — abbreviate, prefix a symbol, or map to a label. Use formatCompactNumber / formatPercent / createTickFormatter from the shared Chart primitives, or any function. |
126
126
  | `yTickFormatter` | `(value: number | string, index?: number) => string` | — | no | Format each Y-axis tick value (see xTickFormatter). |
127
- | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right); the tick anchor + axis height adjust. |
127
+ | `xAxisAngle` | `number` | — | no | Rotate the X-axis tick labels by this many degrees (a negative angle tilts them up toward the right). Every rendered tick remains visible: the chart reserves only the required space below the axis and at either endpoint, keeps bottom legends clear, and does not extend the data grid into that reserved side space. |
128
128
  | `xAxisInterval` | `number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart'` | — | no | X-axis tick density — a recharts placement strategy, or a fixed number of ticks to skip between two rendered ones (recharts interval: 0 shows every tick, 1 every other one, 2 every third). |
129
129
  | `yAxisTickCount` | `number` | — | no | Desired number of ticks on the value axis (recharts tickCount; a hint, not exact). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
130
130
  | `yAxisDomain` | `'auto' | 'dataMin-dataMax' | 'zero'` | — | no | Value-axis domain preset — auto (fit the data at both ends; the axis need not include 0), zero (anchor the axis at 0, which is also recharts' behaviour when the prop is omitted), or dataMin-dataMax (tight to the data, no padding). Applies to whichever axis holds the values — Y for most charts, X for BarChart with orientation="horizontal". |
@@ -210,6 +210,15 @@ Scenario: Reduced motion
210
210
  And the same applies when rendering on the server
211
211
  ```
212
212
 
213
+ ```gherkin
214
+ Scenario: Rotated category labels fit their actual geometry
215
+ Given xAxisAngle is set and the rendered X-axis labels vary in length
216
+ Then every rendered endpoint label remains fully visible
217
+ And only the bottom and endpoint side room those labels require is reserved
218
+ And a bottom legend remains separated from the labels
219
+ And the data grid does not grow into the reserved side room
220
+ ```
221
+
213
222
  ## Accessibility
214
223
 
215
224
  - recharts' `accessibilityLayer` is **on by default** (recharts v3), giving the
package/dist/llms.txt CHANGED
@@ -1,6 +1,6 @@
1
1
  # Acronis UI Kit for React — LLM Reference
2
2
 
3
- > `@acronis-platform/ui-react` v5.4.1
3
+ > `@acronis-platform/ui-react` v5.4.2
4
4
 
5
5
  Machine-readable component reference compiled from framework-agnostic specs.
6
6
  Each entry links to a self-contained markdown file with props, behavior,
package/dist/src/components/ui/chart/chart-format.d.ts CHANGED
@@ -2,6 +2,12 @@ import { AxisDomainItem } from 'recharts';
2
2
  import { ChartTooltipContentType } from './chart';
3
3
  /** A recharts-compatible tick formatter: `(value, index) => label`. */
4
4
  export type TickFormatter = (value: number | string, index?: number) => string;
5
+ /**
6
+ * Format the source values a chart may render on its X axis. The concrete ticks
7
+ * remain recharts' responsibility; the displayed values become a stable layout
8
+ * key so a rotated category row is remeasured when they change.
9
+ */
10
+ export declare function resolveXAxisTickLabels(values: readonly unknown[], formatter?: TickFormatter): Array<string | number>;
5
11
  /**
6
12
  * Props shared by every cartesian chart (Bar, Line, Area, Composed, Scatter,
7
13
  * ConfidenceCone, Histogram) — chrome toggles, axis titles/units, tick
@@ -100,10 +106,10 @@ export declare function resolveRotatedTickAnchor(angle: number | undefined): 'st
100
106
  * Height to reserve for the X tick row, or `undefined` to keep recharts' own
101
107
  * default. Shared by all 7 cartesian charts.
102
108
  *
103
- * recharts' default 30 covers one upright tick row and nothing else, so a
104
- * rotated row (+20) and an axis title (+18) each need their own allowance. The
105
- * two are additive rather than exclusive — a chart can rotate its ticks *and*
106
- * title the axis, which a label-or-angle ternary under-allocates.
109
+ * recharts' default 30 covers one upright tick row and nothing else. The
110
+ * browser refines the rotated-label fallback after layout through
111
+ * `useXAxisLayout`, using the labels' actual SVG bounds rather than an
112
+ * estimate based on character count.
107
113
  *
108
114
  * The +20 keys off the angle being *present*, not non-zero, so `angle={0}`
109
115
  * reserves the rotated row's height as well — the same edge case
package/dist/src/components/ui/chart/chart.d.ts CHANGED
@@ -108,7 +108,7 @@ export interface ChartContainerProps extends React.ComponentProps<'div'> {
108
108
  palette?: ChartPalette;
109
109
  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
110
110
  }
111
- declare function ChartContainer({ id, className, children, config, palette, ...props }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
111
+ declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
112
112
  declare const ChartStyle: ({ id, config, }: {
113
113
  id: string;
114
114
  config: ResolvedChartConfig;
package/dist/src/components/ui/chart/use-x-axis-layout.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import * as React from 'react';
2
+ export type XAxisLayout = {
3
+ height: number | undefined;
4
+ margin: {
5
+ left?: number;
6
+ right?: number;
7
+ } | undefined;
8
+ };
9
+ type ChartMargin = {
10
+ top?: number;
11
+ right?: number;
12
+ bottom?: number;
13
+ left?: number;
14
+ };
15
+ /**
16
+ * Add the measured endpoint clearance without turning recharts' per-side
17
+ * defaults into zeroes. Recharts applies its 5px defaults only when the whole
18
+ * margin prop is absent, so a partial left/right margin must be completed here.
19
+ */
20
+ export declare function mergeXAxisLayoutMargin(baseMargin: ChartMargin | undefined, xAxisMargin: XAxisLayout['margin']): ChartMargin | undefined;
21
+ /**
22
+ * Fits a rotated X-axis tick row to the geometry that recharts actually
23
+ * rendered. Estimating from character count leaves conspicuous empty space for
24
+ * narrow glyphs and short endpoint labels; measuring the SVG lets the axis use
25
+ * precisely the room its labels need.
26
+ */
27
+ export declare function useXAxisLayout(containerRef: React.RefObject<HTMLElement | null>, angle: number | undefined, label: string | undefined, layoutKey: string): XAxisLayout;
28
+ export {};