@nuvui/charts 0.0.0-stage → 0.1.0
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/LICENSE +21 -0
- package/README.md +75 -2
- package/dist/components/chart/chart-container.cjs +62 -0
- package/dist/components/chart/chart-container.d.cts +44 -0
- package/dist/components/chart/chart-container.d.ts +44 -0
- package/dist/components/chart/chart-container.js +62 -0
- package/dist/components/chart/chart-legend.cjs +55 -0
- package/dist/components/chart/chart-legend.d.cts +29 -0
- package/dist/components/chart/chart-legend.d.ts +29 -0
- package/dist/components/chart/chart-legend.js +54 -0
- package/dist/components/chart/chart-table.cjs +42 -0
- package/dist/components/chart/chart-table.d.cts +41 -0
- package/dist/components/chart/chart-table.d.ts +41 -0
- package/dist/components/chart/chart-table.js +42 -0
- package/dist/components/chart/chart-tooltip.cjs +99 -0
- package/dist/components/chart/chart-tooltip.d.cts +41 -0
- package/dist/components/chart/chart-tooltip.d.ts +41 -0
- package/dist/components/chart/chart-tooltip.js +97 -0
- package/dist/components/chart/config.cjs +81 -0
- package/dist/components/chart/config.d.cts +45 -0
- package/dist/components/chart/config.d.ts +45 -0
- package/dist/components/chart/config.js +75 -0
- package/dist/components/chart/context.cjs +20 -0
- package/dist/components/chart/context.d.cts +6 -0
- package/dist/components/chart/context.d.ts +6 -0
- package/dist/components/chart/context.js +18 -0
- package/dist/components/chart/index.cjs +15 -0
- package/dist/components/chart/index.d.cts +8 -0
- package/dist/components/chart/index.d.ts +8 -0
- package/dist/components/chart/index.js +6 -0
- package/dist/components/chart/patterns.cjs +81 -0
- package/dist/components/chart/patterns.js +81 -0
- package/dist/components/chart/swatch.cjs +34 -0
- package/dist/components/chart/swatch.d.cts +7 -0
- package/dist/components/chart/swatch.d.ts +7 -0
- package/dist/components/chart/swatch.js +34 -0
- package/dist/css/chart.css +199 -0
- package/dist/index.cjs +15 -0
- package/dist/index.d.cts +9 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +6 -0
- package/dist/styles.css +199 -0
- package/dist/utils/cx.cjs +6 -0
- package/dist/utils/cx.js +6 -0
- package/package.json +96 -3
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
const require_cx = require("../../utils/cx.cjs");
|
|
3
|
+
const require_context = require("./context.cjs");
|
|
4
|
+
const require_swatch = require("./swatch.cjs");
|
|
5
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
|
+
let recharts = require("recharts");
|
|
7
|
+
//#region src/components/chart/chart-tooltip.tsx
|
|
8
|
+
function seriesOf(config, item, nameKey, from = "tooltip") {
|
|
9
|
+
const row = typeof item.payload === "object" && item.payload !== null ? item.payload : void 0;
|
|
10
|
+
const candidates = [
|
|
11
|
+
nameKey ? row?.[nameKey] ?? item[nameKey] : void 0,
|
|
12
|
+
from === "legend" ? item.value : item.name,
|
|
13
|
+
item.dataKey
|
|
14
|
+
];
|
|
15
|
+
for (const candidate of candidates) if ((typeof candidate === "string" || typeof candidate === "number") && Object.hasOwn(config, candidate)) return String(candidate);
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* What's inside a chart's tooltip. `ChartTooltip` draws it by itself. Use it
|
|
19
|
+
* directly to pass Recharts' `Tooltip` a `content` of your own making.
|
|
20
|
+
*/
|
|
21
|
+
function ChartTooltipContent({ active, payload, label, labelFormatter, formatter, indicator = "square", hideLabel = false, nameKey, formatValue, className }) {
|
|
22
|
+
const chart = require_context.useChart("ChartTooltipContent");
|
|
23
|
+
const format = formatValue ?? chart.formatValue;
|
|
24
|
+
const items = (payload ?? []).filter((item) => item.type !== "none" && !item.hide);
|
|
25
|
+
const shown = active && items.length > 0;
|
|
26
|
+
let heading = null;
|
|
27
|
+
if (shown && !hideLabel) heading = labelFormatter ? labelFormatter(label, items) : typeof label === "string" && Object.hasOwn(chart.config, label) ? chart.config[label]?.label ?? label : label;
|
|
28
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
29
|
+
className: require_cx.cx("nuv-chart__tooltip", className),
|
|
30
|
+
role: "status",
|
|
31
|
+
"aria-live": "assertive",
|
|
32
|
+
hidden: !shown,
|
|
33
|
+
children: [heading !== null && heading !== void 0 && heading !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
34
|
+
className: "nuv-chart__tooltip-label",
|
|
35
|
+
children: heading
|
|
36
|
+
}) : null, shown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
|
|
37
|
+
className: "nuv-chart__tooltip-items",
|
|
38
|
+
children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Item, {
|
|
39
|
+
item,
|
|
40
|
+
index,
|
|
41
|
+
items,
|
|
42
|
+
config: chart.config,
|
|
43
|
+
nameKey,
|
|
44
|
+
indicator,
|
|
45
|
+
format,
|
|
46
|
+
formatter
|
|
47
|
+
}, `${item.graphicalItemId}-${String(item.dataKey)}-${String(item.name)}`))
|
|
48
|
+
}) : null]
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
function Item({ item, index, items, config, nameKey, indicator, format, formatter }) {
|
|
52
|
+
const series = seriesOf(config, item, nameKey);
|
|
53
|
+
let name = (series && config[series]?.label) ?? item.name;
|
|
54
|
+
let value = require_context.show(item.value, series ?? String(item.name), format);
|
|
55
|
+
const own = item.formatter ?? formatter;
|
|
56
|
+
if (own) {
|
|
57
|
+
const result = own(item.value, item.name, item, index, items);
|
|
58
|
+
if (Array.isArray(result)) [value, name] = result;
|
|
59
|
+
else value = result;
|
|
60
|
+
}
|
|
61
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
|
|
62
|
+
className: "nuv-chart__tooltip-item",
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_swatch.Swatch, {
|
|
65
|
+
series,
|
|
66
|
+
color: item.color ?? item.fill,
|
|
67
|
+
indicator
|
|
68
|
+
}),
|
|
69
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
70
|
+
className: "nuv-chart__tooltip-name",
|
|
71
|
+
children: name
|
|
72
|
+
}),
|
|
73
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
74
|
+
className: "nuv-chart__tooltip-value",
|
|
75
|
+
children: [value, item.unit]
|
|
76
|
+
})
|
|
77
|
+
]
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Recharts' `Tooltip`, drawn like the rest of the library. It takes
|
|
82
|
+
* everything `Tooltip` does.
|
|
83
|
+
*/
|
|
84
|
+
function ChartTooltip({ indicator, hideLabel, nameKey, formatValue, className, content, ...props }) {
|
|
85
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(recharts.Tooltip, {
|
|
86
|
+
content: content ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartTooltipContent, {
|
|
87
|
+
indicator,
|
|
88
|
+
hideLabel,
|
|
89
|
+
nameKey,
|
|
90
|
+
formatValue,
|
|
91
|
+
className
|
|
92
|
+
}),
|
|
93
|
+
...props
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
//#endregion
|
|
97
|
+
exports.ChartTooltip = ChartTooltip;
|
|
98
|
+
exports.ChartTooltipContent = ChartTooltipContent;
|
|
99
|
+
exports.seriesOf = seriesOf;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import "./config.cjs";
|
|
2
|
+
import { ChartValueFormatter } from "./context.cjs";
|
|
3
|
+
import { ChartIndicator } from "./swatch.cjs";
|
|
4
|
+
import { TooltipContentProps, TooltipProps } from "recharts";
|
|
5
|
+
//#region src/components/chart/chart-tooltip.d.ts
|
|
6
|
+
type Value = number | string | ReadonlyArray<number | string>;
|
|
7
|
+
type Name = number | string;
|
|
8
|
+
export interface ChartTooltipContentOwnProps {
|
|
9
|
+
/**
|
|
10
|
+
* The sample drawn next to each series.
|
|
11
|
+
* @default "square"
|
|
12
|
+
*/
|
|
13
|
+
indicator?: ChartIndicator;
|
|
14
|
+
/**
|
|
15
|
+
* Leaves out the line that says which point this is, for a chart where
|
|
16
|
+
* each row already says it.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
hideLabel?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* The field of a data row that holds the series' key. Only needed when
|
|
22
|
+
* neither the series' name nor its data key is a key of the config.
|
|
23
|
+
*/
|
|
24
|
+
nameKey?: string;
|
|
25
|
+
/** How a value is written. The container's `formatValue` by default. */
|
|
26
|
+
formatValue?: ChartValueFormatter;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
export type ChartTooltipContentProps = ChartTooltipContentOwnProps & Partial<TooltipContentProps<Value, Name>>;
|
|
30
|
+
/**
|
|
31
|
+
* What's inside a chart's tooltip. `ChartTooltip` draws it by itself. Use it
|
|
32
|
+
* directly to pass Recharts' `Tooltip` a `content` of your own making.
|
|
33
|
+
*/
|
|
34
|
+
export declare function ChartTooltipContent({ active, payload, label, labelFormatter, formatter, indicator, hideLabel, nameKey, formatValue, className }: ChartTooltipContentProps): import("react").JSX.Element;
|
|
35
|
+
export type ChartTooltipProps = ChartTooltipContentOwnProps & TooltipProps<Value, Name>;
|
|
36
|
+
/**
|
|
37
|
+
* Recharts' `Tooltip`, drawn like the rest of the library. It takes
|
|
38
|
+
* everything `Tooltip` does.
|
|
39
|
+
*/
|
|
40
|
+
export declare function ChartTooltip({ indicator, hideLabel, nameKey, formatValue, className, content, ...props }: ChartTooltipProps): import("react").JSX.Element;
|
|
41
|
+
//#endregion
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import "./config.js";
|
|
2
|
+
import { ChartValueFormatter } from "./context.js";
|
|
3
|
+
import { ChartIndicator } from "./swatch.js";
|
|
4
|
+
import { TooltipContentProps, TooltipProps } from "recharts";
|
|
5
|
+
//#region src/components/chart/chart-tooltip.d.ts
|
|
6
|
+
type Value = number | string | ReadonlyArray<number | string>;
|
|
7
|
+
type Name = number | string;
|
|
8
|
+
export interface ChartTooltipContentOwnProps {
|
|
9
|
+
/**
|
|
10
|
+
* The sample drawn next to each series.
|
|
11
|
+
* @default "square"
|
|
12
|
+
*/
|
|
13
|
+
indicator?: ChartIndicator;
|
|
14
|
+
/**
|
|
15
|
+
* Leaves out the line that says which point this is, for a chart where
|
|
16
|
+
* each row already says it.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
hideLabel?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* The field of a data row that holds the series' key. Only needed when
|
|
22
|
+
* neither the series' name nor its data key is a key of the config.
|
|
23
|
+
*/
|
|
24
|
+
nameKey?: string;
|
|
25
|
+
/** How a value is written. The container's `formatValue` by default. */
|
|
26
|
+
formatValue?: ChartValueFormatter;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
export type ChartTooltipContentProps = ChartTooltipContentOwnProps & Partial<TooltipContentProps<Value, Name>>;
|
|
30
|
+
/**
|
|
31
|
+
* What's inside a chart's tooltip. `ChartTooltip` draws it by itself. Use it
|
|
32
|
+
* directly to pass Recharts' `Tooltip` a `content` of your own making.
|
|
33
|
+
*/
|
|
34
|
+
export declare function ChartTooltipContent({ active, payload, label, labelFormatter, formatter, indicator, hideLabel, nameKey, formatValue, className }: ChartTooltipContentProps): import("react").JSX.Element;
|
|
35
|
+
export type ChartTooltipProps = ChartTooltipContentOwnProps & TooltipProps<Value, Name>;
|
|
36
|
+
/**
|
|
37
|
+
* Recharts' `Tooltip`, drawn like the rest of the library. It takes
|
|
38
|
+
* everything `Tooltip` does.
|
|
39
|
+
*/
|
|
40
|
+
export declare function ChartTooltip({ indicator, hideLabel, nameKey, formatValue, className, content, ...props }: ChartTooltipProps): import("react").JSX.Element;
|
|
41
|
+
//#endregion
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cx } from "../../utils/cx.js";
|
|
3
|
+
import { show, useChart } from "./context.js";
|
|
4
|
+
import { Swatch } from "./swatch.js";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { Tooltip } from "recharts";
|
|
7
|
+
//#region src/components/chart/chart-tooltip.tsx
|
|
8
|
+
function seriesOf(config, item, nameKey, from = "tooltip") {
|
|
9
|
+
const row = typeof item.payload === "object" && item.payload !== null ? item.payload : void 0;
|
|
10
|
+
const candidates = [
|
|
11
|
+
nameKey ? row?.[nameKey] ?? item[nameKey] : void 0,
|
|
12
|
+
from === "legend" ? item.value : item.name,
|
|
13
|
+
item.dataKey
|
|
14
|
+
];
|
|
15
|
+
for (const candidate of candidates) if ((typeof candidate === "string" || typeof candidate === "number") && Object.hasOwn(config, candidate)) return String(candidate);
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* What's inside a chart's tooltip. `ChartTooltip` draws it by itself. Use it
|
|
19
|
+
* directly to pass Recharts' `Tooltip` a `content` of your own making.
|
|
20
|
+
*/
|
|
21
|
+
function ChartTooltipContent({ active, payload, label, labelFormatter, formatter, indicator = "square", hideLabel = false, nameKey, formatValue, className }) {
|
|
22
|
+
const chart = useChart("ChartTooltipContent");
|
|
23
|
+
const format = formatValue ?? chart.formatValue;
|
|
24
|
+
const items = (payload ?? []).filter((item) => item.type !== "none" && !item.hide);
|
|
25
|
+
const shown = active && items.length > 0;
|
|
26
|
+
let heading = null;
|
|
27
|
+
if (shown && !hideLabel) heading = labelFormatter ? labelFormatter(label, items) : typeof label === "string" && Object.hasOwn(chart.config, label) ? chart.config[label]?.label ?? label : label;
|
|
28
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
29
|
+
className: cx("nuv-chart__tooltip", className),
|
|
30
|
+
role: "status",
|
|
31
|
+
"aria-live": "assertive",
|
|
32
|
+
hidden: !shown,
|
|
33
|
+
children: [heading !== null && heading !== void 0 && heading !== "" ? /* @__PURE__ */ jsx("div", {
|
|
34
|
+
className: "nuv-chart__tooltip-label",
|
|
35
|
+
children: heading
|
|
36
|
+
}) : null, shown ? /* @__PURE__ */ jsx("ul", {
|
|
37
|
+
className: "nuv-chart__tooltip-items",
|
|
38
|
+
children: items.map((item, index) => /* @__PURE__ */ jsx(Item, {
|
|
39
|
+
item,
|
|
40
|
+
index,
|
|
41
|
+
items,
|
|
42
|
+
config: chart.config,
|
|
43
|
+
nameKey,
|
|
44
|
+
indicator,
|
|
45
|
+
format,
|
|
46
|
+
formatter
|
|
47
|
+
}, `${item.graphicalItemId}-${String(item.dataKey)}-${String(item.name)}`))
|
|
48
|
+
}) : null]
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
function Item({ item, index, items, config, nameKey, indicator, format, formatter }) {
|
|
52
|
+
const series = seriesOf(config, item, nameKey);
|
|
53
|
+
let name = (series && config[series]?.label) ?? item.name;
|
|
54
|
+
let value = show(item.value, series ?? String(item.name), format);
|
|
55
|
+
const own = item.formatter ?? formatter;
|
|
56
|
+
if (own) {
|
|
57
|
+
const result = own(item.value, item.name, item, index, items);
|
|
58
|
+
if (Array.isArray(result)) [value, name] = result;
|
|
59
|
+
else value = result;
|
|
60
|
+
}
|
|
61
|
+
return /* @__PURE__ */ jsxs("li", {
|
|
62
|
+
className: "nuv-chart__tooltip-item",
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ jsx(Swatch, {
|
|
65
|
+
series,
|
|
66
|
+
color: item.color ?? item.fill,
|
|
67
|
+
indicator
|
|
68
|
+
}),
|
|
69
|
+
/* @__PURE__ */ jsx("span", {
|
|
70
|
+
className: "nuv-chart__tooltip-name",
|
|
71
|
+
children: name
|
|
72
|
+
}),
|
|
73
|
+
/* @__PURE__ */ jsxs("span", {
|
|
74
|
+
className: "nuv-chart__tooltip-value",
|
|
75
|
+
children: [value, item.unit]
|
|
76
|
+
})
|
|
77
|
+
]
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Recharts' `Tooltip`, drawn like the rest of the library. It takes
|
|
82
|
+
* everything `Tooltip` does.
|
|
83
|
+
*/
|
|
84
|
+
function ChartTooltip({ indicator, hideLabel, nameKey, formatValue, className, content, ...props }) {
|
|
85
|
+
return /* @__PURE__ */ jsx(Tooltip, {
|
|
86
|
+
content: content ?? /* @__PURE__ */ jsx(ChartTooltipContent, {
|
|
87
|
+
indicator,
|
|
88
|
+
hideLabel,
|
|
89
|
+
nameKey,
|
|
90
|
+
formatValue,
|
|
91
|
+
className
|
|
92
|
+
}),
|
|
93
|
+
...props
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
//#endregion
|
|
97
|
+
export { ChartTooltip, ChartTooltipContent, seriesOf };
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
//#region src/components/chart/config.ts
|
|
2
|
+
const patterns = [
|
|
3
|
+
"solid",
|
|
4
|
+
"diagonal",
|
|
5
|
+
"dots",
|
|
6
|
+
"reverse-diagonal",
|
|
7
|
+
"horizontal",
|
|
8
|
+
"cross",
|
|
9
|
+
"vertical",
|
|
10
|
+
"grid"
|
|
11
|
+
];
|
|
12
|
+
const dashes = {
|
|
13
|
+
solid: "none",
|
|
14
|
+
dashed: "6 4",
|
|
15
|
+
dotted: "2 3",
|
|
16
|
+
"dash-dot": "8 3 2 3",
|
|
17
|
+
"long-dash": "12 4",
|
|
18
|
+
"short-dash": "4 2",
|
|
19
|
+
"dash-dot-dot": "8 3 2 3 2 3",
|
|
20
|
+
"long-short": "12 3 4 3"
|
|
21
|
+
};
|
|
22
|
+
const dashOrder = Object.keys(dashes);
|
|
23
|
+
const colors = 8;
|
|
24
|
+
/**
|
|
25
|
+
* A series key as it's written in a CSS variable's name. Anything that
|
|
26
|
+
* can't be in one becomes a hyphen.
|
|
27
|
+
*/
|
|
28
|
+
function seriesName(key) {
|
|
29
|
+
return key.replace(/[^a-zA-Z0-9_-]/g, "-");
|
|
30
|
+
}
|
|
31
|
+
/** The color of a series: `stroke={chartColor("sales")}`. */
|
|
32
|
+
function chartColor(key) {
|
|
33
|
+
return `var(--chart-${seriesName(key)})`;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* The fill of a series, which is its color or its pattern:
|
|
37
|
+
* `fill={chartFill("sales")}`.
|
|
38
|
+
*/
|
|
39
|
+
function chartFill(key) {
|
|
40
|
+
return `var(--chart-${seriesName(key)}-fill)`;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* The dashes of a series' line, for `strokeDasharray`:
|
|
44
|
+
* `strokeDasharray={chartDash("sales")}`.
|
|
45
|
+
*/
|
|
46
|
+
function chartDash(key) {
|
|
47
|
+
return `var(--chart-${seriesName(key)}-dash)`;
|
|
48
|
+
}
|
|
49
|
+
function either(patterned, solid) {
|
|
50
|
+
return `var(--nuv-chart-patterns, ${patterned}) var(--nuv-chart-solid, ${solid})`;
|
|
51
|
+
}
|
|
52
|
+
function resolveSeries(config, id) {
|
|
53
|
+
return Object.entries(config).map(([key, series], index) => {
|
|
54
|
+
const name = seriesName(key);
|
|
55
|
+
const color = series.color ?? `var(--color-chart-${index % colors + 1})`;
|
|
56
|
+
const pattern = series.pattern ?? patterns[index % patterns.length];
|
|
57
|
+
const dash = series.dash ?? dashOrder[index % dashOrder.length];
|
|
58
|
+
const patternId = pattern === "solid" ? void 0 : `${id}-${name}`;
|
|
59
|
+
const own = `var(--chart-${name})`;
|
|
60
|
+
const patterned = patternId ? `url(#${patternId})` : own;
|
|
61
|
+
return {
|
|
62
|
+
key,
|
|
63
|
+
name,
|
|
64
|
+
patternId,
|
|
65
|
+
pattern: pattern ?? "solid",
|
|
66
|
+
variables: {
|
|
67
|
+
[`--chart-${name}`]: `var(--nuv-chart-forced-color, ${color})`,
|
|
68
|
+
[`--chart-${name}-fill`]: series.pattern ? patterned : either(patterned, own),
|
|
69
|
+
[`--chart-${name}-dash`]: series.dash ? dashes[series.dash] : either(dashes[dash ?? "solid"], "none")
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
//#endregion
|
|
75
|
+
exports.chartColor = chartColor;
|
|
76
|
+
exports.chartDash = chartDash;
|
|
77
|
+
exports.chartFill = chartFill;
|
|
78
|
+
exports.dashes = dashes;
|
|
79
|
+
exports.patterns = patterns;
|
|
80
|
+
exports.resolveSeries = resolveSeries;
|
|
81
|
+
exports.seriesName = seriesName;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
//#region src/components/chart/config.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* A fill that tells a series apart without its color. `"solid"` is no
|
|
5
|
+
* pattern.
|
|
6
|
+
*/
|
|
7
|
+
export type ChartPattern = "solid" | "diagonal" | "dots" | "reverse-diagonal" | "horizontal" | "cross" | "vertical" | "grid";
|
|
8
|
+
/** How a series' line is drawn. `"solid"` is an unbroken line. */
|
|
9
|
+
export type ChartDash = "solid" | "dashed" | "dotted" | "dash-dot" | "long-dash" | "short-dash" | "dash-dot-dot" | "long-short";
|
|
10
|
+
export interface ChartSeries {
|
|
11
|
+
/** The name shown in the tooltip, the legend and the table. */
|
|
12
|
+
label?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Any CSS color. Left out, the series takes the next of the theme's eight
|
|
15
|
+
* chart colors, `--color-chart-1` to `--color-chart-8`, by its place in
|
|
16
|
+
* the config.
|
|
17
|
+
*/
|
|
18
|
+
color?: string;
|
|
19
|
+
/**
|
|
20
|
+
* The fill of this series, always. Left out, the series is filled with
|
|
21
|
+
* its color, and with a pattern of its own when the container has
|
|
22
|
+
* `patterns` or the browser is forcing colors.
|
|
23
|
+
*/
|
|
24
|
+
pattern?: ChartPattern;
|
|
25
|
+
/** The same for its line. */
|
|
26
|
+
dash?: ChartDash;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* The series of a chart, by key. The key is what the series is called in
|
|
30
|
+
* the data, and what its CSS variables are named after.
|
|
31
|
+
*/
|
|
32
|
+
export type ChartConfig = Record<string, ChartSeries>;
|
|
33
|
+
/** The color of a series: `stroke={chartColor("sales")}`. */
|
|
34
|
+
export declare function chartColor(key: string): string;
|
|
35
|
+
/**
|
|
36
|
+
* The fill of a series, which is its color or its pattern:
|
|
37
|
+
* `fill={chartFill("sales")}`.
|
|
38
|
+
*/
|
|
39
|
+
export declare function chartFill(key: string): string;
|
|
40
|
+
/**
|
|
41
|
+
* The dashes of a series' line, for `strokeDasharray`:
|
|
42
|
+
* `strokeDasharray={chartDash("sales")}`.
|
|
43
|
+
*/
|
|
44
|
+
export declare function chartDash(key: string): string;
|
|
45
|
+
//#endregion
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
//#region src/components/chart/config.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* A fill that tells a series apart without its color. `"solid"` is no
|
|
5
|
+
* pattern.
|
|
6
|
+
*/
|
|
7
|
+
export type ChartPattern = "solid" | "diagonal" | "dots" | "reverse-diagonal" | "horizontal" | "cross" | "vertical" | "grid";
|
|
8
|
+
/** How a series' line is drawn. `"solid"` is an unbroken line. */
|
|
9
|
+
export type ChartDash = "solid" | "dashed" | "dotted" | "dash-dot" | "long-dash" | "short-dash" | "dash-dot-dot" | "long-short";
|
|
10
|
+
export interface ChartSeries {
|
|
11
|
+
/** The name shown in the tooltip, the legend and the table. */
|
|
12
|
+
label?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Any CSS color. Left out, the series takes the next of the theme's eight
|
|
15
|
+
* chart colors, `--color-chart-1` to `--color-chart-8`, by its place in
|
|
16
|
+
* the config.
|
|
17
|
+
*/
|
|
18
|
+
color?: string;
|
|
19
|
+
/**
|
|
20
|
+
* The fill of this series, always. Left out, the series is filled with
|
|
21
|
+
* its color, and with a pattern of its own when the container has
|
|
22
|
+
* `patterns` or the browser is forcing colors.
|
|
23
|
+
*/
|
|
24
|
+
pattern?: ChartPattern;
|
|
25
|
+
/** The same for its line. */
|
|
26
|
+
dash?: ChartDash;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* The series of a chart, by key. The key is what the series is called in
|
|
30
|
+
* the data, and what its CSS variables are named after.
|
|
31
|
+
*/
|
|
32
|
+
export type ChartConfig = Record<string, ChartSeries>;
|
|
33
|
+
/** The color of a series: `stroke={chartColor("sales")}`. */
|
|
34
|
+
export declare function chartColor(key: string): string;
|
|
35
|
+
/**
|
|
36
|
+
* The fill of a series, which is its color or its pattern:
|
|
37
|
+
* `fill={chartFill("sales")}`.
|
|
38
|
+
*/
|
|
39
|
+
export declare function chartFill(key: string): string;
|
|
40
|
+
/**
|
|
41
|
+
* The dashes of a series' line, for `strokeDasharray`:
|
|
42
|
+
* `strokeDasharray={chartDash("sales")}`.
|
|
43
|
+
*/
|
|
44
|
+
export declare function chartDash(key: string): string;
|
|
45
|
+
//#endregion
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
//#region src/components/chart/config.ts
|
|
2
|
+
const patterns = [
|
|
3
|
+
"solid",
|
|
4
|
+
"diagonal",
|
|
5
|
+
"dots",
|
|
6
|
+
"reverse-diagonal",
|
|
7
|
+
"horizontal",
|
|
8
|
+
"cross",
|
|
9
|
+
"vertical",
|
|
10
|
+
"grid"
|
|
11
|
+
];
|
|
12
|
+
const dashes = {
|
|
13
|
+
solid: "none",
|
|
14
|
+
dashed: "6 4",
|
|
15
|
+
dotted: "2 3",
|
|
16
|
+
"dash-dot": "8 3 2 3",
|
|
17
|
+
"long-dash": "12 4",
|
|
18
|
+
"short-dash": "4 2",
|
|
19
|
+
"dash-dot-dot": "8 3 2 3 2 3",
|
|
20
|
+
"long-short": "12 3 4 3"
|
|
21
|
+
};
|
|
22
|
+
const dashOrder = Object.keys(dashes);
|
|
23
|
+
const colors = 8;
|
|
24
|
+
/**
|
|
25
|
+
* A series key as it's written in a CSS variable's name. Anything that
|
|
26
|
+
* can't be in one becomes a hyphen.
|
|
27
|
+
*/
|
|
28
|
+
function seriesName(key) {
|
|
29
|
+
return key.replace(/[^a-zA-Z0-9_-]/g, "-");
|
|
30
|
+
}
|
|
31
|
+
/** The color of a series: `stroke={chartColor("sales")}`. */
|
|
32
|
+
function chartColor(key) {
|
|
33
|
+
return `var(--chart-${seriesName(key)})`;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* The fill of a series, which is its color or its pattern:
|
|
37
|
+
* `fill={chartFill("sales")}`.
|
|
38
|
+
*/
|
|
39
|
+
function chartFill(key) {
|
|
40
|
+
return `var(--chart-${seriesName(key)}-fill)`;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* The dashes of a series' line, for `strokeDasharray`:
|
|
44
|
+
* `strokeDasharray={chartDash("sales")}`.
|
|
45
|
+
*/
|
|
46
|
+
function chartDash(key) {
|
|
47
|
+
return `var(--chart-${seriesName(key)}-dash)`;
|
|
48
|
+
}
|
|
49
|
+
function either(patterned, solid) {
|
|
50
|
+
return `var(--nuv-chart-patterns, ${patterned}) var(--nuv-chart-solid, ${solid})`;
|
|
51
|
+
}
|
|
52
|
+
function resolveSeries(config, id) {
|
|
53
|
+
return Object.entries(config).map(([key, series], index) => {
|
|
54
|
+
const name = seriesName(key);
|
|
55
|
+
const color = series.color ?? `var(--color-chart-${index % colors + 1})`;
|
|
56
|
+
const pattern = series.pattern ?? patterns[index % patterns.length];
|
|
57
|
+
const dash = series.dash ?? dashOrder[index % dashOrder.length];
|
|
58
|
+
const patternId = pattern === "solid" ? void 0 : `${id}-${name}`;
|
|
59
|
+
const own = `var(--chart-${name})`;
|
|
60
|
+
const patterned = patternId ? `url(#${patternId})` : own;
|
|
61
|
+
return {
|
|
62
|
+
key,
|
|
63
|
+
name,
|
|
64
|
+
patternId,
|
|
65
|
+
pattern: pattern ?? "solid",
|
|
66
|
+
variables: {
|
|
67
|
+
[`--chart-${name}`]: `var(--nuv-chart-forced-color, ${color})`,
|
|
68
|
+
[`--chart-${name}-fill`]: series.pattern ? patterned : either(patterned, own),
|
|
69
|
+
[`--chart-${name}-dash`]: series.dash ? dashes[series.dash] : either(dashes[dash ?? "solid"], "none")
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
//#endregion
|
|
75
|
+
export { chartColor, chartDash, chartFill, dashes, patterns, resolveSeries, seriesName };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
let react = require("react");
|
|
3
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
4
|
+
//#region src/components/chart/context.tsx
|
|
5
|
+
const ChartContext = (0, react.createContext)(null);
|
|
6
|
+
function useChart(part) {
|
|
7
|
+
const context = (0, react.useContext)(ChartContext);
|
|
8
|
+
if (!context) throw new Error(`${part} has to be inside a ChartContainer.`);
|
|
9
|
+
return context;
|
|
10
|
+
}
|
|
11
|
+
function show(value, key, format) {
|
|
12
|
+
if (value === null || value === void 0) return null;
|
|
13
|
+
if (typeof value === "number" || typeof value === "string") return format ? format(value, key) : String(value);
|
|
14
|
+
if (Array.isArray(value)) return value.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [index > 0 ? " – " : null, show(part, key, format)] }, index));
|
|
15
|
+
return String(value);
|
|
16
|
+
}
|
|
17
|
+
//#endregion
|
|
18
|
+
exports.ChartContext = ChartContext;
|
|
19
|
+
exports.show = show;
|
|
20
|
+
exports.useChart = useChart;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import "./config.cjs";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
//#region src/components/chart/context.d.ts
|
|
4
|
+
/** Turns a value from the data into what's shown for it. */
|
|
5
|
+
export type ChartValueFormatter = (value: number | string, key: string) => ReactNode;
|
|
6
|
+
//#endregion
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import "./config.js";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
//#region src/components/chart/context.d.ts
|
|
4
|
+
/** Turns a value from the data into what's shown for it. */
|
|
5
|
+
export type ChartValueFormatter = (value: number | string, key: string) => ReactNode;
|
|
6
|
+
//#endregion
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
import { jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/chart/context.tsx
|
|
5
|
+
const ChartContext = createContext(null);
|
|
6
|
+
function useChart(part) {
|
|
7
|
+
const context = useContext(ChartContext);
|
|
8
|
+
if (!context) throw new Error(`${part} has to be inside a ChartContainer.`);
|
|
9
|
+
return context;
|
|
10
|
+
}
|
|
11
|
+
function show(value, key, format) {
|
|
12
|
+
if (value === null || value === void 0) return null;
|
|
13
|
+
if (typeof value === "number" || typeof value === "string") return format ? format(value, key) : String(value);
|
|
14
|
+
if (Array.isArray(value)) return value.map((part, index) => /* @__PURE__ */ jsxs("span", { children: [index > 0 ? " – " : null, show(part, key, format)] }, index));
|
|
15
|
+
return String(value);
|
|
16
|
+
}
|
|
17
|
+
//#endregion
|
|
18
|
+
export { ChartContext, show, useChart };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_config = require("./config.cjs");
|
|
3
|
+
const require_chart_container = require("./chart-container.cjs");
|
|
4
|
+
const require_chart_tooltip = require("./chart-tooltip.cjs");
|
|
5
|
+
const require_chart_legend = require("./chart-legend.cjs");
|
|
6
|
+
const require_chart_table = require("./chart-table.cjs");
|
|
7
|
+
exports.ChartContainer = require_chart_container.ChartContainer;
|
|
8
|
+
exports.ChartLegend = require_chart_legend.ChartLegend;
|
|
9
|
+
exports.ChartLegendContent = require_chart_legend.ChartLegendContent;
|
|
10
|
+
exports.ChartTable = require_chart_table.ChartTable;
|
|
11
|
+
exports.ChartTooltip = require_chart_tooltip.ChartTooltip;
|
|
12
|
+
exports.ChartTooltipContent = require_chart_tooltip.ChartTooltipContent;
|
|
13
|
+
exports.chartColor = require_config.chartColor;
|
|
14
|
+
exports.chartDash = require_config.chartDash;
|
|
15
|
+
exports.chartFill = require_config.chartFill;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ChartConfig, ChartDash, ChartPattern, ChartSeries, chartColor, chartDash, chartFill } from "./config.cjs";
|
|
2
|
+
import { ChartValueFormatter } from "./context.cjs";
|
|
3
|
+
import { ChartContainer, ChartContainerOwnProps, ChartContainerProps, ChartName } from "./chart-container.cjs";
|
|
4
|
+
import { ChartIndicator } from "./swatch.cjs";
|
|
5
|
+
import { ChartLegend, ChartLegendContent, ChartLegendContentOwnProps, ChartLegendContentProps, ChartLegendProps } from "./chart-legend.cjs";
|
|
6
|
+
import { ChartTable, ChartTableOwnProps, ChartTableProps } from "./chart-table.cjs";
|
|
7
|
+
import { ChartTooltip, ChartTooltipContent, ChartTooltipContentOwnProps, ChartTooltipContentProps, ChartTooltipProps } from "./chart-tooltip.cjs";
|
|
8
|
+
export { type ChartConfig, ChartContainer, type ChartContainerOwnProps, type ChartContainerProps, type ChartDash, type ChartIndicator, ChartLegend, ChartLegendContent, type ChartLegendContentOwnProps, type ChartLegendContentProps, type ChartLegendProps, type ChartName, type ChartPattern, type ChartSeries, ChartTable, type ChartTableOwnProps, type ChartTableProps, ChartTooltip, ChartTooltipContent, type ChartTooltipContentOwnProps, type ChartTooltipContentProps, type ChartTooltipProps, type ChartValueFormatter, chartColor, chartDash, chartFill };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ChartConfig, ChartDash, ChartPattern, ChartSeries, chartColor, chartDash, chartFill } from "./config.js";
|
|
2
|
+
import { ChartValueFormatter } from "./context.js";
|
|
3
|
+
import { ChartContainer, ChartContainerOwnProps, ChartContainerProps, ChartName } from "./chart-container.js";
|
|
4
|
+
import { ChartIndicator } from "./swatch.js";
|
|
5
|
+
import { ChartLegend, ChartLegendContent, ChartLegendContentOwnProps, ChartLegendContentProps, ChartLegendProps } from "./chart-legend.js";
|
|
6
|
+
import { ChartTable, ChartTableOwnProps, ChartTableProps } from "./chart-table.js";
|
|
7
|
+
import { ChartTooltip, ChartTooltipContent, ChartTooltipContentOwnProps, ChartTooltipContentProps, ChartTooltipProps } from "./chart-tooltip.js";
|
|
8
|
+
export { type ChartConfig, ChartContainer, type ChartContainerOwnProps, type ChartContainerProps, type ChartDash, type ChartIndicator, ChartLegend, ChartLegendContent, type ChartLegendContentOwnProps, type ChartLegendContentProps, type ChartLegendProps, type ChartName, type ChartPattern, type ChartSeries, ChartTable, type ChartTableOwnProps, type ChartTableProps, ChartTooltip, ChartTooltipContent, type ChartTooltipContentOwnProps, type ChartTooltipContentProps, type ChartTooltipProps, type ChartValueFormatter, chartColor, chartDash, chartFill };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { chartColor, chartDash, chartFill } from "./config.js";
|
|
2
|
+
import { ChartContainer } from "./chart-container.js";
|
|
3
|
+
import { ChartTooltip, ChartTooltipContent } from "./chart-tooltip.js";
|
|
4
|
+
import { ChartLegend, ChartLegendContent } from "./chart-legend.js";
|
|
5
|
+
import { ChartTable } from "./chart-table.js";
|
|
6
|
+
export { ChartContainer, ChartLegend, ChartLegendContent, ChartTable, ChartTooltip, ChartTooltipContent, chartColor, chartDash, chartFill };
|