Merge pull request #1491 from akvo/issue/1490-y-axis-label-size

[#1490] y axis label sizes
akvo · Jun 21, 2018 · 2c2b1dd · 2c2b1dd
2 parents b938140 + bab9c54
commit 2c2b1dd
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 25 deletions.
diff --git a/client/src/components/charts/LineChart.jsx b/client/src/components/charts/LineChart.jsx
@@ -11,7 +11,8 @@ import { GridRows, GridColumns } from '@vx/grid';
 import itsSet from 'its-set';
 
 import { sortChronologically, filterNullData } from '../../utilities/utils';
-import { heuristicRound, calculateMargins } from '../../utilities/chart';
+import { heuristicRound, calculateMargins, getLabelFontSize } from '../../utilities/chart';
+import { MAX_FONT_SIZE, MIN_FONT_SIZE } from '../../constants/chart';
 import ResponsiveWrapper from '../common/ResponsiveWrapper';
 import ColorPicker from '../common/ColorPicker';
 import ChartLayout from './ChartLayout';
@@ -174,6 +175,10 @@ export default class LineChart extends Component {
 
  series.data = filterNullData(series.data);
 
+ const axisLabelFontSize =
+ getLabelFontSize(yAxisLabel, xAxisLabel, MAX_FONT_SIZE, MIN_FONT_SIZE, height, width);
+
+
  return (
  <ChartLayout
  style={style}
@@ -360,9 +365,10 @@ export default class LineChart extends Component {
  dy: margins.top * 0.5,
  textAnchor: 'middle',
  fontFamily: 'Arial',
- fontSize: 10,
+ fontSize: axisLabelFontSize,
  fill: 'black',
  }}
+ labelOffset={44}
  />
 
  <AxisBottom
@@ -374,7 +380,7 @@ export default class LineChart extends Component {
  dy: margins.bottom - 50,
  textAnchor: 'middle',
  fontFamily: 'Arial',
- fontSize: 10,
+ fontSize: axisLabelFontSize,
  fill: 'black',
  }}
  stroke={'#1b1a1e'}

diff --git a/client/src/components/charts/ScatterChart.jsx b/client/src/components/charts/ScatterChart.jsx
@@ -13,7 +13,8 @@ import ColorPicker from '../common/ColorPicker';
 import ResponsiveWrapper from '../common/ResponsiveWrapper';
 import Tooltip from './Tooltip';
 import ChartLayout from './ChartLayout';
-import { heuristicRound, calculateMargins } from '../../utilities/chart';
+import { heuristicRound, calculateMargins, getLabelFontSize } from '../../utilities/chart';
+import { MAX_FONT_SIZE, MIN_FONT_SIZE } from '../../constants/chart';
 
 const startAxisFromZero = (axisExtent, type) => {
  // Returns an educated guess on if axis should start from zero or not
@@ -85,6 +86,10 @@ export default class ScatterChart extends Component {
  interactive: true,
  }
 
+ static contextTypes = {
+ abbrNumber: PropTypes.func,
+ }
+
  state = {
  isPickingColor: false,
  }
@@ -206,6 +211,17 @@ export default class ScatterChart extends Component {
 
  if (!series) return null;
 
+ const axisLabelFontSize =
+ getLabelFontSize(yAxisLabel, xAxisLabel, MAX_FONT_SIZE, MIN_FONT_SIZE, height, width);
+
+ const tickFormat = (value) => {
+ const cutoff = 10000;
+ if (cutoff >= 10000) {
+ return this.context.abbrNumber(value);
+ }
+ return value;
+ };
+
  return (
  <ChartLayout
  style={style}
@@ -345,15 +361,32 @@ export default class ScatterChart extends Component {
  scale={yScale}
  left={margins.left}
  label={yAxisLabel || ''}
+ labelProps={{
+ dy: margins.top * 0.5,
+ textAnchor: 'middle',
+ fontFamily: 'Arial',
+ fontSize: axisLabelFontSize,
+ fill: 'black',
+ }}
+ labelOffset={44}
  stroke={'#1b1a1e'}
  tickTextFill={'#1b1a1e'}
  numTicks={yAxisTicks}
+ tickFormat={tickFormat}
  />
 
  <AxisBottom
  scale={xScale}
  top={dimensions.height - margins.bottom}
  label={xAxisLabel || ''}
+ labelProps={{
+ dx: margins.left * 0.5,
+ dy: margins.bottom - 50,
+ textAnchor: 'middle',
+ fontFamily: 'Arial',
+ fontSize: axisLabelFontSize,
+ fill: 'black',
+ }}
  stroke={'#1b1a1e'}
  tickTextFill={'#1b1a1e'}
  numTicks={xAxisTicks}

diff --git a/client/src/components/charts/SimpleBarChart.jsx b/client/src/components/charts/SimpleBarChart.jsx
@@ -10,13 +10,13 @@ import { Portal } from 'react-portal';
 import merge from 'lodash/merge';
 import { GridRows } from '@vx/grid';
 
-import { heuristicRound, replaceLabelIfValueEmpty, calculateMargins } from '../../utilities/chart';
+import { heuristicRound, replaceLabelIfValueEmpty, calculateMargins, getLabelFontSize } from '../../utilities/chart';
 import Legend from './Legend';
 import ResponsiveWrapper from '../common/ResponsiveWrapper';
 import ColorPicker from '../common/ColorPicker';
 import ChartLayout from './ChartLayout';
 import Tooltip from './Tooltip';
-import { labelFont, MAX_FONT_SIZE } from '../../constants/chart';
+import { labelFont, MAX_FONT_SIZE, MIN_FONT_SIZE } from '../../constants/chart';
 
 const getDatum = (data, datum) => data.filter(({ key }) => key === datum)[0];
 
@@ -88,7 +88,7 @@ export default class SimpleBarChart extends Component {
 
  static defaultProps = {
  interactive: true,
- marginLeft: 70,
+ marginLeft: 80,
  marginRight: 70,
  marginTop: 70,
  marginBottom: 60,
@@ -270,14 +270,8 @@ export default class SimpleBarChart extends Component {
  const dataType = series.metadata.type;
  const paddingBottom = getPaddingBottom(series.data, dataType);
  const dataCount = series.data.length;
- let yAxisLabelSize = 10;
- if ((yAxisLabel || '').length > 60) yAxisLabelSize = 7;
- if ((yAxisLabel || '').length > 100) yAxisLabelSize = 5;
- let xAxisLabelSize = 10;
- if ((xAxisLabel || '').length > 60) xAxisLabelSize = 7;
- if ((xAxisLabel || '').length > 100) xAxisLabelSize = 5;
- const yAxisLabelSizeMultiplier = height / 600;
- const xAxisLabelSizeMultiplier = width / 600;
+ const axisLabelFontSize =
+ getLabelFontSize(yAxisLabel, xAxisLabel, MAX_FONT_SIZE, MIN_FONT_SIZE, height, width);
 
  return (
  <ChartLayout
@@ -456,17 +450,18 @@ export default class SimpleBarChart extends Component {
  tickTextFill={'#1b1a1e'}
  numTicks={yAxisTicks}
  labelProps={{
- fontSize: Math.min(yAxisLabelSize * yAxisLabelSizeMultiplier, MAX_FONT_SIZE),
+ fontSize: axisLabelFontSize,
  textAnchor: 'middle',
  }}
+ labelOffset={44}
  tickFormat={tickFormat}
  />
 
  <Text
  transform={[
  { type: 'translate', value: [Math.floor(this.props.width / 2), this.props.height - 10] },
  ]}
- fontSize={Math.min(xAxisLabelSize * xAxisLabelSizeMultiplier, MAX_FONT_SIZE)}
+ fontSize={axisLabelFontSize}
  textAnchor="middle"
  fontFamily="Arial"
  >

diff --git a/client/src/components/charts/StackedBarChart.jsx b/client/src/components/charts/StackedBarChart.jsx
@@ -11,13 +11,13 @@ import merge from 'lodash/merge';
 import { stack } from 'd3-shape';
 import { GridRows } from '@vx/grid';
 
-import { heuristicRound, replaceLabelIfValueEmpty, calculateMargins } from '../../utilities/chart';
+import { heuristicRound, replaceLabelIfValueEmpty, calculateMargins, getLabelFontSize } from '../../utilities/chart';
 import Legend from './Legend';
 import ResponsiveWrapper from '../common/ResponsiveWrapper';
 import ColorPicker from '../common/ColorPicker';
 import ChartLayout from './ChartLayout';
 import Tooltip from './Tooltip';
-import { labelFont, MAX_FONT_SIZE } from '../../constants/chart';
+import { labelFont, MAX_FONT_SIZE, MIN_FONT_SIZE } from '../../constants/chart';
 
 export default class StackedBarChart extends Component {
 
@@ -227,10 +227,8 @@ export default class StackedBarChart extends Component {
  const stackNodes = series.stack;
  const dataCount = series.data.length;
  const seriesCount = this.props.data.series.length;
- let yAxisLabelSize = 10;
- if ((yAxisLabel || '').length > 60) yAxisLabelSize = 7;
- if ((yAxisLabel || '').length > 100) yAxisLabelSize = 5;
- const yAxisLabelSizeMultiplier = height / 600;
+ const axisLabelFontSize =
+ getLabelFontSize(yAxisLabel, '', MAX_FONT_SIZE, MIN_FONT_SIZE, height, width);
 
  return (
  <ChartLayout
@@ -468,7 +466,7 @@ export default class StackedBarChart extends Component {
  tickTextFill={'#1b1a1e'}
  numTicks={yAxisTicks}
  labelProps={{
- fontSize: Math.min(yAxisLabelSize * yAxisLabelSizeMultiplier, MAX_FONT_SIZE),
+ fontSize: axisLabelFontSize,
  textAnchor: 'middle',
  }}
  tickFormat={tickFormat}

diff --git a/client/src/components/visualisation/VisualisationPreview.jsx b/client/src/components/visualisation/VisualisationPreview.jsx
@@ -80,7 +80,7 @@ export default function CreateVisualisationPreview({
  metadata={metadata}
  datasets={datasets}
  context="editor"
- height={visualisation.visualisationType === 'map' ? null : 400}
+ height={visualisation.visualisationType === 'map' ? null : 500}
  width={visualisation.visualisationType === 'map' ? null : 800}
  onChangeVisualisationSpec={onChangeVisualisationSpec}
  /> : null

diff --git a/client/src/constants/chart.js b/client/src/constants/chart.js
@@ -12,8 +12,10 @@ export const connectionStyle = {
 };
 
 export const MAX_FONT_SIZE = 12;
+export const MIN_FONT_SIZE = 9;
 
 export default {
  labelFont,
  MAX_FONT_SIZE,
+ MIN_FONT_SIZE,
 };
diff --git a/client/src/utilities/chart.js b/client/src/utilities/chart.js
@@ -644,3 +644,25 @@ export function calculateMargins({ top, right, bottom, left }, { width, height }
  left: isRatio(left) ? left * width : left,
  };
 }
+
+export const getLabelFontSize = (xLabel = '', yLabel = '', maxFont, minFont, height, width) => {
+ const longest = Math.max(xLabel.length, yLabel.length);
+ const smallestDimension = Math.min(height, width);
+ const smallChartSize = smallestDimension < 400;
+ const mediumChartSize = smallestDimension > 400 && smallestDimension < 700;
+ const mediumFont = Math.floor(0.5 * (minFont + maxFont));
+
+ if (longest > 45 && smallChartSize) {
+ return minFont;
+ }
+
+ if (longest > 60 && mediumChartSize) {
+ return minFont;
+ }
+
+ if (longest > 45 && mediumChartSize) {
+ return mediumFont;
+ }
+
+ return maxFont;
+};