@thesage/charts 0.1.1 → 0.1.2
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/.turbo/turbo-build.log +6 -6
- package/CHANGELOG.md +7 -1
- package/README.md +87 -0
- package/package.json +2 -2
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @thesage/charts@0.1.
|
|
2
|
+
> @thesage/charts@0.1.2 build /home/runner/work/ecosystem/ecosystem/packages/charts
|
|
3
3
|
> tsup src/index.ts --format cjs,esm --dts
|
|
4
4
|
|
|
5
5
|
[34mCLI[39m Building entry: src/index.ts
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
[34mCLI[39m Cleaning output folder
|
|
11
11
|
[34mCJS[39m Build start
|
|
12
12
|
[34mESM[39m Build start
|
|
13
|
-
[32mCJS[39m [1mdist/index.js [22m[32m4.97 KB[39m
|
|
14
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m17.17 KB[39m
|
|
15
|
-
[32mCJS[39m ⚡️ Build success in 42ms
|
|
16
13
|
[32mESM[39m [1mdist/index.mjs [22m[32m4.07 KB[39m
|
|
17
14
|
[32mESM[39m [1mdist/index.mjs.map [22m[32m17.02 KB[39m
|
|
18
|
-
[32mESM[39m ⚡️ Build success in
|
|
15
|
+
[32mESM[39m ⚡️ Build success in 60ms
|
|
16
|
+
[32mCJS[39m [1mdist/index.js [22m[32m4.97 KB[39m
|
|
17
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m17.17 KB[39m
|
|
18
|
+
[32mCJS[39m ⚡️ Build success in 64ms
|
|
19
19
|
[34mDTS[39m Build start
|
|
20
|
-
[32mDTS[39m ⚡️ Build success in
|
|
20
|
+
[32mDTS[39m ⚡️ Build success in 6218ms
|
|
21
21
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m2.31 KB[39m
|
|
22
22
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m2.31 KB[39m
|
package/CHANGELOG.md
CHANGED
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# Sage Charts (@thesage/charts)
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@thesage/charts)
|
|
6
|
+
[](https://github.com/shalomormsby/ecosystem/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
**Beautiful, responsive charts for Sage UI.**
|
|
9
|
+
|
|
10
|
+
[Documentation](https://thesage.dev) • [GitHub](https://github.com/shalomormsby/ecosystem)
|
|
11
|
+
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
**Sage Charts** is a high-level wrapper around **Recharts**, configured to integrate seamlessly with the Sage UI design tokens. It provides a standardized `ChartContainer` API that handles theming (colors, fonts, tooltips) automatically, making data visualization beautiful by default.
|
|
17
|
+
|
|
18
|
+
## ✨ Features
|
|
19
|
+
|
|
20
|
+
- **🎨 Theme Aware**: Automatically picks up Sage UI colors (charts 1-5).
|
|
21
|
+
- **🌗 Mode Ready**: Adapts seamlessly to light and dark modes.
|
|
22
|
+
- **🛠️ Configurable**: Simple configuration object for labels and icons.
|
|
23
|
+
- **🧩 Recharts Power**: Full access to the underlying Recharts primitives.
|
|
24
|
+
|
|
25
|
+
## 🚀 Installation
|
|
26
|
+
|
|
27
|
+
Install the package and its peer dependencies.
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
pnpm add @thesage/charts recharts
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### ⚠️ React 19 Compatibility Note
|
|
34
|
+
If you are using **React 19**, you may need to add an override for `react-is` to ensure compatibility with Recharts versions prior to explicit React 19 support.
|
|
35
|
+
|
|
36
|
+
In your `package.json`:
|
|
37
|
+
```json
|
|
38
|
+
"pnpm": {
|
|
39
|
+
"overrides": {
|
|
40
|
+
"react-is": "^19.0.0-rc"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## 💻 Usage
|
|
46
|
+
|
|
47
|
+
Sage Charts uses a `ChartContainer` to wrap standard Recharts components.
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
|
|
51
|
+
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@thesage/charts"
|
|
52
|
+
|
|
53
|
+
// Define your config (labels and colors)
|
|
54
|
+
const chartConfig = {
|
|
55
|
+
desktop: {
|
|
56
|
+
label: "Desktop",
|
|
57
|
+
color: "hsl(var(--chart-1))",
|
|
58
|
+
},
|
|
59
|
+
mobile: {
|
|
60
|
+
label: "Mobile",
|
|
61
|
+
color: "hsl(var(--chart-2))",
|
|
62
|
+
},
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export function MyChart() {
|
|
66
|
+
const chartData = [
|
|
67
|
+
{ month: "January", desktop: 186, mobile: 80 },
|
|
68
|
+
{ month: "February", desktop: 305, mobile: 200 },
|
|
69
|
+
]
|
|
70
|
+
|
|
71
|
+
return (
|
|
72
|
+
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
|
|
73
|
+
<BarChart data={chartData}>
|
|
74
|
+
<CartesianGrid vertical={false} />
|
|
75
|
+
<XAxis dataKey="month" />
|
|
76
|
+
<ChartTooltip content={<ChartTooltipContent />} />
|
|
77
|
+
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
|
|
78
|
+
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
|
|
79
|
+
</BarChart>
|
|
80
|
+
</ChartContainer>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## 📄 License
|
|
86
|
+
|
|
87
|
+
MIT © [Shalom Ormsby](https://github.com/shalomormsby)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thesage/charts",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@types/react": "^18.3.3",
|
|
24
24
|
"tsup": "^8.0.0",
|
|
25
25
|
"typescript": "^5.0.0",
|
|
26
|
-
"@thesage/config": "0.0.
|
|
26
|
+
"@thesage/config": "0.0.3"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"clsx": "^2.1.1",
|