@adea-ai/ui 0.99.0 → 0.99.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.
- package/dist/components/composites/appearance-editor/appearance-choices.d.ts.map +1 -1
- package/dist/components/composites/appearance-editor/appearance-choices.js +32 -28
- package/dist/components/composites/appearance-editor/appearance-choices.js.map +1 -1
- package/dist/components/composites/appearance-editor/appearance-rows.d.ts.map +1 -1
- package/dist/components/composites/appearance-editor/appearance-rows.js +1 -1
- package/dist/components/composites/appearance-editor/appearance-rows.js.map +1 -1
- package/dist/components/layout/orbit-layout/orbit-layout.d.ts +5 -1
- package/dist/components/layout/orbit-layout/orbit-layout.d.ts.map +1 -1
- package/dist/components/layout/orbit-layout/orbit-layout.js.map +1 -1
- package/dist/components/layout/side-rail/side-rail.d.ts +4 -1
- package/dist/components/layout/side-rail/side-rail.d.ts.map +1 -1
- package/dist/components/layout/side-rail/side-rail.js +58 -64
- package/dist/components/layout/side-rail/side-rail.js.map +1 -1
- package/dist/components/layout/sidebar-nav/sidebar-nav.js +2 -2
- package/dist/components/layout/sidebar-nav/sidebar-nav.js.map +1 -1
- package/dist/components/motion/presence.d.ts +17 -7
- package/dist/components/motion/presence.d.ts.map +1 -1
- package/dist/components/motion/presence.js.map +1 -1
- package/dist/components/theme/theme-picker.d.ts.map +1 -1
- package/dist/components/theme/theme-picker.js +1 -1
- package/dist/components/theme/theme-picker.js.map +1 -1
- package/dist/components/theme/theme-provider.d.ts.map +1 -1
- package/dist/components/theme/theme-provider.js +15 -4
- package/dist/components/theme/theme-provider.js.map +1 -1
- package/dist/components/ui/aspect-ratio/aspect-ratio.d.ts +2 -2
- package/dist/components/ui/aspect-ratio/aspect-ratio.d.ts.map +1 -1
- package/dist/components/ui/aspect-ratio/aspect-ratio.js +15 -1
- package/dist/components/ui/aspect-ratio/aspect-ratio.js.map +1 -1
- package/dist/components/ui/badge/badge.d.ts +1 -1
- package/dist/components/ui/button/button.d.ts +1 -1
- package/dist/components/ui/calendar/calendar.d.ts.map +1 -1
- package/dist/components/ui/calendar/calendar.js +1 -1
- package/dist/components/ui/calendar/calendar.js.map +1 -1
- package/dist/components/ui/card/card.d.ts +2 -2
- package/dist/components/ui/card/card.js +2 -2
- package/dist/components/ui/card/card.js.map +1 -1
- package/dist/components/ui/chart/chart-options.d.ts +50 -0
- package/dist/components/ui/chart/chart-options.d.ts.map +1 -0
- package/dist/components/ui/chart/chart-options.js +178 -0
- package/dist/components/ui/chart/chart-options.js.map +1 -0
- package/dist/components/ui/chart/chart.d.ts +21 -18
- package/dist/components/ui/chart/chart.d.ts.map +1 -1
- package/dist/components/ui/chart/chart.js +175 -155
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/chart/index.js +2 -1
- package/dist/components/ui/dropdown-menu/dropdown-menu.d.ts.map +1 -1
- package/dist/components/ui/dropdown-menu/dropdown-menu.js +4 -2
- package/dist/components/ui/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/ui/input-otp/input-otp.d.ts.map +1 -1
- package/dist/components/ui/input-otp/input-otp.js +2 -2
- package/dist/components/ui/input-otp/input-otp.js.map +1 -1
- package/dist/components/ui/pagination/pagination.d.ts.map +1 -1
- package/dist/components/ui/pagination/pagination.js +1 -1
- package/dist/components/ui/pagination/pagination.js.map +1 -1
- package/dist/components/ui/resizable/resizable.d.ts +0 -12
- package/dist/components/ui/resizable/resizable.d.ts.map +1 -1
- package/dist/components/ui/resizable/resizable.js +43 -9
- package/dist/components/ui/resizable/resizable.js.map +1 -1
- package/dist/lib/cn-tables.generated.js +10 -10
- package/dist/lib/cn-tables.generated.js.map +1 -1
- package/dist/r/chart.json +5 -0
- package/dist/r/registry.json +5 -0
- package/dist/r/src/components/composites/appearance-editor/appearance-choices.tsx +35 -20
- package/dist/r/src/components/composites/appearance-editor/appearance-rows.tsx +6 -2
- package/dist/r/src/components/layout/orbit-layout/orbit-layout.tsx +5 -1
- package/dist/r/src/components/layout/side-rail/side-rail.tsx +29 -16
- package/dist/r/src/components/layout/sidebar-nav/sidebar-nav.tsx +2 -2
- package/dist/r/src/components/motion/presence.tsx +17 -7
- package/dist/r/src/components/theme/theme-picker.tsx +5 -1
- package/dist/r/src/components/theme/theme-provider.tsx +19 -9
- package/dist/r/src/components/ui/aspect-ratio/aspect-ratio.tsx +14 -3
- package/dist/r/src/components/ui/calendar/calendar.tsx +6 -1
- package/dist/r/src/components/ui/card/card.tsx +2 -2
- package/dist/r/src/components/ui/chart/chart-options.ts +196 -0
- package/dist/r/src/components/ui/chart/chart.tsx +149 -101
- package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx +10 -2
- package/dist/r/src/components/ui/input-otp/input-otp.tsx +14 -2
- package/dist/r/src/components/ui/pagination/pagination.tsx +8 -1
- package/dist/r/src/components/ui/resizable/resizable.tsx +46 -8
- package/dist/r/src/lib/cn-tables.generated.ts +10 -10
- package/dist/r/src/styles/base.css +4 -1
- package/dist/r/src/styles/theme.css +23 -43
- package/package.json +1 -1
- package/registry.json +5 -0
- package/src/components/composites/appearance-editor/appearance-choices.tsx +35 -20
- package/src/components/composites/appearance-editor/appearance-rows.tsx +6 -2
- package/src/components/layout/orbit-layout/orbit-layout.tsx +5 -1
- package/src/components/layout/side-rail/side-rail.tsx +29 -16
- package/src/components/layout/sidebar-nav/sidebar-nav.tsx +2 -2
- package/src/components/motion/presence.tsx +17 -7
- package/src/components/theme/theme-picker.tsx +5 -1
- package/src/components/theme/theme-provider.tsx +19 -9
- package/src/components/ui/aspect-ratio/aspect-ratio.tsx +14 -3
- package/src/components/ui/calendar/calendar.tsx +6 -1
- package/src/components/ui/card/card.tsx +2 -2
- package/src/components/ui/chart/chart-options.ts +196 -0
- package/src/components/ui/chart/chart.tsx +149 -101
- package/src/components/ui/dropdown-menu/dropdown-menu.tsx +10 -2
- package/src/components/ui/input-otp/input-otp.tsx +14 -2
- package/src/components/ui/pagination/pagination.tsx +8 -1
- package/src/components/ui/resizable/resizable.tsx +46 -8
- package/src/lib/cn-tables.generated.ts +10 -10
- package/src/styles/base.css +4 -1
- package/src/styles/theme.css +23 -43
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
//#region src/components/ui/chart/chart-options.ts
|
|
2
|
+
/**
|
|
3
|
+
* The chart's options, as data: no Chart.js runtime and no DOM, so the theme's
|
|
4
|
+
* defaults and the merge rules are testable on their own.
|
|
5
|
+
*
|
|
6
|
+
* Every colour here is written as `var(--token)`. A canvas cannot read a custom
|
|
7
|
+
* property — `fillStyle = 'var(--chart-1)'` is an invalid colour, which the
|
|
8
|
+
* canvas ignores and paints in its default black — so these strings are the
|
|
9
|
+
* *declaration* of which token a colour comes from. The components resolve them
|
|
10
|
+
* against their own element at render time (see `resolveCssVariables` and the
|
|
11
|
+
* resolver in `chart.tsx`).
|
|
12
|
+
*/
|
|
13
|
+
/** The five series colours, in the order a multi-series chart should use them. */
|
|
14
|
+
var chartSeriesColors = [
|
|
15
|
+
"var(--chart-1)",
|
|
16
|
+
"var(--chart-2)",
|
|
17
|
+
"var(--chart-3)",
|
|
18
|
+
"var(--chart-4)",
|
|
19
|
+
"var(--chart-5)"
|
|
20
|
+
];
|
|
21
|
+
/**
|
|
22
|
+
* The chart furniture, mapped onto existing semantic tokens rather than given
|
|
23
|
+
* tokens of its own. A grid line is a line, so it is `--border`; an axis tick and
|
|
24
|
+
* a legend label are secondary text, so they are `--muted-foreground`, whose
|
|
25
|
+
* contrast on `--card` (the frame's surface) is already measured in
|
|
26
|
+
* `tests/tokens.test.ts`. Dedicated `--chart-grid`/`--chart-axis`/`--chart-label`
|
|
27
|
+
* tokens would be three more values to keep in step with these in every theme
|
|
28
|
+
* for no difference anyone has asked for.
|
|
29
|
+
*/
|
|
30
|
+
var furniture = {
|
|
31
|
+
grid: "var(--border)",
|
|
32
|
+
axis: "var(--muted-foreground)",
|
|
33
|
+
label: "var(--muted-foreground)",
|
|
34
|
+
surface: "var(--card)"
|
|
35
|
+
};
|
|
36
|
+
var tickFont = { size: 10 };
|
|
37
|
+
function scalesFor(shape) {
|
|
38
|
+
if (shape === "cartesian") return {
|
|
39
|
+
x: {
|
|
40
|
+
border: { color: furniture.grid },
|
|
41
|
+
grid: {
|
|
42
|
+
color: furniture.grid,
|
|
43
|
+
drawTicks: false
|
|
44
|
+
},
|
|
45
|
+
ticks: {
|
|
46
|
+
color: furniture.axis,
|
|
47
|
+
font: tickFont
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
y: {
|
|
51
|
+
border: { display: false },
|
|
52
|
+
grid: {
|
|
53
|
+
color: furniture.grid,
|
|
54
|
+
drawTicks: false
|
|
55
|
+
},
|
|
56
|
+
ticks: {
|
|
57
|
+
color: furniture.axis,
|
|
58
|
+
font: tickFont
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
if (shape === "radial") return { r: {
|
|
63
|
+
grid: { color: furniture.grid },
|
|
64
|
+
angleLines: { color: furniture.grid },
|
|
65
|
+
pointLabels: {
|
|
66
|
+
color: furniture.axis,
|
|
67
|
+
font: tickFont
|
|
68
|
+
},
|
|
69
|
+
ticks: {
|
|
70
|
+
color: furniture.axis,
|
|
71
|
+
backdropColor: furniture.surface,
|
|
72
|
+
font: tickFont
|
|
73
|
+
}
|
|
74
|
+
} };
|
|
75
|
+
}
|
|
76
|
+
function isPlainObject(value) {
|
|
77
|
+
if (typeof value !== "object" || value === null) return false;
|
|
78
|
+
const prototype = Object.getPrototypeOf(value);
|
|
79
|
+
return prototype === Object.prototype || prototype === null;
|
|
80
|
+
}
|
|
81
|
+
function mergeInto(target, source) {
|
|
82
|
+
for (const [key, value] of Object.entries(source)) {
|
|
83
|
+
if (value === void 0) continue;
|
|
84
|
+
const current = target[key];
|
|
85
|
+
target[key] = isPlainObject(value) && isPlainObject(current) ? mergeInto({ ...current }, value) : isPlainObject(value) ? mergeInto({}, value) : value;
|
|
86
|
+
}
|
|
87
|
+
return target;
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Merge Chart.js options, later sources winning, object by object.
|
|
91
|
+
*
|
|
92
|
+
* Deep, because Chart.js options are deep: `{ scales: { x: { stacked: true } } }`
|
|
93
|
+
* means "also stack x", and a spread would replace the whole axis — its grid,
|
|
94
|
+
* its tick colour, its font — with that one flag. Arrays, functions (scriptable
|
|
95
|
+
* options) and class instances (gradients, patterns) are values and replace
|
|
96
|
+
* rather than merge. No source is mutated.
|
|
97
|
+
*/
|
|
98
|
+
function mergeChartOptions(...sources) {
|
|
99
|
+
const merged = {};
|
|
100
|
+
for (const source of sources) if (source) mergeInto(merged, source);
|
|
101
|
+
return merged;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* The theme's defaults as Chart.js options.
|
|
105
|
+
*
|
|
106
|
+
* Exported so a caller can spread it and change one thing, rather than
|
|
107
|
+
* restating every colour. Everything a chart draws that is not data — grid,
|
|
108
|
+
* ticks, legend, tooltip — is decided here once, which is what makes two charts
|
|
109
|
+
* in one application look like they came from the same place. `overrides` is
|
|
110
|
+
* merged deeply; `shape` selects the scales the chart type has.
|
|
111
|
+
*/
|
|
112
|
+
function chartOptions(overrides, shape = "cartesian") {
|
|
113
|
+
return mergeChartOptions({
|
|
114
|
+
responsive: true,
|
|
115
|
+
maintainAspectRatio: false,
|
|
116
|
+
interaction: {
|
|
117
|
+
mode: "nearest",
|
|
118
|
+
intersect: false
|
|
119
|
+
},
|
|
120
|
+
plugins: {
|
|
121
|
+
legend: { labels: {
|
|
122
|
+
color: furniture.label,
|
|
123
|
+
boxWidth: 8,
|
|
124
|
+
boxHeight: 8,
|
|
125
|
+
usePointStyle: true,
|
|
126
|
+
pointStyle: "circle",
|
|
127
|
+
font: { size: 11 }
|
|
128
|
+
} },
|
|
129
|
+
tooltip: {
|
|
130
|
+
backgroundColor: "var(--popover)",
|
|
131
|
+
titleColor: "var(--popover-foreground)",
|
|
132
|
+
bodyColor: "var(--popover-foreground)",
|
|
133
|
+
borderColor: "var(--border)",
|
|
134
|
+
borderWidth: 1,
|
|
135
|
+
padding: 8,
|
|
136
|
+
cornerRadius: 6,
|
|
137
|
+
displayColors: true,
|
|
138
|
+
boxWidth: 8,
|
|
139
|
+
boxHeight: 8,
|
|
140
|
+
usePointStyle: true,
|
|
141
|
+
titleFont: {
|
|
142
|
+
size: 11,
|
|
143
|
+
weight: 600
|
|
144
|
+
},
|
|
145
|
+
bodyFont: { size: 11 }
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
scales: scalesFor(shape)
|
|
149
|
+
}, overrides);
|
|
150
|
+
}
|
|
151
|
+
var cssVariable = /^\s*var\(\s*(--[\w-]+)\s*(?:,\s*(.*?))?\s*\)\s*$/;
|
|
152
|
+
/**
|
|
153
|
+
* Replace every `var(--token)` string in `value` — options, datasets, nested
|
|
154
|
+
* arrays — with what `read` returns for the token. A token `read` cannot
|
|
155
|
+
* resolve falls back to the `var()`'s own fallback, then to the string as
|
|
156
|
+
* written. Functions and class instances pass through untouched, so scriptable
|
|
157
|
+
* options and gradients keep working.
|
|
158
|
+
*/
|
|
159
|
+
function resolveCssVariables(value, read) {
|
|
160
|
+
if (typeof value === "string") {
|
|
161
|
+
const match = cssVariable.exec(value);
|
|
162
|
+
if (!match) return value;
|
|
163
|
+
const resolved = read(match[1]);
|
|
164
|
+
if (resolved) return resolved;
|
|
165
|
+
return match[2] ? resolveCssVariables(match[2], read) : value;
|
|
166
|
+
}
|
|
167
|
+
if (Array.isArray(value)) return value.map((entry) => resolveCssVariables(entry, read));
|
|
168
|
+
if (isPlainObject(value)) {
|
|
169
|
+
const resolved = {};
|
|
170
|
+
for (const [key, entry] of Object.entries(value)) resolved[key] = resolveCssVariables(entry, read);
|
|
171
|
+
return resolved;
|
|
172
|
+
}
|
|
173
|
+
return value;
|
|
174
|
+
}
|
|
175
|
+
//#endregion
|
|
176
|
+
export { chartOptions, chartSeriesColors, mergeChartOptions, resolveCssVariables };
|
|
177
|
+
|
|
178
|
+
//# sourceMappingURL=chart-options.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chart-options.js","names":[],"sources":["../../../../src/components/ui/chart/chart-options.ts"],"sourcesContent":["import type { ChartOptions } from 'chart.js'\n\n/**\n * The chart's options, as data: no Chart.js runtime and no DOM, so the theme's\n * defaults and the merge rules are testable on their own.\n *\n * Every colour here is written as `var(--token)`. A canvas cannot read a custom\n * property — `fillStyle = 'var(--chart-1)'` is an invalid colour, which the\n * canvas ignores and paints in its default black — so these strings are the\n * *declaration* of which token a colour comes from. The components resolve them\n * against their own element at render time (see `resolveCssVariables` and the\n * resolver in `chart.tsx`).\n */\n\n/** The five series colours, in the order a multi-series chart should use them. */\nexport const chartSeriesColors = [\n 'var(--chart-1)',\n 'var(--chart-2)',\n 'var(--chart-3)',\n 'var(--chart-4)',\n 'var(--chart-5)',\n] as const\n\n/**\n * The chart furniture, mapped onto existing semantic tokens rather than given\n * tokens of its own. A grid line is a line, so it is `--border`; an axis tick and\n * a legend label are secondary text, so they are `--muted-foreground`, whose\n * contrast on `--card` (the frame's surface) is already measured in\n * `tests/tokens.test.ts`. Dedicated `--chart-grid`/`--chart-axis`/`--chart-label`\n * tokens would be three more values to keep in step with these in every theme\n * for no difference anyone has asked for.\n */\nconst furniture = {\n grid: 'var(--border)',\n axis: 'var(--muted-foreground)',\n label: 'var(--muted-foreground)',\n surface: 'var(--card)',\n} as const\n\n/**\n * Which scales a chart type draws. Chart.js creates a scale for every key under\n * `options.scales` whatever the chart type, so cartesian defaults handed to a\n * doughnut draw an x and a y axis and a grid behind it. The shape keeps each\n * type's defaults to the scales it actually has.\n */\nexport type ChartScaleShape = 'cartesian' | 'radial' | 'none'\n\nconst tickFont = { size: 10 }\n\nfunction scalesFor(shape: ChartScaleShape): ChartOptions['scales'] {\n if (shape === 'cartesian') {\n return {\n x: {\n border: { color: furniture.grid },\n grid: { color: furniture.grid, drawTicks: false },\n ticks: { color: furniture.axis, font: tickFont },\n },\n y: {\n border: { display: false },\n grid: { color: furniture.grid, drawTicks: false },\n ticks: { color: furniture.axis, font: tickFont },\n },\n }\n }\n if (shape === 'radial') {\n return {\n r: {\n grid: { color: furniture.grid },\n angleLines: { color: furniture.grid },\n pointLabels: { color: furniture.axis, font: tickFont },\n // The default backdrop is a translucent white box, which is a white box\n // on a dark card. The frame's own surface makes it disappear in both.\n ticks: { color: furniture.axis, backdropColor: furniture.surface, font: tickFont },\n },\n }\n }\n return undefined\n}\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n if (typeof value !== 'object' || value === null) return false\n const prototype = Object.getPrototypeOf(value)\n return prototype === Object.prototype || prototype === null\n}\n\nfunction mergeInto(target: Record<string, unknown>, source: Record<string, unknown>) {\n for (const [key, value] of Object.entries(source)) {\n if (value === undefined) continue\n const current = target[key]\n target[key] =\n isPlainObject(value) && isPlainObject(current)\n ? mergeInto({ ...current }, value)\n : isPlainObject(value)\n ? mergeInto({}, value)\n : value\n }\n return target\n}\n\n/**\n * Merge Chart.js options, later sources winning, object by object.\n *\n * Deep, because Chart.js options are deep: `{ scales: { x: { stacked: true } } }`\n * means \"also stack x\", and a spread would replace the whole axis — its grid,\n * its tick colour, its font — with that one flag. Arrays, functions (scriptable\n * options) and class instances (gradients, patterns) are values and replace\n * rather than merge. No source is mutated.\n */\nexport function mergeChartOptions(...sources: (ChartOptions | undefined)[]): ChartOptions {\n const merged: Record<string, unknown> = {}\n for (const source of sources) {\n if (source) mergeInto(merged, source as Record<string, unknown>)\n }\n return merged as ChartOptions\n}\n\n/**\n * The theme's defaults as Chart.js options.\n *\n * Exported so a caller can spread it and change one thing, rather than\n * restating every colour. Everything a chart draws that is not data — grid,\n * ticks, legend, tooltip — is decided here once, which is what makes two charts\n * in one application look like they came from the same place. `overrides` is\n * merged deeply; `shape` selects the scales the chart type has.\n */\nexport function chartOptions(\n overrides?: ChartOptions,\n shape: ChartScaleShape = 'cartesian'\n): ChartOptions {\n return mergeChartOptions(\n {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: 'nearest', intersect: false },\n plugins: {\n legend: {\n labels: {\n color: furniture.label,\n boxWidth: 8,\n boxHeight: 8,\n usePointStyle: true,\n pointStyle: 'circle',\n font: { size: 11 },\n },\n },\n tooltip: {\n backgroundColor: 'var(--popover)',\n titleColor: 'var(--popover-foreground)',\n bodyColor: 'var(--popover-foreground)',\n borderColor: 'var(--border)',\n borderWidth: 1,\n padding: 8,\n cornerRadius: 6,\n displayColors: true,\n boxWidth: 8,\n boxHeight: 8,\n usePointStyle: true,\n titleFont: { size: 11, weight: 600 },\n bodyFont: { size: 11 },\n },\n },\n scales: scalesFor(shape),\n },\n overrides\n )\n}\n\nconst cssVariable = /^\\s*var\\(\\s*(--[\\w-]+)\\s*(?:,\\s*(.*?))?\\s*\\)\\s*$/\n\n/**\n * Replace every `var(--token)` string in `value` — options, datasets, nested\n * arrays — with what `read` returns for the token. A token `read` cannot\n * resolve falls back to the `var()`'s own fallback, then to the string as\n * written. Functions and class instances pass through untouched, so scriptable\n * options and gradients keep working.\n */\nexport function resolveCssVariables<T>(value: T, read: (name: string) => string | undefined): T {\n if (typeof value === 'string') {\n const match = cssVariable.exec(value)\n if (!match) return value\n const resolved = read(match[1]!)\n if (resolved) return resolved as T\n return (match[2] ? resolveCssVariables(match[2], read) : value) as T\n }\n if (Array.isArray(value)) {\n return value.map((entry: unknown) => resolveCssVariables(entry, read)) as T\n }\n if (isPlainObject(value)) {\n const resolved: Record<string, unknown> = {}\n for (const [key, entry] of Object.entries(value)) {\n resolved[key] = resolveCssVariables(entry, read)\n }\n return resolved as T\n }\n return value\n}\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type JSX } from 'solid-js';
|
|
2
2
|
import { Chart as ChartJs } from 'chart.js';
|
|
3
3
|
import type { ChartOptions, ChartType } from 'chart.js';
|
|
4
|
+
import { chartOptions, chartSeriesColors } from './chart-options';
|
|
4
5
|
/**
|
|
5
6
|
* Chart.
|
|
6
7
|
*
|
|
@@ -29,11 +30,16 @@ import type { ChartOptions, ChartType } from 'chart.js';
|
|
|
29
30
|
*
|
|
30
31
|
* ## Theming
|
|
31
32
|
*
|
|
32
|
-
* Colours
|
|
33
|
-
* defines,
|
|
34
|
-
* chart follows the accent axis
|
|
35
|
-
* per-chart configuration — and a caller that wants a
|
|
36
|
-
* passes it explicitly
|
|
33
|
+
* Colours come from `--chart-1` through `--chart-5`, which every theme
|
|
34
|
+
* defines, and the grid, ticks and labels from `--border` and
|
|
35
|
+
* `--muted-foreground`. That means a chart follows the accent axis and the
|
|
36
|
+
* appearance with no per-chart configuration — and a caller that wants a
|
|
37
|
+
* specific series colour passes it explicitly, as a colour or as `var(--token)`.
|
|
38
|
+
*
|
|
39
|
+
* A canvas cannot read a custom property, so the options and datasets carry
|
|
40
|
+
* `var(--token)` strings and each chart resolves them against its own element
|
|
41
|
+
* when it renders, and again whenever the root's attributes change — the
|
|
42
|
+
* `.dark` class, `data-accent`, an inline override. See `createThemeResolver`.
|
|
37
43
|
*/
|
|
38
44
|
/**
|
|
39
45
|
* Register a piece with Chart.js. The escape hatch for a caller's own chart type.
|
|
@@ -43,17 +49,7 @@ import type { ChartOptions, ChartType } from 'chart.js';
|
|
|
43
49
|
* it, since the registry is Chart.js's global.
|
|
44
50
|
*/
|
|
45
51
|
export declare function registerChartPiece(piece: Parameters<typeof ChartJs.register>[number]): void;
|
|
46
|
-
|
|
47
|
-
export declare const chartSeriesColors: readonly ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"];
|
|
48
|
-
/**
|
|
49
|
-
* The theme's defaults as Chart.js options.
|
|
50
|
-
*
|
|
51
|
-
* Exported so a caller can spread it and change one thing, rather than
|
|
52
|
-
* restating every colour. Everything a chart draws that is not data — grid,
|
|
53
|
-
* ticks, legend, tooltip — is decided here once, which is what makes two charts
|
|
54
|
-
* in one application look like they came from the same place.
|
|
55
|
-
*/
|
|
56
|
-
export declare function chartOptions(overrides?: ChartOptions): ChartOptions;
|
|
52
|
+
export { chartOptions, chartSeriesColors };
|
|
57
53
|
/** A chart's frame: a bordered surface with a title and an optional description. */
|
|
58
54
|
export type ChartFrameProps = {
|
|
59
55
|
/** The chart's title. Required — a chart with no name is not readable. */
|
|
@@ -75,7 +71,7 @@ type SeriesChartProps = {
|
|
|
75
71
|
data: readonly number[];
|
|
76
72
|
color?: string;
|
|
77
73
|
}[];
|
|
78
|
-
/** Chart.js options, merged over the theme's defaults. */
|
|
74
|
+
/** Chart.js options, merged deeply over the theme's defaults. */
|
|
79
75
|
options?: ChartOptions;
|
|
80
76
|
/** Stack the series. */
|
|
81
77
|
stacked?: boolean;
|
|
@@ -118,7 +114,14 @@ export declare function BubbleChart(props: {
|
|
|
118
114
|
}): JSX.Element;
|
|
119
115
|
/** A radar chart, for a profile across fixed axes. */
|
|
120
116
|
export declare function RadarChart(props: SeriesChartProps): JSX.Element;
|
|
121
|
-
/**
|
|
117
|
+
/**
|
|
118
|
+
* A polar area chart: radial bars, for a composition.
|
|
119
|
+
*
|
|
120
|
+
* Its scale is left to Chart.js's polar-area defaults (`'none'` rather than
|
|
121
|
+
* `'radial'`): `solid-chartjs` deletes `options.scales.r` for every chart type
|
|
122
|
+
* but radar when it first creates the chart, so radial styling here would apply
|
|
123
|
+
* only after the first theme change — a chart that restyles itself on a toggle.
|
|
124
|
+
*/
|
|
122
125
|
export declare function PolarAreaChart(props: {
|
|
123
126
|
labels: readonly string[];
|
|
124
127
|
data: readonly number[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/chart/chart.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/chart/chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2D,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAG5F,OAAO,EACL,KAAK,IAAI,OAAO,EAYjB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEvD,OAAO,EACL,YAAY,EACZ,iBAAiB,EAIlB,MAAM,iBAAiB,CAAA;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAE3F;AAgBD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA;AAqE1C,oFAAoF;AACpF,MAAM,MAAM,eAAe,GAAG;IAC5B,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAA;IACb,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yBAAyB;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAiBhD;AAED,KAAK,gBAAgB,GAAG;IACtB,0CAA0C;IAC1C,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,2DAA2D;IAC3D,MAAM,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC7E,iEAAiE;IACjE,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAsCD,wDAAwD;AACxD,wBAAgB,SAAS,CAAC,KAAK,EAAE,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,eAarE;AAED,mEAAmE;AACnE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,gBAAgB,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,eAiB1E;AAED,8DAA8D;AAC9D,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,MAAM,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC/F,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,eAkBA;AAED,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,MAAM,EAAE,SAAS;QACf,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,SAAS;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;QACpD,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,EAAE,CAAA;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,eAgBA;AAED,sDAAsD;AACtD,wBAAgB,UAAU,CAAC,KAAK,EAAE,gBAAgB,eAajD;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;IACvB,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,eAoBA;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;IACvB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,eAsCA;AAED,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,MAAM,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,eAmBA;AAED,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|