@sckyzo/cosmos-charts 0.0.1

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 (10) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/LICENSE +21 -0
  3. package/README.md +38 -0
  4. package/dist/index.cjs +484 -0
  5. package/dist/index.cjs.map +1 -0
  6. package/dist/index.d.cts +143 -0
  7. package/dist/index.d.ts +143 -0
  8. package/dist/index.js +463 -0
  9. package/dist/index.js.map +1 -0
  10. package/package.json +70 -0
package/dist/index.d.cts ADDED
@@ -0,0 +1,143 @@
1
+ import * as apexcharts from 'apexcharts';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+
4
+ declare const COSMOS_BRAND = "#465fff";
5
+ declare const COSMOS_PALETTE: string[];
6
+ /**
7
+ * Subscribes to dark-mode toggles on `<html>` (the Cosmos convention).
8
+ * Returns the current `isDark` value.
9
+ */
10
+ declare const useDarkMode: () => boolean;
11
+ /**
12
+ * Returns ApexCharts grid + axis options matching the Cosmos design tokens
13
+ * for the current color scheme.
14
+ */
15
+ declare const useChartTheme: () => {
16
+ dark: boolean;
17
+ grid: apexcharts.ApexGrid;
18
+ axisLabels: {
19
+ style: {
20
+ colors: string;
21
+ fontSize: string;
22
+ fontFamily: string;
23
+ };
24
+ };
25
+ brand: string;
26
+ palette: string[];
27
+ };
28
+
29
+ type ChartSeriesPoint = [number, number] | {
30
+ x: number | string;
31
+ y: number;
32
+ };
33
+ type ChartSize = {
34
+ height?: number | string;
35
+ width?: number | string;
36
+ };
37
+
38
+ type LineAreaChartProps = ChartSize & {
39
+ series: {
40
+ name: string;
41
+ data: number[];
42
+ }[];
43
+ categories: (string | number)[];
44
+ };
45
+ declare const LineAreaChart: ({ series, categories, height, width, }: LineAreaChartProps) => react_jsx_runtime.JSX.Element;
46
+
47
+ type RealtimeChartProps = ChartSize & {
48
+ /** Sample generator — defaults to a noisy walk between 30 and 80. */
49
+ generator?: () => number;
50
+ /** Interval in ms — defaults to 2000. */
51
+ intervalMs?: number;
52
+ windowSize?: number;
53
+ warnThreshold?: number;
54
+ critThreshold?: number;
55
+ };
56
+ declare const RealtimeChart: ({ generator, intervalMs, windowSize, warnThreshold, critThreshold, height, width, }: RealtimeChartProps) => react_jsx_runtime.JSX.Element;
57
+
58
+ type RadialBarChartProps = ChartSize & {
59
+ series: number[];
60
+ labels: string[];
61
+ };
62
+ declare const RadialBarChart: ({ series, labels, height, width, }: RadialBarChartProps) => react_jsx_runtime.JSX.Element;
63
+
64
+ type GradientRadialProps = ChartSize & {
65
+ value: number;
66
+ label?: string;
67
+ };
68
+ declare const GradientRadial: ({ value, label, height, width, }: GradientRadialProps) => react_jsx_runtime.JSX.Element;
69
+
70
+ type SemiCircleGaugeProps = ChartSize & {
71
+ value: number;
72
+ label?: string;
73
+ color?: string;
74
+ };
75
+ declare const SemiCircleGauge: ({ value, label, color, height, width, }: SemiCircleGaugeProps) => react_jsx_runtime.JSX.Element;
76
+
77
+ type StrokedGaugeProps = ChartSize & {
78
+ value: number;
79
+ label?: string;
80
+ };
81
+ declare const StrokedGauge: ({ value, label, height, width, }: StrokedGaugeProps) => react_jsx_runtime.JSX.Element;
82
+
83
+ type DonutChartProps = ChartSize & {
84
+ series: number[];
85
+ labels: string[];
86
+ /** Whether to show the right-side legend (default: bottom). */
87
+ rightLegend?: boolean;
88
+ };
89
+ declare const DonutChart: ({ series, labels, rightLegend, height, width, }: DonutChartProps) => react_jsx_runtime.JSX.Element;
90
+ declare const DonutRightLegend: (props: Omit<DonutChartProps, "rightLegend">) => react_jsx_runtime.JSX.Element;
91
+
92
+ type SparklineProps = ChartSize & {
93
+ data: number[];
94
+ color?: string;
95
+ variant?: 'line' | 'area';
96
+ };
97
+ declare const Sparkline: ({ data, color, variant, height, width, }: SparklineProps) => react_jsx_runtime.JSX.Element;
98
+ type SparklineGroupItem = {
99
+ label: string;
100
+ value: number | string;
101
+ data: number[];
102
+ color?: string;
103
+ };
104
+ declare const SparklineGroup: ({ items, className, }: {
105
+ items: SparklineGroupItem[];
106
+ className?: string;
107
+ }) => react_jsx_runtime.JSX.Element;
108
+
109
+ type TreemapDatum = {
110
+ x: string;
111
+ y: number;
112
+ };
113
+ type TreemapChartProps = ChartSize & {
114
+ series: {
115
+ name?: string;
116
+ data: TreemapDatum[];
117
+ }[];
118
+ };
119
+ declare const TreemapChart: ({ series, height, width }: TreemapChartProps) => react_jsx_runtime.JSX.Element;
120
+
121
+ type BarChartOrientation = 'vertical' | 'horizontal';
122
+ type BarChartProps = ChartSize & {
123
+ series: {
124
+ name: string;
125
+ data: number[];
126
+ }[];
127
+ categories: (string | number)[];
128
+ /** `vertical` (default) draws bars upward; `horizontal` draws them rightward. */
129
+ orientation?: BarChartOrientation;
130
+ /** Stack multi-series bars instead of grouping them side-by-side. */
131
+ stacked?: boolean;
132
+ /** Override the default Cosmos palette. */
133
+ colors?: string[];
134
+ /** Format the numeric axis labels (and tooltip values). */
135
+ formatValue?: (value: number) => string;
136
+ /** Show the legend (auto-true when 2+ series). */
137
+ showLegend?: boolean;
138
+ /** Tailwind border-radius applied to bar tops. Default 4. */
139
+ borderRadius?: number;
140
+ };
141
+ declare const BarChart: ({ series, categories, orientation, stacked, colors, formatValue, showLegend, borderRadius, height, width, }: BarChartProps) => react_jsx_runtime.JSX.Element;
142
+
143
+ export { BarChart, type BarChartOrientation, type BarChartProps, COSMOS_BRAND, COSMOS_PALETTE, type ChartSeriesPoint, type ChartSize, DonutChart, type DonutChartProps, DonutRightLegend, GradientRadial, type GradientRadialProps, LineAreaChart, type LineAreaChartProps, RadialBarChart, type RadialBarChartProps, RealtimeChart, type RealtimeChartProps, SemiCircleGauge, type SemiCircleGaugeProps, Sparkline, SparklineGroup, type SparklineGroupItem, type SparklineProps, StrokedGauge, type StrokedGaugeProps, TreemapChart, type TreemapChartProps, type TreemapDatum, useChartTheme, useDarkMode };
package/dist/index.d.ts ADDED
@@ -0,0 +1,143 @@
1
+ import * as apexcharts from 'apexcharts';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+
4
+ declare const COSMOS_BRAND = "#465fff";
5
+ declare const COSMOS_PALETTE: string[];
6
+ /**
7
+ * Subscribes to dark-mode toggles on `<html>` (the Cosmos convention).
8
+ * Returns the current `isDark` value.
9
+ */
10
+ declare const useDarkMode: () => boolean;
11
+ /**
12
+ * Returns ApexCharts grid + axis options matching the Cosmos design tokens
13
+ * for the current color scheme.
14
+ */
15
+ declare const useChartTheme: () => {
16
+ dark: boolean;
17
+ grid: apexcharts.ApexGrid;
18
+ axisLabels: {
19
+ style: {
20
+ colors: string;
21
+ fontSize: string;
22
+ fontFamily: string;
23
+ };
24
+ };
25
+ brand: string;
26
+ palette: string[];
27
+ };
28
+
29
+ type ChartSeriesPoint = [number, number] | {
30
+ x: number | string;
31
+ y: number;
32
+ };
33
+ type ChartSize = {
34
+ height?: number | string;
35
+ width?: number | string;
36
+ };
37
+
38
+ type LineAreaChartProps = ChartSize & {
39
+ series: {
40
+ name: string;
41
+ data: number[];
42
+ }[];
43
+ categories: (string | number)[];
44
+ };
45
+ declare const LineAreaChart: ({ series, categories, height, width, }: LineAreaChartProps) => react_jsx_runtime.JSX.Element;
46
+
47
+ type RealtimeChartProps = ChartSize & {
48
+ /** Sample generator — defaults to a noisy walk between 30 and 80. */
49
+ generator?: () => number;
50
+ /** Interval in ms — defaults to 2000. */
51
+ intervalMs?: number;
52
+ windowSize?: number;
53
+ warnThreshold?: number;
54
+ critThreshold?: number;
55
+ };
56
+ declare const RealtimeChart: ({ generator, intervalMs, windowSize, warnThreshold, critThreshold, height, width, }: RealtimeChartProps) => react_jsx_runtime.JSX.Element;
57
+
58
+ type RadialBarChartProps = ChartSize & {
59
+ series: number[];
60
+ labels: string[];
61
+ };
62
+ declare const RadialBarChart: ({ series, labels, height, width, }: RadialBarChartProps) => react_jsx_runtime.JSX.Element;
63
+
64
+ type GradientRadialProps = ChartSize & {
65
+ value: number;
66
+ label?: string;
67
+ };
68
+ declare const GradientRadial: ({ value, label, height, width, }: GradientRadialProps) => react_jsx_runtime.JSX.Element;
69
+
70
+ type SemiCircleGaugeProps = ChartSize & {
71
+ value: number;
72
+ label?: string;
73
+ color?: string;
74
+ };
75
+ declare const SemiCircleGauge: ({ value, label, color, height, width, }: SemiCircleGaugeProps) => react_jsx_runtime.JSX.Element;
76
+
77
+ type StrokedGaugeProps = ChartSize & {
78
+ value: number;
79
+ label?: string;
80
+ };
81
+ declare const StrokedGauge: ({ value, label, height, width, }: StrokedGaugeProps) => react_jsx_runtime.JSX.Element;
82
+
83
+ type DonutChartProps = ChartSize & {
84
+ series: number[];
85
+ labels: string[];
86
+ /** Whether to show the right-side legend (default: bottom). */
87
+ rightLegend?: boolean;
88
+ };
89
+ declare const DonutChart: ({ series, labels, rightLegend, height, width, }: DonutChartProps) => react_jsx_runtime.JSX.Element;
90
+ declare const DonutRightLegend: (props: Omit<DonutChartProps, "rightLegend">) => react_jsx_runtime.JSX.Element;
91
+
92
+ type SparklineProps = ChartSize & {
93
+ data: number[];
94
+ color?: string;
95
+ variant?: 'line' | 'area';
96
+ };
97
+ declare const Sparkline: ({ data, color, variant, height, width, }: SparklineProps) => react_jsx_runtime.JSX.Element;
98
+ type SparklineGroupItem = {
99
+ label: string;
100
+ value: number | string;
101
+ data: number[];
102
+ color?: string;
103
+ };
104
+ declare const SparklineGroup: ({ items, className, }: {
105
+ items: SparklineGroupItem[];
106
+ className?: string;
107
+ }) => react_jsx_runtime.JSX.Element;
108
+
109
+ type TreemapDatum = {
110
+ x: string;
111
+ y: number;
112
+ };
113
+ type TreemapChartProps = ChartSize & {
114
+ series: {
115
+ name?: string;
116
+ data: TreemapDatum[];
117
+ }[];
118
+ };
119
+ declare const TreemapChart: ({ series, height, width }: TreemapChartProps) => react_jsx_runtime.JSX.Element;
120
+
121
+ type BarChartOrientation = 'vertical' | 'horizontal';
122
+ type BarChartProps = ChartSize & {
123
+ series: {
124
+ name: string;
125
+ data: number[];
126
+ }[];
127
+ categories: (string | number)[];
128
+ /** `vertical` (default) draws bars upward; `horizontal` draws them rightward. */
129
+ orientation?: BarChartOrientation;
130
+ /** Stack multi-series bars instead of grouping them side-by-side. */
131
+ stacked?: boolean;
132
+ /** Override the default Cosmos palette. */
133
+ colors?: string[];
134
+ /** Format the numeric axis labels (and tooltip values). */
135
+ formatValue?: (value: number) => string;
136
+ /** Show the legend (auto-true when 2+ series). */
137
+ showLegend?: boolean;
138
+ /** Tailwind border-radius applied to bar tops. Default 4. */
139
+ borderRadius?: number;
140
+ };
141
+ declare const BarChart: ({ series, categories, orientation, stacked, colors, formatValue, showLegend, borderRadius, height, width, }: BarChartProps) => react_jsx_runtime.JSX.Element;
142
+
143
+ export { BarChart, type BarChartOrientation, type BarChartProps, COSMOS_BRAND, COSMOS_PALETTE, type ChartSeriesPoint, type ChartSize, DonutChart, type DonutChartProps, DonutRightLegend, GradientRadial, type GradientRadialProps, LineAreaChart, type LineAreaChartProps, RadialBarChart, type RadialBarChartProps, RealtimeChart, type RealtimeChartProps, SemiCircleGauge, type SemiCircleGaugeProps, Sparkline, SparklineGroup, type SparklineGroupItem, type SparklineProps, StrokedGauge, type StrokedGaugeProps, TreemapChart, type TreemapChartProps, type TreemapDatum, useChartTheme, useDarkMode };