@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.
Files changed (45) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +75 -2
  3. package/dist/components/chart/chart-container.cjs +62 -0
  4. package/dist/components/chart/chart-container.d.cts +44 -0
  5. package/dist/components/chart/chart-container.d.ts +44 -0
  6. package/dist/components/chart/chart-container.js +62 -0
  7. package/dist/components/chart/chart-legend.cjs +55 -0
  8. package/dist/components/chart/chart-legend.d.cts +29 -0
  9. package/dist/components/chart/chart-legend.d.ts +29 -0
  10. package/dist/components/chart/chart-legend.js +54 -0
  11. package/dist/components/chart/chart-table.cjs +42 -0
  12. package/dist/components/chart/chart-table.d.cts +41 -0
  13. package/dist/components/chart/chart-table.d.ts +41 -0
  14. package/dist/components/chart/chart-table.js +42 -0
  15. package/dist/components/chart/chart-tooltip.cjs +99 -0
  16. package/dist/components/chart/chart-tooltip.d.cts +41 -0
  17. package/dist/components/chart/chart-tooltip.d.ts +41 -0
  18. package/dist/components/chart/chart-tooltip.js +97 -0
  19. package/dist/components/chart/config.cjs +81 -0
  20. package/dist/components/chart/config.d.cts +45 -0
  21. package/dist/components/chart/config.d.ts +45 -0
  22. package/dist/components/chart/config.js +75 -0
  23. package/dist/components/chart/context.cjs +20 -0
  24. package/dist/components/chart/context.d.cts +6 -0
  25. package/dist/components/chart/context.d.ts +6 -0
  26. package/dist/components/chart/context.js +18 -0
  27. package/dist/components/chart/index.cjs +15 -0
  28. package/dist/components/chart/index.d.cts +8 -0
  29. package/dist/components/chart/index.d.ts +8 -0
  30. package/dist/components/chart/index.js +6 -0
  31. package/dist/components/chart/patterns.cjs +81 -0
  32. package/dist/components/chart/patterns.js +81 -0
  33. package/dist/components/chart/swatch.cjs +34 -0
  34. package/dist/components/chart/swatch.d.cts +7 -0
  35. package/dist/components/chart/swatch.d.ts +7 -0
  36. package/dist/components/chart/swatch.js +34 -0
  37. package/dist/css/chart.css +199 -0
  38. package/dist/index.cjs +15 -0
  39. package/dist/index.d.cts +9 -0
  40. package/dist/index.d.ts +9 -0
  41. package/dist/index.js +6 -0
  42. package/dist/styles.css +199 -0
  43. package/dist/utils/cx.cjs +6 -0
  44. package/dist/utils/cx.js +6 -0
  45. 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 };