Skip to content

Commit 948a5c0

Browse files
jeradrutnamjeradrutnam
authored
Merge pull request #477 from dileepapeiris/feat/storybook
Add chart story book
2 parents 9ba2f82 + 8fc79cf commit 948a5c0

7 files changed

Lines changed: 1241 additions & 0 deletions

File tree

‎packages/oxygen-ui-docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@wso2/oxygen-ui-charts-react": "workspace:^",
2828
"react-hook-form": "7.62.0",
2929
"@hookform/resolvers": "5.2.1",
30+
"@wso2/oxygen-ui-charts-react": "workspace:^",
3031
"zod": "4.0.10"
3132
},
3233
"devDependencies": {

‎packages/oxygen-ui-docs/stories/Charts/AreaChart.stories.tsx‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
/**
2+
* Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
3+
*
4+
* WSO2 LLC. licenses this file to you under the Apache License,
5+
* Version 2.0 (the "License"); you may not use this file except
6+
* in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing,
12+
* software distributed under the License is distributed on an
13+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14+
* KIND, either express or implied. See the License for the
15+
* specific language governing permissions and limitations
16+
* under the License.
17+
*/
18+
19+
import React from 'react'
20+
import type { Meta, StoryObj } from '@storybook/react'
21+
import { AreaChart, Area } from '@wso2/oxygen-ui-charts-react'
22+
23+
const meta: Meta = {
24+
title: 'Charts/AreaChart',
25+
component: AreaChart,
26+
parameters: {
27+
docs: {
28+
description: {
29+
component:
30+
'Oxygen UI Charts React provides a set of components built on top of Recharts. ' +
31+
'It offers two ways to define charts: a minimal configuration using props and a Recharts composable way for maximum flexibility.\n\n' +
32+
'For detailed information, please refer to the official Recharts documentation at ' +
33+
'[<u>recharts.github.io</u>](https://recharts.github.io/).\n\n' +
34+
'### Installation\n```bash\nnpm install @wso2/oxygen-ui-charts-react\n```\n\n' +
35+
'### Usage\n```tsx\nimport { AreaChart } from "@wso2/oxygen-ui-charts-react";\n```\n\n',
36+
},
37+
},
38+
},
39+
tags: ['autodocs'],
40+
}
41+
42+
export default meta
43+
type Story = StoryObj<typeof AreaChart>
44+
45+
const data = [
46+
{ name: 'Jan', firstValue: 400, secondValue: 240 },
47+
{ name: 'Feb', firstValue: 300, secondValue: 139 },
48+
{ name: 'Mar', firstValue: 200, secondValue: 980 },
49+
{ name: 'Apr', firstValue: 278, secondValue: 390 },
50+
{ name: 'May', firstValue: 189, secondValue: 480 },
51+
{ name: 'Jun', firstValue: 239, secondValue: 380 },
52+
{ name: 'Jul', firstValue: 349, secondValue: 430 },
53+
]
54+
55+
const dataWithNulls = [
56+
{ name: 'Jan', value: 400 },
57+
{ name: 'Feb', value: 300 },
58+
{ name: 'Mar', value: null },
59+
{ name: 'Apr', value: 200 },
60+
{ name: 'May', value: 278 },
61+
{ name: 'Jun', value: 189 },
62+
]
63+
64+
/**
65+
* In this approach, you use the simplified props provided by the Oxygen UI wrapper.
66+
* This is the easiest way to get up and running with standard charts.
67+
*
68+
* ### Available Props
69+
*
70+
* #### Data & Structure
71+
* - **data** ( any[] ): Data to be displayed in the chart.
72+
* - **children** ( React.ReactNode ): Optional children for Recharts-style composition.
73+
*
74+
* #### Areas Configuration
75+
* - **areas** ( Array<{ ... }> ): Configuration for the areas in the chart. Each area config supports:
76+
* - **dataKey** ( string ): The key of the data point.
77+
* - **name** ( string ): The name of the area.
78+
* - **stroke** ( string ): The stroke color of the area.
79+
* - **strokeWidth** ( number ): The width of the stroke.
80+
* - **strokeDasharray** ( string | number ): The stroke dash array.
81+
* - **fill** ( string ): The fill color of the area.
82+
* - **fillOpacity** ( number ): The opacity of the fill color.
83+
* - **stackId** ( string | number ): The id of the stack the area belongs to.
84+
* - **type** ( 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' ): The interpolation type of curve.
85+
* - **hide** ( boolean ): If true, the area will be hidden.
86+
* - **label** ( boolean | any ): Configuration for the area's label.
87+
* - **dot** ( boolean | any ): If false, dots will not be drawn. (Default: true)
88+
* - **activeDot** ( boolean | any ): Dots shown when user enters an area. (Default: true)
89+
* - **connectNulls** ( boolean ): Whether to connect the area across null points. (Default: false)
90+
* - **unit** ( string | number ): The unit of data shown in tooltip.
91+
* - **legendType** ( 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye' | 'none' ): The type of icon in legend.
92+
* - **Event handlers (area-level):** onClick, onMouseDown, onMouseUp, onMouseMove, onMouseOver, onMouseOut, onMouseEnter, onMouseLeave.
93+
* - **Animation (area-level):**
94+
* - **isAnimationActive** ( boolean ): If true, the area will be animated. (Default: true)
95+
* - **animationDuration** ( number ): Duration of the animation in ms. (Default: 1500)
96+
* - **animationBegin** ( number ): Delay before the animation begins in ms. (Default: 0)
97+
* - **animationEasing** ( 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' ): Easing function for the animation.
98+
*
99+
* #### Appearance
100+
* - **colors** ( string[] ): Custom colors for areas.
101+
* - **layout** ( 'horizontal' | 'vertical' ): The layout of the chart. (Default: 'horizontal')
102+
* - **height** ( number | string ): Height of the chart. (Default: 300)
103+
* - **width** ( number | string ): Width of the chart. (Default: '100%')
104+
* - **margin** ( MarginConfig ): Margin around the chart. (Default: { top: 12, right: 24, left: 24, bottom: 40 })
105+
*
106+
* #### Axis Configuration
107+
* - **xAxisDataKey** ( string ): Key for X-axis labels.
108+
* - **xAxis** ( AxisConfig ): XAxis configuration. (Default: { show: true })
109+
* - **show** ( boolean ): Whether to show the axis.
110+
* - **name** ( string ): The name of the axis.
111+
* - **domain** ( [any, any] ): The domain of the axis.
112+
* - **type** ( 'number' | 'category' ): The type of the axis.
113+
* - **tickCount** ( number ): The number of ticks.
114+
* - **interval** ( number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' ): The interval of ticks.
115+
* - **yAxis** ( AxisConfig ): YAxis configuration. (Default: { show: true })
116+
* - **show** ( boolean ): Whether to show the axis.
117+
* - **name** ( string ): The name of the axis.
118+
* - **domain** ( [any, any] ): The domain of the axis.
119+
* - **type** ( 'number' | 'category' ): The type of the axis.
120+
* - **tickCount** ( number ): The number of ticks.
121+
* - **interval** ( number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' ): The interval of ticks.
122+
*
123+
* #### Legend
124+
* - **legend** ( LegendConfig ): Legend configuration. (Default: { show: true, align: 'center', verticalAlign: 'bottom' })
125+
*
126+
* #### Grid
127+
* - **grid** ( GridConfig ): Grid configuration. (Default: { show: true, strokeDasharray: '3 3' })
128+
*
129+
* #### Tooltip
130+
* - **tooltip** ( TooltipConfig ): Tooltip configuration. (Default: { show: true })
131+
*
132+
* #### Synchronization
133+
* - **syncId** ( number | string ): Synchronizes tooltip and brush across charts.
134+
* - **syncMethod** ( 'index' | 'value' | function ): Controls synchronization behavior.
135+
*
136+
* #### Accessibility
137+
* - **role** ( string ): ARIA role for the chart.
138+
* - **title** ( string ): Accessible title.
139+
* - **desc** ( string ): Accessible description.
140+
* - **accessibilityLayer** ( boolean ): If true, an accessibility layer will be added to the chart. (Default: true)
141+
*
142+
* #### Event Handlers (Chart-level)
143+
* - **onClick** ( function ): Default click event handler.
144+
* - **onMouseDown** ( function ): Default mouse down event handler.
145+
* - **onMouseUp** ( function ): Default mouse up event handler.
146+
* - **onMouseMove** ( function ): Default mouse move event handler.
147+
* - **onMouseEnter** ( function ): Default mouse enter event handler.
148+
* - **onMouseLeave** ( function ): Default mouse leave event handler.
149+
*
150+
* #### Animation (Chart-level)
151+
* - **isAnimationActive** ( boolean ): If true, the chart areas will be animated. (Default: true)
152+
* - **animationDuration** ( number ): Duration of the animation in ms. (Default: 1500)
153+
* - **animationBegin** ( number ): Delay before the animation begins in ms. (Default: 0)
154+
* - **animationEasing** ( 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' ): Easing function for the animation.
155+
*
156+
* This implementation is based on Recharts props. For detailed information, please refer to the official Recharts documentation at [<u>recharts.github.io</u>](https://recharts.github.io).
157+
*/
158+
export const Basic: Story = {
159+
render: args => (
160+
<AreaChart
161+
{...args}
162+
data={data}
163+
xAxisDataKey="name"
164+
areas={[
165+
{ dataKey: 'firstValue', name: 'Primary Value' },
166+
{ dataKey: 'secondValue', name: 'Secondary Value' },
167+
]}
168+
/>
169+
),
170+
}
171+
172+
export const WithCustomColorsAndLegend: Story = {
173+
render: () => (
174+
<AreaChart
175+
data={data}
176+
xAxisDataKey="name"
177+
areas={[
178+
{ dataKey: 'firstValue', name: 'Primary' },
179+
{ dataKey: 'secondValue', name: 'Secondary' },
180+
]}
181+
colors={['#8884d8', '#82ca9d']}
182+
legend={{ show: true, align: 'right', verticalAlign: 'top' }}
183+
/>
184+
),
185+
}
186+
187+
export const WithAxisLabelsAndGrid: Story = {
188+
render: () => (
189+
<AreaChart
190+
data={data}
191+
xAxisDataKey="name"
192+
areas={[{ dataKey: 'firstValue', name: 'Value' }]}
193+
xAxis={{ show: true, name: 'Month' }}
194+
yAxis={{ show: true, name: 'Amount' }}
195+
grid={{ show: true, strokeDasharray: '5 5' }}
196+
/>
197+
),
198+
}
199+
200+
export const VerticalAndStacked: Story = {
201+
render: () => (
202+
<AreaChart
203+
data={data}
204+
xAxisDataKey="name"
205+
layout="vertical"
206+
areas={[
207+
{ dataKey: 'firstValue', name: 'Stacked A', stackId: '1' },
208+
{ dataKey: 'secondValue', name: 'Stacked B', stackId: '1' },
209+
]}
210+
height={400}
211+
/>
212+
),
213+
}
214+
215+
export const WithNoYAxis: Story = {
216+
render: () => (
217+
<AreaChart
218+
data={data}
219+
xAxisDataKey="name"
220+
areas={[{ dataKey: 'firstValue', name: 'Value' }]}
221+
yAxis={{ show: false }}
222+
/>
223+
),
224+
}
225+
226+
export const StepArea: Story = {
227+
render: () => (
228+
<AreaChart
229+
data={data}
230+
xAxisDataKey="name"
231+
areas={[{ dataKey: 'firstValue', name: 'Value', type: 'step' }]}
232+
/>
233+
),
234+
}
235+
236+
export const ConnectNulls: Story = {
237+
render: () => (
238+
<AreaChart
239+
data={dataWithNulls}
240+
xAxisDataKey="name"
241+
areas={[{ dataKey: 'value', name: 'Value', connectNulls: true }]}
242+
/>
243+
),
244+
}
245+
246+
/**
247+
* This approach allows users to define charts using Recharts’ composable syntax.
248+
* While the chart structure remains familiar to Recharts users.
249+
* For detailed information, please refer to the official Recharts documentation at [<u>recharts.github.io</u>](https://recharts.github.io).
250+
*/
251+
export const RechartsComposableWay: Story = {
252+
render: args => (
253+
<AreaChart {...args} data={data} xAxisDataKey="name">
254+
<Area
255+
type="monotone"
256+
dataKey="firstValue"
257+
stroke="#8884d8"
258+
fill="#8884d8"
259+
name="First Value"
260+
/>
261+
<Area
262+
type="monotone"
263+
dataKey="secondValue"
264+
stroke="#82ca9d"
265+
fill="#82ca9d"
266+
name="Second Value"
267+
/>
268+
</AreaChart>
269+
),
270+
}

0 commit comments

Comments
 (0)