@pie-lib/charting 4.5.10 → 4.5.11-next.256

package/src/chart.jsx

@@ -48,7 +48,8 @@ export class Chart extends React.Component {
     onDataChange: PropTypes.func,
     addCategoryEnabled: PropTypes.bool,
     editCategoryEnabled: PropTypes.bool,
-    categoryDefaultLabel: PropTypes.string
+    categoryDefaultLabel: PropTypes.string,
+    theme: PropTypes.object
   };
 
   static defaultProps = {
@@ -138,13 +139,31 @@ export class Chart extends React.Component {
   };
 
   render() {
-    const { classes, className, domain, range, size, title, addCategoryEnabled } = this.props;
+    const {
+      classes,
+      className,
+      domain,
+      range,
+      size,
+      title,
+      addCategoryEnabled,
+      theme
+    } = this.props;
     let { chartType } = this.props;
     const { width, height } = size || {};
 
     const { ChartComponent } = this.getChart();
     const categories = this.getFilteredCategories();
-    const correctValues = getDomainAndRangeByChartType(domain, range, chartType);
+
+    const labelFontSize = (theme && theme.typography && theme.typography.fontSize) || 14;
+    const correctValues = getDomainAndRangeByChartType(
+      domain,
+      range,
+      size,
+      chartType,
+      labelFontSize
+    );
+
     const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(
       correctValues.range,
       chartType
@@ -234,9 +253,15 @@ const styles = theme => ({
     borderLeft: `solid 1px ${color.primaryDark()}`,
     borderRight: `solid 1px ${color.primaryDark()}`
   },
+  root: {
+    overflow: 'hidden'
+  },
+  svg: {
+    overflow: 'visible'
+  },
   toolMenu: {
     minHeight: '36px'
   }
 });
 
-export default withStyles(styles)(Chart);
+export default withStyles(styles, { withTheme: true })(Chart);

package/src/utils.js

@@ -50,7 +50,53 @@ export const getTickValues = (prop = {}) => {
   return tickValues;
 };
 
-export const getDomainAndRangeByChartType = (domain, range, chartType) => {
+export const customLabelStep = (rangeMax, size, labelFontSize) => {
+  const ceilMax = Math.ceil(rangeMax);
+  const segmentLength = size.height / ceilMax;
+  const ticksToFitInOneSegment = 2;
+
+  // how many ticksWidth fit in a segment
+  const tickWidthPerSegment = segmentLength / labelFontSize;
+  const rawLabelStep = ticksToFitInOneSegment / tickWidthPerSegment;
+  const roundedStep = Math.ceil((rawLabelStep * 10) / 10);
+
+  let labelStep;
+
+  if (rawLabelStep > 0.15) {
+    labelStep = roundedStep;
+  } else if (rawLabelStep < 0.05) {
+    labelStep = 0.1;
+  } else {
+    labelStep = 0.5;
+  }
+
+  return labelStep;
+};
+
+export const crowdedTicks = (rangeMax, customLabelStep, size, labelFontSize) => {
+  const ceilMax = Math.ceil(rangeMax);
+
+  const numberOfSegments = ceilMax * customLabelStep;
+
+  return size.height / numberOfSegments < labelFontSize && size.height / numberOfSegments > 0.5;
+};
+
+// multiply values with 10^number_of_decimals if needed because modulo function(%) is only defined for integers
+const modulo = (a, b) => {
+  if (Number.isInteger(b)) {
+    return a % b;
+  }
+
+  const decimals = b
+    .toString()
+    .split('.')
+    .pop().length;
+  const aux = Math.pow(10, decimals);
+
+  return (a * aux) % (b * aux);
+};
+
+export const getDomainAndRangeByChartType = (domain, range, size, chartType, labelFontSize) => {
   let { step, labelStep, min, max } = range || {};
 
   if (!min) {
@@ -61,22 +107,40 @@ export const getDomainAndRangeByChartType = (domain, range, chartType) => {
     max = range.min + 1;
   }
 
-  const numberMax = parseFloat(max);
+  if (labelStep && !step) {
+    step = labelStep;
+  }
+  if (!labelStep || (isNaN(labelStep) && step)) {
+    let customLabelStep = step;
+    let crowded = crowdedTicks(max, customLabelStep, size, labelFontSize);
+
+    if (crowded) {
+      customLabelStep = customLabelStep * 2;
+    }
+
+    labelStep = customLabelStep;
+  }
 
-  if (!step) {
-    if (numberMax < 20) {
+  if (!step || (isNaN(step) && !labelStep) || isNaN(labelStep)) {
+    labelStep = customLabelStep(max, size, labelFontSize);
+
+    if (labelStep <= 1) {
+      step = labelStep;
+    } else if (labelStep <= 4) {
       step = 1;
-    } else if (numberMax >= 20 && numberMax < 100) {
-      step = 5;
+    } else if (labelStep > 4 && labelStep < 10) {
+      step = labelStep / 2;
     } else {
-      step = 10;
+      step = labelStep / 3;
     }
   }
 
-  if (!labelStep) {
-    labelStep = numberMax;
+  if (modulo(max, step) !== 0) {
+    max = max + step;
   }
 
+  range.max = max;
+
   switch (chartType) {
     // if chart is dot plot or line plot, we should ignore step and make sure that min & max are integer values
     case 'dotPlot':