Skip to content

Commit eb3feeb

Browse files
lydiamrosslydiamross
authored
fix(Visualisations): Prevents overflow issue with long label on Y-Axis. (#1485 [LL-156](https://learningpool.atlassian.net/browse/LL-156))
#1485 https://learningpool.atlassian.net/browse/LL-156
1 parent d5f7c37 commit eb3feeb

11 files changed

Lines changed: 75 additions & 42 deletions

File tree

‎ui/src/components/Charts/BarChart.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { BarChart as Chart, XAxis, YAxis, CartesianGrid } from 'recharts';
66
import { compose } from 'recompose';
77
import withStyles from 'isomorphic-style-loader/lib/withStyles';
88
import NoData from 'ui/components/Graphs/NoData';
9+
import { wrapLabel } from 'ui/utils/defaultTitles';
910
import { Button } from 'react-toolbox/lib/button';
1011
import uuid from 'uuid';
1112
import { connect } from 'react-redux';
@@ -99,7 +100,8 @@ class BarChart extends Component {
99100
return (
100101
<div>
101102
<style
102-
dangerouslySetInnerHTML={{ __html: `
103+
dangerouslySetInnerHTML={{
104+
__html: `
103105
.grid-${chartUuid} .recharts-cartesian-grid-horizontal {
104106
background-color: 'yellow';
105107
visibility: hidden !important;
@@ -141,7 +143,7 @@ class BarChart extends Component {
141143
<div className={`${styles.withPrevNext} clearfix`} />
142144
<div className={`${styles.barContainer}`}>
143145
<span className={styles.yAxis}>
144-
{this.props.model.get('axesyLabel') || this.props.model.getIn(['axesgroup', 'searchString'], 'Y-Axis')}
146+
{wrapLabel(this.props.model.get('axesyLabel') || this.props.model.getIn(['axesgroup', 'searchString'], 'Y-Axis'))}
145147
</span>
146148
<div className={styles.chartWrapper}>
147149
{this.props.chartWrapperFn((this.renderBarChart(model)(colors)(labels)(data)(stacked)(activePage)))}
@@ -160,8 +162,8 @@ class BarChart extends Component {
160162
const { results, labels, stacked, colors, model } = this.props;
161163
return (
162164
hasData(this.props.results)
163-
? this.renderResults(model)(results)(colors)(labels)(stacked)
164-
: <NoData />
165+
? this.renderResults(model)(results)(colors)(labels)(stacked)
166+
: <NoData />
165167
);
166168
}
167169
}

‎ui/src/components/Charts/ColumnChart.js‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { AutoSizer } from 'react-virtualized';
55
import NoData from 'ui/components/Graphs/NoData';
66
import { compose } from 'recompose';
77
import uuid from 'uuid';
8+
import { wrapLabel } from 'ui/utils/defaultTitles';
89
import {
910
getResultsData,
1011
getShortModel,
@@ -24,7 +25,8 @@ const renderBarChart = colors => (labels, toggleHiddenSeries, hiddenSeries) => s
2425
/* eslint-disable react/no-danger */
2526
<div>
2627
<style
27-
dangerouslySetInnerHTML={{ __html: `
28+
dangerouslySetInnerHTML={{
29+
__html: `
2830
.grid-${chartUuid} .recharts-cartesian-grid-vertical {
2931
visibility: hidden !important;
3032
}
@@ -46,23 +48,23 @@ const renderBarChart = colors => (labels, toggleHiddenSeries, hiddenSeries) => s
4648
/* eslint-enable react/no-danger */
4749
);
4850
const renderChart = (model, component, axesLabels, chartWrapperFn) =>
49-
(
50-
<div className={styles.chart}>
51-
<div className={`${styles.barContainer}`}>
52-
<span className={styles.yAxis}>
53-
{axesLabels.yLabel || model.getIn(['axesvalue', 'searchString'], 'Y-Axis')}
54-
</span>
55-
<div className={styles.chartWrapper}>
56-
{chartWrapperFn(component)}
51+
(
52+
<div className={styles.chart}>
53+
<div className={`${styles.barContainer}`}>
54+
<span className={styles.yAxis}>
55+
{wrapLabel(axesLabels.yLabel || model.getIn(['axesvalue', 'searchString'], 'Y-Axis'))}
56+
</span>
57+
<div className={styles.chartWrapper}>
58+
{chartWrapperFn(component)}
59+
</div>
60+
</div>
61+
<div className={styles.xAxisLabel}>
62+
<span className={styles.xAxis}>
63+
{axesLabels.xLabel || model.getIn(['axesgroup', 'searchString'], 'X-Axis')}
64+
</span>
5765
</div>
5866
</div>
59-
<div className={styles.xAxisLabel}>
60-
<span className={styles.xAxis}>
61-
{axesLabels.xLabel || model.getIn(['axesgroup', 'searchString'], 'X-Axis')}
62-
</span>
63-
</div>
64-
</div>
65-
);
67+
);
6668
const renderChartResults = colors => (labels, toggleHiddenSeries, hiddenSeries) => stacked => results => (
6769
renderBarChart(colors)(labels, toggleHiddenSeries, hiddenSeries)(stacked)(getSortedData(results)(labels))
6870
);
@@ -84,5 +86,5 @@ export default compose(
8486
hiddenSeries,
8587
model
8688
}) => (
87-
hasData(results) ? renderResults(results)(model)(colors)(labels, toggleHiddenSeries, hiddenSeries)(stacked)(axesLabels)(chartWrapperFn) : <NoData />
88-
));
89+
hasData(results) ? renderResults(results)(model)(colors)(labels, toggleHiddenSeries, hiddenSeries)(stacked)(axesLabels)(chartWrapperFn) : <NoData />
90+
));

‎ui/src/components/Charts/LineChart.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { LineChart as Chart, XAxis, YAxis, Line, CartesianGrid } from 'recharts'
44
import withStyles from 'isomorphic-style-loader/lib/withStyles';
55
import NoData from 'ui/components/Graphs/NoData';
66
import { compose } from 'recompose';
7+
import { wrapLabel } from 'ui/utils/defaultTitles';
78
import {
89
getResultsData,
910
getShortModel,
@@ -47,13 +48,13 @@ const renderLineChart = (labels, toggleHiddenSeries, hiddenSeries) => colors =>
4748
{renderLines(labels)(colors)}
4849
{renderTooltips(data)}
4950
</Chart>
50-
);
51+
);
5152

5253
const renderChart = (component, axesLabels, chartWrapperFn, model) => (
5354
<div className={styles.chart}>
5455
<div className={`${styles.barContainer}`}>
5556
<span className={styles.yAxis}>
56-
{axesLabels.yLabel || model.getIn(['axesvalue', 'searchString'], 'Y-Axis')}
57+
{wrapLabel(axesLabels.yLabel || model.getIn(['axesvalue', 'searchString'], 'Y-Axis'))}
5758
</span>
5859
<div className={styles.chartWrapper}>
5960
{chartWrapperFn(component)}

‎ui/src/components/Charts/styles.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
writing-mode: vertical-rl;
8585
transform: rotate(-180deg);
8686
margin: auto 0;
87+
white-space: pre-wrap;
8788
}
8889

8990
.chartWrapper {

‎ui/src/components/XvsY/index.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import { Map, List } from 'immutable';
44
import { AutoSizer } from 'react-virtualized';
5-
import { shorten } from 'ui/utils/defaultTitles';
5+
import { shorten, wrapLabel } from 'ui/utils/defaultTitles';
6+
67
import {
78
ScatterChart,
89
XAxis,
@@ -34,13 +35,13 @@ class XvsY extends Component {
3435
}
3536

3637
shouldComponentUpdate = nextProps => !(
37-
this.props.results.equals(nextProps.results) &&
38-
this.props.axesLabels.xLabel === nextProps.axesLabels.xLabel &&
39-
this.props.axesLabels.yLabel === nextProps.axesLabels.yLabel &&
40-
this.props.colors.equals(nextProps.colors) &&
41-
this.props.labels.equals(nextProps.labels) &&
42-
this.props.trendLines === nextProps.trendLines
43-
)
38+
this.props.results.equals(nextProps.results) &&
39+
this.props.axesLabels.xLabel === nextProps.axesLabels.xLabel &&
40+
this.props.axesLabels.yLabel === nextProps.axesLabels.yLabel &&
41+
this.props.colors.equals(nextProps.colors) &&
42+
this.props.labels.equals(nextProps.labels) &&
43+
this.props.trendLines === nextProps.trendLines
44+
)
4445

4546
getLargestSeriesSize = () => (
4647
this.props.results.map(this.getLargestAxisSize).max()
@@ -140,13 +141,13 @@ class XvsY extends Component {
140141
display={this.displayModelAtPosition(this.getModels())} />}
141142
cursor={{ strokeDasharray: '3 3' }} />
142143
</ScatterChart>
143-
)
144+
)
144145

145146
renderChart = () => (
146147
<div className={styles.chart}>
147148
<div className={`${styles.barContainer}`}>
148149
<span className={styles.yAxis}>
149-
{this.props.model.get('axesyLabel') || shorten(this.props.model.getIn(['axesyValue', 'searchString'], 'Y-Axis'))}
150+
{wrapLabel(this.props.model.get('axesyLabel') || this.props.model.getIn(['axesyValue', 'searchString'], 'Y-Axis'))}
150151
</span>
151152
<div className={styles.chartWrapper}>
152153
<AutoSizer forceChange={this.props.results}>

‎ui/src/components/XvsY/styles.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
transform: rotate(-180deg);
6565
margin: auto 0;
6666
margin-left:15px;
67+
white-space: pre-wrap;
6768
}
6869

6970

‎ui/src/containers/VisualiseResults/BarChartResults.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default withStatementsVisualisation(({
2020
stacked={stacked}
2121
model={model}
2222
axesLabels={{
23-
yLabel: shorten(axes.get('yLabel', axes.getIn(['group', 'searchString'], 'Y-Axis'))),
23+
yLabel: axes.get('yLabel', axes.getIn(['group', 'searchString'], 'Y-Axis')),
2424
xLabel: shorten(axes.get('xLabel', axes.getIn(['value', 'searchString'], 'X-Axis')))
2525
}} />
2626
)

‎ui/src/containers/VisualiseResults/ColumnChartResults.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default withStatementsVisualisation((props) => {
1414
model={model}
1515
axesLabels={{
1616
xLabel: shorten(axes.get('xLabel', axes.getIn(['group', 'searchString'], 'X-Axis'))),
17-
yLabel: shorten(axes.get('yLabel', axes.getIn(['value', 'searchString'], 'Y-Axis')))
17+
yLabel: axes.get('yLabel', axes.getIn(['value', 'searchString'], 'Y-Axis'))
1818
}} />
1919
);
2020
});

‎ui/src/containers/VisualiseResults/LineChartResults.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default withStatementsVisualisation(({
1313
preview={previewPeriod}
1414
model={model}
1515
axesLabels={{
16-
xLabel: shorten(axes.get('xLabel', axes.getIn(['group', 'searchString'], 'yyyy-mm-dd'))),
17-
yLabel: shorten(axes.get('yLabel', axes.getIn(['value', 'searchString'], 'Y-Axis')))
16+
xLabel: axes.get('xLabel', shorten(model.getIn(['axesxValue', 'searchString'], 'X-Axis'))),
17+
yLabel: axes.get('yLabel', axes.getIn(['value', 'searchString'], 'Y-Axis'))
1818
}} />
1919
));

‎ui/src/containers/VisualiseResults/XvsYChartResults.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@ export default withStatementsVisualisation(({
2020
trendLines={trendLines}
2121
axesLabels={{
2222
xLabel: axes.get('xLabel', shorten(model.getIn(['axesxValue', 'searchString'], 'X-Axis'))),
23-
yLabel: axes.get('yLabel', shorten(model.getIn(['axesyValue', 'searchString'], 'Y-Axis')))
23+
yLabel: axes.get('yLabel', model.getIn(['axesyValue', 'searchString'], 'Y-Axis'))
2424
}} />
2525
));

0 commit comments

Comments
 (0)