Skip to content

Commit 7357c15

Browse files
0xKurtthelostone-mccoderabbitai[bot]
authored
add bar chart and pie chart (#72)
* add bar chart and pie chart * Apply suggestions from code review Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update packages/ui/src/components/PieChart/PieChart.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update packages/ui/src/components/PieChart/PieChart.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * build * things --------- Co-authored-by: Aditya Anand M C <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 449bc0d commit 7357c15

File tree

7 files changed

+629
-0
lines changed

7 files changed

+629
-0
lines changed

‎packages/ui/src/components/BarChart/BarChart.stories.tsx‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
import React from "react";
2+
3+
import type { Meta, StoryObj } from "@storybook/react";
4+
5+
import { BarChart } from "./BarChart";
6+
7+
const meta: Meta<typeof BarChart> = {
8+
title: "Components/BarChart",
9+
component: BarChart,
10+
parameters: {
11+
layout: "centered",
12+
},
13+
decorators: [
14+
(Story) => (
15+
<div className="w-[800px]">
16+
<Story />
17+
</div>
18+
),
19+
],
20+
tags: ["autodocs"],
21+
} satisfies Meta<typeof BarChart>;
22+
23+
export default meta;
24+
25+
type Story = StoryObj<typeof meta>;
26+
27+
// Generate time series data for the last 30 days
28+
function generateTimeSeriesData(days = 30) {
29+
const data = [];
30+
const now = new Date();
31+
for (let i = days - 1; i >= 0; i--) {
32+
const date = new Date(now);
33+
date.setDate(date.getDate() - i);
34+
data.push({
35+
x: date.toISOString().split("T")[0],
36+
y: Math.floor(Math.random() * 1000) + 500,
37+
});
38+
}
39+
return data;
40+
}
41+
42+
// Generate numeric data
43+
function generateNumericData(count = 10) {
44+
return Array.from({ length: count }, (_, i) => ({
45+
x: (i + 1).toString(),
46+
y: Math.floor(Math.random() * 1000) + 500,
47+
}));
48+
}
49+
50+
// Sample data for date-based x-axis
51+
const dateData = [
52+
{
53+
x: ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05"],
54+
y: [100, 200, 150, 300, 250],
55+
name: "Visitors",
56+
},
57+
];
58+
59+
export const Default: Story = {
60+
args: {
61+
data: dateData,
62+
title: "Daily Visitors",
63+
description: "Number of visitors per day",
64+
xAxisTitle: "Date",
65+
yAxisTitle: "Visitors",
66+
},
67+
};
68+
69+
export const WithMultipleSeries: Story = {
70+
args: {
71+
data: [
72+
{
73+
x: ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05"],
74+
y: [100, 200, 150, 300, 250],
75+
name: "Visitors",
76+
},
77+
{
78+
x: ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05"],
79+
y: [50, 100, 75, 150, 125],
80+
name: "Unique Visitors",
81+
},
82+
],
83+
title: "Daily Visitors",
84+
description: "Number of visitors per day",
85+
xAxisTitle: "Date",
86+
yAxisTitle: "Visitors",
87+
},
88+
};
89+
90+
export const WithNumericXAxis: Story = {
91+
args: {
92+
data: [
93+
{
94+
x: ["1", "2", "3", "4", "5"],
95+
y: [100, 200, 150, 300, 250],
96+
name: "Performance",
97+
color: "#25BDCE",
98+
},
99+
],
100+
title: "Category Performance",
101+
description: "Performance across different categories",
102+
xAxisTitle: "Category",
103+
yAxisTitle: "Performance Score",
104+
isDateAxis: false,
105+
},
106+
};
107+
108+
export const TimeSeries: Story = {
109+
args: {
110+
width: 800,
111+
height: 500,
112+
data: [
113+
{
114+
name: "Donations",
115+
x: generateTimeSeriesData(30).map((d) => d.x),
116+
y: generateTimeSeriesData(30).map((d) => d.y),
117+
color: "#25BDCE",
118+
},
119+
],
120+
title: "Daily Donations",
121+
description: "Showing donations over the last 30 days",
122+
xAxisTitle: "Date",
123+
yAxisTitle: "Amount (USD)",
124+
xAxisLabelInterval: 5,
125+
yAxisLabelInterval: 200,
126+
isDateAxis: true,
127+
},
128+
};
129+
130+
export const MultipleSeries: Story = {
131+
args: {
132+
width: 800,
133+
height: 500,
134+
data: [
135+
{
136+
name: "Donations",
137+
x: generateTimeSeriesData(30).map((d) => d.x),
138+
y: generateTimeSeriesData(30).map((d) => d.y),
139+
color: "#25BDCE",
140+
},
141+
{
142+
name: "Matching Funds",
143+
x: generateTimeSeriesData(30).map((d) => d.x),
144+
y: generateTimeSeriesData(30).map((d) => d.y * 0.5),
145+
color: "#FF7043",
146+
},
147+
],
148+
title: "Donations and Matching Funds",
149+
description: "Showing donations and matching funds over the last 30 days",
150+
xAxisTitle: "Date",
151+
yAxisTitle: "Amount (USD)",
152+
xAxisLabelInterval: 5,
153+
yAxisLabelInterval: 200,
154+
barGap: 0.1,
155+
barGroupGap: 0.2,
156+
isDateAxis: true,
157+
},
158+
};
159+
160+
export const Categories: Story = {
161+
args: {
162+
width: 800,
163+
height: 500,
164+
data: [
165+
{
166+
name: "2023",
167+
x: ["Q1", "Q2", "Q3", "Q4"],
168+
y: [12000, 15000, 18000, 21000],
169+
color: "#25BDCE",
170+
},
171+
{
172+
name: "2024",
173+
x: ["Q1", "Q2", "Q3", "Q4"],
174+
y: [15000, 18000, 21000, 24000],
175+
color: "#FF7043",
176+
},
177+
],
178+
title: "Quarterly Donations",
179+
description: "Showing donations by quarter for two years",
180+
xAxisTitle: "Quarter",
181+
yAxisTitle: "Amount (USD)",
182+
xAxisLabelInterval: 1,
183+
yAxisLabelInterval: 3000,
184+
barGap: 0.1,
185+
barGroupGap: 0.2,
186+
isDateAxis: false,
187+
},
188+
};
189+
190+
export const NumericAxis: Story = {
191+
args: {
192+
width: 800,
193+
height: 500,
194+
data: [
195+
{
196+
name: "Series A",
197+
x: generateNumericData(10).map((d) => d.x),
198+
y: generateNumericData(10).map((d) => d.y),
199+
color: "#25BDCE",
200+
},
201+
{
202+
name: "Series B",
203+
x: generateNumericData(10).map((d) => d.x),
204+
y: generateNumericData(10).map((d) => d.y * 0.7),
205+
color: "#FF7043",
206+
},
207+
],
208+
title: "Numeric X-Axis Example",
209+
description: "Showing data with numeric x-axis values",
210+
xAxisTitle: "Step",
211+
yAxisTitle: "Value",
212+
xAxisLabelInterval: 1,
213+
yAxisLabelInterval: 200,
214+
barGap: 0.1,
215+
barGroupGap: 0.2,
216+
isDateAxis: false,
217+
},
218+
};
219+
220+
export const NoLegend: Story = {
221+
args: {
222+
width: 800,
223+
height: 500,
224+
data: [
225+
{
226+
name: "Donations",
227+
x: generateTimeSeriesData(30).map((d) => d.x),
228+
y: generateTimeSeriesData(30).map((d) => d.y),
229+
color: "#25BDCE",
230+
},
231+
],
232+
title: "Daily Donations",
233+
description: "Showing donations over the last 30 days",
234+
xAxisTitle: "Date",
235+
yAxisTitle: "Amount (USD)",
236+
xAxisLabelInterval: 5,
237+
yAxisLabelInterval: 200,
238+
showLegend: false,
239+
isDateAxis: true,
240+
},
241+
};

0 commit comments

Comments
 (0)