agent-patterns/patterns/chart/example.tsx at main · harshmathurx/agent-patterns · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import React from "react"
import { Chart } from "./component"

// Sample data sets
const salesData = [
  { label: "Jan", value: 1200 },
  { label: "Feb", value: 1900 },
  { label: "Mar", value: 3000 },
  { label: "Apr", value: 2780 },
  { label: "May", value: 3890 },
  { label: "Jun", value: 4390 },
]

const revenueData = [
  { label: "Product A", value: 45 },
  { label: "Product B", value: 30 },
  { label: "Product C", value: 25 },
]

const trafficData = [
  { label: "Mon", value: 2400 },
  { label: "Tue", value: 1398 },
  { label: "Wed", value: 9800 },
  { label: "Thu", value: 3908 },
  { label: "Fri", value: 4800 },
  { label: "Sat", value: 3800 },
  { label: "Sun", value: 4300 },
]

// Example 1: Bar Chart
export function BarChartExample() {
  return (
    <Chart
      title="Monthly Sales"
      type="bar"
      data={salesData}
      showLegend={false}
      showGrid
    />
  )
}

// Example 2: Line Chart
export function LineChartExample() {
  return (
    <Chart
      title="Website Traffic"
      type="line"
      data={trafficData}
      showLegend={false}
      showGrid
    />
  )
}

// Example 3: Area Chart
export function AreaChartExample() {
  return (
    <Chart
      title="Revenue Growth"
      type="area"
      data={salesData}
      showLegend={false}
      showGrid
    />
  )
}

// Example 4: Pie Chart
export function PieChartExample() {
  return (
    <Chart
      title="Revenue Distribution"
      type="pie"
      data={revenueData}
      showLegend
    />
  )
}

// Example 5: Donut Chart
export function DonutChartExample() {
  return (
    <Chart
      title="Market Share"
      type="donut"
      data={revenueData}
      showLegend
    />
  )
}

// Example 6: Custom Colors
export function CustomColorsChartExample() {
  const customData = [
    { label: "Q1", value: 4000, color: "#22c55e" },
    { label: "Q2", value: 3000, color: "#3b82f6" },
    { label: "Q3", value: 2000, color: "#f59e0b" },
    { label: "Q4", value: 2780, color: "#ef4444" },
  ]

  return (
    <Chart
      title="Quarterly Performance"
      type="bar"
      data={customData}
      showLegend={false}
      showGrid
    />
  )
}

// Example 7: Multiple Charts in Grid
export function MultipleChartsExample() {
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <Chart
        title="Sales Trend"
        type="line"
        data={salesData}
        showLegend={false}
      />
      <Chart
        title="Revenue Split"
        type="donut"
        data={revenueData}
        showLegend
      />
      <Chart
        title="Monthly Performance"
        type="area"
        data={salesData}
        showLegend={false}
      />
      <Chart
        title="Category Comparison"
        type="bar"
        data={revenueData}
        showLegend={false}
      />
    </div>
  )
}

export default BarChartExample