@sqlrooms/recharts 0.28.0-rc.0 → 0.28.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/README.md +87 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1 +1,87 @@
|
|
|
1
|
-
|
|
1
|
+
Recharts integration for SQLRooms with a theme-aware chart container and tooltip/legend helpers.
|
|
2
|
+
|
|
3
|
+
This package re-exports the full `recharts` API and adds SQLRooms-friendly wrappers:
|
|
4
|
+
|
|
5
|
+
- `ChartContainer`
|
|
6
|
+
- `ChartTooltip`, `ChartTooltipContent`
|
|
7
|
+
- `ChartLegend`, `ChartLegendContent`
|
|
8
|
+
- `ChartConfig` typing for series labels/colors
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @sqlrooms/recharts
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Basic usage
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
import {
|
|
20
|
+
Bar,
|
|
21
|
+
BarChart,
|
|
22
|
+
CartesianGrid,
|
|
23
|
+
ChartContainer,
|
|
24
|
+
ChartTooltip,
|
|
25
|
+
ChartTooltipContent,
|
|
26
|
+
XAxis,
|
|
27
|
+
YAxis,
|
|
28
|
+
} from '@sqlrooms/recharts';
|
|
29
|
+
|
|
30
|
+
const defaultRows = [
|
|
31
|
+
{month: 'Jan', revenue: 1200},
|
|
32
|
+
{month: 'Feb', revenue: 1800},
|
|
33
|
+
{month: 'Mar', revenue: 1600},
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
export function RevenueChart({
|
|
37
|
+
rows = defaultRows,
|
|
38
|
+
}: {
|
|
39
|
+
rows?: Array<{month: string; revenue: number}>;
|
|
40
|
+
}) {
|
|
41
|
+
return (
|
|
42
|
+
<ChartContainer
|
|
43
|
+
className="min-h-[16rem] w-full"
|
|
44
|
+
config={{
|
|
45
|
+
revenue: {
|
|
46
|
+
label: 'Revenue',
|
|
47
|
+
color: 'hsl(var(--chart-1))',
|
|
48
|
+
},
|
|
49
|
+
}}
|
|
50
|
+
>
|
|
51
|
+
<BarChart data={rows} accessibilityLayer={true}>
|
|
52
|
+
<CartesianGrid vertical={false} />
|
|
53
|
+
<XAxis dataKey="month" />
|
|
54
|
+
<YAxis />
|
|
55
|
+
<ChartTooltip content={<ChartTooltipContent />} />
|
|
56
|
+
<Bar dataKey="revenue" fill="var(--color-revenue)" radius={6} />
|
|
57
|
+
</BarChart>
|
|
58
|
+
</ChartContainer>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Using with SQLRooms query results
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import {useSql} from '@sqlrooms/duckdb';
|
|
67
|
+
import {RevenueChart} from './RevenueChart';
|
|
68
|
+
|
|
69
|
+
function RevenueChartFromSql() {
|
|
70
|
+
const {data} = useSql<{month: string; revenue: number}>({
|
|
71
|
+
query: `
|
|
72
|
+
SELECT month, SUM(revenue) AS revenue
|
|
73
|
+
FROM sales
|
|
74
|
+
GROUP BY month
|
|
75
|
+
ORDER BY month
|
|
76
|
+
`,
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
const rows = data?.toArray() ?? [];
|
|
80
|
+
return <RevenueChart rows={rows} />;
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## Notes
|
|
85
|
+
|
|
86
|
+
- `@sqlrooms/recharts` is UI-only; it does not require a specific SQLRooms slice.
|
|
87
|
+
- Best used with `@sqlrooms/duckdb` query hooks and `@sqlrooms/ui` theming.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sqlrooms/recharts",
|
|
3
|
-
"version": "0.28.0
|
|
3
|
+
"version": "0.28.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@sqlrooms/ui": "0.28.0
|
|
22
|
+
"@sqlrooms/ui": "0.28.0",
|
|
23
23
|
"recharts": "^2.15.4"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
@@ -33,5 +33,5 @@
|
|
|
33
33
|
"typecheck": "tsc --noEmit",
|
|
34
34
|
"typedoc": "typedoc"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "dcac54f8adf77240e293c93d224a0ce9fd8142a9"
|
|
37
37
|
}
|