Commit fb07b3d9 authored by Jakub Beránek's avatar Jakub Beránek
Browse files

FIX: make charts direct descendants of ResponsiveContainer

parent 07536929
Pipeline #5281 passed with stages
in 9 minutes and 2 seconds
......@@ -2253,9 +2253,9 @@
"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
},
"decimal.js-light": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.4.1.tgz",
"integrity": "sha512-OToPy7ssm+ha36h4Af2Yyh3ky51GcKmirdTcyQ1zmjCzV8/M6kqJqjOYMSxWAfm311mtOWLZPnD13JcQngr3vw=="
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.0.tgz",
"integrity": "sha512-b3VJCbd2hwUpeRGG3Toob+CRo8W22xplipNhP3tN7TSVB/cyMX71P1vM2Xjc9H74uV6dS2hDDmo/rHq8L87Upg=="
},
"deep-diff": {
"version": "0.3.8",
......@@ -8943,9 +8943,9 @@
}
},
"recharts": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-1.3.1.tgz",
"integrity": "sha512-9RSCj8B/m5F/xdl8wWeByNH5jzLAyi/zpDwZsaRCzpnINKo8UTDhx9CQg78ZlPNBtbhUu9Gy2sIHmzqBiUbcZw==",
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-1.3.5.tgz",
"integrity": "sha512-WAqyXOQ6Wt0QoFofX0YsSZ6nQozoo0/uot30WclsWVms7f89aXqdZFZbonrJP/fcliHl1ISmDjvIpNiTQCp9XA==",
"requires": {
"classnames": "~2.2.5",
"core-js": "~2.5.1",
......@@ -8956,7 +8956,7 @@
"prop-types": "~15.6.0",
"react-resize-detector": "~2.3.0",
"react-smooth": "~1.0.0",
"recharts-scale": "^0.4.0",
"recharts-scale": "^0.4.2",
"reduce-css-calc": "~1.3.0"
},
"dependencies": {
......@@ -8968,9 +8968,9 @@
}
},
"recharts-scale": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.0.tgz",
"integrity": "sha512-+XRGUAZsw5Fs6aiosBVcmu76JZXmb1HLUMFeAPzAfrPlO6muPNEXMuC5fXOO8Sy1bZ6QVJzAFY5w1nXXZzqB5Q==",
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.2.tgz",
"integrity": "sha512-p/cKt7j17D1CImLgX2f5+6IXLbRHGUQkogIp06VUoci/XkhOQiGSzUrsD1uRmiI7jha4u8XNFOjkHkzzBPivMg==",
"requires": {
"decimal.js-light": "^2.4.1"
}
......
......@@ -50,7 +50,7 @@
"react-toastify": "^3.3.4",
"react-virtualized": "^9.21.0",
"reactstrap": "^6.2.0",
"recharts": "^1.3.1",
"recharts": "^1.3.5",
"redux": "^4.0.0",
"redux-catch": "^1.3.1",
"redux-form": "^7.2.1",
......
......@@ -55,22 +55,8 @@ export class BarChart extends PureComponent<Props>
render()
{
if (this.props.responsive)
{
return (
<ResponsiveContainer width='98%' height={this.props.height}>
{this.renderChart()}
</ResponsiveContainer>
);
}
else return this.renderChart();
}
renderChart = (): JSX.Element =>
{
const yAxes = this.props.yAxes;
let data = this.groups(this.props.measurements, this.props.groupMode,
this.props.xAxis, yAxes, this.props.dateFormat, this.props.sortMode);
this.props.xAxis, this.props.yAxes, this.props.dateFormat, this.props.sortMode);
const empty = data.length === 0;
let attributesMissing = false;
......@@ -85,46 +71,67 @@ export class BarChart extends PureComponent<Props>
attributesMissing = this.props.measurements.length > 0;
}
const yDomain: [AxisDomain, AxisDomain] = this.props.fitToDomain ? ['dataMin', 'auto'] : [0, 'auto'];
return (
<div>
{attributesMissing &&
<Alert color='warning'>
Some measurements are not displayed because of missing X or Y axis value.
</Alert>}
<ReBarChart data={data}
width={this.props.width}
height={this.props.height}
ref={this.props.chartRef}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis
dataKey='x'
interval='preserveStartEnd'
height={40}
tick={props => <Tick {...props} />}>
{empty && <Label value={attributesMissing ? 'Missing attributes' : 'No data available'}
position='center' />}
</XAxis>
<YAxis domain={yDomain} tickFormatter={formatYAxis} />
{!empty && <Tooltip wrapperStyle={{ zIndex: 999 }}
offset={50}
content={<BarTooltip xAxis={this.props.xAxis} />} />}
<Legend align='right' />
{yAxes.map((axis, index) =>
<Bar key={`${axis}.${index}`}
isAnimationActive={false}
dataKey={`items["${axis}"].average`}
stackId='0'
onClick={this.handleBarClick}
maxBarSize={60}
name={formatKey(axis)}
fill={BAR_COLORS.getColor(index)} />
)}
</ReBarChart>
{this.renderChartWrapper(data, empty, attributesMissing)}
</div>
);
}
renderChartWrapper = (data: MeasurementGroup[], empty: boolean, attributesMissing: boolean): JSX.Element =>
{
if (this.props.responsive)
{
return (
<ResponsiveContainer width='98%' height={this.props.height}>
{this.renderChart(data, empty, attributesMissing)}
</ResponsiveContainer>
);
}
else return this.renderChart(data, empty, attributesMissing);
}
renderChart = (data: MeasurementGroup[], empty: boolean, attributesMissing: boolean): JSX.Element =>
{
const yAxes = this.props.yAxes;
const yDomain: [AxisDomain, AxisDomain] = this.props.fitToDomain ? ['dataMin', 'auto'] : [0, 'auto'];
// do not wrap the chart, it has to be a direct child of ResponsiveContainer
return (
<ReBarChart data={data}
width={this.props.width}
height={this.props.height}
ref={this.props.chartRef}>
<CartesianGrid strokeDasharray='3 3' />
<XAxis
dataKey='x'
interval='preserveStartEnd'
height={40}
tick={props => <Tick {...props} />}>
{empty && <Label value={attributesMissing ? 'Missing attributes' : 'No data available'}
position='center' />}
</XAxis>
<YAxis domain={yDomain} tickFormatter={formatYAxis} />
{!empty && <Tooltip wrapperStyle={{ zIndex: 999 }}
offset={50}
content={<BarTooltip xAxis={this.props.xAxis} />} />}
<Legend align='right' />
{yAxes.map((axis, index) =>
<Bar key={`${axis}.${index}`}
isAnimationActive={false}
dataKey={`items["${axis}"].average`}
stackId='0'
onClick={this.handleBarClick}
maxBarSize={60}
name={formatKey(axis)}
fill={BAR_COLORS.getColor(index)} />
)}
</ReBarChart>
);
}
handleBarClick = (data: {payload: MeasurementGroup}) =>
{
......
......@@ -72,22 +72,6 @@ export class LineChart extends PureComponent<Props>
return 'You have to use a group mode with multiple datasets';
}
if (this.props.responsive)
{
return (
<ResponsiveContainer height={this.props.height}>
{this.renderChart()}
</ResponsiveContainer>
);
}
return this.renderChart();
}
renderChart = (): JSX.Element =>
{
const preview = this.props.preview || false;
const padding = preview ? 10 : 20;
let {points, groups} = this.lineData(this.props.datasets, this.props.groupMode, this.props.xAxis,
this.props.dateFormat, this.props.settings.showAverageTrend, this.props.sortMode);
......@@ -101,39 +85,64 @@ export class LineChart extends PureComponent<Props>
attributesMissing = measurementLength > 0;
}
const yDomain: [AxisDomain, AxisDomain] = this.props.fitToDomain ? ['dataMin', 'auto'] : [0, 'auto'];
return (
<div>
{attributesMissing && !this.props.preview &&
<Alert color='warning'>
Some measurements are not displayed because of missing X or Y axis value.
</Alert>}
<ReLineChart data={points}
width={this.props.width}
height={this.props.height}
ref={this.props.chartRef}>
<CartesianGrid stroke='#CCCCCC' />
<XAxis
dataKey='x'
interval='preserveStartEnd'
tickLine={!preview}
tick={props => !this.props.preview && <Tick {...props} />}
padding={{left: padding, right: padding}}>
{empty && <Label value={attributesMissing ? 'Missing attributes' : 'No data available'}
position='center' />}
</XAxis>
<YAxis padding={{bottom: padding, top: padding}}
domain={yDomain}
tickFormatter={formatYAxis} />
{!preview && <Tooltip wrapperStyle={{ zIndex: 999 }}
offset={50}
content={<PointTooltip xAxis={this.props.xAxis} />} />}
{!preview && <Legend content={<LineLegend groups={groups} />} />}
{groups.map((g, i) => this.renderLine(g, i, preview))}
</ReLineChart>
{this.renderChartWrapper(points, groups, empty, attributesMissing)}
</div>
);
}
renderChartWrapper = (points: LinePoint[], groups: LabeledGroup[],
empty: boolean, attributesMissing: boolean): JSX.Element =>
{
if (this.props.responsive)
{
return (
<ResponsiveContainer width='100%' height={this.props.height}>
{this.renderChart(points, groups, empty, attributesMissing)}
</ResponsiveContainer>
);
}
return this.renderChart(points, groups, empty, attributesMissing);
}
renderChart = (points: LinePoint[], groups: LabeledGroup[],
empty: boolean, attributesMissing: boolean): JSX.Element =>
{
const preview = this.props.preview || false;
const padding = preview ? 10 : 20;
const yDomain: [AxisDomain, AxisDomain] = this.props.fitToDomain ? ['dataMin', 'auto'] : [0, 'auto'];
// do not wrap the chart, it has to be a direct child of ResponsiveContainer
return (
<ReLineChart data={points}
width={this.props.width}
height={this.props.height}
ref={this.props.chartRef}>
<CartesianGrid stroke='#CCCCCC' />
<XAxis
dataKey='x'
interval='preserveStartEnd'
tickLine={!preview}
tick={props => !this.props.preview && <Tick {...props} />}
padding={{left: padding, right: padding}}>
{empty && <Label value={attributesMissing ? 'Missing attributes' : 'No data available'}
position='center' />}
</XAxis>
<YAxis padding={{bottom: padding, top: padding}}
domain={yDomain}
tickFormatter={formatYAxis} />
{!preview && <Tooltip wrapperStyle={{ zIndex: 999 }}
offset={50}
content={<PointTooltip xAxis={this.props.xAxis} />} />}
{!preview && <Legend content={<LineLegend groups={groups} />} />}
{groups.map((g, i) => this.renderLine(g, i, preview))}
</ReLineChart>
);
}
renderLine = (group: LabeledGroup, index: number, preview: boolean): JSX.Element =>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment