@databricks/appkit-ui 0.41.3 → 0.41.5
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/react/charts/base.js +5 -2
- package/dist/react/charts/base.js.map +1 -1
- package/dist/react/charts/constants.d.ts +1 -0
- package/dist/react/charts/constants.d.ts.map +1 -1
- package/dist/react/charts/constants.js +15 -1
- package/dist/react/charts/constants.js.map +1 -1
- package/dist/react/charts/index.d.ts +2 -2
- package/dist/react/charts/index.js +1 -1
- package/dist/react/charts/options.d.ts +2 -1
- package/dist/react/charts/options.d.ts.map +1 -1
- package/dist/react/charts/options.js +80 -17
- package/dist/react/charts/options.js.map +1 -1
- package/dist/react/charts/theme.d.ts +8 -2
- package/dist/react/charts/theme.d.ts.map +1 -1
- package/dist/react/charts/theme.js +89 -30
- package/dist/react/charts/theme.js.map +1 -1
- package/dist/react/charts/types.d.ts +12 -1
- package/dist/react/charts/types.d.ts.map +1 -1
- package/dist/react/charts/types.js.map +1 -1
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +2 -2
- package/dist/styles.css +65 -5
- package/package.json +1 -1
- package/sbom.cdx.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL } from "./constants.js";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
1
|
+
import { CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, CHART_UI_VARS, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, FALLBACK_UI_TOKENS } from "./constants.js";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/react/charts/theme.ts
|
|
5
5
|
const PALETTE_CONFIG = {
|
|
@@ -21,13 +21,12 @@ const PALETTE_CONFIG = {
|
|
|
21
21
|
* Cache is cleared when theme change events fire (MutationObserver/matchMedia).
|
|
22
22
|
*/
|
|
23
23
|
const colorCache = /* @__PURE__ */ new Map();
|
|
24
|
-
/**
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
*/
|
|
29
|
-
function resetThemeColorCache() {
|
|
24
|
+
/** Cache for the computed chart UI tokens (axis text, grid lines). */
|
|
25
|
+
let uiTokenCache = null;
|
|
26
|
+
/** Clears both theme caches (palette colors + UI tokens). */
|
|
27
|
+
function clearThemeCaches() {
|
|
30
28
|
colorCache.clear();
|
|
29
|
+
uiTokenCache = null;
|
|
31
30
|
}
|
|
32
31
|
/**
|
|
33
32
|
* Gets theme colors with module-level caching.
|
|
@@ -49,6 +48,72 @@ function getThemeColors(palette = "categorical") {
|
|
|
49
48
|
return result;
|
|
50
49
|
}
|
|
51
50
|
/**
|
|
51
|
+
* Gets the chart UI tokens (axis text, titles, grid lines) with caching.
|
|
52
|
+
* Authored in `hsla` because ECharts/zrender cannot parse the `oklch` semantic
|
|
53
|
+
* tokens.
|
|
54
|
+
*/
|
|
55
|
+
function getThemeUITokens() {
|
|
56
|
+
if (typeof window === "undefined") return FALLBACK_UI_TOKENS;
|
|
57
|
+
if (uiTokenCache) return uiTokenCache;
|
|
58
|
+
const styles = getComputedStyle(document.documentElement);
|
|
59
|
+
const read = (varName, fallback) => {
|
|
60
|
+
return styles.getPropertyValue(varName).trim() || fallback;
|
|
61
|
+
};
|
|
62
|
+
uiTokenCache = {
|
|
63
|
+
axisLabel: read(CHART_UI_VARS.axisLabel, FALLBACK_UI_TOKENS.axisLabel),
|
|
64
|
+
axisTitle: read(CHART_UI_VARS.axisTitle, FALLBACK_UI_TOKENS.axisTitle),
|
|
65
|
+
grid: read(CHART_UI_VARS.grid, FALLBACK_UI_TOKENS.grid),
|
|
66
|
+
tooltipBg: read(CHART_UI_VARS.tooltipBg, FALLBACK_UI_TOKENS.tooltipBg)
|
|
67
|
+
};
|
|
68
|
+
return uiTokenCache;
|
|
69
|
+
}
|
|
70
|
+
const subscribers = /* @__PURE__ */ new Set();
|
|
71
|
+
let teardownListeners = null;
|
|
72
|
+
function handleThemeChange() {
|
|
73
|
+
clearThemeCaches();
|
|
74
|
+
for (const notify of [...subscribers]) notify();
|
|
75
|
+
}
|
|
76
|
+
function ensureListening() {
|
|
77
|
+
if (teardownListeners) return;
|
|
78
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
79
|
+
mediaQuery.addEventListener("change", handleThemeChange);
|
|
80
|
+
const observer = new MutationObserver(handleThemeChange);
|
|
81
|
+
observer.observe(document.documentElement, {
|
|
82
|
+
attributes: true,
|
|
83
|
+
attributeFilter: [
|
|
84
|
+
"class",
|
|
85
|
+
"data-theme",
|
|
86
|
+
"data-mode"
|
|
87
|
+
]
|
|
88
|
+
});
|
|
89
|
+
teardownListeners = () => {
|
|
90
|
+
mediaQuery.removeEventListener("change", handleThemeChange);
|
|
91
|
+
observer.disconnect();
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Subscribes `onChange` to theme changes (system color scheme via matchMedia, or
|
|
96
|
+
* a theme attribute on the root element). Listeners are shared and ref-counted,
|
|
97
|
+
* so each hook subscribes once per mount regardless of how `onChange`'s identity
|
|
98
|
+
* changes between renders.
|
|
99
|
+
*/
|
|
100
|
+
function useThemeChangeEffect(onChange) {
|
|
101
|
+
const onChangeRef = useRef(onChange);
|
|
102
|
+
onChangeRef.current = onChange;
|
|
103
|
+
useEffect(() => {
|
|
104
|
+
const subscriber = () => onChangeRef.current();
|
|
105
|
+
subscribers.add(subscriber);
|
|
106
|
+
ensureListening();
|
|
107
|
+
return () => {
|
|
108
|
+
subscribers.delete(subscriber);
|
|
109
|
+
if (subscribers.size === 0 && teardownListeners) {
|
|
110
|
+
teardownListeners();
|
|
111
|
+
teardownListeners = null;
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
}, []);
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
52
117
|
* Hook to get theme colors with automatic updates on theme change.
|
|
53
118
|
* Re-resolves CSS variables when color scheme or theme attributes change.
|
|
54
119
|
*
|
|
@@ -56,30 +121,24 @@ function getThemeColors(palette = "categorical") {
|
|
|
56
121
|
*/
|
|
57
122
|
function useThemeColors(palette = "categorical") {
|
|
58
123
|
const [colors, setColors] = useState(() => typeof window === "undefined" ? PALETTE_CONFIG[palette].fallback : getThemeColors(palette));
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
setColors(getThemeColors(palette));
|
|
63
|
-
};
|
|
64
|
-
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
65
|
-
mediaQuery.addEventListener("change", updateColors);
|
|
66
|
-
const observer = new MutationObserver(updateColors);
|
|
67
|
-
observer.observe(document.documentElement, {
|
|
68
|
-
attributes: true,
|
|
69
|
-
attributeFilter: [
|
|
70
|
-
"class",
|
|
71
|
-
"data-theme",
|
|
72
|
-
"data-mode"
|
|
73
|
-
]
|
|
74
|
-
});
|
|
75
|
-
return () => {
|
|
76
|
-
mediaQuery.removeEventListener("change", updateColors);
|
|
77
|
-
observer.disconnect();
|
|
78
|
-
};
|
|
79
|
-
}, [palette]);
|
|
124
|
+
useThemeChangeEffect(useCallback(() => {
|
|
125
|
+
setColors(getThemeColors(palette));
|
|
126
|
+
}, [palette]));
|
|
80
127
|
return colors;
|
|
81
128
|
}
|
|
82
129
|
/**
|
|
130
|
+
* Hook to get the chart UI tokens (axis text, titles, grid lines) with automatic
|
|
131
|
+
* updates on theme change. Pass the result into the ECharts option builders so
|
|
132
|
+
* axis labels, lines, legends, and titles follow the active theme.
|
|
133
|
+
*/
|
|
134
|
+
function useChartUITokens() {
|
|
135
|
+
const [tokens, setTokens] = useState(() => typeof window === "undefined" ? FALLBACK_UI_TOKENS : getThemeUITokens());
|
|
136
|
+
useThemeChangeEffect(useCallback(() => {
|
|
137
|
+
setTokens(getThemeUITokens());
|
|
138
|
+
}, []));
|
|
139
|
+
return tokens;
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
83
142
|
* Hook to get all three color palettes at once.
|
|
84
143
|
* Useful when a component needs access to multiple palette types.
|
|
85
144
|
*/
|
|
@@ -92,5 +151,5 @@ function useAllThemeColors() {
|
|
|
92
151
|
}
|
|
93
152
|
|
|
94
153
|
//#endregion
|
|
95
|
-
export { useAllThemeColors, useThemeColors };
|
|
154
|
+
export { useAllThemeColors, useChartUITokens, useThemeColors };
|
|
96
155
|
//# sourceMappingURL=theme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","names":[],"sources":["../../../src/react/charts/theme.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport {\n CHART_COLOR_VARS_CATEGORICAL,\n CHART_COLOR_VARS_DIVERGING,\n CHART_COLOR_VARS_SEQUENTIAL,\n FALLBACK_COLORS_CATEGORICAL,\n FALLBACK_COLORS_DIVERGING,\n FALLBACK_COLORS_SEQUENTIAL,\n} from \"./constants\";\nimport type { ChartColorPalette } from \"./types\";\n\n// ============================================================================\n// Theme Colors (resolved from CSS variables)\n// ============================================================================\n\nconst PALETTE_CONFIG: Record<\n ChartColorPalette,\n { vars: readonly string[]; fallback: string[] }\n> = {\n categorical: {\n vars: CHART_COLOR_VARS_CATEGORICAL,\n fallback: FALLBACK_COLORS_CATEGORICAL,\n },\n sequential: {\n vars: CHART_COLOR_VARS_SEQUENTIAL,\n fallback: FALLBACK_COLORS_SEQUENTIAL,\n },\n diverging: {\n vars: CHART_COLOR_VARS_DIVERGING,\n fallback: FALLBACK_COLORS_DIVERGING,\n },\n};\n\n// ============================================================================\n// Module-Level Caching\n// ============================================================================\n\n/**\n * Cache for computed theme colors to avoid repeated CSS variable lookups.\n * Cache is cleared when theme change events fire (MutationObserver/matchMedia).\n */\nconst colorCache = new Map<string, string[]>();\n\n/**\n * Clears the theme color cache.\n * Called when theme change events fire, or for testing when mocks change.\n * @internal\n */\nexport function resetThemeColorCache(): void {\n colorCache.clear();\n}\n\n/**\n * Gets theme colors with module-level caching.\n * Avoids repeated CSS variable lookups for the same palette within a theme.\n */\nfunction getThemeColors(palette: ChartColorPalette = \"categorical\"): string[] {\n const config = PALETTE_CONFIG[palette];\n\n if (typeof window === \"undefined\") return config.fallback;\n\n // Return cached colors if available\n const cached = colorCache.get(palette);\n if (cached) {\n return cached;\n }\n\n // Compute colors from CSS variables\n const styles = getComputedStyle(document.documentElement);\n const colors: string[] = [];\n\n for (const varName of config.vars) {\n const value = styles.getPropertyValue(varName).trim();\n if (value) colors.push(value);\n }\n\n const result = colors.length > 0 ? colors : config.fallback;\n\n // Cache the result\n colorCache.set(palette, result);\n\n return result;\n}\n\n/**\n * Hook to get theme colors with automatic updates on theme change.\n * Re-resolves CSS variables when color scheme or theme attributes change.\n *\n * @param palette - Color palette type: \"categorical\" (default), \"sequential\", or \"diverging\"\n */\nexport function useThemeColors(\n palette: ChartColorPalette = \"categorical\",\n): string[] {\n const [colors, setColors] = useState<string[]>(() =>\n typeof window === \"undefined\"\n ? PALETTE_CONFIG[palette].fallback\n : getThemeColors(palette),\n );\n\n useEffect(() => {\n // Clear cache and re-fetch colors when theme changes\n const updateColors = () => {\n resetThemeColorCache();\n setColors(getThemeColors(palette));\n };\n\n // Listen for system color scheme changes\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n mediaQuery.addEventListener(\"change\", updateColors);\n\n // Listen for theme attribute changes (e.g., class=\"dark\", data-theme=\"dark\")\n const observer = new MutationObserver(updateColors);\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"class\", \"data-theme\", \"data-mode\"],\n });\n\n return () => {\n mediaQuery.removeEventListener(\"change\", updateColors);\n observer.disconnect();\n };\n }, [palette]);\n\n return colors;\n}\n\n/**\n * Hook to get all three color palettes at once.\n * Useful when a component needs access to multiple palette types.\n */\nexport function useAllThemeColors(): {\n categorical: string[];\n sequential: string[];\n diverging: string[];\n} {\n const categorical = useThemeColors(\"categorical\");\n const sequential = useThemeColors(\"sequential\");\n const diverging = useThemeColors(\"diverging\");\n\n return { categorical, sequential, diverging };\n}\n"],"mappings":";;;;AAeA,MAAM,iBAGF;CACF,aAAa;EACX,MAAM;EACN,UAAU;EACX;CACD,YAAY;EACV,MAAM;EACN,UAAU;EACX;CACD,WAAW;EACT,MAAM;EACN,UAAU;EACX;CACF;;;;;AAUD,MAAM,6BAAa,IAAI,KAAuB;;;;;;AAO9C,SAAgB,uBAA6B;AAC3C,YAAW,OAAO;;;;;;AAOpB,SAAS,eAAe,UAA6B,eAAyB;CAC5E,MAAM,SAAS,eAAe;AAE9B,KAAI,OAAO,WAAW,YAAa,QAAO,OAAO;CAGjD,MAAM,SAAS,WAAW,IAAI,QAAQ;AACtC,KAAI,OACF,QAAO;CAIT,MAAM,SAAS,iBAAiB,SAAS,gBAAgB;CACzD,MAAM,SAAmB,EAAE;AAE3B,MAAK,MAAM,WAAW,OAAO,MAAM;EACjC,MAAM,QAAQ,OAAO,iBAAiB,QAAQ,CAAC,MAAM;AACrD,MAAI,MAAO,QAAO,KAAK,MAAM;;CAG/B,MAAM,SAAS,OAAO,SAAS,IAAI,SAAS,OAAO;AAGnD,YAAW,IAAI,SAAS,OAAO;AAE/B,QAAO;;;;;;;;AAST,SAAgB,eACd,UAA6B,eACnB;CACV,MAAM,CAAC,QAAQ,aAAa,eAC1B,OAAO,WAAW,cACd,eAAe,SAAS,WACxB,eAAe,QAAQ,CAC5B;AAED,iBAAgB;EAEd,MAAM,qBAAqB;AACzB,yBAAsB;AACtB,aAAU,eAAe,QAAQ,CAAC;;EAIpC,MAAM,aAAa,OAAO,WAAW,+BAA+B;AACpE,aAAW,iBAAiB,UAAU,aAAa;EAGnD,MAAM,WAAW,IAAI,iBAAiB,aAAa;AACnD,WAAS,QAAQ,SAAS,iBAAiB;GACzC,YAAY;GACZ,iBAAiB;IAAC;IAAS;IAAc;IAAY;GACtD,CAAC;AAEF,eAAa;AACX,cAAW,oBAAoB,UAAU,aAAa;AACtD,YAAS,YAAY;;IAEtB,CAAC,QAAQ,CAAC;AAEb,QAAO;;;;;;AAOT,SAAgB,oBAId;AAKA,QAAO;EAAE,aAJW,eAAe,cAAc;EAI3B,YAHH,eAAe,aAAa;EAGb,WAFhB,eAAe,YAAY;EAEA"}
|
|
1
|
+
{"version":3,"file":"theme.js","names":[],"sources":["../../../src/react/charts/theme.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n CHART_COLOR_VARS_CATEGORICAL,\n CHART_COLOR_VARS_DIVERGING,\n CHART_COLOR_VARS_SEQUENTIAL,\n CHART_UI_VARS,\n FALLBACK_COLORS_CATEGORICAL,\n FALLBACK_COLORS_DIVERGING,\n FALLBACK_COLORS_SEQUENTIAL,\n FALLBACK_UI_TOKENS,\n} from \"./constants\";\nimport type { ChartColorPalette, ChartUITokens } from \"./types\";\n\n// ============================================================================\n// Theme Colors (resolved from CSS variables)\n// ============================================================================\n\nconst PALETTE_CONFIG: Record<\n ChartColorPalette,\n { vars: readonly string[]; fallback: string[] }\n> = {\n categorical: {\n vars: CHART_COLOR_VARS_CATEGORICAL,\n fallback: FALLBACK_COLORS_CATEGORICAL,\n },\n sequential: {\n vars: CHART_COLOR_VARS_SEQUENTIAL,\n fallback: FALLBACK_COLORS_SEQUENTIAL,\n },\n diverging: {\n vars: CHART_COLOR_VARS_DIVERGING,\n fallback: FALLBACK_COLORS_DIVERGING,\n },\n};\n\n// ============================================================================\n// Module-Level Caching\n// ============================================================================\n\n/**\n * Cache for computed theme colors to avoid repeated CSS variable lookups.\n * Cache is cleared when theme change events fire (MutationObserver/matchMedia).\n */\nconst colorCache = new Map<string, string[]>();\n\n/** Cache for the computed chart UI tokens (axis text, grid lines). */\nlet uiTokenCache: ChartUITokens | null = null;\n\n/** Clears both theme caches (palette colors + UI tokens). */\nfunction clearThemeCaches(): void {\n colorCache.clear();\n uiTokenCache = null;\n}\n\n/**\n * Gets theme colors with module-level caching.\n * Avoids repeated CSS variable lookups for the same palette within a theme.\n */\nfunction getThemeColors(palette: ChartColorPalette = \"categorical\"): string[] {\n const config = PALETTE_CONFIG[palette];\n\n if (typeof window === \"undefined\") return config.fallback;\n\n // Return cached colors if available\n const cached = colorCache.get(palette);\n if (cached) {\n return cached;\n }\n\n // Compute colors from CSS variables\n const styles = getComputedStyle(document.documentElement);\n const colors: string[] = [];\n\n for (const varName of config.vars) {\n const value = styles.getPropertyValue(varName).trim();\n if (value) colors.push(value);\n }\n\n const result = colors.length > 0 ? colors : config.fallback;\n\n // Cache the result\n colorCache.set(palette, result);\n\n return result;\n}\n\n/**\n * Gets the chart UI tokens (axis text, titles, grid lines) with caching.\n * Authored in `hsla` because ECharts/zrender cannot parse the `oklch` semantic\n * tokens.\n */\nfunction getThemeUITokens(): ChartUITokens {\n if (typeof window === \"undefined\") return FALLBACK_UI_TOKENS;\n\n if (uiTokenCache) return uiTokenCache;\n\n const styles = getComputedStyle(document.documentElement);\n const read = (varName: string, fallback: string): string => {\n const value = styles.getPropertyValue(varName).trim();\n return value || fallback;\n };\n\n uiTokenCache = {\n axisLabel: read(CHART_UI_VARS.axisLabel, FALLBACK_UI_TOKENS.axisLabel),\n axisTitle: read(CHART_UI_VARS.axisTitle, FALLBACK_UI_TOKENS.axisTitle),\n grid: read(CHART_UI_VARS.grid, FALLBACK_UI_TOKENS.grid),\n tooltipBg: read(CHART_UI_VARS.tooltipBg, FALLBACK_UI_TOKENS.tooltipBg),\n };\n\n return uiTokenCache;\n}\n\n// ============================================================================\n// Theme Change Subscription (shared)\n// ============================================================================\n\n// One shared, ref-counted matchMedia + MutationObserver for the whole module: a\n// theme change clears the caches once, then notifies every subscribed hook.\nconst subscribers = new Set<() => void>();\nlet teardownListeners: (() => void) | null = null;\n\nfunction handleThemeChange(): void {\n clearThemeCaches();\n // Snapshot: a subscriber may add/remove itself during iteration.\n for (const notify of [...subscribers]) notify();\n}\n\nfunction ensureListening(): void {\n if (teardownListeners) return;\n\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n mediaQuery.addEventListener(\"change\", handleThemeChange);\n\n const observer = new MutationObserver(handleThemeChange);\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"class\", \"data-theme\", \"data-mode\"],\n });\n\n teardownListeners = () => {\n mediaQuery.removeEventListener(\"change\", handleThemeChange);\n observer.disconnect();\n };\n}\n\n/**\n * Resets all module-level theme state: clears both caches and drops the shared\n * subscription (removing the matchMedia/MutationObserver listeners). Used by\n * tests to isolate runs; the runtime only ever clears caches.\n * @internal\n */\nexport function resetThemeCache(): void {\n clearThemeCaches();\n subscribers.clear();\n teardownListeners?.();\n teardownListeners = null;\n}\n\n/**\n * Subscribes `onChange` to theme changes (system color scheme via matchMedia, or\n * a theme attribute on the root element). Listeners are shared and ref-counted,\n * so each hook subscribes once per mount regardless of how `onChange`'s identity\n * changes between renders.\n */\nfunction useThemeChangeEffect(onChange: () => void): void {\n const onChangeRef = useRef(onChange);\n onChangeRef.current = onChange;\n\n useEffect(() => {\n const subscriber = () => onChangeRef.current();\n subscribers.add(subscriber);\n ensureListening();\n\n return () => {\n subscribers.delete(subscriber);\n if (subscribers.size === 0 && teardownListeners) {\n teardownListeners();\n teardownListeners = null;\n }\n };\n }, []);\n}\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\n/**\n * Hook to get theme colors with automatic updates on theme change.\n * Re-resolves CSS variables when color scheme or theme attributes change.\n *\n * @param palette - Color palette type: \"categorical\" (default), \"sequential\", or \"diverging\"\n */\nexport function useThemeColors(\n palette: ChartColorPalette = \"categorical\",\n): string[] {\n const [colors, setColors] = useState<string[]>(() =>\n typeof window === \"undefined\"\n ? PALETTE_CONFIG[palette].fallback\n : getThemeColors(palette),\n );\n\n // Re-resolve colors when the theme changes.\n const updateColors = useCallback(() => {\n setColors(getThemeColors(palette));\n }, [palette]);\n\n useThemeChangeEffect(updateColors);\n\n return colors;\n}\n\n/**\n * Hook to get the chart UI tokens (axis text, titles, grid lines) with automatic\n * updates on theme change. Pass the result into the ECharts option builders so\n * axis labels, lines, legends, and titles follow the active theme.\n */\nexport function useChartUITokens(): ChartUITokens {\n const [tokens, setTokens] = useState<ChartUITokens>(() =>\n typeof window === \"undefined\" ? FALLBACK_UI_TOKENS : getThemeUITokens(),\n );\n\n // Re-resolve tokens when the theme changes.\n const updateTokens = useCallback(() => {\n setTokens(getThemeUITokens());\n }, []);\n\n useThemeChangeEffect(updateTokens);\n\n return tokens;\n}\n\n/**\n * Hook to get all three color palettes at once.\n * Useful when a component needs access to multiple palette types.\n */\nexport function useAllThemeColors(): {\n categorical: string[];\n sequential: string[];\n diverging: string[];\n} {\n const categorical = useThemeColors(\"categorical\");\n const sequential = useThemeColors(\"sequential\");\n const diverging = useThemeColors(\"diverging\");\n\n return { categorical, sequential, diverging };\n}\n"],"mappings":";;;;AAiBA,MAAM,iBAGF;CACF,aAAa;EACX,MAAM;EACN,UAAU;EACX;CACD,YAAY;EACV,MAAM;EACN,UAAU;EACX;CACD,WAAW;EACT,MAAM;EACN,UAAU;EACX;CACF;;;;;AAUD,MAAM,6BAAa,IAAI,KAAuB;;AAG9C,IAAI,eAAqC;;AAGzC,SAAS,mBAAyB;AAChC,YAAW,OAAO;AAClB,gBAAe;;;;;;AAOjB,SAAS,eAAe,UAA6B,eAAyB;CAC5E,MAAM,SAAS,eAAe;AAE9B,KAAI,OAAO,WAAW,YAAa,QAAO,OAAO;CAGjD,MAAM,SAAS,WAAW,IAAI,QAAQ;AACtC,KAAI,OACF,QAAO;CAIT,MAAM,SAAS,iBAAiB,SAAS,gBAAgB;CACzD,MAAM,SAAmB,EAAE;AAE3B,MAAK,MAAM,WAAW,OAAO,MAAM;EACjC,MAAM,QAAQ,OAAO,iBAAiB,QAAQ,CAAC,MAAM;AACrD,MAAI,MAAO,QAAO,KAAK,MAAM;;CAG/B,MAAM,SAAS,OAAO,SAAS,IAAI,SAAS,OAAO;AAGnD,YAAW,IAAI,SAAS,OAAO;AAE/B,QAAO;;;;;;;AAQT,SAAS,mBAAkC;AACzC,KAAI,OAAO,WAAW,YAAa,QAAO;AAE1C,KAAI,aAAc,QAAO;CAEzB,MAAM,SAAS,iBAAiB,SAAS,gBAAgB;CACzD,MAAM,QAAQ,SAAiB,aAA6B;AAE1D,SADc,OAAO,iBAAiB,QAAQ,CAAC,MAAM,IACrC;;AAGlB,gBAAe;EACb,WAAW,KAAK,cAAc,WAAW,mBAAmB,UAAU;EACtE,WAAW,KAAK,cAAc,WAAW,mBAAmB,UAAU;EACtE,MAAM,KAAK,cAAc,MAAM,mBAAmB,KAAK;EACvD,WAAW,KAAK,cAAc,WAAW,mBAAmB,UAAU;EACvE;AAED,QAAO;;AAST,MAAM,8BAAc,IAAI,KAAiB;AACzC,IAAI,oBAAyC;AAE7C,SAAS,oBAA0B;AACjC,mBAAkB;AAElB,MAAK,MAAM,UAAU,CAAC,GAAG,YAAY,CAAE,SAAQ;;AAGjD,SAAS,kBAAwB;AAC/B,KAAI,kBAAmB;CAEvB,MAAM,aAAa,OAAO,WAAW,+BAA+B;AACpE,YAAW,iBAAiB,UAAU,kBAAkB;CAExD,MAAM,WAAW,IAAI,iBAAiB,kBAAkB;AACxD,UAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB;GAAC;GAAS;GAAc;GAAY;EACtD,CAAC;AAEF,2BAA0B;AACxB,aAAW,oBAAoB,UAAU,kBAAkB;AAC3D,WAAS,YAAY;;;;;;;;;AAuBzB,SAAS,qBAAqB,UAA4B;CACxD,MAAM,cAAc,OAAO,SAAS;AACpC,aAAY,UAAU;AAEtB,iBAAgB;EACd,MAAM,mBAAmB,YAAY,SAAS;AAC9C,cAAY,IAAI,WAAW;AAC3B,mBAAiB;AAEjB,eAAa;AACX,eAAY,OAAO,WAAW;AAC9B,OAAI,YAAY,SAAS,KAAK,mBAAmB;AAC/C,uBAAmB;AACnB,wBAAoB;;;IAGvB,EAAE,CAAC;;;;;;;;AAaR,SAAgB,eACd,UAA6B,eACnB;CACV,MAAM,CAAC,QAAQ,aAAa,eAC1B,OAAO,WAAW,cACd,eAAe,SAAS,WACxB,eAAe,QAAQ,CAC5B;AAOD,sBAJqB,kBAAkB;AACrC,YAAU,eAAe,QAAQ,CAAC;IACjC,CAAC,QAAQ,CAAC,CAEqB;AAElC,QAAO;;;;;;;AAQT,SAAgB,mBAAkC;CAChD,MAAM,CAAC,QAAQ,aAAa,eAC1B,OAAO,WAAW,cAAc,qBAAqB,kBAAkB,CACxE;AAOD,sBAJqB,kBAAkB;AACrC,YAAU,kBAAkB,CAAC;IAC5B,EAAE,CAAC,CAE4B;AAElC,QAAO;;;;;;AAOT,SAAgB,oBAId;AAKA,QAAO;EAAE,aAJW,eAAe,cAAc;EAI3B,YAHH,eAAe,aAAa;EAGb,WAFhB,eAAe,YAAY;EAEA"}
|
|
@@ -11,6 +11,17 @@ type ChartType = "bar" | "line" | "area" | "pie" | "donut" | "scatter" | "radar"
|
|
|
11
11
|
type ChartData = Table | Record<string, unknown>[];
|
|
12
12
|
/** Color palette types for different visualization needs */
|
|
13
13
|
type ChartColorPalette = "categorical" | "sequential" | "diverging";
|
|
14
|
+
/** Resolved colors for the chart UI — axis text, titles, grid lines, and tooltip. */
|
|
15
|
+
interface ChartUITokens {
|
|
16
|
+
/** Axis tick labels (≈ `--muted-foreground`) */
|
|
17
|
+
axisLabel: string;
|
|
18
|
+
/** Axis names, legend, title, and visualMap text (≈ `--foreground`) */
|
|
19
|
+
axisTitle: string;
|
|
20
|
+
/** Axis, tick, and split (grid) lines (≈ `--border`) */
|
|
21
|
+
grid: string;
|
|
22
|
+
/** Tooltip popover background (≈ `--popover`) */
|
|
23
|
+
tooltipBg: string;
|
|
24
|
+
}
|
|
14
25
|
/** Common visual and behavior props for all charts */
|
|
15
26
|
interface ChartBaseProps {
|
|
16
27
|
/** Chart title */
|
|
@@ -156,5 +167,5 @@ declare function isQueryProps(props: UnifiedChartProps): props is QueryProps;
|
|
|
156
167
|
/** Type guard to check if props are data-based */
|
|
157
168
|
declare function isDataProps(props: UnifiedChartProps): props is DataProps;
|
|
158
169
|
//#endregion
|
|
159
|
-
export { AreaChartProps, AreaChartSpecificProps, BarChartProps, BarChartSpecificProps, ChartBaseProps, ChartColorPalette, ChartData, ChartType, DataFormat, DataProps, DonutChartProps, HeatmapChartProps, HeatmapChartSpecificProps, LineChartProps, LineChartSpecificProps, NormalizedChartData, NormalizedChartDataBase, Orientation, PieChartProps, PieChartSpecificProps, QueryProps, RadarChartProps, RadarChartSpecificProps, ScatterChartProps, ScatterChartSpecificProps, UnifiedChartProps, isArrowTable, isDataProps, isQueryProps };
|
|
170
|
+
export { AreaChartProps, AreaChartSpecificProps, BarChartProps, BarChartSpecificProps, ChartBaseProps, ChartColorPalette, ChartData, ChartType, ChartUITokens, DataFormat, DataProps, DonutChartProps, HeatmapChartProps, HeatmapChartSpecificProps, LineChartProps, LineChartSpecificProps, NormalizedChartData, NormalizedChartDataBase, Orientation, PieChartProps, PieChartSpecificProps, QueryProps, RadarChartProps, RadarChartSpecificProps, ScatterChartProps, ScatterChartSpecificProps, UnifiedChartProps, isArrowTable, isDataProps, isQueryProps };
|
|
160
171
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/charts/types.ts"],"mappings":";;;;KAOY,UAAA;AAAZ;AAAA,KAGY,WAAA;;KAGA,SAAA;;KAWA,SAAA,GAAY,KAAA,GAAQ,MAAA;;KAOpB,iBAAA;;UAGK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/react/charts/types.ts"],"mappings":";;;;KAOY,UAAA;AAAZ;AAAA,KAGY,WAAA;;KAGA,SAAA;;KAWA,SAAA,GAAY,KAAA,GAAQ,MAAA;;KAOpB,iBAAA;;UAGK,aAAA;EArBL;EAuBV,SAAA;;EAEA,SAAA;EAzBmB;EA2BnB,IAAA;EAhBmB;EAkBnB,SAAA;AAAA;;UAIe,cAAA;EAfY;EAiB3B,KAAA;EAjB2B;EAmB3B,UAAA;EAhBe;;;;;;EAuBf,YAAA,GAAe,iBAAA;EAff;EAiBA,MAAA;EAjBS;EAmBT,MAAA;EAf6B;EAiB7B,SAAA;EAagB;EAVhB,IAAA;EAhBA;EAkBA,IAAA;EAXe;EAcf,SAAA;EAVA;EAYA,MAAA;EAPA;EAUA,OAAA,GAAU,MAAA;AAAA;;UAQK,UAAA,SAAmB,cAAA;EARxB;EAUV,QAAA;EAVgB;EAYhB,UAAA,GAAa,MAAA;EAJa;;;;;;;EAY1B,MAAA,GAAS,UAAA;EAZuC;EAchD,WAAA,OAAkB,IAAA,EAAM,CAAA,KAAM,CAAA;EAE9B,IAAA;AAAA;;UAQe,SAAA,SAAkB,cAAA;EAZxB;EAcT,IAAA,EAAM,SAAA;EAGN,QAAA;EACA,UAAA;EACA,MAAA;EACA,WAAA;AAAA;;KAQU,iBAAA,GAAoB,UAAA,GAAa,SAAA;AAhB7C;AAAA,UAuBiB,qBAAA;;EAEf,WAAA,GAAc,WAAA;EAzBmB;EA2BjC,OAAA;AAAA;;UAIe,sBAAA;EAxBf;EA0BA,WAAA,GAAc,WAAA;EAzBH;EA2BX,UAAA;EAnBU;EAqBV,MAAA;AAAA;;UAIe,sBAAA;EAlBA;EAoBf,WAAA,GAAc,WAAA;;EAEd,UAAA;EApBA;EAsBA,MAAA;EApBA;EAsBA,OAAA;AAAA;AAlBF;AAAA,UAsBiB,yBAAA;;EAEf,UAAA;AAAA;;UAIe,qBAAA;EAtBf;EAwBA,WAAA;EAxBM;EA0BN,UAAA;EAtBqC;EAwBrC,aAAA;AAAA;;UAIe,uBAAA;EAxBf;EA0BA,QAAA;AAAA;;UAIe,yBAAA;EAtBA;;;;EA2Bf,QAAA;EArBe;EAuBf,GAAA;;EAEA,GAAA;EAvBA;EAyBA,UAAA;AAAA;AAAA,KAOU,aAAA,IAAiB,UAAA,GAAa,SAAA,IAAa,qBAAA;AAAA,KAC3C,cAAA,IAAkB,UAAA,GAAa,SAAA,IAAa,sBAAA;AAAA,KAC5C,cAAA,IAAkB,UAAA,GAAa,SAAA,IAAa,sBAAA;AAAA,KAC5C,iBAAA,IAAqB,UAAA,GAAa,SAAA,IAC5C,yBAAA;AAAA,KACU,aAAA,IAAiB,UAAA,GAAa,SAAA,IAAa,qBAAA;AAAA,KAC3C,eAAA,IAAmB,UAAA,GAAa,SAAA,IAAa,qBAAA;AAAA,KAC7C,eAAA,IAAmB,UAAA,GAAa,SAAA,IAC1C,uBAAA;AAAA,KACU,iBAAA,IAAqB,UAAA,GAAa,SAAA,IAC5C,yBAAA;;UAOe,uBAAA;EACf,KAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;AAAA;;UAIe,mBAAA,SAA4B,uBAAA;EAC3C,QAAA,EAAU,MAAA;AAAA;;iBAII,YAAA,CAAa,IAAA,EAAM,SAAA,GAAY,IAAA,IAAQ,KAAA;;iBAWvC,YAAA,CAAa,KAAA,EAAO,iBAAA,GAAoB,KAAA,IAAS,UAAA;;iBASjD,WAAA,CAAY,KAAA,EAAO,iBAAA,GAAoB,KAAA,IAAS,SAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../src/react/charts/types.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\n\n// ============================================================================\n// Data Format Types\n// ============================================================================\n\n/** Supported data formats for analytics queries */\nexport type DataFormat = \"json\" | \"arrow\" | \"auto\";\n\n/** Chart orientation */\nexport type Orientation = \"vertical\" | \"horizontal\";\n\n/** Supported chart types */\nexport type ChartType =\n | \"bar\"\n | \"line\"\n | \"area\"\n | \"pie\"\n | \"donut\"\n | \"scatter\"\n | \"radar\"\n | \"heatmap\";\n\n/** Data that can be passed to unified charts */\nexport type ChartData = Table | Record<string, unknown>[];\n\n// ============================================================================\n// Base Props (shared by all charts)\n// ============================================================================\n\n/** Color palette types for different visualization needs */\nexport type ChartColorPalette = \"categorical\" | \"sequential\" | \"diverging\";\n\n/** Common visual and behavior props for all charts */\nexport interface ChartBaseProps {\n /** Chart title */\n title?: string;\n /** Show legend */\n showLegend?: boolean;\n /**\n * Color palette to use. Auto-selected based on chart type if not specified.\n * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n * - \"sequential\": Gradient for magnitude/intensity (heatmap)\n * - \"diverging\": Two-tone for positive/negative values\n */\n colorPalette?: ChartColorPalette;\n /** Custom colors for series (overrides colorPalette) */\n colors?: string[];\n /** Chart height in pixels @default 300 */\n height?: number;\n /** Additional CSS classes */\n className?: string;\n\n /** X-axis field key. Auto-detected from schema if not provided. */\n xKey?: string;\n /** Y-axis field key(s). Auto-detected from schema if not provided. */\n yKey?: string | string[];\n\n /** Accessibility label for screen readers */\n ariaLabel?: string;\n /** Test ID for automated testing */\n testId?: string;\n\n /** Additional ECharts options to merge */\n options?: Record<string, unknown>;\n}\n\n// ============================================================================\n// Query-based Props (chart fetches data)\n// ============================================================================\n\n/** Props for query-based data fetching */\nexport interface QueryProps extends ChartBaseProps {\n /** Analytics query key registered with analytics plugin */\n queryKey: string;\n /** Query parameters passed to the analytics endpoint */\n parameters?: Record<string, unknown>;\n /**\n * Data format to use\n * - \"json\": Use JSON format (smaller payloads, simpler)\n * - \"arrow\": Use Arrow format (faster for large datasets)\n * - \"auto\": Automatically select based on expected data size\n * @default \"auto\"\n */\n format?: DataFormat;\n /** Transform raw data before rendering */\n transformer?: <T>(data: T) => T;\n // Discriminator: cannot use direct data with query\n data?: never;\n}\n\n// ============================================================================\n// Data-based Props (chart receives data externally)\n// ============================================================================\n\n/** Props for direct data injection */\nexport interface DataProps extends ChartBaseProps {\n /** Arrow Table or JSON array */\n data: ChartData;\n\n // Discriminator: cannot use query props with direct data\n queryKey?: never;\n parameters?: never;\n format?: never;\n transformer?: never;\n}\n\n// ============================================================================\n// Union Types for Each Chart\n// ============================================================================\n\n/** Base union type - either query-based or data-based */\nexport type UnifiedChartProps = QueryProps | DataProps;\n\n// ============================================================================\n// Chart-Specific Props\n// ============================================================================\n\n/** Props specific to bar charts */\nexport interface BarChartSpecificProps {\n /** Chart orientation @default \"vertical\" */\n orientation?: Orientation;\n /** Stack bars */\n stacked?: boolean;\n}\n\n/** Props specific to line charts */\nexport interface LineChartSpecificProps {\n /** Chart orientation @default \"vertical\" */\n orientation?: Orientation;\n /** Show data point symbols @default false */\n showSymbol?: boolean;\n /** Smooth line curves @default true */\n smooth?: boolean;\n}\n\n/** Props specific to area charts */\nexport interface AreaChartSpecificProps {\n /** Chart orientation @default \"vertical\" */\n orientation?: Orientation;\n /** Show data point symbols @default false */\n showSymbol?: boolean;\n /** Smooth line curves @default true */\n smooth?: boolean;\n /** Stack areas @default false */\n stacked?: boolean;\n}\n\n/** Props specific to scatter charts */\nexport interface ScatterChartSpecificProps {\n /** Symbol size @default 8 */\n symbolSize?: number;\n}\n\n/** Props specific to pie/donut charts */\nexport interface PieChartSpecificProps {\n /** Inner radius for donut charts (0-100%) @default 0 */\n innerRadius?: number;\n /** Show labels on slices @default true */\n showLabels?: boolean;\n /** Label position @default \"outside\" */\n labelPosition?: \"outside\" | \"inside\" | \"center\";\n}\n\n/** Props specific to radar charts */\nexport interface RadarChartSpecificProps {\n /** Show area fill @default true */\n showArea?: boolean;\n}\n\n/** Props specific to heatmap charts */\nexport interface HeatmapChartSpecificProps {\n /**\n * Field key for the Y-axis categories.\n * For heatmaps, data should have: xKey (column), yAxisKey (row), and yKey (value).\n */\n yAxisKey?: string;\n /** Min value for color scale (auto-detected if not provided) */\n min?: number;\n /** Max value for color scale (auto-detected if not provided) */\n max?: number;\n /** Show value labels on cells @default false */\n showLabels?: boolean;\n}\n\n// ============================================================================\n// Complete Chart Props (union + specific)\n// ============================================================================\n\nexport type BarChartProps = (QueryProps | DataProps) & BarChartSpecificProps;\nexport type LineChartProps = (QueryProps | DataProps) & LineChartSpecificProps;\nexport type AreaChartProps = (QueryProps | DataProps) & AreaChartSpecificProps;\nexport type ScatterChartProps = (QueryProps | DataProps) &\n ScatterChartSpecificProps;\nexport type PieChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type DonutChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type RadarChartProps = (QueryProps | DataProps) &\n RadarChartSpecificProps;\nexport type HeatmapChartProps = (QueryProps | DataProps) &\n HeatmapChartSpecificProps;\n\n// ============================================================================\n// Internal Types\n// ============================================================================\n\n/** Base normalized data shared by all chart types */\nexport interface NormalizedChartDataBase {\n xData: (string | number)[];\n xField: string;\n yFields: string[];\n chartType: \"timeseries\" | \"categorical\";\n}\n\n/** Normalized chart data for rendering (standard charts) */\nexport interface NormalizedChartData extends NormalizedChartDataBase {\n yDataMap: Record<string, (string | number)[]>;\n}\n\n/** Type guard to check if data is an Arrow Table */\nexport function isArrowTable(data: ChartData): data is Table {\n return (\n data !== null &&\n typeof data === \"object\" &&\n \"schema\" in data &&\n \"numRows\" in data &&\n typeof (data as Table).getChild === \"function\"\n );\n}\n\n/** Type guard to check if props are query-based */\nexport function isQueryProps(props: UnifiedChartProps): props is QueryProps {\n return (\n \"queryKey\" in props &&\n typeof props.queryKey === \"string\" &&\n props.queryKey.length > 0\n );\n}\n\n/** Type guard to check if props are data-based */\nexport function isDataProps(props: UnifiedChartProps): props is DataProps {\n return \"data\" in props && props.data != null;\n}\n"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../src/react/charts/types.ts"],"sourcesContent":["import type { Table } from \"apache-arrow\";\n\n// ============================================================================\n// Data Format Types\n// ============================================================================\n\n/** Supported data formats for analytics queries */\nexport type DataFormat = \"json\" | \"arrow\" | \"auto\";\n\n/** Chart orientation */\nexport type Orientation = \"vertical\" | \"horizontal\";\n\n/** Supported chart types */\nexport type ChartType =\n | \"bar\"\n | \"line\"\n | \"area\"\n | \"pie\"\n | \"donut\"\n | \"scatter\"\n | \"radar\"\n | \"heatmap\";\n\n/** Data that can be passed to unified charts */\nexport type ChartData = Table | Record<string, unknown>[];\n\n// ============================================================================\n// Base Props (shared by all charts)\n// ============================================================================\n\n/** Color palette types for different visualization needs */\nexport type ChartColorPalette = \"categorical\" | \"sequential\" | \"diverging\";\n\n/** Resolved colors for the chart UI — axis text, titles, grid lines, and tooltip. */\nexport interface ChartUITokens {\n /** Axis tick labels (≈ `--muted-foreground`) */\n axisLabel: string;\n /** Axis names, legend, title, and visualMap text (≈ `--foreground`) */\n axisTitle: string;\n /** Axis, tick, and split (grid) lines (≈ `--border`) */\n grid: string;\n /** Tooltip popover background (≈ `--popover`) */\n tooltipBg: string;\n}\n\n/** Common visual and behavior props for all charts */\nexport interface ChartBaseProps {\n /** Chart title */\n title?: string;\n /** Show legend */\n showLegend?: boolean;\n /**\n * Color palette to use. Auto-selected based on chart type if not specified.\n * - \"categorical\": Distinct colors for different categories (bar, pie, line)\n * - \"sequential\": Gradient for magnitude/intensity (heatmap)\n * - \"diverging\": Two-tone for positive/negative values\n */\n colorPalette?: ChartColorPalette;\n /** Custom colors for series (overrides colorPalette) */\n colors?: string[];\n /** Chart height in pixels @default 300 */\n height?: number;\n /** Additional CSS classes */\n className?: string;\n\n /** X-axis field key. Auto-detected from schema if not provided. */\n xKey?: string;\n /** Y-axis field key(s). Auto-detected from schema if not provided. */\n yKey?: string | string[];\n\n /** Accessibility label for screen readers */\n ariaLabel?: string;\n /** Test ID for automated testing */\n testId?: string;\n\n /** Additional ECharts options to merge */\n options?: Record<string, unknown>;\n}\n\n// ============================================================================\n// Query-based Props (chart fetches data)\n// ============================================================================\n\n/** Props for query-based data fetching */\nexport interface QueryProps extends ChartBaseProps {\n /** Analytics query key registered with analytics plugin */\n queryKey: string;\n /** Query parameters passed to the analytics endpoint */\n parameters?: Record<string, unknown>;\n /**\n * Data format to use\n * - \"json\": Use JSON format (smaller payloads, simpler)\n * - \"arrow\": Use Arrow format (faster for large datasets)\n * - \"auto\": Automatically select based on expected data size\n * @default \"auto\"\n */\n format?: DataFormat;\n /** Transform raw data before rendering */\n transformer?: <T>(data: T) => T;\n // Discriminator: cannot use direct data with query\n data?: never;\n}\n\n// ============================================================================\n// Data-based Props (chart receives data externally)\n// ============================================================================\n\n/** Props for direct data injection */\nexport interface DataProps extends ChartBaseProps {\n /** Arrow Table or JSON array */\n data: ChartData;\n\n // Discriminator: cannot use query props with direct data\n queryKey?: never;\n parameters?: never;\n format?: never;\n transformer?: never;\n}\n\n// ============================================================================\n// Union Types for Each Chart\n// ============================================================================\n\n/** Base union type - either query-based or data-based */\nexport type UnifiedChartProps = QueryProps | DataProps;\n\n// ============================================================================\n// Chart-Specific Props\n// ============================================================================\n\n/** Props specific to bar charts */\nexport interface BarChartSpecificProps {\n /** Chart orientation @default \"vertical\" */\n orientation?: Orientation;\n /** Stack bars */\n stacked?: boolean;\n}\n\n/** Props specific to line charts */\nexport interface LineChartSpecificProps {\n /** Chart orientation @default \"vertical\" */\n orientation?: Orientation;\n /** Show data point symbols @default false */\n showSymbol?: boolean;\n /** Smooth line curves @default true */\n smooth?: boolean;\n}\n\n/** Props specific to area charts */\nexport interface AreaChartSpecificProps {\n /** Chart orientation @default \"vertical\" */\n orientation?: Orientation;\n /** Show data point symbols @default false */\n showSymbol?: boolean;\n /** Smooth line curves @default true */\n smooth?: boolean;\n /** Stack areas @default false */\n stacked?: boolean;\n}\n\n/** Props specific to scatter charts */\nexport interface ScatterChartSpecificProps {\n /** Symbol size @default 8 */\n symbolSize?: number;\n}\n\n/** Props specific to pie/donut charts */\nexport interface PieChartSpecificProps {\n /** Inner radius for donut charts (0-100%) @default 0 */\n innerRadius?: number;\n /** Show labels on slices @default true */\n showLabels?: boolean;\n /** Label position @default \"outside\" */\n labelPosition?: \"outside\" | \"inside\" | \"center\";\n}\n\n/** Props specific to radar charts */\nexport interface RadarChartSpecificProps {\n /** Show area fill @default true */\n showArea?: boolean;\n}\n\n/** Props specific to heatmap charts */\nexport interface HeatmapChartSpecificProps {\n /**\n * Field key for the Y-axis categories.\n * For heatmaps, data should have: xKey (column), yAxisKey (row), and yKey (value).\n */\n yAxisKey?: string;\n /** Min value for color scale (auto-detected if not provided) */\n min?: number;\n /** Max value for color scale (auto-detected if not provided) */\n max?: number;\n /** Show value labels on cells @default false */\n showLabels?: boolean;\n}\n\n// ============================================================================\n// Complete Chart Props (union + specific)\n// ============================================================================\n\nexport type BarChartProps = (QueryProps | DataProps) & BarChartSpecificProps;\nexport type LineChartProps = (QueryProps | DataProps) & LineChartSpecificProps;\nexport type AreaChartProps = (QueryProps | DataProps) & AreaChartSpecificProps;\nexport type ScatterChartProps = (QueryProps | DataProps) &\n ScatterChartSpecificProps;\nexport type PieChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type DonutChartProps = (QueryProps | DataProps) & PieChartSpecificProps;\nexport type RadarChartProps = (QueryProps | DataProps) &\n RadarChartSpecificProps;\nexport type HeatmapChartProps = (QueryProps | DataProps) &\n HeatmapChartSpecificProps;\n\n// ============================================================================\n// Internal Types\n// ============================================================================\n\n/** Base normalized data shared by all chart types */\nexport interface NormalizedChartDataBase {\n xData: (string | number)[];\n xField: string;\n yFields: string[];\n chartType: \"timeseries\" | \"categorical\";\n}\n\n/** Normalized chart data for rendering (standard charts) */\nexport interface NormalizedChartData extends NormalizedChartDataBase {\n yDataMap: Record<string, (string | number)[]>;\n}\n\n/** Type guard to check if data is an Arrow Table */\nexport function isArrowTable(data: ChartData): data is Table {\n return (\n data !== null &&\n typeof data === \"object\" &&\n \"schema\" in data &&\n \"numRows\" in data &&\n typeof (data as Table).getChild === \"function\"\n );\n}\n\n/** Type guard to check if props are query-based */\nexport function isQueryProps(props: UnifiedChartProps): props is QueryProps {\n return (\n \"queryKey\" in props &&\n typeof props.queryKey === \"string\" &&\n props.queryKey.length > 0\n );\n}\n\n/** Type guard to check if props are data-based */\nexport function isDataProps(props: UnifiedChartProps): props is DataProps {\n return \"data\" in props && props.data != null;\n}\n"],"mappings":";;AAuOA,SAAgB,aAAa,MAAgC;AAC3D,QACE,SAAS,QACT,OAAO,SAAS,YAChB,YAAY,QACZ,aAAa,QACb,OAAQ,KAAe,aAAa;;;AAKxC,SAAgB,aAAa,OAA+C;AAC1E,QACE,cAAc,SACd,OAAO,MAAM,aAAa,YAC1B,MAAM,SAAS,SAAS;;;AAK5B,SAAgB,YAAY,OAA8C;AACxE,QAAO,UAAU,SAAS,MAAM,QAAQ"}
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { GenieAttachmentResponse, GenieMessageResponse, GenieStatementResponse, GenieStreamEvent } from "../shared/src/genie.js";
|
|
2
2
|
import { DATE_FIELD_PATTERNS, METADATA_DATE_PATTERNS, NAME_FIELD_PATTERNS } from "../js/constants.js";
|
|
3
|
-
import { AreaChartProps, AreaChartSpecificProps, BarChartProps, BarChartSpecificProps, ChartBaseProps, ChartColorPalette, ChartData, ChartType, DataFormat, DataProps, DonutChartProps, HeatmapChartProps, HeatmapChartSpecificProps, LineChartProps, LineChartSpecificProps, NormalizedChartData, NormalizedChartDataBase, Orientation, PieChartProps, PieChartSpecificProps, QueryProps, RadarChartProps, RadarChartSpecificProps, ScatterChartProps, ScatterChartSpecificProps, UnifiedChartProps, isArrowTable, isDataProps, isQueryProps } from "./charts/types.js";
|
|
3
|
+
import { AreaChartProps, AreaChartSpecificProps, BarChartProps, BarChartSpecificProps, ChartBaseProps, ChartColorPalette, ChartData, ChartType, ChartUITokens, DataFormat, DataProps, DonutChartProps, HeatmapChartProps, HeatmapChartSpecificProps, LineChartProps, LineChartSpecificProps, NormalizedChartData, NormalizedChartDataBase, Orientation, PieChartProps, PieChartSpecificProps, QueryProps, RadarChartProps, RadarChartSpecificProps, ScatterChartProps, ScatterChartSpecificProps, UnifiedChartProps, isArrowTable, isDataProps, isQueryProps } from "./charts/types.js";
|
|
4
4
|
import { AreaChart } from "./charts/area/index.js";
|
|
5
5
|
import { BarChart } from "./charts/bar/index.js";
|
|
6
6
|
import { HeatmapChart } from "./charts/heatmap/index.js";
|
|
@@ -16,7 +16,7 @@ import { LoadingSkeleton, ResourceWaitingPlaceholder } from "./charts/loading.js
|
|
|
16
16
|
import { ChartWrapper, ChartWrapperProps } from "./charts/wrapper.js";
|
|
17
17
|
import { NormalizedHeatmapData, normalizeChartData, normalizeHeatmapData } from "./charts/normalize.js";
|
|
18
18
|
import { CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL } from "./charts/constants.js";
|
|
19
|
-
import { useAllThemeColors, useThemeColors } from "./charts/theme.js";
|
|
19
|
+
import { useAllThemeColors, useChartUITokens, useThemeColors } from "./charts/theme.js";
|
|
20
20
|
import { createTimeSeriesData, formatLabel, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel } from "./charts/utils.js";
|
|
21
21
|
import { CartesianContext, HeatmapContext, OptionBuilderContext, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption } from "./charts/options.js";
|
|
22
22
|
import "./charts/index.js";
|
|
@@ -105,4 +105,4 @@ import { Textarea } from "./ui/textarea.js";
|
|
|
105
105
|
import { Toggle, toggleVariants } from "./ui/toggle.js";
|
|
106
106
|
import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group.js";
|
|
107
107
|
import "./ui/index.js";
|
|
108
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentChatEvent, AggregatedResourceStatus, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnalyticsFormat, AreaChart, AreaChartProps, AreaChartSpecificProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BarChartProps, BarChartSpecificProps, BaseChart, BaseChartProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CartesianContext, ChartBaseProps, ChartColorPalette, ChartConfig, ChartContainer, ChartData, ChartInference, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartType, ChartWrapper, ChartWrapperProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColumnCategory, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataFormat, DataProps, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryEntry, DirectoryList, DirectoryListProps, DonutChart, DonutChartProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileBreadcrumbProps, FileBrowserLabels, FileEntry, FileEntryProps, FilePreview, FilePreviewPanel, FilePreviewPanelProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieAttachmentResponse, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieChatProps, GenieChatStatus, GenieColumnMeta, GenieMessageItem, GenieMessageResponse, GenieQueryVisualization, GenieStatementResponse, GenieStreamEvent, HeatmapChart, HeatmapChartProps, HeatmapChartSpecificProps, HeatmapContext, HoverCard, HoverCardContent, HoverCardTrigger, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LineChartProps, LineChartSpecificProps, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, NewFolderInputProps, NormalizedChartData, NormalizedChartDataBase, NormalizedHeatmapData, OptionBuilderContext, Orientation, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, PieChartProps, PieChartSpecificProps, PluginRegistry, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, QueryProps, QueryRegistry, RadarChart, RadarChartProps, RadarChartSpecificProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceKindRenderer, ResourceSeverity, ResourceStatus, ResourceStatusFilter, ResourceStatusIndicator, ResourceStatusIndicatorProps, ResourceStatusProvider, ResourceStatusProviderProps, ResourceStatusToasterOptions, ResourceWaitingPlaceholder, ScatterChart, ScatterChartProps, ScatterChartSpecificProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServingAlias, ServingEndpointRegistry, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, TERMINAL_STATUSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransformedGenieData, TypedArrowTable, UnifiedChartProps, UseAgentChatOptions, UseAgentChatResult, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseChartDataOptions, UseChartDataResult, UseGenieChatOptions, UseGenieChatReturn, UseServingInvokeOptions, UseServingInvokeResult, UseServingStreamOptions, UseServingStreamResult, WarehouseState, WarehouseStatus, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
|
|
108
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AgentChatEvent, AggregatedResourceStatus, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnalyticsFormat, AreaChart, AreaChartProps, AreaChartSpecificProps, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BarChartProps, BarChartSpecificProps, BaseChart, BaseChartProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CartesianContext, ChartBaseProps, ChartColorPalette, ChartConfig, ChartContainer, ChartData, ChartInference, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartType, ChartUITokens, ChartWrapper, ChartWrapperProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColumnCategory, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataFormat, DataProps, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryEntry, DirectoryList, DirectoryListProps, DonutChart, DonutChartProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileBreadcrumbProps, FileBrowserLabels, FileEntry, FileEntryProps, FilePreview, FilePreviewPanel, FilePreviewPanelProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieAttachmentResponse, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieChatProps, GenieChatStatus, GenieColumnMeta, GenieMessageItem, GenieMessageResponse, GenieQueryVisualization, GenieStatementResponse, GenieStreamEvent, HeatmapChart, HeatmapChartProps, HeatmapChartSpecificProps, HeatmapContext, HoverCard, HoverCardContent, HoverCardTrigger, InferResultByFormat, InferRowType, InferServingChunk, InferServingRequest, InferServingResponse, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LineChartProps, LineChartSpecificProps, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, NewFolderInputProps, NormalizedChartData, NormalizedChartDataBase, NormalizedHeatmapData, OptionBuilderContext, Orientation, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, PieChartProps, PieChartSpecificProps, PluginRegistry, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, QueryProps, QueryRegistry, RadarChart, RadarChartProps, RadarChartSpecificProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceKindRenderer, ResourceSeverity, ResourceStatus, ResourceStatusFilter, ResourceStatusIndicator, ResourceStatusIndicatorProps, ResourceStatusProvider, ResourceStatusProviderProps, ResourceStatusToasterOptions, ResourceWaitingPlaceholder, ScatterChart, ScatterChartProps, ScatterChartSpecificProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ServingAlias, ServingEndpointRegistry, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, TERMINAL_STATUSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransformedGenieData, TypedArrowTable, UnifiedChartProps, UseAgentChatOptions, UseAgentChatResult, UseAnalyticsQueryOptions, UseAnalyticsQueryResult, UseChartDataOptions, UseChartDataResult, UseGenieChatOptions, UseGenieChatReturn, UseServingInvokeOptions, UseServingInvokeResult, UseServingStreamOptions, UseServingStreamResult, WarehouseState, WarehouseStatus, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
|
package/dist/react/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import { isArrowTable, isDataProps, isQueryProps } from "./charts/types.js";
|
|
|
4
4
|
import { createTimeSeriesData, formatLabel, sortTimeSeriesAscending, toChartArray, toChartValue, truncateLabel } from "./charts/utils.js";
|
|
5
5
|
import { normalizeChartData, normalizeHeatmapData } from "./charts/normalize.js";
|
|
6
6
|
import { buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption } from "./charts/options.js";
|
|
7
|
-
import { useAllThemeColors, useThemeColors } from "./charts/theme.js";
|
|
7
|
+
import { useAllThemeColors, useChartUITokens, useThemeColors } from "./charts/theme.js";
|
|
8
8
|
import { BaseChart } from "./charts/base.js";
|
|
9
9
|
import { ResourceStatusProvider, useResourceStatus, useResourceStatusPublisher } from "./hooks/use-resource-status.js";
|
|
10
10
|
import { useAnalyticsQuery } from "./hooks/use-analytics-query.js";
|
|
@@ -102,4 +102,4 @@ import { Toggle, toggleVariants } from "./ui/toggle.js";
|
|
|
102
102
|
import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group.js";
|
|
103
103
|
import "./ui/index.js";
|
|
104
104
|
|
|
105
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BaseChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartWrapper, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryList, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, HeatmapChart, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceStatusIndicator, ResourceStatusProvider, ResourceWaitingPlaceholder, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
|
|
105
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BaseChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartWrapper, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryList, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, HeatmapChart, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, LoadingSkeleton, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ResourceStatusIndicator, ResourceStatusProvider, ResourceWaitingPlaceholder, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useChartUITokens, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useResourceStatus, useResourceStatusPublisher, useResourceStatusToaster, useServingInvoke, useServingStream, useSidebar, useThemeColors };
|
package/dist/styles.css
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
6
|
--radius: 0.625rem;
|
|
7
|
+
color-scheme: light;
|
|
7
8
|
--background: oklch(1 0 0);
|
|
8
9
|
--foreground: oklch(0.141 0.005 285.823);
|
|
9
10
|
--card: oklch(1 0 0);
|
|
@@ -67,6 +68,15 @@
|
|
|
67
68
|
--chart-div-7: hsla(10, 72%, 50%, 1);
|
|
68
69
|
--chart-div-8: hsla(10, 80%, 40%, 1); /* Strong positive */
|
|
69
70
|
|
|
71
|
+
/* ========================================
|
|
72
|
+
CHART UI TOKENS - axis labels, titles, grid lines, tooltip
|
|
73
|
+
≈ muted-foreground / foreground / border / popover (hsla so ECharts can parse)
|
|
74
|
+
======================================== */
|
|
75
|
+
--chart-axis-label: hsla(240, 4%, 46%, 1);
|
|
76
|
+
--chart-axis-title: hsla(240, 6%, 10%, 1);
|
|
77
|
+
--chart-grid: hsla(240, 5%, 90%, 1);
|
|
78
|
+
--chart-tooltip-bg: hsla(0, 0%, 100%, 1);
|
|
79
|
+
|
|
70
80
|
/* Legacy aliases (for backwards compatibility) */
|
|
71
81
|
--chart-1: var(--chart-cat-1);
|
|
72
82
|
--chart-2: var(--chart-cat-2);
|
|
@@ -88,6 +98,7 @@
|
|
|
88
98
|
|
|
89
99
|
/* Dark theme via class (takes precedence over media query) */
|
|
90
100
|
.dark {
|
|
101
|
+
color-scheme: dark;
|
|
91
102
|
--background: oklch(0.141 0.005 285.823);
|
|
92
103
|
--foreground: oklch(0.985 0 0);
|
|
93
104
|
--card: oklch(0.21 0.006 285.885);
|
|
@@ -111,11 +122,47 @@
|
|
|
111
122
|
--border: oklch(1 0 0 / 10%);
|
|
112
123
|
--input: oklch(1 0 0 / 15%);
|
|
113
124
|
--ring: oklch(0.552 0.016 285.938);
|
|
114
|
-
|
|
115
|
-
--chart-
|
|
116
|
-
--chart-
|
|
117
|
-
--chart-
|
|
118
|
-
--chart-
|
|
125
|
+
/* CATEGORICAL */
|
|
126
|
+
--chart-cat-1: hsla(217, 91%, 65%, 1); /* Blue */
|
|
127
|
+
--chart-cat-2: hsla(160, 65%, 55%, 1); /* Teal */
|
|
128
|
+
--chart-cat-3: hsla(291, 60%, 65%, 1); /* Purple */
|
|
129
|
+
--chart-cat-4: hsla(38, 95%, 60%, 1); /* Amber */
|
|
130
|
+
--chart-cat-5: hsla(349, 80%, 62%, 1); /* Rose */
|
|
131
|
+
--chart-cat-6: hsla(189, 85%, 52%, 1); /* Cyan */
|
|
132
|
+
--chart-cat-7: hsla(271, 65%, 70%, 1); /* Lavender */
|
|
133
|
+
--chart-cat-8: hsla(142, 60%, 55%, 1); /* Emerald */
|
|
134
|
+
/* SEQUENTIAL (inverted for dark mode) */
|
|
135
|
+
--chart-seq-1: hsla(217, 50%, 25%, 1);
|
|
136
|
+
--chart-seq-2: hsla(217, 55%, 35%, 1);
|
|
137
|
+
--chart-seq-3: hsla(217, 60%, 45%, 1);
|
|
138
|
+
--chart-seq-4: hsla(217, 65%, 55%, 1);
|
|
139
|
+
--chart-seq-5: hsla(217, 70%, 62%, 1);
|
|
140
|
+
--chart-seq-6: hsla(217, 75%, 70%, 1);
|
|
141
|
+
--chart-seq-7: hsla(217, 80%, 78%, 1);
|
|
142
|
+
--chart-seq-8: hsla(217, 85%, 88%, 1);
|
|
143
|
+
/* DIVERGING */
|
|
144
|
+
--chart-div-1: hsla(217, 85%, 70%, 1);
|
|
145
|
+
--chart-div-2: hsla(217, 70%, 60%, 1);
|
|
146
|
+
--chart-div-3: hsla(217, 50%, 50%, 1);
|
|
147
|
+
--chart-div-4: hsla(217, 25%, 40%, 1);
|
|
148
|
+
--chart-div-5: hsla(10, 25%, 40%, 1);
|
|
149
|
+
--chart-div-6: hsla(10, 55%, 50%, 1);
|
|
150
|
+
--chart-div-7: hsla(10, 70%, 58%, 1);
|
|
151
|
+
--chart-div-8: hsla(10, 80%, 65%, 1);
|
|
152
|
+
/* Legacy aliases */
|
|
153
|
+
--chart-1: var(--chart-cat-1);
|
|
154
|
+
--chart-2: var(--chart-cat-2);
|
|
155
|
+
--chart-3: var(--chart-cat-3);
|
|
156
|
+
--chart-4: var(--chart-cat-4);
|
|
157
|
+
--chart-5: var(--chart-cat-5);
|
|
158
|
+
--chart-6: var(--chart-cat-6);
|
|
159
|
+
--chart-7: var(--chart-cat-7);
|
|
160
|
+
--chart-8: var(--chart-cat-8);
|
|
161
|
+
/* Chart UI tokens (≈ muted-foreground / foreground / border / popover, hsla for ECharts) */
|
|
162
|
+
--chart-axis-label: hsla(240, 5%, 65%, 1);
|
|
163
|
+
--chart-axis-title: hsla(0, 0%, 98%, 1);
|
|
164
|
+
--chart-grid: hsla(0, 0%, 100%, 0.1);
|
|
165
|
+
--chart-tooltip-bg: hsla(240, 6%, 13%, 1);
|
|
119
166
|
--sidebar: oklch(0.21 0.006 285.885);
|
|
120
167
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
121
168
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
@@ -129,6 +176,7 @@
|
|
|
129
176
|
/* Dark theme via media query (fallback when no class is set) */
|
|
130
177
|
@media (prefers-color-scheme: dark) {
|
|
131
178
|
:root:not(.light) {
|
|
179
|
+
color-scheme: dark;
|
|
132
180
|
--background: oklch(0.141 0.005 285.823);
|
|
133
181
|
--foreground: oklch(0.985 0 0);
|
|
134
182
|
--card: oklch(0.21 0.006 285.885);
|
|
@@ -193,6 +241,12 @@
|
|
|
193
241
|
--chart-div-7: hsla(10, 70%, 58%, 1);
|
|
194
242
|
--chart-div-8: hsla(10, 80%, 65%, 1); /* Strong positive (red) */
|
|
195
243
|
|
|
244
|
+
/* Chart UI tokens (≈ muted-foreground / foreground / border / popover, hsla for ECharts) */
|
|
245
|
+
--chart-axis-label: hsla(240, 5%, 65%, 1);
|
|
246
|
+
--chart-axis-title: hsla(0, 0%, 98%, 1);
|
|
247
|
+
--chart-grid: hsla(0, 0%, 100%, 0.1);
|
|
248
|
+
--chart-tooltip-bg: hsla(240, 6%, 13%, 1);
|
|
249
|
+
|
|
196
250
|
/* Legacy aliases */
|
|
197
251
|
--chart-1: var(--chart-cat-1);
|
|
198
252
|
--chart-2: var(--chart-cat-2);
|
|
@@ -276,6 +330,12 @@
|
|
|
276
330
|
--color-chart-div-6: var(--chart-div-6);
|
|
277
331
|
--color-chart-div-7: var(--chart-div-7);
|
|
278
332
|
--color-chart-div-8: var(--chart-div-8);
|
|
333
|
+
|
|
334
|
+
/* Chart UI tokens */
|
|
335
|
+
--color-chart-axis-label: var(--chart-axis-label);
|
|
336
|
+
--color-chart-axis-title: var(--chart-axis-title);
|
|
337
|
+
--color-chart-grid: var(--chart-grid);
|
|
338
|
+
--color-chart-tooltip-bg: var(--chart-tooltip-bg);
|
|
279
339
|
--color-sidebar: var(--sidebar);
|
|
280
340
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
281
341
|
--color-sidebar-primary: var(--sidebar-primary);
|