Skip to content

Commit 3f98f8b

Browse files
mitrotasiosmitrotasios
authored
fix: fix chart isses (#68)
* fix: fix chart issues * fix: add whitespace-nowrap to charttooltip * fix: add windowsize listener to ChartLegend
1 parent 118a3bd commit 3f98f8b

File tree

5 files changed

+269
-234
lines changed

5 files changed

+269
-234
lines changed

‎src/components/chart-elements/AreaChart/AreaChart.tsx

+109-106
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22

33
import {
44
Area,
@@ -43,118 +43,121 @@ const AreaChart = ({
4343
showGradient = true,
4444
height = 'h-80',
4545
marginTop = 'mt-0',
46-
}: BaseChartProps) => (
47-
<div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
48-
<ResponsiveContainer width="100%" height="100%">
49-
<ReChartsAreaChart data={ data }>
50-
{ showGridLines ? (
51-
<CartesianGrid
52-
strokeDasharray="3 3"
53-
horizontal={ true }
54-
vertical={ false }
46+
}: BaseChartProps) => {
47+
const [legendHeight, setLegendHeight] = useState(60);
48+
return (
49+
<div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
50+
<ResponsiveContainer width="100%" height="100%">
51+
<ReChartsAreaChart data={ data }>
52+
{ showGridLines ? (
53+
<CartesianGrid
54+
strokeDasharray="3 3"
55+
horizontal={ true }
56+
vertical={ false }
57+
/>
58+
) : null }
59+
<XAxis
60+
hide={ !showXAxis }
61+
dataKey={ dataKey }
62+
tick={ { transform: 'translate(0, 6)' } }
63+
ticks={ startEndOnly ? [data[0][dataKey], data[data.length - 1][dataKey]] : undefined }
64+
style={ {
65+
fontSize: '12px',
66+
fontFamily: 'Inter; Helvetica',
67+
} }
68+
interval="preserveStartEnd"
69+
tickLine={ false }
70+
axisLine={ false }
71+
padding={{ left: 10, right: 10 }}
72+
minTickGap={5}
5573
/>
56-
) : null }
57-
<XAxis
58-
hide={ !showXAxis }
59-
dataKey={ dataKey }
60-
tick={ { transform: 'translate(0, 6)' } }
61-
ticks={ startEndOnly ? [data[0][dataKey], data[data.length - 1][dataKey]] : undefined }
62-
style={ {
63-
fontSize: '12px',
64-
fontFamily: 'Inter; Helvetica',
65-
} }
66-
interval="preserveStartEnd"
67-
tickLine={ false }
68-
axisLine={ false }
69-
padding={{ left: 10, right: 10 }}
70-
minTickGap={5}
71-
/>
72-
<YAxis
73-
width={ getPixelsFromTwClassName(yAxisWidth) }
74-
hide={ !showYAxis }
75-
axisLine={ false }
76-
tickLine={ false }
77-
type="number"
78-
domain={ [0, 'auto'] }
79-
tick={ { transform: 'translate(-3, 0)' } }
80-
style={ {
81-
fontSize: '12px',
82-
fontFamily: 'Inter; Helvetica',
83-
} }
84-
tickFormatter={ valueFormatter }
85-
/>
86-
{ showTooltip ? (
87-
<Tooltip
88-
// ongoing issue: https://github.com/recharts/recharts/issues/2920
89-
wrapperStyle={{ outline: 'none' }}
90-
isAnimationActive={false}
91-
cursor={{ stroke: '#d1d5db', strokeWidth: 1 }}
92-
content={ ({ active, payload, label }) => (
93-
<ChartTooltip
94-
active={ active }
95-
payload={ payload }
96-
label={ label }
97-
valueFormatter={ valueFormatter }
98-
colors={ colors }
99-
/>
100-
) }
101-
position={ { y: 0 } }
102-
/>
103-
) : null }
104-
{ showLegend ? (
105-
<Legend
106-
verticalAlign="top"
107-
height={ 60 }
108-
content={ ({ payload }) => ChartLegend({ payload }, colors) }
74+
<YAxis
75+
width={ getPixelsFromTwClassName(yAxisWidth) }
76+
hide={ !showYAxis }
77+
axisLine={ false }
78+
tickLine={ false }
79+
type="number"
80+
domain={ [0, 'auto'] }
81+
tick={ { transform: 'translate(-3, 0)' } }
82+
style={ {
83+
fontSize: '12px',
84+
fontFamily: 'Inter; Helvetica',
85+
} }
86+
tickFormatter={ valueFormatter }
10987
/>
110-
) : null }
88+
{ showTooltip ? (
89+
<Tooltip
90+
// ongoing issue: https://github.com/recharts/recharts/issues/2920
91+
wrapperStyle={{ outline: 'none' }}
92+
isAnimationActive={false}
93+
cursor={{ stroke: '#d1d5db', strokeWidth: 1 }}
94+
content={ ({ active, payload, label }) => (
95+
<ChartTooltip
96+
active={ active }
97+
payload={ payload }
98+
label={ label }
99+
valueFormatter={ valueFormatter }
100+
colors={ colors }
101+
/>
102+
) }
103+
position={ { y: 0 } }
104+
/>
105+
) : null }
106+
{ showLegend ? (
107+
<Legend
108+
verticalAlign="top"
109+
height={ legendHeight }
110+
content={ ({ payload }) => ChartLegend({ payload }, colors, setLegendHeight) }
111+
/>
112+
) : null }
111113

112114

113-
{ categories.map((category, idx) => (
114-
<defs key={ category }>
115-
{ showGradient ? (
116-
<linearGradient id={ colors[idx] } x1="0" y1="0" x2="0" y2="1">
117-
<stop
118-
offset="5%"
119-
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
120-
stopOpacity={0.4}
121-
/>
122-
<stop
123-
offset="95%"
124-
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
125-
stopOpacity={0}
126-
/>
127-
</linearGradient>
128-
) : (
129-
<linearGradient id={ colors[idx] } x1="0" y1="0" x2="0" y2="1">
130-
<stop
131-
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
132-
stopOpacity={0.3}
133-
/>
134-
</linearGradient>
135-
)}
136-
</defs>
137-
)) }
115+
{ categories.map((category, idx) => (
116+
<defs key={ category }>
117+
{ showGradient ? (
118+
<linearGradient id={ colors[idx] } x1="0" y1="0" x2="0" y2="1">
119+
<stop
120+
offset="5%"
121+
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
122+
stopOpacity={0.4}
123+
/>
124+
<stop
125+
offset="95%"
126+
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
127+
stopOpacity={0}
128+
/>
129+
</linearGradient>
130+
) : (
131+
<linearGradient id={ colors[idx] } x1="0" y1="0" x2="0" y2="1">
132+
<stop
133+
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
134+
stopOpacity={0.3}
135+
/>
136+
</linearGradient>
137+
)}
138+
</defs>
139+
)) }
138140

139141

140142

141-
{ categories.map((category, idx) => (
142-
<Area
143-
key={ category }
144-
name={ category }
145-
type="linear"
146-
dataKey={ category }
147-
stroke={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
148-
fill={ `url(#${colors[idx]})` }
149-
strokeWidth={2}
150-
dot={false}
151-
isAnimationActive={ showAnimation }
152-
/>
153-
))}
143+
{ categories.map((category, idx) => (
144+
<Area
145+
key={ category }
146+
name={ category }
147+
type="linear"
148+
dataKey={ category }
149+
stroke={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
150+
fill={ `url(#${colors[idx]})` }
151+
strokeWidth={2}
152+
dot={false}
153+
isAnimationActive={ showAnimation }
154+
/>
155+
))}
154156

155-
</ReChartsAreaChart>
156-
</ResponsiveContainer>
157-
</div>
158-
);
157+
</ReChartsAreaChart>
158+
</ResponsiveContainer>
159+
</div>
160+
);
161+
};
159162

160163
export default AreaChart;

0 commit comments

Comments
 (0)