@zentauri-ui/zentauri-components 1.4.64 → 1.4.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +97 -51
- package/cli/index.mjs +45 -26
- package/cli/registry.json +9 -1
- package/cli/rewrite-imports.mjs +8 -3
- package/dist/charts/area/Area.d.ts +6 -0
- package/dist/charts/area/Area.d.ts.map +1 -0
- package/dist/charts/area/index.d.ts +4 -0
- package/dist/charts/area/index.d.ts.map +1 -0
- package/dist/charts/area.js +119 -0
- package/dist/charts/area.js.map +1 -0
- package/dist/charts/area.mjs +106 -0
- package/dist/charts/area.mjs.map +1 -0
- package/dist/charts/bar/Bar.d.ts +6 -0
- package/dist/charts/bar/Bar.d.ts.map +1 -0
- package/dist/charts/bar/index.d.ts +4 -0
- package/dist/charts/bar/index.d.ts.map +1 -0
- package/dist/charts/bar.js +110 -0
- package/dist/charts/bar.js.map +1 -0
- package/dist/charts/bar.mjs +97 -0
- package/dist/charts/bar.mjs.map +1 -0
- package/dist/charts/bubble/Bubble.d.ts +6 -0
- package/dist/charts/bubble/Bubble.d.ts.map +1 -0
- package/dist/charts/bubble/index.d.ts +4 -0
- package/dist/charts/bubble/index.d.ts.map +1 -0
- package/dist/charts/bubble.js +122 -0
- package/dist/charts/bubble.js.map +1 -0
- package/dist/charts/bubble.mjs +109 -0
- package/dist/charts/bubble.mjs.map +1 -0
- package/dist/charts/line/Line.d.ts +6 -0
- package/dist/charts/line/Line.d.ts.map +1 -0
- package/dist/charts/line/index.d.ts +4 -0
- package/dist/charts/line/index.d.ts.map +1 -0
- package/dist/charts/line.js +113 -0
- package/dist/charts/line.js.map +1 -0
- package/dist/charts/line.mjs +100 -0
- package/dist/charts/line.mjs.map +1 -0
- package/dist/charts/shared/chart-frame.d.ts +32 -0
- package/dist/charts/shared/chart-frame.d.ts.map +1 -0
- package/dist/charts/shared/colors.d.ts +43 -0
- package/dist/charts/shared/colors.d.ts.map +1 -0
- package/dist/charts/shared/types.d.ts +43 -0
- package/dist/charts/shared/types.d.ts.map +1 -0
- package/dist/charts/shared/variants.d.ts +93 -0
- package/dist/charts/shared/variants.d.ts.map +1 -0
- package/dist/chunk-CIN5JDN4.js +174 -0
- package/dist/chunk-CIN5JDN4.js.map +1 -0
- package/dist/chunk-IQZROQNJ.mjs +165 -0
- package/dist/chunk-IQZROQNJ.mjs.map +1 -0
- package/dist/ui/accordion/variants.d.ts +2 -2
- package/dist/ui/alert/variants.d.ts +1 -1
- package/dist/ui/avatar/variants.d.ts +1 -1
- package/dist/ui/badge/variants.d.ts +2 -2
- package/dist/ui/breadcrumb/variants.d.ts +1 -1
- package/dist/ui/buttons/variants.d.ts +2 -2
- package/dist/ui/card/variants.d.ts +1 -1
- package/dist/ui/divider/variants.d.ts +2 -2
- package/dist/ui/drawer/variants.d.ts +3 -3
- package/dist/ui/dropdown/variants.d.ts +4 -4
- package/dist/ui/file-upload/variants.d.ts +1 -1
- package/dist/ui/inputs/variants.d.ts +2 -2
- package/dist/ui/modal/variants.d.ts +2 -2
- package/dist/ui/pagination/pagination.d.ts +2 -2
- package/dist/ui/pagination/variants.d.ts +3 -3
- package/dist/ui/progress/variants.d.ts +1 -1
- package/dist/ui/select/variants.d.ts +4 -4
- package/dist/ui/skeleton/variants.d.ts +2 -2
- package/dist/ui/slider/variants.d.ts +1 -1
- package/dist/ui/spinner/animated/variants.d.ts +1 -1
- package/dist/ui/stepper/variants.d.ts +1 -1
- package/dist/ui/table/variants.d.ts +3 -3
- package/dist/ui/tabs/variants.d.ts +1 -1
- package/dist/ui/toast/variants.d.ts +1 -1
- package/dist/ui/toggle/variants.d.ts +1 -1
- package/dist/ui/tooltip/variants.d.ts +1 -1
- package/dist/ui/typography/variants.d.ts +3 -3
- package/package.json +32 -12
- package/src/charts/area/Area.tsx +103 -0
- package/src/charts/area/index.ts +9 -0
- package/src/charts/bar/Bar.tsx +94 -0
- package/src/charts/bar/index.ts +9 -0
- package/src/charts/bubble/Bubble.tsx +113 -0
- package/src/charts/bubble/index.ts +9 -0
- package/src/charts/line/Line.tsx +97 -0
- package/src/charts/line/index.ts +9 -0
- package/src/charts/shared/chart-frame.tsx +107 -0
- package/src/charts/shared/colors.ts +31 -0
- package/src/charts/shared/types.ts +60 -0
- package/src/charts/shared/variants.ts +87 -0
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { LineChartProps } from "../shared/types";
|
|
2
|
+
export declare function LineChart<TDatum extends Record<string, number | string | null | undefined>>({ appearance, className, containerStyle, data, density, emptyState, height, margin, series, showGrid, showLegend, showTooltip, tooltipColor, style, syncId, xKey, strokeDasharray, ...props }: LineChartProps<TDatum>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare namespace LineChart {
|
|
4
|
+
var displayName: string;
|
|
5
|
+
}
|
|
6
|
+
//# sourceMappingURL=Line.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../src/charts/line/Line.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,SAAS,CACvB,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EACjE,EACA,UAAU,EACV,SAAS,EACT,cAAc,EACd,IAAI,EACJ,OAAO,EACP,UAAiB,EACjB,MAAY,EACZ,MAA2B,EAC3B,MAAM,EACN,QAAe,EACf,UAAkB,EAClB,WAAkB,EAClB,YAAwB,EACxB,KAAK,EACL,MAAM,EACN,IAAI,EACJ,eAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,MAAM,CAAC,2CA6DxB;yBAlFe,SAAS"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/charts/line/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,aAAa,GACd,MAAM,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var chunkCIN5JDN4_js = require('../chunk-CIN5JDN4.js');
|
|
5
|
+
require('../chunk-ZS5756ZC.js');
|
|
6
|
+
var recharts = require('recharts');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
function LineChart({
|
|
10
|
+
appearance,
|
|
11
|
+
className,
|
|
12
|
+
containerStyle,
|
|
13
|
+
data,
|
|
14
|
+
density,
|
|
15
|
+
emptyState = null,
|
|
16
|
+
height = 320,
|
|
17
|
+
margin = chunkCIN5JDN4_js.defaultChartMargin,
|
|
18
|
+
series,
|
|
19
|
+
showGrid = true,
|
|
20
|
+
showLegend = false,
|
|
21
|
+
showTooltip = true,
|
|
22
|
+
tooltipColor = "#0f172a",
|
|
23
|
+
style,
|
|
24
|
+
syncId,
|
|
25
|
+
xKey,
|
|
26
|
+
strokeDasharray,
|
|
27
|
+
...props
|
|
28
|
+
}) {
|
|
29
|
+
const hasData = data.length > 0 && series.length > 0;
|
|
30
|
+
const xAxisKey = String(xKey);
|
|
31
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
32
|
+
chunkCIN5JDN4_js.ChartFrame,
|
|
33
|
+
{
|
|
34
|
+
appearance,
|
|
35
|
+
className,
|
|
36
|
+
containerStyle,
|
|
37
|
+
density,
|
|
38
|
+
emptyState,
|
|
39
|
+
hasData,
|
|
40
|
+
height,
|
|
41
|
+
style,
|
|
42
|
+
...props,
|
|
43
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, margin, syncId, children: [
|
|
44
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
45
|
+
chunkCIN5JDN4_js.ChartDecorators,
|
|
46
|
+
{
|
|
47
|
+
axis: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
49
|
+
recharts.XAxis,
|
|
50
|
+
{
|
|
51
|
+
dataKey: xAxisKey,
|
|
52
|
+
minTickGap: 24,
|
|
53
|
+
tickLine: false,
|
|
54
|
+
tickMargin: 10,
|
|
55
|
+
axisLine: false,
|
|
56
|
+
fontSize: 12
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
60
|
+
recharts.YAxis,
|
|
61
|
+
{
|
|
62
|
+
width: 40,
|
|
63
|
+
tickLine: false,
|
|
64
|
+
tickMargin: 8,
|
|
65
|
+
axisLine: false,
|
|
66
|
+
fontSize: 12
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
] }),
|
|
70
|
+
showGrid,
|
|
71
|
+
showLegend,
|
|
72
|
+
showTooltip,
|
|
73
|
+
tooltipColor
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
series.map((item, index) => {
|
|
77
|
+
const color = chunkCIN5JDN4_js.resolveColor(item.color, index);
|
|
78
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
+
recharts.Line,
|
|
80
|
+
{
|
|
81
|
+
type: "monotone",
|
|
82
|
+
dataKey: item.dataKey,
|
|
83
|
+
name: item.name,
|
|
84
|
+
stroke: color.stroke,
|
|
85
|
+
strokeWidth: 2,
|
|
86
|
+
dot: false,
|
|
87
|
+
activeDot: { r: 5 },
|
|
88
|
+
strokeDasharray: strokeDasharray ?? void 0
|
|
89
|
+
},
|
|
90
|
+
item.dataKey
|
|
91
|
+
);
|
|
92
|
+
})
|
|
93
|
+
] })
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
LineChart.displayName = "LineChart";
|
|
98
|
+
|
|
99
|
+
Object.defineProperty(exports, "chartColorValues", {
|
|
100
|
+
enumerable: true,
|
|
101
|
+
get: function () { return chunkCIN5JDN4_js.chartColorValues; }
|
|
102
|
+
});
|
|
103
|
+
Object.defineProperty(exports, "chartPalette", {
|
|
104
|
+
enumerable: true,
|
|
105
|
+
get: function () { return chunkCIN5JDN4_js.chartPalette; }
|
|
106
|
+
});
|
|
107
|
+
Object.defineProperty(exports, "chartVariants", {
|
|
108
|
+
enumerable: true,
|
|
109
|
+
get: function () { return chunkCIN5JDN4_js.chartVariants; }
|
|
110
|
+
});
|
|
111
|
+
exports.LineChart = LineChart;
|
|
112
|
+
//# sourceMappingURL=line.js.map
|
|
113
|
+
//# sourceMappingURL=line.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/charts/line/Line.tsx"],"names":["defaultChartMargin","jsx","ChartFrame","jsxs","RechartsLineChart","ChartDecorators","Fragment","XAxis","YAxis","resolveColor","Line"],"mappings":";;;;;;;AAYO,SAAS,SAAA,CAEd;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,MAAA,GAAS,GAAA;AAAA,EACT,MAAA,GAASA,mCAAA;AAAA,EACT,MAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,UAAA,GAAa,KAAA;AAAA,EACb,WAAA,GAAc,IAAA;AAAA,EACd,YAAA,GAAe,SAAA;AAAA,EACf,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,MAAA,GAAS,CAAA,IAAK,OAAO,MAAA,GAAS,CAAA;AACnD,EAAA,MAAM,QAAA,GAAW,OAAO,IAAI,CAAA;AAE5B,EAAA,uBACEC,cAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAC,eAAA,CAACC,kBAAA,EAAA,EAAkB,IAAA,EAAY,MAAA,EAAgB,MAAA,EAC7C,QAAA,EAAA;AAAA,wBAAAH,cAAA;AAAA,UAACI,gCAAA;AAAA,UAAA;AAAA,YACC,sBACEF,eAAA,CAAAG,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAAL,cAAA;AAAA,gBAACM,cAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAS,QAAA;AAAA,kBACT,UAAA,EAAY,EAAA;AAAA,kBACZ,QAAA,EAAU,KAAA;AAAA,kBACV,UAAA,EAAY,EAAA;AAAA,kBACZ,QAAA,EAAU,KAAA;AAAA,kBACV,QAAA,EAAU;AAAA;AAAA,eACZ;AAAA,8BACAN,cAAA;AAAA,gBAACO,cAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAO,EAAA;AAAA,kBACP,QAAA,EAAU,KAAA;AAAA,kBACV,UAAA,EAAY,CAAA;AAAA,kBACZ,QAAA,EAAU,KAAA;AAAA,kBACV,QAAA,EAAU;AAAA;AAAA;AACZ,aAAA,EACF,CAAA;AAAA,YAEF,QAAA;AAAA,YACA,UAAA;AAAA,YACA,WAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QACC,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAC3B,UAAA,MAAM,KAAA,GAAQC,6BAAA,CAAa,IAAA,CAAK,KAAA,EAAO,KAAK,CAAA;AAC5C,UAAA,uBACER,cAAA;AAAA,YAACS,aAAA;AAAA,YAAA;AAAA,cAEC,IAAA,EAAK,UAAA;AAAA,cACL,SAAS,IAAA,CAAK,OAAA;AAAA,cACd,MAAM,IAAA,CAAK,IAAA;AAAA,cACX,QAAQ,KAAA,CAAM,MAAA;AAAA,cACd,WAAA,EAAa,CAAA;AAAA,cACb,GAAA,EAAK,KAAA;AAAA,cACL,SAAA,EAAW,EAAE,CAAA,EAAG,CAAA,EAAE;AAAA,cAClB,iBAAiB,eAAA,IAAmB;AAAA,aAAA;AAAA,YAR/B,IAAA,CAAK;AAAA,WASZ;AAAA,QAEJ,CAAC;AAAA,OAAA,EACH;AAAA;AAAA,GACF;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"line.js","sourcesContent":["\"use client\";\n\nimport { Line, LineChart as RechartsLineChart, XAxis, YAxis } from \"recharts\";\n\nimport {\n ChartDecorators,\n ChartFrame,\n defaultChartMargin,\n} from \"../shared/chart-frame\";\nimport { resolveColor } from \"../shared/colors\";\nimport type { LineChartProps } from \"../shared/types\";\n\nexport function LineChart<\n TDatum extends Record<string, number | string | null | undefined>,\n>({\n appearance,\n className,\n containerStyle,\n data,\n density,\n emptyState = null,\n height = 320,\n margin = defaultChartMargin,\n series,\n showGrid = true,\n showLegend = false,\n showTooltip = true,\n tooltipColor = \"#0f172a\",\n style,\n syncId,\n xKey,\n strokeDasharray,\n ...props\n}: LineChartProps<TDatum>) {\n const hasData = data.length > 0 && series.length > 0;\n const xAxisKey = String(xKey);\n\n return (\n <ChartFrame\n appearance={appearance}\n className={className}\n containerStyle={containerStyle}\n density={density}\n emptyState={emptyState}\n hasData={hasData}\n height={height}\n style={style}\n {...props}\n >\n <RechartsLineChart data={data} margin={margin} syncId={syncId}>\n <ChartDecorators\n axis={\n <>\n <XAxis\n dataKey={xAxisKey}\n minTickGap={24}\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n fontSize={12}\n />\n <YAxis\n width={40}\n tickLine={false}\n tickMargin={8}\n axisLine={false}\n fontSize={12}\n />\n </>\n }\n showGrid={showGrid}\n showLegend={showLegend}\n showTooltip={showTooltip}\n tooltipColor={tooltipColor}\n />\n {series.map((item, index) => {\n const color = resolveColor(item.color, index);\n return (\n <Line\n key={item.dataKey}\n type=\"monotone\"\n dataKey={item.dataKey}\n name={item.name}\n stroke={color.stroke}\n strokeWidth={2}\n dot={false}\n activeDot={{ r: 5 }}\n strokeDasharray={strokeDasharray ?? undefined}\n />\n );\n })}\n </RechartsLineChart>\n </ChartFrame>\n );\n}\n\nLineChart.displayName = \"LineChart\";\n"]}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { ChartFrame, defaultChartMargin, ChartDecorators, resolveColor } from '../chunk-IQZROQNJ.mjs';
|
|
3
|
+
export { chartColorValues, chartPalette, chartVariants } from '../chunk-IQZROQNJ.mjs';
|
|
4
|
+
import '../chunk-4D54YOL6.mjs';
|
|
5
|
+
import { LineChart as LineChart$1, XAxis, YAxis, Line } from 'recharts';
|
|
6
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
function LineChart({
|
|
9
|
+
appearance,
|
|
10
|
+
className,
|
|
11
|
+
containerStyle,
|
|
12
|
+
data,
|
|
13
|
+
density,
|
|
14
|
+
emptyState = null,
|
|
15
|
+
height = 320,
|
|
16
|
+
margin = defaultChartMargin,
|
|
17
|
+
series,
|
|
18
|
+
showGrid = true,
|
|
19
|
+
showLegend = false,
|
|
20
|
+
showTooltip = true,
|
|
21
|
+
tooltipColor = "#0f172a",
|
|
22
|
+
style,
|
|
23
|
+
syncId,
|
|
24
|
+
xKey,
|
|
25
|
+
strokeDasharray,
|
|
26
|
+
...props
|
|
27
|
+
}) {
|
|
28
|
+
const hasData = data.length > 0 && series.length > 0;
|
|
29
|
+
const xAxisKey = String(xKey);
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
ChartFrame,
|
|
32
|
+
{
|
|
33
|
+
appearance,
|
|
34
|
+
className,
|
|
35
|
+
containerStyle,
|
|
36
|
+
density,
|
|
37
|
+
emptyState,
|
|
38
|
+
hasData,
|
|
39
|
+
height,
|
|
40
|
+
style,
|
|
41
|
+
...props,
|
|
42
|
+
children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin, syncId, children: [
|
|
43
|
+
/* @__PURE__ */ jsx(
|
|
44
|
+
ChartDecorators,
|
|
45
|
+
{
|
|
46
|
+
axis: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
47
|
+
/* @__PURE__ */ jsx(
|
|
48
|
+
XAxis,
|
|
49
|
+
{
|
|
50
|
+
dataKey: xAxisKey,
|
|
51
|
+
minTickGap: 24,
|
|
52
|
+
tickLine: false,
|
|
53
|
+
tickMargin: 10,
|
|
54
|
+
axisLine: false,
|
|
55
|
+
fontSize: 12
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
/* @__PURE__ */ jsx(
|
|
59
|
+
YAxis,
|
|
60
|
+
{
|
|
61
|
+
width: 40,
|
|
62
|
+
tickLine: false,
|
|
63
|
+
tickMargin: 8,
|
|
64
|
+
axisLine: false,
|
|
65
|
+
fontSize: 12
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
] }),
|
|
69
|
+
showGrid,
|
|
70
|
+
showLegend,
|
|
71
|
+
showTooltip,
|
|
72
|
+
tooltipColor
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
series.map((item, index) => {
|
|
76
|
+
const color = resolveColor(item.color, index);
|
|
77
|
+
return /* @__PURE__ */ jsx(
|
|
78
|
+
Line,
|
|
79
|
+
{
|
|
80
|
+
type: "monotone",
|
|
81
|
+
dataKey: item.dataKey,
|
|
82
|
+
name: item.name,
|
|
83
|
+
stroke: color.stroke,
|
|
84
|
+
strokeWidth: 2,
|
|
85
|
+
dot: false,
|
|
86
|
+
activeDot: { r: 5 },
|
|
87
|
+
strokeDasharray: strokeDasharray ?? void 0
|
|
88
|
+
},
|
|
89
|
+
item.dataKey
|
|
90
|
+
);
|
|
91
|
+
})
|
|
92
|
+
] })
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
LineChart.displayName = "LineChart";
|
|
97
|
+
|
|
98
|
+
export { LineChart };
|
|
99
|
+
//# sourceMappingURL=line.mjs.map
|
|
100
|
+
//# sourceMappingURL=line.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/charts/line/Line.tsx"],"names":["RechartsLineChart"],"mappings":";;;;;;AAYO,SAAS,SAAA,CAEd;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,MAAA,GAAS,GAAA;AAAA,EACT,MAAA,GAAS,kBAAA;AAAA,EACT,MAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,UAAA,GAAa,KAAA;AAAA,EACb,WAAA,GAAc,IAAA;AAAA,EACd,YAAA,GAAe,SAAA;AAAA,EACf,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,MAAM,OAAA,GAAU,IAAA,CAAK,MAAA,GAAS,CAAA,IAAK,OAAO,MAAA,GAAS,CAAA;AACnD,EAAA,MAAM,QAAA,GAAW,OAAO,IAAI,CAAA;AAE5B,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAACA,WAAA,EAAA,EAAkB,IAAA,EAAY,MAAA,EAAgB,MAAA,EAC7C,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,sBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAS,QAAA;AAAA,kBACT,UAAA,EAAY,EAAA;AAAA,kBACZ,QAAA,EAAU,KAAA;AAAA,kBACV,UAAA,EAAY,EAAA;AAAA,kBACZ,QAAA,EAAU,KAAA;AAAA,kBACV,QAAA,EAAU;AAAA;AAAA,eACZ;AAAA,8BACA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,KAAA,EAAO,EAAA;AAAA,kBACP,QAAA,EAAU,KAAA;AAAA,kBACV,UAAA,EAAY,CAAA;AAAA,kBACZ,QAAA,EAAU,KAAA;AAAA,kBACV,QAAA,EAAU;AAAA;AAAA;AACZ,aAAA,EACF,CAAA;AAAA,YAEF,QAAA;AAAA,YACA,UAAA;AAAA,YACA,WAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QACC,MAAA,CAAO,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAC3B,UAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,IAAA,CAAK,KAAA,EAAO,KAAK,CAAA;AAC5C,UAAA,uBACE,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cAEC,IAAA,EAAK,UAAA;AAAA,cACL,SAAS,IAAA,CAAK,OAAA;AAAA,cACd,MAAM,IAAA,CAAK,IAAA;AAAA,cACX,QAAQ,KAAA,CAAM,MAAA;AAAA,cACd,WAAA,EAAa,CAAA;AAAA,cACb,GAAA,EAAK,KAAA;AAAA,cACL,SAAA,EAAW,EAAE,CAAA,EAAG,CAAA,EAAE;AAAA,cAClB,iBAAiB,eAAA,IAAmB;AAAA,aAAA;AAAA,YAR/B,IAAA,CAAK;AAAA,WASZ;AAAA,QAEJ,CAAC;AAAA,OAAA,EACH;AAAA;AAAA,GACF;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"line.mjs","sourcesContent":["\"use client\";\n\nimport { Line, LineChart as RechartsLineChart, XAxis, YAxis } from \"recharts\";\n\nimport {\n ChartDecorators,\n ChartFrame,\n defaultChartMargin,\n} from \"../shared/chart-frame\";\nimport { resolveColor } from \"../shared/colors\";\nimport type { LineChartProps } from \"../shared/types\";\n\nexport function LineChart<\n TDatum extends Record<string, number | string | null | undefined>,\n>({\n appearance,\n className,\n containerStyle,\n data,\n density,\n emptyState = null,\n height = 320,\n margin = defaultChartMargin,\n series,\n showGrid = true,\n showLegend = false,\n showTooltip = true,\n tooltipColor = \"#0f172a\",\n style,\n syncId,\n xKey,\n strokeDasharray,\n ...props\n}: LineChartProps<TDatum>) {\n const hasData = data.length > 0 && series.length > 0;\n const xAxisKey = String(xKey);\n\n return (\n <ChartFrame\n appearance={appearance}\n className={className}\n containerStyle={containerStyle}\n density={density}\n emptyState={emptyState}\n hasData={hasData}\n height={height}\n style={style}\n {...props}\n >\n <RechartsLineChart data={data} margin={margin} syncId={syncId}>\n <ChartDecorators\n axis={\n <>\n <XAxis\n dataKey={xAxisKey}\n minTickGap={24}\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n fontSize={12}\n />\n <YAxis\n width={40}\n tickLine={false}\n tickMargin={8}\n axisLine={false}\n fontSize={12}\n />\n </>\n }\n showGrid={showGrid}\n showLegend={showLegend}\n showTooltip={showTooltip}\n tooltipColor={tooltipColor}\n />\n {series.map((item, index) => {\n const color = resolveColor(item.color, index);\n return (\n <Line\n key={item.dataKey}\n type=\"monotone\"\n dataKey={item.dataKey}\n name={item.name}\n stroke={color.stroke}\n strokeWidth={2}\n dot={false}\n activeDot={{ r: 5 }}\n strokeDasharray={strokeDasharray ?? undefined}\n />\n );\n })}\n </RechartsLineChart>\n </ChartFrame>\n );\n}\n\nLineChart.displayName = \"LineChart\";\n"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
|
|
2
|
+
import { chartVariants } from "./variants";
|
|
3
|
+
import { VariantProps } from "class-variance-authority";
|
|
4
|
+
type ChartFrameProps = HTMLAttributes<HTMLDivElement> & {
|
|
5
|
+
appearance?: VariantProps<typeof chartVariants>["appearance"];
|
|
6
|
+
containerStyle?: CSSProperties;
|
|
7
|
+
density?: "compact" | "comfortable" | "spacious" | null;
|
|
8
|
+
emptyState?: ReactNode;
|
|
9
|
+
hasData: boolean;
|
|
10
|
+
height: number;
|
|
11
|
+
showGrid?: boolean;
|
|
12
|
+
showLegend?: boolean;
|
|
13
|
+
showTooltip?: boolean;
|
|
14
|
+
style?: CSSProperties;
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
};
|
|
17
|
+
export declare const defaultChartMargin: {
|
|
18
|
+
top: number;
|
|
19
|
+
right: number;
|
|
20
|
+
bottom: number;
|
|
21
|
+
left: number;
|
|
22
|
+
};
|
|
23
|
+
export declare function ChartFrame({ appearance, children, className, containerStyle, density, emptyState, hasData, height, style, ...props }: ChartFrameProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare function ChartDecorators({ axis, showGrid, showLegend, showTooltip, tooltipColor, }: {
|
|
25
|
+
axis: ReactNode;
|
|
26
|
+
showGrid: boolean;
|
|
27
|
+
showLegend: boolean;
|
|
28
|
+
showTooltip: boolean;
|
|
29
|
+
tooltipColor?: string;
|
|
30
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export {};
|
|
32
|
+
//# sourceMappingURL=chart-frame.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"chart-frame.d.ts","sourceRoot":"","sources":["../../../src/charts/shared/chart-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtD,UAAU,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC;IAC9D,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,IAAI,CAAC;IACxD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;CAA6C,CAAC;AAE7E,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,cAAc,EACd,OAAO,EACP,UAAiB,EACjB,OAAO,EACP,MAAM,EACN,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CAoCjB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,WAAW,EACX,YAAwB,GACzB,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,2CAsBA"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { ChartColor, ChartSeries } from "./types";
|
|
2
|
+
export declare function resolveColor(color: ChartColor | string | undefined, index: number): {
|
|
3
|
+
readonly stroke: "#0891b2";
|
|
4
|
+
readonly fill: "#67e8f9";
|
|
5
|
+
readonly textColor: "#0891b2";
|
|
6
|
+
} | {
|
|
7
|
+
readonly stroke: "#059669";
|
|
8
|
+
readonly fill: "#6ee7b7";
|
|
9
|
+
readonly textColor: "#059669";
|
|
10
|
+
} | {
|
|
11
|
+
readonly stroke: "#7c3aed";
|
|
12
|
+
readonly fill: "#c4b5fd";
|
|
13
|
+
readonly textColor: "#7c3aed";
|
|
14
|
+
} | {
|
|
15
|
+
readonly stroke: "#d97706";
|
|
16
|
+
readonly fill: "#fcd34d";
|
|
17
|
+
readonly textColor: "#d97706";
|
|
18
|
+
} | {
|
|
19
|
+
readonly stroke: "#e11d48";
|
|
20
|
+
readonly fill: "#fda4af";
|
|
21
|
+
readonly textColor: "#e11d48";
|
|
22
|
+
} | {
|
|
23
|
+
readonly stroke: "#475569";
|
|
24
|
+
readonly fill: "#cbd5e1";
|
|
25
|
+
readonly textColor: "#475569";
|
|
26
|
+
} | {
|
|
27
|
+
readonly stroke: "#6b7280";
|
|
28
|
+
readonly fill: "#d1d5db";
|
|
29
|
+
readonly textColor: "#6b7280";
|
|
30
|
+
} | {
|
|
31
|
+
readonly stroke: "#ffffff";
|
|
32
|
+
readonly fill: "#ffffff";
|
|
33
|
+
readonly textColor: "#ffffff";
|
|
34
|
+
} | {
|
|
35
|
+
readonly stroke: "#6366f1";
|
|
36
|
+
readonly fill: "#c7d2fe";
|
|
37
|
+
readonly textColor: "#6366f1";
|
|
38
|
+
} | {
|
|
39
|
+
stroke: string;
|
|
40
|
+
fill: string;
|
|
41
|
+
};
|
|
42
|
+
export declare function getSeriesFill(series: ChartSeries, index: number, opacity?: number): string;
|
|
43
|
+
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/charts/shared/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGvD,wBAAgB,YAAY,CAC1B,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,EACtC,KAAK,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWd;AAED,wBAAgB,aAAa,CAC3B,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,MAAM,EACb,OAAO,SAAO,UASf"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { VariantProps } from "class-variance-authority";
|
|
2
|
+
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
|
|
3
|
+
import type { chartPalette, chartVariants } from "./variants";
|
|
4
|
+
export type ChartType = "area" | "bar" | "bubble" | "line";
|
|
5
|
+
export type ChartColor = keyof typeof chartPalette;
|
|
6
|
+
export type ChartDatum = Record<string, number | string | null | undefined>;
|
|
7
|
+
export type ChartMargin = {
|
|
8
|
+
top?: number;
|
|
9
|
+
right?: number;
|
|
10
|
+
bottom?: number;
|
|
11
|
+
left?: number;
|
|
12
|
+
};
|
|
13
|
+
export type ChartSeries = {
|
|
14
|
+
dataKey: string;
|
|
15
|
+
name?: string;
|
|
16
|
+
color?: ChartColor | string;
|
|
17
|
+
textColor?: string;
|
|
18
|
+
fill?: string;
|
|
19
|
+
stackId?: string;
|
|
20
|
+
zKey?: string;
|
|
21
|
+
};
|
|
22
|
+
export type ChartSharedStatic = VariantProps<typeof chartVariants>;
|
|
23
|
+
export type BaseChartProps<TDatum extends ChartDatum = ChartDatum> = ChartSharedStatic & Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
24
|
+
data: TDatum[];
|
|
25
|
+
series: ChartSeries[];
|
|
26
|
+
xKey: keyof TDatum & string;
|
|
27
|
+
height?: number;
|
|
28
|
+
showGrid?: boolean;
|
|
29
|
+
showLegend?: boolean;
|
|
30
|
+
showTooltip?: boolean;
|
|
31
|
+
tooltipColor?: string;
|
|
32
|
+
stacked?: boolean;
|
|
33
|
+
syncId?: string;
|
|
34
|
+
margin?: ChartMargin;
|
|
35
|
+
emptyState?: ReactNode;
|
|
36
|
+
containerStyle?: CSSProperties;
|
|
37
|
+
strokeDasharray?: string;
|
|
38
|
+
};
|
|
39
|
+
export type AreaChartProps<TDatum extends ChartDatum = ChartDatum> = BaseChartProps<TDatum>;
|
|
40
|
+
export type BarChartProps<TDatum extends ChartDatum = ChartDatum> = BaseChartProps<TDatum>;
|
|
41
|
+
export type LineChartProps<TDatum extends ChartDatum = ChartDatum> = BaseChartProps<TDatum>;
|
|
42
|
+
export type BubbleChartProps<TDatum extends ChartDatum = ChartDatum> = BaseChartProps<TDatum>;
|
|
43
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/charts/shared/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAC;AAEnD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE5E,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEnE,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,UAAU,GAAG,UAAU,IAC/D,iBAAiB,GACf,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,IAAI,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEN,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,UAAU,GAAG,UAAU,IAC/D,cAAc,CAAC,MAAM,CAAC,CAAC;AAEzB,MAAM,MAAM,aAAa,CAAC,MAAM,SAAS,UAAU,GAAG,UAAU,IAC9D,cAAc,CAAC,MAAM,CAAC,CAAC;AAEzB,MAAM,MAAM,cAAc,CAAC,MAAM,SAAS,UAAU,GAAG,UAAU,IAC/D,cAAc,CAAC,MAAM,CAAC,CAAC;AAEzB,MAAM,MAAM,gBAAgB,CAAC,MAAM,SAAS,UAAU,GAAG,UAAU,IACjE,cAAc,CAAC,MAAM,CAAC,CAAC"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
export declare const chartVariants: (props?: ({
|
|
2
|
+
appearance?: "default" | "muted" | "outline" | "glass" | "sky" | "emerald" | "violet" | "amber" | "rose" | "slate" | "gray" | "indigo" | "gradient-cyan-violet" | "gradient-emerald-violet" | "gradient-amber-rose" | "gradient-slate-gray" | "gradient-indigo-purple" | "gradient-cyan-blue" | "gradient-emerald-blue" | "gradient-amber-blue" | null | undefined;
|
|
3
|
+
density?: "compact" | "comfortable" | "spacious" | null | undefined;
|
|
4
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
5
|
+
export declare const chartPalette: {
|
|
6
|
+
readonly cyan: {
|
|
7
|
+
readonly stroke: "#0891b2";
|
|
8
|
+
readonly fill: "#67e8f9";
|
|
9
|
+
readonly textColor: "#0891b2";
|
|
10
|
+
};
|
|
11
|
+
readonly emerald: {
|
|
12
|
+
readonly stroke: "#059669";
|
|
13
|
+
readonly fill: "#6ee7b7";
|
|
14
|
+
readonly textColor: "#059669";
|
|
15
|
+
};
|
|
16
|
+
readonly violet: {
|
|
17
|
+
readonly stroke: "#7c3aed";
|
|
18
|
+
readonly fill: "#c4b5fd";
|
|
19
|
+
readonly textColor: "#7c3aed";
|
|
20
|
+
};
|
|
21
|
+
readonly amber: {
|
|
22
|
+
readonly stroke: "#d97706";
|
|
23
|
+
readonly fill: "#fcd34d";
|
|
24
|
+
readonly textColor: "#d97706";
|
|
25
|
+
};
|
|
26
|
+
readonly rose: {
|
|
27
|
+
readonly stroke: "#e11d48";
|
|
28
|
+
readonly fill: "#fda4af";
|
|
29
|
+
readonly textColor: "#e11d48";
|
|
30
|
+
};
|
|
31
|
+
readonly slate: {
|
|
32
|
+
readonly stroke: "#475569";
|
|
33
|
+
readonly fill: "#cbd5e1";
|
|
34
|
+
readonly textColor: "#475569";
|
|
35
|
+
};
|
|
36
|
+
readonly gray: {
|
|
37
|
+
readonly stroke: "#6b7280";
|
|
38
|
+
readonly fill: "#d1d5db";
|
|
39
|
+
readonly textColor: "#6b7280";
|
|
40
|
+
};
|
|
41
|
+
readonly white: {
|
|
42
|
+
readonly stroke: "#ffffff";
|
|
43
|
+
readonly fill: "#ffffff";
|
|
44
|
+
readonly textColor: "#ffffff";
|
|
45
|
+
};
|
|
46
|
+
readonly indigo: {
|
|
47
|
+
readonly stroke: "#6366f1";
|
|
48
|
+
readonly fill: "#c7d2fe";
|
|
49
|
+
readonly textColor: "#6366f1";
|
|
50
|
+
};
|
|
51
|
+
readonly "gradient-cyan-violet": {
|
|
52
|
+
readonly stroke: "#0891b2";
|
|
53
|
+
readonly fill: "#67e8f9";
|
|
54
|
+
readonly textColor: "#0891b2";
|
|
55
|
+
};
|
|
56
|
+
readonly "gradient-emerald-violet": {
|
|
57
|
+
readonly stroke: "#059669";
|
|
58
|
+
readonly fill: "#6ee7b7";
|
|
59
|
+
readonly textColor: "#059669";
|
|
60
|
+
};
|
|
61
|
+
readonly "gradient-amber-rose": {
|
|
62
|
+
readonly stroke: "#d97706";
|
|
63
|
+
readonly fill: "#fcd34d";
|
|
64
|
+
readonly textColor: "#d97706";
|
|
65
|
+
};
|
|
66
|
+
readonly "gradient-slate-gray": {
|
|
67
|
+
readonly stroke: "#475569";
|
|
68
|
+
readonly fill: "#cbd5e1";
|
|
69
|
+
readonly textColor: "#475569";
|
|
70
|
+
};
|
|
71
|
+
readonly "gradient-indigo-purple": {
|
|
72
|
+
readonly stroke: "#6366f1";
|
|
73
|
+
readonly fill: "#c7d2fe";
|
|
74
|
+
readonly textColor: "#6366f1";
|
|
75
|
+
};
|
|
76
|
+
readonly "gradient-cyan-blue": {
|
|
77
|
+
readonly stroke: "#0891b2";
|
|
78
|
+
readonly fill: "#67e8f9";
|
|
79
|
+
readonly textColor: "#0891b2";
|
|
80
|
+
};
|
|
81
|
+
readonly "gradient-emerald-blue": {
|
|
82
|
+
readonly stroke: "#059669";
|
|
83
|
+
readonly fill: "#6ee7b7";
|
|
84
|
+
readonly textColor: "#059669";
|
|
85
|
+
};
|
|
86
|
+
readonly "gradient-amber-blue": {
|
|
87
|
+
readonly stroke: "#d97706";
|
|
88
|
+
readonly fill: "#fcd34d";
|
|
89
|
+
readonly textColor: "#d97706";
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
export declare const chartColorValues: Array<keyof typeof chartPalette>;
|
|
93
|
+
//# sourceMappingURL=variants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/charts/shared/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;8EA4DzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBf,CAAC;AAEX,eAAO,MAAM,gBAAgB,EAAgC,KAAK,CAChE,MAAM,OAAO,YAAY,CAC1B,CAAC"}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkZS5756ZC_js = require('./chunk-ZS5756ZC.js');
|
|
4
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
5
|
+
var recharts = require('recharts');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
var chartVariants = classVarianceAuthority.cva(
|
|
9
|
+
[
|
|
10
|
+
"relative w-full min-w-0 overflow-hidden rounded-xl",
|
|
11
|
+
"h-[var(--chart-height)] min-h-64 sm:min-h-72 md:min-h-80",
|
|
12
|
+
"[&_.recharts-default-tooltip]:rounded-lg [&_.recharts-default-tooltip]:border [&_.recharts-default-tooltip]:border-slate-200",
|
|
13
|
+
"[&_.recharts-default-tooltip]:bg-white/95 [&_.recharts-default-tooltip]:shadow-lg",
|
|
14
|
+
"[&_.recharts-default-tooltip]:text-slate-900"
|
|
15
|
+
],
|
|
16
|
+
{
|
|
17
|
+
variants: {
|
|
18
|
+
appearance: {
|
|
19
|
+
default: "bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
20
|
+
muted: "bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
21
|
+
outline: "border border-slate-200 bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
22
|
+
glass: "border border-white/15 bg-white/10 text-slate-100 backdrop-blur-md [&_.recharts-cartesian-axis-tick-value]:fill-white",
|
|
23
|
+
sky: "bg-sky-50 text-sky-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
24
|
+
emerald: "bg-emerald-50 text-emerald-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
25
|
+
violet: "bg-violet-50 text-violet-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
26
|
+
amber: "bg-amber-50 text-amber-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
27
|
+
rose: "bg-rose-50 text-rose-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
28
|
+
slate: "bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
29
|
+
gray: "bg-gray-50 text-gray-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
30
|
+
indigo: "bg-indigo-50 text-indigo-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900",
|
|
31
|
+
"gradient-cyan-violet": "bg-gradient-to-r from-cyan-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
|
|
32
|
+
"gradient-emerald-violet": "bg-gradient-to-r from-emerald-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
|
|
33
|
+
"gradient-amber-rose": "bg-gradient-to-r from-amber-500 to-rose-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
|
|
34
|
+
"gradient-slate-gray": "bg-gradient-to-r from-slate-500 to-gray-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
|
|
35
|
+
"gradient-indigo-purple": "bg-gradient-to-r from-indigo-500 to-purple-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
|
|
36
|
+
"gradient-cyan-blue": "bg-gradient-to-r from-cyan-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
|
|
37
|
+
"gradient-emerald-blue": "bg-gradient-to-r from-emerald-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white",
|
|
38
|
+
"gradient-amber-blue": "bg-gradient-to-r from-amber-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white"
|
|
39
|
+
},
|
|
40
|
+
density: {
|
|
41
|
+
compact: "p-2 sm:p-3",
|
|
42
|
+
comfortable: "p-3 sm:p-4",
|
|
43
|
+
spacious: "p-4 sm:p-5 md:p-6"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
defaultVariants: {
|
|
47
|
+
appearance: "default",
|
|
48
|
+
density: "comfortable"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
);
|
|
52
|
+
var chartPalette = {
|
|
53
|
+
cyan: { stroke: "#0891b2", fill: "#67e8f9", textColor: "#0891b2" },
|
|
54
|
+
emerald: { stroke: "#059669", fill: "#6ee7b7", textColor: "#059669" },
|
|
55
|
+
violet: { stroke: "#7c3aed", fill: "#c4b5fd", textColor: "#7c3aed" },
|
|
56
|
+
amber: { stroke: "#d97706", fill: "#fcd34d", textColor: "#d97706" },
|
|
57
|
+
rose: { stroke: "#e11d48", fill: "#fda4af", textColor: "#e11d48" },
|
|
58
|
+
slate: { stroke: "#475569", fill: "#cbd5e1", textColor: "#475569" },
|
|
59
|
+
gray: { stroke: "#6b7280", fill: "#d1d5db", textColor: "#6b7280" },
|
|
60
|
+
white: { stroke: "#ffffff", fill: "#ffffff", textColor: "#ffffff" },
|
|
61
|
+
indigo: { stroke: "#6366f1", fill: "#c7d2fe", textColor: "#6366f1" },
|
|
62
|
+
"gradient-cyan-violet": { stroke: "#0891b2", fill: "#67e8f9", textColor: "#0891b2" },
|
|
63
|
+
"gradient-emerald-violet": { stroke: "#059669", fill: "#6ee7b7", textColor: "#059669" },
|
|
64
|
+
"gradient-amber-rose": { stroke: "#d97706", fill: "#fcd34d", textColor: "#d97706" },
|
|
65
|
+
"gradient-slate-gray": { stroke: "#475569", fill: "#cbd5e1", textColor: "#475569" },
|
|
66
|
+
"gradient-indigo-purple": { stroke: "#6366f1", fill: "#c7d2fe", textColor: "#6366f1" },
|
|
67
|
+
"gradient-cyan-blue": { stroke: "#0891b2", fill: "#67e8f9", textColor: "#0891b2" },
|
|
68
|
+
"gradient-emerald-blue": { stroke: "#059669", fill: "#6ee7b7", textColor: "#059669" },
|
|
69
|
+
"gradient-amber-blue": { stroke: "#d97706", fill: "#fcd34d", textColor: "#d97706" }
|
|
70
|
+
};
|
|
71
|
+
var chartColorValues = Object.keys(chartPalette);
|
|
72
|
+
var defaultChartMargin = { top: 16, right: 16, bottom: 8, left: 0 };
|
|
73
|
+
function ChartFrame({
|
|
74
|
+
appearance,
|
|
75
|
+
children,
|
|
76
|
+
className,
|
|
77
|
+
containerStyle,
|
|
78
|
+
density,
|
|
79
|
+
emptyState = null,
|
|
80
|
+
hasData,
|
|
81
|
+
height,
|
|
82
|
+
style,
|
|
83
|
+
...props
|
|
84
|
+
}) {
|
|
85
|
+
const chartStyle = {
|
|
86
|
+
"--chart-height": `${height}px`,
|
|
87
|
+
...style
|
|
88
|
+
};
|
|
89
|
+
if (!hasData) {
|
|
90
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
91
|
+
"div",
|
|
92
|
+
{
|
|
93
|
+
className: chunkZS5756ZC_js.cn(chartVariants({ appearance, density }), className),
|
|
94
|
+
style: chartStyle,
|
|
95
|
+
...props,
|
|
96
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-48 items-center justify-center text-sm text-slate-500", children: emptyState })
|
|
97
|
+
}
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
101
|
+
"div",
|
|
102
|
+
{
|
|
103
|
+
className: chunkZS5756ZC_js.cn(chartVariants({ appearance, density }), className),
|
|
104
|
+
style: chartStyle,
|
|
105
|
+
...props,
|
|
106
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
+
recharts.ResponsiveContainer,
|
|
108
|
+
{
|
|
109
|
+
width: "100%",
|
|
110
|
+
height: "100%",
|
|
111
|
+
debounce: 80,
|
|
112
|
+
style: containerStyle,
|
|
113
|
+
children
|
|
114
|
+
}
|
|
115
|
+
)
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
function ChartDecorators({
|
|
120
|
+
axis,
|
|
121
|
+
showGrid,
|
|
122
|
+
showLegend,
|
|
123
|
+
showTooltip,
|
|
124
|
+
tooltipColor = "#0f172a"
|
|
125
|
+
}) {
|
|
126
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
127
|
+
showGrid ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
128
|
+
recharts.CartesianGrid,
|
|
129
|
+
{
|
|
130
|
+
strokeDasharray: "3 3",
|
|
131
|
+
stroke: "currentColor",
|
|
132
|
+
opacity: 0.16
|
|
133
|
+
}
|
|
134
|
+
) : null,
|
|
135
|
+
axis,
|
|
136
|
+
showTooltip ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
137
|
+
recharts.Tooltip,
|
|
138
|
+
{
|
|
139
|
+
cursor: { opacity: 0.12 },
|
|
140
|
+
contentStyle: { color: tooltipColor },
|
|
141
|
+
labelStyle: { color: tooltipColor },
|
|
142
|
+
itemStyle: { color: tooltipColor }
|
|
143
|
+
}
|
|
144
|
+
) : null,
|
|
145
|
+
showLegend ? /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}) : null
|
|
146
|
+
] });
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
// src/charts/shared/colors.ts
|
|
150
|
+
function resolveColor(color, index) {
|
|
151
|
+
if (color && color in chartPalette) {
|
|
152
|
+
return chartPalette[color];
|
|
153
|
+
}
|
|
154
|
+
if (color) {
|
|
155
|
+
return { stroke: color, fill: color };
|
|
156
|
+
}
|
|
157
|
+
const paletteValues = Object.values(chartPalette);
|
|
158
|
+
return paletteValues[index % paletteValues.length] ?? chartPalette.cyan;
|
|
159
|
+
}
|
|
160
|
+
function getSeriesFill(series, index, opacity = 0.18) {
|
|
161
|
+
const color = resolveColor(series.color, index);
|
|
162
|
+
return series.fill ?? `${color.fill}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
exports.ChartDecorators = ChartDecorators;
|
|
166
|
+
exports.ChartFrame = ChartFrame;
|
|
167
|
+
exports.chartColorValues = chartColorValues;
|
|
168
|
+
exports.chartPalette = chartPalette;
|
|
169
|
+
exports.chartVariants = chartVariants;
|
|
170
|
+
exports.defaultChartMargin = defaultChartMargin;
|
|
171
|
+
exports.getSeriesFill = getSeriesFill;
|
|
172
|
+
exports.resolveColor = resolveColor;
|
|
173
|
+
//# sourceMappingURL=chunk-CIN5JDN4.js.map
|
|
174
|
+
//# sourceMappingURL=chunk-CIN5JDN4.js.map
|