|
| 1 | +# BarChart |
| 2 | + |
| 3 | +## Component Name |
| 4 | + |
| 5 | +BarChart |
| 6 | + |
| 7 | +## Description |
| 8 | + |
| 9 | +BarChart is a comprehensive data visualization component that renders interactive bar charts with support for grouped, stacked, and vertical layouts. It provides customizable colors, animations, and interactive features like hover states and tooltips. The component is built on top of Recharts and integrates seamlessly with Blade's design system, offering consistent styling and accessibility features. BarChart supports multiple data series, custom color themes, and various chart configurations for displaying categorical data effectively. |
| 10 | + |
| 11 | +## Important Constraints |
| 12 | + |
| 13 | +- `ChartBarWrapper` component only accepts `ChartBar`, `ChartXAxis`, `ChartYAxis`, `ChartCartesianGrid`, `ChartTooltip`, `ChartLegend`, and `ChartReferenceLine` components as children. |
| 14 | +- `data` prop is required and must be an array of objects with consistent data structure |
| 15 | +- `dataKey` prop is required for each `ChartBar` component and must correspond to a property in the data array |
| 16 | +- `stackId` must be consistent across all bars that should be stacked together |
| 17 | +- `layout="vertical"` requires `ChartXAxis` to have `type="number"` and `ChartYAxis` to have `type="category"` |
| 18 | +- Color tokens must follow the exact format: `chart.background.categorical.{color}.{emphasis}` or `chart.background.sequential.{color}.{number}` |
| 19 | + |
| 20 | +## TypeScript Types |
| 21 | + |
| 22 | +These types define the props that the BarChart component and its subcomponents accept: |
| 23 | + |
| 24 | +```typescript |
| 25 | +type ChartBarProps = Omit<RechartsBarProps, 'fill' | 'dataKey' | 'name' | 'label' | 'activeBar'> & { |
| 26 | + /** |
| 27 | + * The data key of the bar chart. |
| 28 | + */ |
| 29 | + dataKey: RechartsBarProps['dataKey']; |
| 30 | + /** |
| 31 | + * The name of the bar chart. |
| 32 | + */ |
| 33 | + name?: RechartsBarProps['name']; |
| 34 | + /** |
| 35 | + * The color of the bar chart. |
| 36 | + */ |
| 37 | + color?: ChartsCategoricalColorToken | ChartSequentialColorToken; |
| 38 | + /** |
| 39 | + * The stack id of the bar chart. |
| 40 | + */ |
| 41 | + stackId?: RechartsBarProps['stackId']; |
| 42 | + /** |
| 43 | + * The active bar of the bar chart. |
| 44 | + */ |
| 45 | + activeBar?: RechartsBarProps['activeBar']; |
| 46 | + /** |
| 47 | + * The label of the bar chart. |
| 48 | + */ |
| 49 | + label?: RechartsBarProps['label']; |
| 50 | + /** |
| 51 | + * The show legend of the bar chart. |
| 52 | + */ |
| 53 | + showLegend?: boolean; |
| 54 | +}; |
| 55 | + |
| 56 | +type data = { |
| 57 | + [key: string]: unknown; |
| 58 | +}; |
| 59 | + |
| 60 | +type ChartBarWrapperProps = { |
| 61 | + children?: React.ReactNode; |
| 62 | + /** |
| 63 | + * The color theme of the bar chart. |
| 64 | + */ |
| 65 | + colorTheme?: colorTheme; |
| 66 | + /** |
| 67 | + * The orientation of the bar chart. |
| 68 | + */ |
| 69 | + layout?: 'horizontal' | 'vertical'; |
| 70 | + /** |
| 71 | + * Chart data to be rendered |
| 72 | + */ |
| 73 | + data: data[]; |
| 74 | +} & BoxProps; |
| 75 | + |
| 76 | + |
| 77 | +type ChartsCategoricalColorToken = `chart.background.categorical.${ChartColorCategories}.${keyof ChartCategoricalEmphasis}`; |
| 78 | + |
| 79 | +type ChartSequentialColorToken = `chart.background.sequential.${Exclude<ChartColorCategories, 'gray'>}.${keyof ChartSequentialEmphasis}`; |
| 80 | + |
| 81 | +type colorTheme = 'default'; |
| 82 | + |
| 83 | +type ChartXAxisProps = Omit<RechartsXAxisProps, 'tick' | 'label' | 'dataKey' | 'stroke'> & { |
| 84 | + /** |
| 85 | + * The label of the x-axis. |
| 86 | + */ |
| 87 | + label?: string; |
| 88 | + /** |
| 89 | + * The data key of the x-axis. |
| 90 | + */ |
| 91 | + dataKey?: string; |
| 92 | +}; |
| 93 | + |
| 94 | +type ChartYAxisProps = Omit<RechartsYAxisProps, 'tick' | 'label' | 'dataKey' | 'stroke'> & { |
| 95 | + /** |
| 96 | + * The label of the y-axis. |
| 97 | + */ |
| 98 | + label?: string; |
| 99 | + /** |
| 100 | + * The data key of the y-axis. |
| 101 | + */ |
| 102 | + dataKey?: string; |
| 103 | +}; |
| 104 | + |
| 105 | +type ChartTooltipProps = ComponentProps<typeof RechartsTooltip>; |
| 106 | + |
| 107 | +type ChartLegendProps = ComponentProps<typeof RechartsLegend>; |
| 108 | + |
| 109 | +type ChartCartesianGridProps = Omit<RechartsCartesianGridProps, 'strokeDasharray' | 'verticalFill' | 'horizontalFill'>; |
| 110 | + |
| 111 | +type ChartReferenceLineProps = { |
| 112 | + /** |
| 113 | + * The y-coordinate of the reference line. |
| 114 | + */ |
| 115 | + y?: RechartsReferenceLineProps['y']; |
| 116 | + /** |
| 117 | + * The x-coordinate of the reference line. |
| 118 | + */ |
| 119 | + x?: RechartsReferenceLineProps['x']; |
| 120 | + /** |
| 121 | + * The label of the reference line. |
| 122 | + */ |
| 123 | + label: string; |
| 124 | +}; |
| 125 | +``` |
| 126 | + |
| 127 | +## Example |
| 128 | + |
| 129 | +### Basic BarChart with Multiple Series |
| 130 | + |
| 131 | +```tsx |
| 132 | +import React from 'react'; |
| 133 | +import { |
| 134 | + ChartBar, |
| 135 | + ChartBarWrapper, |
| 136 | + ChartXAxis, |
| 137 | + ChartYAxis, |
| 138 | + ChartCartesianGrid, |
| 139 | + ChartTooltip, |
| 140 | + ChartLegend, |
| 141 | +} from '@razorpay/blade/components'; |
| 142 | + |
| 143 | +const salesData = [ |
| 144 | + { month: 'Jan', revenue: 4000, profit: 2000, expenses: 1000 }, |
| 145 | + { month: 'Feb', revenue: 3000, profit: 1500, expenses: 800 }, |
| 146 | + { month: 'Mar', revenue: 5000, profit: 3000, expenses: 1200 }, |
| 147 | + { month: 'Apr', revenue: 4500, profit: 2500, expenses: 1100 }, |
| 148 | +]; |
| 149 | + |
| 150 | +const BasicBarChart = () => { |
| 151 | + return ( |
| 152 | + <div style={{ width: '100%', height: '400px' }}> |
| 153 | + <ChartBarWrapper data={salesData}> |
| 154 | + <ChartCartesianGrid /> |
| 155 | + <ChartXAxis dataKey="month" /> |
| 156 | + <ChartYAxis /> |
| 157 | + <ChartTooltip /> |
| 158 | + <ChartLegend /> |
| 159 | + <ChartBar |
| 160 | + dataKey="revenue" |
| 161 | + name="Revenue" |
| 162 | + color="chart.background.categorical.azure.moderate" |
| 163 | + /> |
| 164 | + <ChartBar |
| 165 | + dataKey="profit" |
| 166 | + name="Profit" |
| 167 | + color="chart.background.categorical.emerald.moderate" |
| 168 | + /> |
| 169 | + <ChartBar |
| 170 | + dataKey="expenses" |
| 171 | + name="Expenses" |
| 172 | + color="chart.background.categorical.crimson.moderate" |
| 173 | + /> |
| 174 | + </ChartBarWrapper> |
| 175 | + </div> |
| 176 | + ); |
| 177 | +}; |
| 178 | +``` |
0 commit comments