introduced xAxisLabelFormatter

README.md

@@ -1,3 +1,15 @@
+# What's in this fork?
+
+Frappe Charts doesn't give you a way to format x-axis labels. This is necessary especially when you have a lot of data points in a series and the Frappe Charts ends up truncating x-axis labels (by default). You end-up with a mess in the x-axis consisting of tons of ellipsis - essentially making the x-axes useless. This fork introduces the following config parameter:
+
+```javascript
+{
+  xAxisLabelFormatter: function(xAxisWidth, xAxisOriginaLabels, xIsSeries) {
+    // create a COPY of xAxisOriginalLabels, transform individual labels, and return a new array of labels
+  }
+}
+```
+
 <div align="center">
     <img src="https://github.com/frappe/design/blob/master/logos/logo-2019/frappe-charts-logo.png" height="128">
     <a href="https://frappe.github.io/charts">

dist/frappe-charts.esm.js

@@ -306,10 +306,6 @@ class SvgTip {
 	}
 }
 
-/**
- * Returns the value of a number upto 2 decimal places.
- * @param {Number} d Any number
- */
 function floatTwo(d) {
 	return parseFloat(d.toFixed(2));
 }
@@ -3317,6 +3313,7 @@ class AxisChart extends BaseChart {
 		this.config.yAxisMode = options.axisOptions.yAxisMode || 'span';
 		this.config.xIsSeries = options.axisOptions.xIsSeries || 0;
 		this.config.shortenYAxisNumbers = options.axisOptions.shortenYAxisNumbers || 0;
+		this.config.xAxisLabelFormatter = options.xAxisLabelFormatter || getShortenedLabels;
 
 		this.config.formatTooltipX = options.tooltipOptions.formatTooltipX;
 		this.config.formatTooltipY = options.tooltipOptions.formatTooltipY;
@@ -3488,9 +3485,7 @@ class AxisChart extends BaseChart {
 				},
 				function() {
 					let s = this.state;
-					s.xAxis.calcLabels = getShortenedLabels(this.width,
-						s.xAxis.labels, this.config.xIsSeries);
-
+					s.xAxis.calcLabels = this.config.xAxisLabelFormatter(this.width, s.xAxis.labels, this.config.xIsSeries);
 					return s.xAxis;
 				}.bind(this)
 			],
@@ -4020,7 +4015,6 @@ class DonutChart extends AggregationChart {
 	}
 }
 
-// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	bar: AxisChart,
 	line: AxisChart,

src/js/charts/AxisChart.js

@@ -39,6 +39,7 @@ export default class AxisChart extends BaseChart {
 		this.config.yAxisMode = options.axisOptions.yAxisMode || 'span';
 		this.config.xIsSeries = options.axisOptions.xIsSeries || 0;
 		this.config.shortenYAxisNumbers = options.axisOptions.shortenYAxisNumbers || 0;
+		this.config.xAxisLabelFormatter = options.xAxisLabelFormatter || getShortenedLabels;
 
 		this.config.formatTooltipX = options.tooltipOptions.formatTooltipX;
 		this.config.formatTooltipY = options.tooltipOptions.formatTooltipY;
@@ -210,9 +211,7 @@ export default class AxisChart extends BaseChart {
 				},
 				function() {
 					let s = this.state;
-					s.xAxis.calcLabels = getShortenedLabels(this.width,
-						s.xAxis.labels, this.config.xIsSeries);
-
+					s.xAxis.calcLabels = this.config.xAxisLabelFormatter(this.width, s.xAxis.labels, this.config.xIsSeries);
 					return s.xAxis;
 				}.bind(this)
 			],