Skip to content

Commit 601341d

Browse files
adamdoeadamdoe
authored
Fix/region placement issue (#2516)
* fix: refactor Regions component for improved date handling and visualization type checks * fix: region calculations
1 parent a49f0a5 commit 601341d

File tree

4 files changed

+1000
-186
lines changed

4 files changed

+1000
-186
lines changed

‎packages/chart/src/_stories/Chart.Regions.Categorical.stories.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import type { Meta, StoryObj } from '@storybook/react-vite'
2+
import Chart from '../CdcChart'
3+
4+
const meta: Meta<typeof Chart> = {
5+
title: 'Components/Templates/Chart/Regions/Categorical',
6+
component: Chart
7+
}
8+
9+
type Story = StoryObj<typeof Chart>
10+
11+
const categoricalData = [
12+
{ category: 'Jan 1', value: 10 },
13+
{ category: 'Jan 8', value: 25 },
14+
{ category: 'Jan 15', value: 35 },
15+
{ category: 'Jan 22', value: 45 },
16+
{ category: 'Jan 29', value: 55 },
17+
{ category: 'Feb 5', value: 40 },
18+
{ category: 'Feb 12', value: 60 },
19+
{ category: 'Feb 19', value: 75 },
20+
{ category: 'Feb 26', value: 65 },
21+
{ category: 'Mar 4', value: 80 }
22+
]
23+
24+
const baseCategoricalConfig = {
25+
type: 'chart',
26+
visualizationType: 'Line',
27+
orientation: 'vertical',
28+
showTitle: true,
29+
theme: 'theme-blue',
30+
animate: false,
31+
xAxis: {
32+
type: 'categorical',
33+
dataKey: 'category',
34+
size: '0',
35+
hideAxis: false,
36+
hideTicks: false
37+
},
38+
yAxis: {
39+
size: '50',
40+
hideAxis: false,
41+
hideTicks: false,
42+
gridLines: true,
43+
min: '0',
44+
max: '100'
45+
},
46+
series: [{ dataKey: 'value', type: 'Line', axis: 'Left', tooltip: true, name: 'Value' }],
47+
legend: { hide: true },
48+
data: categoricalData,
49+
regions: []
50+
}
51+
52+
// LINE CHARTS
53+
54+
export const Line_Fixed_From_Fixed_To: Story = {
55+
args: {
56+
config: {
57+
...baseCategoricalConfig,
58+
title: 'Categorical - Line: Fixed From + Fixed To',
59+
regions: [
60+
{
61+
from: 'Jan 15',
62+
to: 'Feb 12',
63+
fromType: 'Fixed',
64+
toType: 'Fixed',
65+
label: 'Fixed Region',
66+
background: '#0077cc',
67+
color: '#000000',
68+
range: 'Custom'
69+
}
70+
]
71+
},
72+
isEditor: true
73+
}
74+
}
75+
76+
export const Line_Fixed_From_Last_Date: Story = {
77+
args: {
78+
config: {
79+
...baseCategoricalConfig,
80+
title: 'Categorical - Line: Fixed From + Last Date',
81+
regions: [
82+
{
83+
from: 'Feb 5',
84+
to: '',
85+
fromType: 'Fixed',
86+
toType: 'Last Date',
87+
label: 'To Last Date',
88+
background: '#00aa55',
89+
color: '#000000',
90+
range: 'Custom'
91+
}
92+
]
93+
},
94+
isEditor: true
95+
}
96+
}
97+
98+
// BAR CHARTS
99+
100+
export const Bar_Fixed_From_Fixed_To: Story = {
101+
args: {
102+
config: {
103+
...baseCategoricalConfig,
104+
visualizationType: 'Bar',
105+
barThickness: 0.7,
106+
title: 'Categorical - Bar: Fixed From + Fixed To',
107+
regions: [
108+
{
109+
from: 'Jan 15',
110+
to: 'Feb 12',
111+
fromType: 'Fixed',
112+
toType: 'Fixed',
113+
label: 'Fixed Region',
114+
background: '#0077cc',
115+
color: '#000000',
116+
range: 'Custom'
117+
}
118+
]
119+
},
120+
isEditor: true
121+
}
122+
}
123+
124+
export const Bar_Fixed_From_Last_Date: Story = {
125+
args: {
126+
config: {
127+
...baseCategoricalConfig,
128+
visualizationType: 'Bar',
129+
barThickness: 0.7,
130+
title: 'Categorical - Bar: Fixed From + Last Date',
131+
regions: [
132+
{
133+
from: 'Feb 5',
134+
to: '',
135+
fromType: 'Fixed',
136+
toType: 'Last Date',
137+
label: 'To Last Date',
138+
background: '#00aa55',
139+
color: '#000000',
140+
range: 'Custom'
141+
}
142+
]
143+
},
144+
isEditor: true
145+
}
146+
}
147+
148+
export default meta

‎packages/chart/src/_stories/Chart.Regions.DateScale.stories.tsx‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import type { Meta, StoryObj } from '@storybook/react-vite'
2+
import Chart from '../CdcChart'
3+
4+
const meta: Meta<typeof Chart> = {
5+
title: 'Components/Templates/Chart/Regions/Date Scale (Band)',
6+
component: Chart
7+
}
8+
9+
type Story = StoryObj<typeof Chart>
10+
11+
const dateData = [
12+
{ date: '2024-01-01', value: 10 },
13+
{ date: '2024-01-08', value: 25 },
14+
{ date: '2024-01-15', value: 35 },
15+
{ date: '2024-01-22', value: 45 },
16+
{ date: '2024-01-29', value: 55 },
17+
{ date: '2024-02-05', value: 40 },
18+
{ date: '2024-02-12', value: 60 },
19+
{ date: '2024-02-19', value: 75 },
20+
{ date: '2024-02-26', value: 65 },
21+
{ date: '2024-03-04', value: 80 }
22+
]
23+
24+
const baseDateConfig = {
25+
type: 'chart',
26+
visualizationType: 'Line',
27+
orientation: 'vertical',
28+
showTitle: true,
29+
theme: 'theme-blue',
30+
animate: false,
31+
xAxis: {
32+
type: 'date',
33+
dataKey: 'date',
34+
dateParseFormat: '%Y-%m-%d',
35+
dateDisplayFormat: '%b %-d',
36+
size: '0',
37+
hideAxis: false,
38+
hideTicks: false,
39+
numTicks: '6'
40+
},
41+
yAxis: {
42+
size: '50',
43+
hideAxis: false,
44+
hideTicks: false,
45+
gridLines: true,
46+
min: '0',
47+
max: '100'
48+
},
49+
series: [{ dataKey: 'value', type: 'Line', axis: 'Left', tooltip: true, name: 'Value' }],
50+
legend: { hide: true },
51+
data: dateData,
52+
regions: []
53+
}
54+
55+
// LINE CHARTS
56+
57+
export const Line_Fixed_From_Fixed_To: Story = {
58+
args: {
59+
config: {
60+
...baseDateConfig,
61+
title: 'Date Scale - Line: Fixed From + Fixed To',
62+
regions: [
63+
{
64+
from: '2024-01-15',
65+
to: '2024-02-12',
66+
fromType: 'Fixed',
67+
toType: 'Fixed',
68+
label: 'Fixed Region',
69+
background: '#0077cc',
70+
color: '#000000',
71+
range: 'Custom'
72+
}
73+
]
74+
},
75+
isEditor: true
76+
}
77+
}
78+
79+
export const Line_Fixed_From_Last_Date: Story = {
80+
args: {
81+
config: {
82+
...baseDateConfig,
83+
title: 'Date Scale - Line: Fixed From + Last Date',
84+
regions: [
85+
{
86+
from: '2024-02-05',
87+
to: '',
88+
fromType: 'Fixed',
89+
toType: 'Last Date',
90+
label: 'To Last Date',
91+
background: '#00aa55',
92+
color: '#000000',
93+
range: 'Custom'
94+
}
95+
]
96+
},
97+
isEditor: true
98+
}
99+
}
100+
101+
export const Line_Previous_Days_Last_Date: Story = {
102+
args: {
103+
config: {
104+
...baseDateConfig,
105+
title: 'Date Scale - Line: Previous Days + Last Date',
106+
regions: [
107+
{
108+
from: '28',
109+
to: '',
110+
fromType: 'Previous Days',
111+
toType: 'Last Date',
112+
label: 'Last 28 Days',
113+
background: '#aa0077',
114+
color: '#000000',
115+
range: 'Custom'
116+
}
117+
]
118+
},
119+
isEditor: true
120+
}
121+
}
122+
123+
// BAR CHARTS
124+
125+
export const Bar_Fixed_From_Fixed_To: Story = {
126+
args: {
127+
config: {
128+
...baseDateConfig,
129+
visualizationType: 'Bar',
130+
barThickness: 0.7,
131+
title: 'Date Scale - Bar: Fixed From + Fixed To',
132+
regions: [
133+
{
134+
from: '2024-01-15',
135+
to: '2024-02-12',
136+
fromType: 'Fixed',
137+
toType: 'Fixed',
138+
label: 'Fixed Region',
139+
background: '#0077cc',
140+
color: '#000000',
141+
range: 'Custom'
142+
}
143+
]
144+
},
145+
isEditor: true
146+
}
147+
}
148+
149+
export const Bar_Fixed_From_Last_Date: Story = {
150+
args: {
151+
config: {
152+
...baseDateConfig,
153+
visualizationType: 'Bar',
154+
barThickness: 0.7,
155+
title: 'Date Scale - Bar: Fixed From + Last Date',
156+
regions: [
157+
{
158+
from: '2024-02-05',
159+
to: '',
160+
fromType: 'Fixed',
161+
toType: 'Last Date',
162+
label: 'To Last Date',
163+
background: '#00aa55',
164+
color: '#000000',
165+
range: 'Custom'
166+
}
167+
]
168+
},
169+
isEditor: true
170+
}
171+
}
172+
173+
export const Bar_Previous_Days_Last_Date: Story = {
174+
args: {
175+
config: {
176+
...baseDateConfig,
177+
visualizationType: 'Bar',
178+
barThickness: 0.7,
179+
title: 'Date Scale - Bar: Previous Days + Last Date',
180+
regions: [
181+
{
182+
from: '28',
183+
to: '',
184+
fromType: 'Previous Days',
185+
toType: 'Last Date',
186+
label: 'Last 28 Days',
187+
background: '#aa0077',
188+
color: '#000000',
189+
range: 'Custom'
190+
}
191+
]
192+
},
193+
isEditor: true
194+
}
195+
}
196+
197+
export default meta

0 commit comments

Comments
 (0)