Skip to content

Commit 628f2d8

Browse files
hngngnhngngn
committed
feat: implement Chart for UnoCSS 
1 parent ccfa60c commit 628f2d8

File tree

14 files changed

+508
-78
lines changed

14 files changed

+508
-78
lines changed

‎.idea/prettier.xml

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/src/app.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@
4141
--vis-tooltip-border-radius: theme("borderRadius.lg") !important;
4242
--vis-tooltip-text-color: theme("textColor.foreground") !important;
4343
--vis-font-family: theme("fontFamily.sans") !important;
44-
--vis-legend-label-font-size: theme("fontSize.xs") !important;
4544
--vis-legend-label-color: var(--vis-tooltip-text-color) !important;
4645
--chart-1: 12 76% 61%;
4746
--chart-2: 173 58% 39%;

‎docs/src/registry/tailwindcss/ui/chart.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ export const ChartTooltipContent = <T, C extends ChartConfig = undefined>(
228228
{(item, index) => (
229229
<div
230230
class={cn(
231-
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
231+
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
232232
merge.indicator === "dot" && "items-center"
233233
)}
234234
>
@@ -247,7 +247,7 @@ export const ChartTooltipContent = <T, C extends ChartConfig = undefined>(
247247
class={cn(
248248
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
249249
{
250-
"h-2.5 w-2.5": merge.indicator === "dot",
250+
"size-2.5": merge.indicator === "dot",
251251
"w-1": merge.indicator === "line",
252252
"w-0 border-[1.5px] border-dashed bg-transparent":
253253
merge.indicator === "dashed",

‎docs/src/registry/ui.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -565,6 +565,7 @@ export const ui: Registry = [
565565
type: "registry:ui",
566566
dependencies: ["@kobalte/core"],
567567
registryDependencies: [
568+
"use-mobile",
568569
"call-handler",
569570
"combine-props",
570571
"button",

‎docs/src/routes/(app)/docs/components/chart.mdx

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,16 @@ export default MyChart
5454

5555
<ComponentInstallation >
5656

57-
```bash
58-
npx shadcn-solid@latest add chart
59-
```
57+
<Step>
58+
59+
<StepItem>Run the following command to install `chart.tsx`</StepItem>
60+
```bash
61+
npx shadcn-solid@latest add chart
62+
```
63+
64+
<StepItem>Check the `Manual` tab for the CSS file based on your CSS framework</StepItem>
65+
66+
</Step>
6067

6168
<Step>
6269

@@ -84,7 +91,6 @@ npm install @unovis/ts @unovis/solid
8491
--vis-tooltip-border-radius: theme("borderRadius.lg") !important;
8592
--vis-tooltip-text-color: theme("textColor.foreground") !important;
8693
--vis-font-family: theme("fontFamily.sans") !important;
87-
--vis-legend-label-font-size: theme("fontSize.xs") !important;
8894
--vis-legend-label-color: var(--vis-tooltip-text-color) !important;
8995
--chart-1: 12 76% 61%;
9096
--chart-2: 173 58% 39%;
@@ -117,6 +123,37 @@ npm install @unovis/ts @unovis/solid
117123
```tsx file=<rootDir>/../packages/unocss/ui/chart.tsx
118124
```
119125

126+
<StepItem>Add the following colors to your CSS file</StepItem>
127+
128+
```css
129+
@layer base {
130+
:root {
131+
--vis-tooltip-padding: 0.375rem 0.625rem !important;
132+
--vis-tooltip-box-shadow: var(--un-shadow-inset) 0 20px 25px -5px
133+
rgb(0 0 0 / 0.1) !important;
134+
--vis-tooltip-background-color: theme("colors.background") !important;
135+
--vis-tooltip-border-color: theme("colors.border") !important;
136+
--vis-tooltip-border-radius: theme("borderRadius.lg") !important;
137+
--vis-tooltip-text-color: theme("colors.foreground") !important;
138+
--vis-font-family: theme("fontFamily.sans") !important;
139+
--vis-legend-label-color: var(--vis-tooltip-text-color) !important;
140+
--chart-1: 12 76% 61%;
141+
--chart-2: 173 58% 39%;
142+
--chart-3: 197 37% 24%;
143+
--chart-4: 43 74% 66%;
144+
--chart-5: 27 87% 67%;
145+
}
146+
147+
[data-kb-theme="dark"] {
148+
--chart-1: 220 70% 50%;
149+
--chart-2: 160 60% 45%;
150+
--chart-3: 30 80% 55%;
151+
--chart-4: 280 65% 60%;
152+
--chart-5: 340 75% 55%;
153+
}
154+
}
155+
```
156+
120157
</Step>
121158

122159
</ComponentInstallation>

‎packages/unocss/dev/app.css

Lines changed: 77 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,91 @@
11
:root {
2-
--background: 0 0% 100%;
3-
--foreground: 240 10% 3.9%;
4-
--card: 0 0% 100%;
5-
--card-foreground: 240 10% 3.9%;
6-
--popover: 0 0% 100%;
7-
--popover-foreground: 240 10% 3.9%;
8-
--primary: 240 5.9% 10%;
9-
--primary-foreground: 0 0% 98%;
10-
--secondary: 240 4.8% 95.9%;
11-
--secondary-foreground: 240 5.9% 10%;
12-
--muted: 240 4.8% 95.9%;
13-
--muted-foreground: 240 3.8% 46.1%;
14-
--accent: 240 4.8% 95.9%;
15-
--accent-foreground: 240 5.9% 10%;
16-
--destructive: 0 72.22% 50.59%;
17-
--destructive-foreground: 0 0% 98%;
18-
--border: 240 5.9% 90%;
19-
--input: 240 5.9% 90%;
20-
--ring: 240 5% 64.9%;
21-
--radius: 0.5rem;
22-
--sidebar-background: 0 0% 98%;
23-
--sidebar-foreground: 240 5.3% 26.1%;
24-
--sidebar-primary: 240 5.9% 10%;
25-
--sidebar-primary-foreground: 0 0% 98%;
26-
--sidebar-accent: 240 4.8% 95.9%;
27-
--sidebar-accent-foreground: 240 5.9% 10%;
28-
--sidebar-border: 220 13% 91%;
29-
--sidebar-ring: 240 5% 64.9%;
2+
--background: 0 0% 100%;
3+
--foreground: 240 10% 3.9%;
4+
--card: 0 0% 100%;
5+
--card-foreground: 240 10% 3.9%;
6+
--popover: 0 0% 100%;
7+
--popover-foreground: 240 10% 3.9%;
8+
--primary: 240 5.9% 10%;
9+
--primary-foreground: 0 0% 98%;
10+
--secondary: 240 4.8% 95.9%;
11+
--secondary-foreground: 240 5.9% 10%;
12+
--muted: 240 4.8% 95.9%;
13+
--muted-foreground: 240 3.8% 46.1%;
14+
--accent: 240 4.8% 95.9%;
15+
--accent-foreground: 240 5.9% 10%;
16+
--destructive: 0 72.22% 50.59%;
17+
--destructive-foreground: 0 0% 98%;
18+
--border: 240 5.9% 90%;
19+
--input: 240 5.9% 90%;
20+
--ring: 240 5% 64.9%;
21+
--radius: 0.5rem;
22+
--sidebar-background: 0 0% 98%;
23+
--sidebar-foreground: 240 5.3% 26.1%;
24+
--sidebar-primary: 240 5.9% 10%;
25+
--sidebar-primary-foreground: 0 0% 98%;
26+
--sidebar-accent: 240 4.8% 95.9%;
27+
--sidebar-accent-foreground: 240 5.9% 10%;
28+
--sidebar-border: 220 13% 91%;
29+
--sidebar-ring: 240 5% 64.9%;
30+
--vis-tooltip-padding: 0.375rem 0.625rem !important;
31+
--vis-tooltip-box-shadow: var(--un-shadow-inset) 0 20px 25px -5px
32+
rgb(0 0 0 / 0.1) !important;
33+
--vis-tooltip-background-color: theme("colors.background") !important;
34+
--vis-tooltip-border-color: theme("colors.border") !important;
35+
--vis-tooltip-border-radius: theme("borderRadius.lg") !important;
36+
--vis-tooltip-text-color: theme("colors.foreground") !important;
37+
--vis-font-family: theme("fontFamily.sans") !important;
38+
--vis-legend-label-color: var(--vis-tooltip-text-color) !important;
39+
--chart-1: 12 76% 61%;
40+
--chart-2: 173 58% 39%;
41+
--chart-3: 197 37% 24%;
42+
--chart-4: 43 74% 66%;
43+
--chart-5: 27 87% 67%;
3044
}
3145

3246
[data-kb-theme="dark"] {
33-
--background: 240 10% 3.9%;
34-
--foreground: 0 0% 98%;
35-
--card: 240 10% 3.9%;
36-
--card-foreground: 0 0% 98%;
37-
--popover: 240 10% 3.9%;
38-
--popover-foreground: 0 0% 98%;
39-
--primary: 0 0% 98%;
40-
--primary-foreground: 240 5.9% 10%;
41-
--secondary: 240 3.7% 15.9%;
42-
--secondary-foreground: 0 0% 98%;
43-
--muted: 240 3.7% 15.9%;
44-
--muted-foreground: 240 5% 64.9%;
45-
--accent: 240 3.7% 15.9%;
46-
--accent-foreground: 0 0% 98%;
47-
--destructive: 0 62.8% 30.6%;
48-
--destructive-foreground: 0 85.7% 97.3%;
49-
--border: 240 3.7% 15.9%;
50-
--input: 240 3.7% 15.9%;
51-
--ring: 240 4.9% 83.9%;
52-
--sidebar-background: 240 5.9% 10%;
53-
--sidebar-foreground: 240 4.8% 95.9%;
54-
--sidebar-primary: 224.3 76.3% 48%;
55-
--sidebar-primary-foreground: 0 0% 100%;
56-
--sidebar-accent: 240 3.7% 15.9%;
57-
--sidebar-accent-foreground: 240 4.8% 95.9%;
58-
--sidebar-border: 240 3.7% 15.9%;
59-
--sidebar-ring: 240 4.9% 83.9%;
47+
--background: 240 10% 3.9%;
48+
--foreground: 0 0% 98%;
49+
--card: 240 10% 3.9%;
50+
--card-foreground: 0 0% 98%;
51+
--popover: 240 10% 3.9%;
52+
--popover-foreground: 0 0% 98%;
53+
--primary: 0 0% 98%;
54+
--primary-foreground: 240 5.9% 10%;
55+
--secondary: 240 3.7% 15.9%;
56+
--secondary-foreground: 0 0% 98%;
57+
--muted: 240 3.7% 15.9%;
58+
--muted-foreground: 240 5% 64.9%;
59+
--accent: 240 3.7% 15.9%;
60+
--accent-foreground: 0 0% 98%;
61+
--destructive: 0 62.8% 30.6%;
62+
--destructive-foreground: 0 85.7% 97.3%;
63+
--border: 240 3.7% 15.9%;
64+
--input: 240 3.7% 15.9%;
65+
--ring: 240 4.9% 83.9%;
66+
--sidebar-background: 240 5.9% 10%;
67+
--sidebar-foreground: 240 4.8% 95.9%;
68+
--sidebar-primary: 224.3 76.3% 48%;
69+
--sidebar-primary-foreground: 0 0% 100%;
70+
--sidebar-accent: 240 3.7% 15.9%;
71+
--sidebar-accent-foreground: 240 4.8% 95.9%;
72+
--sidebar-border: 240 3.7% 15.9%;
73+
--sidebar-ring: 240 4.9% 83.9%;
74+
--chart-1: 220 70% 50%;
75+
--chart-2: 160 60% 45%;
76+
--chart-3: 30 80% 55%;
77+
--chart-4: 280 65% 60%;
78+
--chart-5: 340 75% 55%;
6079
}
6180

6281
* {
63-
--un-default-border-color: theme("colors.border");
82+
--un-default-border-color: theme("colors.border");
6483
}
6584

6685
body {
67-
@apply bg-background text-foreground antialiased;
86+
@apply bg-background text-foreground antialiased font-sans;
6887
}
6988

7089
button {
71-
@apply bg-transparent;
90+
@apply bg-transparent;
7291
}

‎packages/unocss/dev/routes/_components/index.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import AccordionDemo from "./accordion-demo"
88
import AlertDemo from "./alert-demo"
99
import AlertDialogDemo from "./alert-dialog-demo"
1010
import AppSidebar from "./app-sidebar"
11+
import AreaChartInteractive from "./area-chart-interactive"
1112
import BadgeDemo from "./badge-demo"
1213
import BadgeDestructive from "./badge-destructive"
1314
import BadgeOutline from "./badge-outline"
@@ -35,6 +36,7 @@ import DrawerDemo from "./drawer-demo"
3536
import DropdownMenuDemo from "./dropdown-menu-demo"
3637
import HoverCardDemo from "./hover-card-demo"
3738
import MenubarDemo from "./menubar-demo"
39+
import ModeToggle from "./mode-toggle"
3840
import NavigationMenuDemo from "./navigation-menu-demo"
3941
import NumberFieldDemo from "./number-field-demo"
4042
import OtpFieldDemo from "./otp-field-demo"
@@ -216,6 +218,12 @@ const Page = () => {
216218
<ComponentWrapper name="Tooltip">
217219
<TooltipDemo />
218220
</ComponentWrapper>
221+
<ComponentWrapper name="Mode Toggle">
222+
<ModeToggle />
223+
</ComponentWrapper>
224+
<ComponentWrapper name="Area Chart" class="col-span-3">
225+
<AreaChartInteractive />
226+
</ComponentWrapper>
219227
</div>
220228
</div>
221229
</SidebarInset>

‎packages/unocss/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
"@solidjs/start": "^1.0.10",
2626
"@tanstack/solid-table": "^8.20.5",
2727
"@unocss/reset": "^0.65.1",
28+
"@unovis/solid": "^1.5.0",
29+
"@unovis/ts": "^1.5.0",
2830
"class-variance-authority": "^0.7.1",
2931
"clsx": "^2.1.1",
3032
"cmdk-solid": "^1.1.0",

0 commit comments

Comments
 (0)