@prioticket/design-system-charts 1.8.1-beta.4 → 1.9.0-beta.1
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.
- package/README.md +26 -2
- package/dist/r/chart.json +2 -2
- package/dist/r/index.json +2 -2
- package/dist/r/registry.json +2 -2
- package/dist/shadcn.css +70 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -63,6 +63,7 @@ const config = {
|
|
|
63
63
|
} satisfies ChartConfig;
|
|
64
64
|
|
|
65
65
|
export function TicketsPerDay({ data }: { data: Array<{ day: string; online: number; boxOffice: number }> }) {
|
|
66
|
+
const barRadius = useChartBarRadius(); // see "Bar corner radius" below - not a CSS value
|
|
66
67
|
return (
|
|
67
68
|
<ChartContainer config={config} className="h-64 w-full">
|
|
68
69
|
<BarChart data={data}>
|
|
@@ -70,14 +71,16 @@ export function TicketsPerDay({ data }: { data: Array<{ day: string; online: num
|
|
|
70
71
|
<XAxis dataKey="day" tickLine={false} axisLine={false} />
|
|
71
72
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
72
73
|
<ChartLegend content={<ChartLegendContent />} />
|
|
73
|
-
<Bar dataKey="online" fill="var(--color-online)" radius={
|
|
74
|
-
<Bar dataKey="boxOffice" fill="var(--color-boxOffice)" radius={
|
|
74
|
+
<Bar dataKey="online" fill="var(--color-online)" radius={barRadius} />
|
|
75
|
+
<Bar dataKey="boxOffice" fill="var(--color-boxOffice)" radius={barRadius} />
|
|
75
76
|
</BarChart>
|
|
76
77
|
</ChartContainer>
|
|
77
78
|
);
|
|
78
79
|
}
|
|
79
80
|
```
|
|
80
81
|
|
|
82
|
+
`radius` above comes from the small-radius token, read live rather than hardcoded - see [Bar corner radius](#bar-corner-radius).
|
|
83
|
+
|
|
81
84
|
Rules that keep charts readable for everyone:
|
|
82
85
|
|
|
83
86
|
- Six series slots, `var(--chart-1)` to `var(--chart-6)`, assigned in order and never cycled. A seventh category folds into "Other".
|
|
@@ -126,6 +129,27 @@ The tick rule exists because shadcn's wrapper styles ticks through `.recharts-ca
|
|
|
126
129
|
|
|
127
130
|
The surface, ink, border and radius overrides are scoped to the chart container so the rest of your shadcn UI keeps its own theme. The palette is global so legends and KPI tiles outside a chart can use it too. The design system ships one light theme; the palette therefore also wins over an app's `.dark` block.
|
|
128
131
|
|
|
132
|
+
## Bar corner radius
|
|
133
|
+
|
|
134
|
+
`--radius` above only reaches CSS-driven corners - the tooltip card, for example. A Recharts `<Bar>`'s own corner radius is a **component prop**, not a CSS value, so the bridge cannot set it: nothing server-side or stylesheet-side can reach into Recharts' SVG path generation. This is a real gap between what the bridge covers and what full Figma alignment needs, not an oversight - there is no CSS property that controls it, and this package intentionally does not ship a chart-component wrapper or a `getChartRadius()`-style helper just to paper over one Recharts prop.
|
|
135
|
+
|
|
136
|
+
Read the current design-system radius token yourself and pass it to every `<Bar radius={...}>` in your chart:
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
function useChartBarRadius(): number {
|
|
140
|
+
const [radius, setRadius] = useState(5);
|
|
141
|
+
useEffect(() => {
|
|
142
|
+
const px = getComputedStyle(document.documentElement)
|
|
143
|
+
.getPropertyValue('--md-sys-shape-corner-small');
|
|
144
|
+
const parsed = parseFloat(px);
|
|
145
|
+
if (!Number.isNaN(parsed)) setRadius(parsed);
|
|
146
|
+
}, []);
|
|
147
|
+
return radius;
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Read the value at render time rather than hardcoding a number: the small-radius token can change, and a hardcoded literal silently drifts out of sync with it exactly the way `radius={4}` in earlier versions of this README did (the token is `5`, not `4` - fixed here, but nothing enforces that a copy-pasted literal stays correct). This is a consuming-app responsibility, not something `@prioticket/design-system-charts` can own for you.
|
|
152
|
+
|
|
129
153
|
## Working with Claude
|
|
130
154
|
|
|
131
155
|
Add the shadcn MCP server to the project so Claude can browse and install from the Prioticket registry:
|
package/dist/r/chart.json
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
"title": "Prioticket chart",
|
|
6
6
|
"description": "shadcn's Recharts chart wrapper, themed by the Prioticket design tokens and re-themed live by applyTheme(). Colour series with var(--chart-1) to var(--chart-6).",
|
|
7
7
|
"dependencies": [
|
|
8
|
-
"@prioticket/design-system-charts@^1.
|
|
9
|
-
"@prioticket/design-system-web@^1.
|
|
8
|
+
"@prioticket/design-system-charts@^1.9.0-beta.1",
|
|
9
|
+
"@prioticket/design-system-web@^1.9.0-beta.1"
|
|
10
10
|
],
|
|
11
11
|
"registryDependencies": [
|
|
12
12
|
"chart"
|
package/dist/r/index.json
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"title": "Prioticket chart",
|
|
10
10
|
"description": "shadcn's Recharts chart wrapper, themed by the Prioticket design tokens and re-themed live by applyTheme(). Colour series with var(--chart-1) to var(--chart-6).",
|
|
11
11
|
"dependencies": [
|
|
12
|
-
"@prioticket/design-system-charts@^1.
|
|
13
|
-
"@prioticket/design-system-web@^1.
|
|
12
|
+
"@prioticket/design-system-charts@^1.9.0-beta.1",
|
|
13
|
+
"@prioticket/design-system-web@^1.9.0-beta.1"
|
|
14
14
|
],
|
|
15
15
|
"registryDependencies": [
|
|
16
16
|
"chart"
|
package/dist/r/registry.json
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"title": "Prioticket chart",
|
|
10
10
|
"description": "shadcn's Recharts chart wrapper, themed by the Prioticket design tokens and re-themed live by applyTheme(). Colour series with var(--chart-1) to var(--chart-6).",
|
|
11
11
|
"dependencies": [
|
|
12
|
-
"@prioticket/design-system-charts@^1.
|
|
13
|
-
"@prioticket/design-system-web@^1.
|
|
12
|
+
"@prioticket/design-system-charts@^1.9.0-beta.1",
|
|
13
|
+
"@prioticket/design-system-web@^1.9.0-beta.1"
|
|
14
14
|
],
|
|
15
15
|
"registryDependencies": [
|
|
16
16
|
"chart"
|
package/dist/shadcn.css
CHANGED
|
@@ -31,6 +31,15 @@ html:root {
|
|
|
31
31
|
--chart-4: var(--pd-chart-4);
|
|
32
32
|
--chart-5: var(--pd-chart-5);
|
|
33
33
|
--chart-6: var(--pd-chart-6);
|
|
34
|
+
/* Primary-family shades - default for a single-data-family chart (fills: donut/bar/area).
|
|
35
|
+
* Three steps; see chart-tokens.css for the fill-safe vs. line-safe split - -3 (400) is
|
|
36
|
+
* fill-only, never use it for a thin line or small marker. */
|
|
37
|
+
--chart-primary-1: var(--pd-chart-primary-1);
|
|
38
|
+
--chart-primary-2: var(--pd-chart-primary-2);
|
|
39
|
+
--chart-primary-3: var(--pd-chart-primary-3);
|
|
40
|
+
/* Neutral structural reference (e.g. a dashed benchmark/target line) - never a default
|
|
41
|
+
* data-series colour. */
|
|
42
|
+
--chart-reference: var(--pd-chart-reference);
|
|
34
43
|
}
|
|
35
44
|
|
|
36
45
|
[data-slot="chart"] {
|
|
@@ -52,13 +61,70 @@ html:root {
|
|
|
52
61
|
}
|
|
53
62
|
|
|
54
63
|
/*
|
|
55
|
-
* Axis tick labels. shadcn's wrapper paints them through
|
|
56
|
-
* class Recharts 3.8 no longer renders (ticks are
|
|
57
|
-
* `.recharts-cartesian-axis-tick-label`), so
|
|
58
|
-
*
|
|
64
|
+
* Axis tick labels -> Body Small. shadcn's wrapper paints them through
|
|
65
|
+
* `.recharts-cartesian-axis-tick text`, a class Recharts 3.8 no longer renders (ticks are
|
|
66
|
+
* `.recharts-cartesian-axis-tick-value` inside `.recharts-cartesian-axis-tick-label`), so
|
|
67
|
+
* without this rule ticks stay Recharts grey (#666) at Recharts' own hardcoded 12px default.
|
|
68
|
+
* Colour was already bridged; font-size/weight/tracking were not - Recharts hardcodes its own
|
|
69
|
+
* default regardless of the DS typescale. Font-family already inherits from the
|
|
70
|
+
* [data-slot="chart"] rule above.
|
|
59
71
|
*/
|
|
60
72
|
[data-slot="chart"] .recharts-cartesian-axis-tick-value,
|
|
61
73
|
[data-slot="chart"] .recharts-polar-angle-axis-tick-value,
|
|
62
74
|
[data-slot="chart"] .recharts-polar-radius-axis-tick-value {
|
|
63
75
|
fill: var(--md-sys-color-on-surface-variant);
|
|
76
|
+
font-size: var(--md-sys-typescale-body-small-size);
|
|
77
|
+
font-weight: var(--md-sys-typescale-body-small-weight);
|
|
78
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/*
|
|
82
|
+
* Typography for shadcn's chart legend and tooltip (ChartLegendContent / ChartTooltipContent).
|
|
83
|
+
* These have no dedicated data-slot hook in the currently-installed shadcn chart.tsx (only the
|
|
84
|
+
* outer chart container does), so - unlike everything else in this file - these four rules
|
|
85
|
+
* target shadcn's own Tailwind utility classes directly. They win on specificity over the
|
|
86
|
+
* single-class Tailwind utilities they override (two- and three-class selectors here vs.
|
|
87
|
+
* Tailwind's one-class utilities), so source order doesn't matter, but they are the one part of
|
|
88
|
+
* this file that can silently stop matching if a future shadcn chart.tsx changes these classes -
|
|
89
|
+
* re-verify against the installed component on a shadcn upgrade.
|
|
90
|
+
*/
|
|
91
|
+
|
|
92
|
+
/* Legend labels -> Body Small. Matches ChartLegendContent's per-item row
|
|
93
|
+
("flex items-center gap-1.5 [&>svg]:h-3 ..."). */
|
|
94
|
+
[data-slot="chart"] .flex.items-center.gap-1\.5 {
|
|
95
|
+
font-size: var(--md-sys-typescale-body-small-size);
|
|
96
|
+
font-weight: var(--md-sys-typescale-body-small-weight);
|
|
97
|
+
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
98
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Tooltip header (the payload label, e.g. a category name) -> Label Medium. Matches
|
|
102
|
+
ChartTooltipContent's tooltipLabel ("font-medium") - excluded from the value span below,
|
|
103
|
+
which also carries font-medium alongside font-mono/tabular-nums. */
|
|
104
|
+
[data-slot="chart"] .font-medium:not(.font-mono) {
|
|
105
|
+
font-family: var(--md-sys-typescale-label-medium-font), sans-serif;
|
|
106
|
+
font-size: var(--md-sys-typescale-label-medium-size);
|
|
107
|
+
font-weight: var(--md-sys-typescale-label-medium-weight);
|
|
108
|
+
line-height: var(--md-sys-typescale-label-medium-line-height);
|
|
109
|
+
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Tooltip series label (the per-row item name) -> Body Small. Matches ChartTooltipContent's
|
|
113
|
+
"text-muted-foreground" span. */
|
|
114
|
+
[data-slot="chart"] .text-muted-foreground {
|
|
115
|
+
font-size: var(--md-sys-typescale-body-small-size);
|
|
116
|
+
font-weight: var(--md-sys-typescale-body-small-weight);
|
|
117
|
+
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
118
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Tooltip numeric values -> Body Small (weight-prominent), Proxima Nova - not shadcn's default
|
|
122
|
+
monospace/tabular-nums. Matches ChartTooltipContent's value span, class
|
|
123
|
+
"font-mono font-medium text-foreground tabular-nums". */
|
|
124
|
+
[data-slot="chart"] .font-mono.tabular-nums {
|
|
125
|
+
font-family: var(--md-sys-typescale-body-small-font), sans-serif;
|
|
126
|
+
font-size: var(--md-sys-typescale-body-small-size);
|
|
127
|
+
font-weight: var(--md-sys-typescale-body-small-weight-prominent);
|
|
128
|
+
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
129
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
64
130
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prioticket/design-system-charts",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.9.0-beta.1",
|
|
4
4
|
"description": "shadcn/ui chart registry item plus the CSS bridge that themes shadcn charts with the Prioticket design tokens",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"build": "node ../../scripts/build-charts-registry.mjs"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"@prioticket/design-system-web": "^1.
|
|
25
|
+
"@prioticket/design-system-web": "^1.9.0-beta.1"
|
|
26
26
|
},
|
|
27
27
|
"keywords": [
|
|
28
28
|
"prioticket",
|