Skip to content

Commit

Permalink
fix: fix chart isses (#68)
Browse files Browse the repository at this point in the history 
* fix: fix chart issues

* fix: add whitespace-nowrap to charttooltip

* fix: add windowsize listener to ChartLegend
  • Loading branch information
@mitrotasios
mitrotasios authored Oct 3, 2022
1 parent 118a3bd commit 3f98f8b
Show file tree
Hide file tree
Showing 5 changed files with 269 additions and 234 deletions.
215 changes: 109 additions & 106 deletions src/components/chart-elements/AreaChart/AreaChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';

import {
Area,
Expand Down Expand Up @@ -43,118 +43,121 @@ const AreaChart = ({
showGradient = true,
height = 'h-80',
marginTop = 'mt-0',
}: BaseChartProps) => (
<div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
<ResponsiveContainer width="100%" height="100%">
<ReChartsAreaChart data={ data }>
{ showGridLines ? (
<CartesianGrid
strokeDasharray="3 3"
horizontal={ true }
vertical={ false }
}: BaseChartProps) => {
const [legendHeight, setLegendHeight] = useState(60);
return (
<div className={ classNames('tr-w-full', parseHeight(height), parseMarginTop(marginTop)) }>
<ResponsiveContainer width="100%" height="100%">
<ReChartsAreaChart data={ data }>
{ showGridLines ? (
<CartesianGrid
strokeDasharray="3 3"
horizontal={ true }
vertical={ false }
/>
) : null }
<XAxis
hide={ !showXAxis }
dataKey={ dataKey }
tick={ { transform: 'translate(0, 6)' } }
ticks={ startEndOnly ? [data[0][dataKey], data[data.length - 1][dataKey]] : undefined }
style={ {
fontSize: '12px',
fontFamily: 'Inter; Helvetica',
} }
interval="preserveStartEnd"
tickLine={ false }
axisLine={ false }
padding={{ left: 10, right: 10 }}
minTickGap={5}
/>
) : null }
<XAxis
hide={ !showXAxis }
dataKey={ dataKey }
tick={ { transform: 'translate(0, 6)' } }
ticks={ startEndOnly ? [data[0][dataKey], data[data.length - 1][dataKey]] : undefined }
style={ {
fontSize: '12px',
fontFamily: 'Inter; Helvetica',
} }
interval="preserveStartEnd"
tickLine={ false }
axisLine={ false }
padding={{ left: 10, right: 10 }}
minTickGap={5}
/>
<YAxis
width={ getPixelsFromTwClassName(yAxisWidth) }
hide={ !showYAxis }
axisLine={ false }
tickLine={ false }
type="number"
domain={ [0, 'auto'] }
tick={ { transform: 'translate(-3, 0)' } }
style={ {
fontSize: '12px',
fontFamily: 'Inter; Helvetica',
} }
tickFormatter={ valueFormatter }
/>
{ showTooltip ? (
<Tooltip
// ongoing issue: https://github.com/recharts/recharts/issues/2920
wrapperStyle={{ outline: 'none' }}
isAnimationActive={false}
cursor={{ stroke: '#d1d5db', strokeWidth: 1 }}
content={ ({ active, payload, label }) => (
<ChartTooltip
active={ active }
payload={ payload }
label={ label }
valueFormatter={ valueFormatter }
colors={ colors }
/>
) }
position={ { y: 0 } }
/>
) : null }
{ showLegend ? (
<Legend
verticalAlign="top"
height={ 60 }
content={ ({ payload }) => ChartLegend({ payload }, colors) }
<YAxis
width={ getPixelsFromTwClassName(yAxisWidth) }
hide={ !showYAxis }
axisLine={ false }
tickLine={ false }
type="number"
domain={ [0, 'auto'] }
tick={ { transform: 'translate(-3, 0)' } }
style={ {
fontSize: '12px',
fontFamily: 'Inter; Helvetica',
} }
tickFormatter={ valueFormatter }
/>
) : null }
{ showTooltip ? (
<Tooltip
// ongoing issue: https://github.com/recharts/recharts/issues/2920
wrapperStyle={{ outline: 'none' }}
isAnimationActive={false}
cursor={{ stroke: '#d1d5db', strokeWidth: 1 }}
content={ ({ active, payload, label }) => (
<ChartTooltip
active={ active }
payload={ payload }
label={ label }
valueFormatter={ valueFormatter }
colors={ colors }
/>
) }
position={ { y: 0 } }
/>
) : null }
{ showLegend ? (
<Legend
verticalAlign="top"
height={ legendHeight }
content={ ({ payload }) => ChartLegend({ payload }, colors, setLegendHeight) }
/>
) : null }


{ categories.map((category, idx) => (
<defs key={ category }>
{ showGradient ? (
<linearGradient id={ colors[idx] } x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
stopOpacity={0.4}
/>
<stop
offset="95%"
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
stopOpacity={0}
/>
</linearGradient>
) : (
<linearGradient id={ colors[idx] } x1="0" y1="0" x2="0" y2="1">
<stop
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
stopOpacity={0.3}
/>
</linearGradient>
)}
</defs>
)) }
{ categories.map((category, idx) => (
<defs key={ category }>
{ showGradient ? (
<linearGradient id={ colors[idx] } x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
stopOpacity={0.4}
/>
<stop
offset="95%"
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
stopOpacity={0}
/>
</linearGradient>
) : (
<linearGradient id={ colors[idx] } x1="0" y1="0" x2="0" y2="1">
<stop
stopColor={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
stopOpacity={0.3}
/>
</linearGradient>
)}
</defs>
)) }



{ categories.map((category, idx) => (
<Area
key={ category }
name={ category }
type="linear"
dataKey={ category }
stroke={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
fill={ `url(#${colors[idx]})` }
strokeWidth={2}
dot={false}
isAnimationActive={ showAnimation }
/>
))}
{ categories.map((category, idx) => (
<Area
key={ category }
name={ category }
type="linear"
dataKey={ category }
stroke={ getHexFromColorThemeValue(getColorTheme(colors[idx]).background) }
fill={ `url(#${colors[idx]})` }
strokeWidth={2}
dot={false}
isAnimationActive={ showAnimation }
/>
))}

</ReChartsAreaChart>
</ResponsiveContainer>
</div>
);
</ReChartsAreaChart>
</ResponsiveContainer>
</div>
);
};

export default AreaChart;
Loading

0 comments on commit 3f98f8b

Please sign in to comment.