fix(Visualisations): Prevents overflow issue with long label on Y-Axi…

…s. (#1485 [LL-156](https://learningpool.atlassian.net/browse/LL-156))

#1485
https://learningpool.atlassian.net/browse/LL-156

ui/src/components/Charts/BarChart.js

@@ -6,6 +6,7 @@ import { BarChart as Chart, XAxis, YAxis, CartesianGrid } from 'recharts';
 import { compose } from 'recompose';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import NoData from 'ui/components/Graphs/NoData';
+import { wrapLabel } from 'ui/utils/defaultTitles';
 import { Button } from 'react-toolbox/lib/button';
 import uuid from 'uuid';
 import { connect } from 'react-redux';
@@ -99,7 +100,8 @@ class BarChart extends Component {
     return (
       <div>
         <style
-          dangerouslySetInnerHTML={{ __html: `
+          dangerouslySetInnerHTML={{
+            __html: `
             .grid-${chartUuid} .recharts-cartesian-grid-horizontal {
               background-color: 'yellow';
               visibility: hidden !important;
@@ -141,7 +143,7 @@ class BarChart extends Component {
         <div className={`${styles.withPrevNext} clearfix`} />
         <div className={`${styles.barContainer}`}>
           <span className={styles.yAxis}>
-            {this.props.model.get('axesyLabel') || this.props.model.getIn(['axesgroup', 'searchString'], 'Y-Axis')}
+            {wrapLabel(this.props.model.get('axesyLabel') || this.props.model.getIn(['axesgroup', 'searchString'], 'Y-Axis'))}
           </span>
           <div className={styles.chartWrapper}>
             {this.props.chartWrapperFn((this.renderBarChart(model)(colors)(labels)(data)(stacked)(activePage)))}
@@ -160,8 +162,8 @@ class BarChart extends Component {
     const { results, labels, stacked, colors, model } = this.props;
     return (
       hasData(this.props.results)
-      ? this.renderResults(model)(results)(colors)(labels)(stacked)
-      : <NoData />
+        ? this.renderResults(model)(results)(colors)(labels)(stacked)
+        : <NoData />
     );
   }
 }

ui/src/components/Charts/ColumnChart.js

@@ -5,6 +5,7 @@ import { AutoSizer } from 'react-virtualized';
 import NoData from 'ui/components/Graphs/NoData';
 import { compose } from 'recompose';
 import uuid from 'uuid';
+import { wrapLabel } from 'ui/utils/defaultTitles';
 import {
   getResultsData,
   getShortModel,
@@ -24,7 +25,8 @@ const renderBarChart = colors => (labels, toggleHiddenSeries, hiddenSeries) => s
   /* eslint-disable react/no-danger */
   <div>
     <style
-      dangerouslySetInnerHTML={{ __html: `
+      dangerouslySetInnerHTML={{
+        __html: `
         .grid-${chartUuid} .recharts-cartesian-grid-vertical {
           visibility: hidden !important;
         }
@@ -46,23 +48,23 @@ const renderBarChart = colors => (labels, toggleHiddenSeries, hiddenSeries) => s
   /* eslint-enable react/no-danger */
 );
 const renderChart = (model, component, axesLabels, chartWrapperFn) =>
-(
-  <div className={styles.chart}>
-    <div className={`${styles.barContainer}`}>
-      <span className={styles.yAxis}>
-        {axesLabels.yLabel || model.getIn(['axesvalue', 'searchString'], 'Y-Axis')}
-      </span>
-      <div className={styles.chartWrapper}>
-        {chartWrapperFn(component)}
+  (
+    <div className={styles.chart}>
+      <div className={`${styles.barContainer}`}>
+        <span className={styles.yAxis}>
+          {wrapLabel(axesLabels.yLabel || model.getIn(['axesvalue', 'searchString'], 'Y-Axis'))}
+        </span>
+        <div className={styles.chartWrapper}>
+          {chartWrapperFn(component)}
+        </div>
+      </div>
+      <div className={styles.xAxisLabel}>
+        <span className={styles.xAxis}>
+          {axesLabels.xLabel || model.getIn(['axesgroup', 'searchString'], 'X-Axis')}
+        </span>
       </div>
     </div>
-    <div className={styles.xAxisLabel}>
-      <span className={styles.xAxis}>
-        {axesLabels.xLabel || model.getIn(['axesgroup', 'searchString'], 'X-Axis')}
-      </span>
-    </div>
-  </div>
-);
+  );
 const renderChartResults = colors => (labels, toggleHiddenSeries, hiddenSeries) => stacked => results => (
   renderBarChart(colors)(labels, toggleHiddenSeries, hiddenSeries)(stacked)(getSortedData(results)(labels))
 );
@@ -84,5 +86,5 @@ export default compose(
   hiddenSeries,
   model
 }) => (
-  hasData(results) ? renderResults(results)(model)(colors)(labels, toggleHiddenSeries, hiddenSeries)(stacked)(axesLabels)(chartWrapperFn) : <NoData />
-));
+    hasData(results) ? renderResults(results)(model)(colors)(labels, toggleHiddenSeries, hiddenSeries)(stacked)(axesLabels)(chartWrapperFn) : <NoData />
+  ));

ui/src/components/Charts/LineChart.js

@@ -4,6 +4,7 @@ import { LineChart as Chart, XAxis, YAxis, Line, CartesianGrid } from 'recharts'
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import NoData from 'ui/components/Graphs/NoData';
 import { compose } from 'recompose';
+import { wrapLabel } from 'ui/utils/defaultTitles';
 import {
   getResultsData,
   getShortModel,
@@ -47,13 +48,13 @@ const renderLineChart = (labels, toggleHiddenSeries, hiddenSeries) => colors =>
     {renderLines(labels)(colors)}
     {renderTooltips(data)}
   </Chart>
-  );
+);
 
 const renderChart = (component, axesLabels, chartWrapperFn, model) => (
   <div className={styles.chart}>
     <div className={`${styles.barContainer}`}>
       <span className={styles.yAxis}>
-        {axesLabels.yLabel || model.getIn(['axesvalue', 'searchString'], 'Y-Axis')}
+        {wrapLabel(axesLabels.yLabel || model.getIn(['axesvalue', 'searchString'], 'Y-Axis'))}
       </span>
       <div className={styles.chartWrapper}>
         {chartWrapperFn(component)}

ui/src/components/Charts/styles.css

@@ -84,6 +84,7 @@
   writing-mode: vertical-rl;
   transform: rotate(-180deg);
   margin: auto 0;
+  white-space: pre-wrap;
   }
 
 .chartWrapper {

ui/src/components/XvsY/index.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Map, List } from 'immutable';
 import { AutoSizer } from 'react-virtualized';
-import { shorten } from 'ui/utils/defaultTitles';
+import { shorten, wrapLabel } from 'ui/utils/defaultTitles';
+
 import {
   ScatterChart,
   XAxis,
@@ -34,13 +35,13 @@ class XvsY extends Component {
   }
 
   shouldComponentUpdate = nextProps => !(
-      this.props.results.equals(nextProps.results) &&
-      this.props.axesLabels.xLabel === nextProps.axesLabels.xLabel &&
-      this.props.axesLabels.yLabel === nextProps.axesLabels.yLabel &&
-      this.props.colors.equals(nextProps.colors) &&
-      this.props.labels.equals(nextProps.labels) &&
-      this.props.trendLines === nextProps.trendLines
-    )
+    this.props.results.equals(nextProps.results) &&
+    this.props.axesLabels.xLabel === nextProps.axesLabels.xLabel &&
+    this.props.axesLabels.yLabel === nextProps.axesLabels.yLabel &&
+    this.props.colors.equals(nextProps.colors) &&
+    this.props.labels.equals(nextProps.labels) &&
+    this.props.trendLines === nextProps.trendLines
+  )
 
   getLargestSeriesSize = () => (
     this.props.results.map(this.getLargestAxisSize).max()
@@ -140,13 +141,13 @@ class XvsY extends Component {
           display={this.displayModelAtPosition(this.getModels())} />}
         cursor={{ strokeDasharray: '3 3' }} />
     </ScatterChart>
-    )
+  )
 
   renderChart = () => (
     <div className={styles.chart}>
       <div className={`${styles.barContainer}`}>
         <span className={styles.yAxis}>
-          {this.props.model.get('axesyLabel') || shorten(this.props.model.getIn(['axesyValue', 'searchString'], 'Y-Axis'))}
+          {wrapLabel(this.props.model.get('axesyLabel') || this.props.model.getIn(['axesyValue', 'searchString'], 'Y-Axis'))}
         </span>
         <div className={styles.chartWrapper}>
           <AutoSizer forceChange={this.props.results}>

ui/src/components/XvsY/styles.css

@@ -64,6 +64,7 @@
   transform: rotate(-180deg);
   margin: auto 0;
   margin-left:15px;
+  white-space: pre-wrap;
 }
 
 

ui/src/containers/VisualiseResults/BarChartResults.js

@@ -20,7 +20,7 @@ export default withStatementsVisualisation(({
       stacked={stacked}
       model={model}
       axesLabels={{
-        yLabel: shorten(axes.get('yLabel', axes.getIn(['group', 'searchString'], 'Y-Axis'))),
+        yLabel: axes.get('yLabel', axes.getIn(['group', 'searchString'], 'Y-Axis')),
         xLabel: shorten(axes.get('xLabel', axes.getIn(['value', 'searchString'], 'X-Axis')))
       }} />
   )

ui/src/containers/VisualiseResults/ColumnChartResults.js

@@ -14,7 +14,7 @@ export default withStatementsVisualisation((props) => {
       model={model}
       axesLabels={{
         xLabel: shorten(axes.get('xLabel', axes.getIn(['group', 'searchString'], 'X-Axis'))),
-        yLabel: shorten(axes.get('yLabel', axes.getIn(['value', 'searchString'], 'Y-Axis')))
+        yLabel: axes.get('yLabel', axes.getIn(['value', 'searchString'], 'Y-Axis'))
       }} />
   );
 });

ui/src/containers/VisualiseResults/LineChartResults.js

@@ -13,7 +13,7 @@ export default withStatementsVisualisation(({
     preview={previewPeriod}
     model={model}
     axesLabels={{
-      xLabel: shorten(axes.get('xLabel', axes.getIn(['group', 'searchString'], 'yyyy-mm-dd'))),
-      yLabel: shorten(axes.get('yLabel', axes.getIn(['value', 'searchString'], 'Y-Axis')))
+      xLabel: axes.get('xLabel', shorten(model.getIn(['axesxValue', 'searchString'], 'X-Axis'))),
+      yLabel: axes.get('yLabel', axes.getIn(['value', 'searchString'], 'Y-Axis'))
     }} />
 ));

ui/src/containers/VisualiseResults/XvsYChartResults.js

@@ -20,6 +20,6 @@ export default withStatementsVisualisation(({
     trendLines={trendLines}
     axesLabels={{
       xLabel: axes.get('xLabel', shorten(model.getIn(['axesxValue', 'searchString'], 'X-Axis'))),
-      yLabel: axes.get('yLabel', shorten(model.getIn(['axesyValue', 'searchString'], 'Y-Axis')))
+      yLabel: axes.get('yLabel', model.getIn(['axesyValue', 'searchString'], 'Y-Axis'))
     }} />
 ));

ui/src/utils/defaultTitles.js

@@ -59,9 +59,9 @@ const makeOperatorReadable = (model, operatorName) => {
 };
 
 /**
- * @param {immutable.Map} model - visualisation model
- * @return {string}
- */
+* @param {immutable.Map} model - visualisation model
+* @return {string}
+  */
 export const createDefaultTitle = (model) => {
   const type = model.get('type', null);
 
@@ -138,3 +138,28 @@ export const getPercentage = (res1, res2) => {
 
   return { result: `${percentage}%`, icon: chevronUpIcon, marginBottom: '6%' };
 };
+
+export const wrapLabel = (target) => {
+  const separatedStrings = [];
+  const index = 46;
+  let remainingSection = target;
+  let sectionIndex;
+  let firstSection;
+  while (remainingSection.length > index) {
+    sectionIndex = remainingSection.lastIndexOf(' ', index);
+    if (sectionIndex < 1) {
+      sectionIndex = remainingSection.lastIndexOf('.', index);
+    }
+    if (sectionIndex < 1) {
+      sectionIndex = remainingSection.lastIndexOf('%20', index);
+    }
+    if (sectionIndex < 1) {
+      sectionIndex = index;
+    }
+    firstSection = remainingSection.substring(0, sectionIndex);
+    remainingSection = remainingSection.substring(sectionIndex);
+    separatedStrings.push(firstSection);
+  }
+  separatedStrings.push(remainingSection);
+  return separatedStrings.join('\n');
+};