Applying number formatting to the choropleth popup

OpenUpSA · Dec 8, 2020 · cdf57bb · cdf57bb
1 parent df21613
commit cdf57bb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/js/controller.js b/src/js/controller.js
@@ -107,7 +107,8 @@ export default class Controller extends Observable {
             selectedSubindicator: payload.obj.keys,
             choropleth_method: payload.obj.choropleth_method,
             subindicatorArr: payload.subindicators,
-            parents: payload.parents
+            parents: payload.parents,
+            chartConfiguration: payload.indicators[payload.indicatorTitle].chartConfiguration
         }
         this.state.subindicator = subindicator;
         this.state.selectedSubindicator = payload.obj._keys;

diff --git a/src/js/map/popup.js b/src/js/map/popup.js
@@ -1,5 +1,8 @@
 import {Observable, setPopupStyle, formatNumericalValue} from '../utils';
+import {format as d3format} from "d3-format/src/defaultLocale";
 
+const PERCENTAGE_TYPE = 'Percentage';
+const VALUE_TYPE = 'Value'
 
 /**
  * this class creates & manipulates the popup over the map
@@ -79,8 +82,12 @@ export class Popup extends Observable {
             for (const [geographyCode, count] of Object.entries(state.subindicator.children)) {
                 if (geographyCode == areaCode) {
                     isChild = true;
-                    const countFmt = formatNumericalValue(count, formattingConfig, 'absolute_value');
-                    const perc = formatNumericalValue(payload.layer.feature.properties.percentage, formattingConfig, 'percentage');
+                    let chartConfig = state.subindicator.chartConfiguration;
+                    let percentageFormatting = chartConfig.types[PERCENTAGE_TYPE].formatting;
+                    let absoluteFormatting = chartConfig.types[VALUE_TYPE].formatting;
+
+                    const countFmt = d3format(absoluteFormatting)(count);
+                    const perc = d3format(percentageFormatting)(payload.layer.feature.properties.percentage);
 
                     $('.map-tooltip__value', item).removeClass('hidden');
                     $('.map-tooltip__value .tooltip__value_label div', item).text(`${state.subindicator.indicatorTitle} (${state.selectedSubindicator})`);

diff --git a/src/js/profile/chart.js b/src/js/profile/chart.js
@@ -78,8 +78,8 @@ export class Chart extends Observable {
             })
             .xLabel("")
             .barTextPadding({
-                top:15,
-                left:5
+                top: 15,
+                left: 5
             })
 
         this.chartConfig = this.config.types[this.graphValueType]
@@ -100,7 +100,7 @@ export class Chart extends Observable {
 
     getValuesFromSubindicators = () => {
         let arr = [];
-        const chartConfig = this.config.types[this.graphValueType]
+        const chartConfig = this.config.types[this.graphValueType];
 
         for (const [label, subindicator] of Object.entries(this.subindicators)) {
             let count = subindicator.count;