Added configurable ticks for barcharts

Addresses this story - https://trello.com/c/1kqbxK8H/570-add-configuration-to-charts-to-control-the-number-of-ticks-in-a-graph
OpenUpSA · Feb 23, 2021 · 7297699 · 7297699
1 parent 04a1f4a
commit 7297699
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/src/js/defaultValues.js b/src/js/defaultValues.js
@@ -5,7 +5,8 @@ let chartConfiguration = {
         Percentage: {formatting: '.0%', minX: DEFAULT_CONFIG, maxX: DEFAULT_CONFIG}
     },
     disableToggle: false,
-    defaultType: 'Percentage' // [Value|Percentage]
+    defaultType: 'Percentage', // [Value|Percentage]
+    xTicks: null
 };
 export const defaultValues = {
     chartConfiguration,

diff --git a/src/js/profile/chart.js b/src/js/profile/chart.js
@@ -68,6 +68,7 @@ export class Chart extends Observable {
             .xAxisPadding(10) //padding of the xAxis values(numbers)
             .yAxisPadding(10)
             .xLabelPadding(30)    //padding of the label
+            .xTicks(this.config.xTicks)
             .barHeight(24)
             .barPadding(6)
             .margin({

diff --git a/src/js/reusable-charts/horizontal-bar-chart.js b/src/js/reusable-charts/horizontal-bar-chart.js
@@ -29,6 +29,7 @@ export function horizontalBarChart() {
         reverse: false,
         minX: 0,
         maxX: null,
+        xTicks: null,
         barTextPadding: {
             top: 15,
             left: 10
@@ -45,6 +46,7 @@ export function horizontalBarChart() {
                 d = d.substring(0, barLabelLength) + '...'
             return d;
         }
+
     };
 
     let data = initialConfiguration.data;
@@ -65,6 +67,7 @@ export function horizontalBarChart() {
     let reverse = initialConfiguration.reverse;
     let minX = initialConfiguration.minX;
     let maxX = initialConfiguration.maxX;
+    let xTicks = initialConfiguration.xTicks;
     let barTextPadding = initialConfiguration.barTextPadding;
 
     function chart(selection) {
@@ -97,11 +100,15 @@ export function horizontalBarChart() {
                 .tickSize(0)
                 .tickPadding(yAxisPadding)
                 .tickFormat(yAxisFormatter);
+
             const xAxis = axisBottom(x)
                 .tickSize(0)
                 .tickPadding(xAxisPadding)
                 .tickFormat(xAxisFormatter);
 
+            if (xTicks)
+                xAxis.ticks(xTicks)
+
             /**
              * append y axis
              */
@@ -388,6 +395,13 @@ export function horizontalBarChart() {
         return chart;
     };
 
+
+    chart.xTicks = function (value) {
+        if (!arguments.length) return xTicks;
+        xTicks = value;
+        return chart;
+    }
+
     chart.barHeight = function (value) {
         if (!arguments.length) return barHeight;
         barHeight = value;