Feature/add configurable graph domain

__tests__/dataobjects.test.js

@@ -44,5 +44,4 @@ describe('Test IndicatorHelper static methods', () => {
 
         defaultValues.chartConfiguration = original;
     })
-
 })

__tests__/profile/subindicator.test.js

@@ -0,0 +1,81 @@
+import {SubindicatorFilter} from "../../src/js/profile/subindicator_filter";
+
+const indicators = {
+    'Age by race': {
+        'groups': {
+            'gender': {
+                'Female': {'subindicator1': {'count': 10}, 'subindicator2': {'count': 20}},
+                'Male': {'subindicator1': {'count': 30}, 'subindicator2': {'count': 40}},
+            },
+            'race': {
+                'Race1': {'subindicator1': {'count': 50}, 'subindicator2': {'count': 60}},
+                'Race2': {'subindicator1': {'count': 70}, 'subindicator2': {'count': 80}},
+            },
+        },
+        'subindicators': [
+            {label: 'subindicator1', "count": 90},
+            {label: 'subindicator2', "count": 100},
+        ]
+    },
+    'Another indicator': {}
+} 
+
+function testChartData(chartData, expectedData) {
+    expect(chartData[0].value).toBe(expectedData[0].value);
+    expect(chartData[0].label).toBe(expectedData[0].label);
+    expect(chartData[1].value).toBe(expectedData[1].value);
+    expect(chartData[1].label).toBe(expectedData[1].label);
+}
+
+describe('Testing Subindicator Filter', () => {
+    const si = new SubindicatorFilter();
+    const title = 'Age by race';
+    si.indicators = indicators; 
+
+    test.each([
+        [{group: 'race', subindicator: 'Race2'}, indicators[title].groups.race.Race2],
+        [{group: 'gender', subindicator: 'Female'}, indicators[title].groups.gender.Female],
+    ])('Extract groups correctly', (value, expected) => {
+        const chartData = si.getFilteredGroups(indicators[title].groups, value.group, value.subindicator)
+        testChartData(chartData, [
+            {label: 'subindicator1', value: expected.subindicator1.count},
+            {label: 'subindicator2', value: expected.subindicator2.count},
+        ])
+
+        expect(chartData[0].value).toBe(expected.subindicator1.count);
+        expect(chartData[1].value).toBe(expected.subindicator2.count);
+    })
+
+    test('Handles missing group correctly', () => {
+        const chartData = si.getFilteredGroups(indicators[title].groups, 'Missing group', 'XXXXXX')
+        expect(chartData.length).toBe(0)
+    })
+
+    test('Handles missing subindicator correctly', () => {
+        const chartData = si.getFilteredGroups(indicators[title].groups, 'Gender', 'Missing subindicator')
+        expect(chartData.length).toBe(0)
+    })
+
+    test('Extracts subindicators correctly', () => {
+        const subindicators = si.getFilteredSubindicators(indicators[title].subindicators)
+        testChartData(subindicators, [
+            {label: 'subindicator1', value: 90},
+            {label: 'subindicator2', value: 100}
+        ])
+    })
+
+    test('Filters correctly', () => {
+        let chartData = si.getFilteredData('All values', '', title)
+        testChartData(chartData, [
+            {label: 'subindicator1', value: 90},
+            {label: 'subindicator2', value: 100}
+        ])
+
+        chartData = si.getFilteredData('Female', 'gender', title)
+        testChartData(chartData, [
+            {label: 'subindicator1', value: 10},
+            {label: 'subindicator2', value: 20}
+        ])
+
+    })
+})

src/js/dataobjects.js

@@ -22,6 +22,7 @@ export class Geography {
 }
 
 export class IndicatorHelper {
+
     static getMetadata(indicator) {
         return indicator.metadata || {
             source: '',

src/js/defaultValues.js

@@ -1,5 +1,11 @@
-let chartConfiguration = [{"label": "Value", "formatting": "~s"}];
-
+const DEFAULT_CONFIG = 'default'
+let chartConfiguration = {
+    types: {
+        Value: {formatting: '~s', minX: DEFAULT_CONFIG, maxX: DEFAULT_CONFIG},
+        Percentage: {formatting: '.0%', minX: DEFAULT_CONFIG, maxX: DEFAULT_CONFIG}
+    }
+};
 export const defaultValues = {
-    chartConfiguration
+    chartConfiguration,
+    DEFAULT_CONFIG
 }

src/js/profile/chart.js

@@ -1,41 +1,40 @@
-import {numFmtAlt, Observable, formatNumericalValue} from "../utils";
-import {format as d3format} from "d3-format/src/defaultLocale";
-import {horizontalBarChart} from "../reusable-charts/horizontal-bar-chart";
-import {select as d3select} from "d3-selection";
-import {SubindicatorFilter} from "./subindicator_filter";
+import {format as d3format} from 'd3-format/src/defaultLocale';
+import {select as d3select} from 'd3-selection';
 
-const graphValueTypes = ['Percentage', 'Value'];
+import {Observable} from '../utils';
+import {defaultValues} from '../defaultValues';
+
+import {horizontalBarChart} from '../reusable-charts/horizontal-bar-chart';
+import {SubindicatorFilter} from './subindicator_filter';
+
+const PERCENTAGE_TYPE = 'Percentage';
+const VALUE_TYPE = 'Value'
+const graphValueTypes = [PERCENTAGE_TYPE, VALUE_TYPE];
 const chartContainerClass = '.indicator__chart';
 const tooltipClass = '.bar-chart__row_tooltip';
 
 let tooltipClone = null;
 
 export class Chart extends Observable {
-    constructor(formattingConfig, subindicators, groups, detail, graphValueType, _subCategoryNode, title) {
-        //we need the detail parameter to be able to filter
+    constructor(config, subindicators, groups, indicators, graphValueType, _subCategoryNode, title) {
         //we need the subindicators and groups too even though we have detail parameter. they are used for the default chart data
         super();
 
         this.subindicators = subindicators;
         this.graphValueType = graphValueType;
         this.title = title;
-        this.formattingConfig = formattingConfig;
-        this.chartConfiguration = this.getChartConfiguration(detail, title);
+        this.config = config;
 
         tooltipClone = $(tooltipClass)[0].cloneNode(true);
         this.subCategoryNode = _subCategoryNode;
 
         const chartContainer = $(chartContainerClass, this.subCategoryNode);
         this.container = chartContainer[0];
 
-        this.handleChartFilter(detail, groups, title);
+        this.handleChartFilter(indicators, groups, title);
         this.addChart();
     }
 
-    getChartConfiguration = (detail, title) => {
-        return detail.indicators[title].chartConfiguration;
-    }
-
     addChart = () => {
         $('.bar-chart', this.container).remove();
         $('svg', this.container).remove();
@@ -77,27 +76,33 @@ export class Chart extends Observable {
             })
             .xLabel("")
 
-        if (this.graphValueType === graphValueTypes[0]) {
-            chart.xAxisFormatter((d) => {
-                return d + '%';
-            })
-        } else {
-            chart.xAxisFormatter((d) => {
-                return d3format(this.chartConfiguration[0].formatting)(d);
-            })
-        }
+        this.chartConfig = this.config.chart.types[this.graphValueType]
+        this.setChartDomain(chart, this.config.chart, this.graphValueType)
+
+        chart.xAxisFormatter(d => {
+            return d3format(this.chartConfig.formatting)(d)
+        })
+    }
+
+    setChartDomain(chart, config, chartType) {
+        const chartConfig = config.types[chartType]
+        if (chartConfig.minX != defaultValues.DEFAULT_CONFIG)
+            chart.minX(chartConfig.minX)
+        if (chartConfig.maxX != defaultValues.DEFAULT_CONFIG)
+            chart.maxX(chartConfig.maxX)
     }
 
     getValuesFromSubindicators = () => {
         let arr = [];
+        const chartConfig = this.config.chart.types[this.graphValueType]
+
         for (const [label, subindicator] of Object.entries(this.subindicators)) {
             let count = subindicator.count;
-            let val = this.graphValueType === graphValueTypes[0] ? this.getPercentageValue(count, this.subindicators) : count;
+            let val = this.graphValueType === PERCENTAGE_TYPE ? this.getPercentageValue(count, this.subindicators) : count;
             arr.push({
                 label: subindicator.keys,
                 value: val,
-                valueText: this.graphValueType === graphValueTypes[0] ?
-                    formatNumericalValue(val / 100, this.formattingConfig, 'percentage') : d3format(this.chartConfiguration[0].formatting)(val)
+                valueText: d3format(chartConfig.formatting)(val)
             })
         }
 
@@ -108,7 +113,6 @@ export class Chart extends Observable {
         const self = this;
         const containerParent = $(this.container).closest('.profile-indicator');
 
-        //save as image button
         const saveImgButton = $(containerParent).find('.hover-menu__content a.hover-menu__content_item:nth-child(1)');
 
         $(saveImgButton).off('click');
@@ -117,7 +121,6 @@ export class Chart extends Observable {
             this.triggerEvent('profile.chart.saveAsPng', this);
         })
 
-        //show as percentage / value
         //todo:don't use index, specific class names should be used here when the classes are ready
         $(containerParent).find('.hover-menu__content_list a').each(function (index) {
             $(this).off('click');
@@ -165,19 +168,19 @@ export class Chart extends Observable {
             total += value.count;
         }
 
-        percentage = currentValue / total * 100;
+        percentage = currentValue / total;
 
         return percentage;
     }
 
-    handleChartFilter = (detail, groups, title) => {
+    handleChartFilter = (indicators, groups, title) => {
         let siFilter = new SubindicatorFilter();
         this.bubbleEvent(siFilter, 'point_tray.subindicator_filter.filter')
 
         let dropdowns = $(this.subCategoryNode).find('.filter__dropdown_wrap');
         const filterArea = $(this.subCategoryNode).find('.profile-indicator__filters');
 
-        siFilter.handleFilter(detail.indicators, filterArea, groups, title, this, dropdowns);
+        siFilter.handleFilter(indicators, filterArea, groups, title, this, dropdowns);
     }
 
     applyFilter = (chartData) => {

src/js/profile/indicator.js

@@ -38,7 +38,15 @@ export class Indicator extends Observable {
             }
         }
 
-        let c = new Chart(this.formattingConfig, this.subindicators, this.groups, detail, 'Percentage', indicator, title);
+
+        const configuration = detail.indicators[title].chartConfiguration;
+        const config = {
+            chart: detail.indicators[title].chartConfiguration,
+            formatting: this.formattingConfig
+        }
+        const indicators = detail.indicators;
+
+        let c = new Chart(config, this.subindicators, this.groups, indicators, 'Percentage', indicator, title);
         this.bubbleEvents(c, [
             'profile.chart.saveAsPng', 'profile.chart.valueTypeChanged',
             'profile.chart.download_csv', 'profile.chart.download_excel', 'profile.chart.download_json', 'profile.chart.download_kml',

src/js/profile/subindicator_filter.js

@@ -135,6 +135,25 @@ export class SubindicatorFilter extends Observable {
         this.populateDropdown(subindicatorDd, subindicators, callback);
     }
 
+    getFilteredGroups(groups, selectedGroup, selectedFilter) {
+        const group = groups[selectedGroup]
+        if (group == undefined)
+            return []
+
+        const groupValue = Object.entries(group).find(g => g[0] == selectedFilter)
+        if (groupValue == undefined)
+            return []
+
+        const subindicators = Object.entries(groupValue[1])
+        return subindicators.map(cd => new SubIndicator(cd))
+    }
+
+    getFilteredSubindicators(subindicators) {
+        return subindicators.map(el => {
+            return new SubIndicator([el.label, el])
+        })
+    }
+
     getFilteredData = (selectedFilter, selectedGroup, title) => {
         this.triggerEvent('point_tray.subindicator_filter.filter', {
             indicator: title,
@@ -143,27 +162,18 @@ export class SubindicatorFilter extends Observable {
         });
 
         let chartData = [];
+        const indicatorEntries = Object.entries(this.indicators)
+        const indicator = indicatorEntries.find(el => el[0] == title)
 
-        if (selectedFilter !== allValues) {
-            for (const [indicatorTitle, subindicator] of Object.entries(this.indicators)) {
-                //filter indicatorTitle
-                if (indicatorTitle === title) {
-                    for (const [key, value] of Object.entries(subindicator.groups[selectedGroup])) {
-                        if (key === selectedFilter) {
-                            Object.entries(value).forEach((cd) => {
-                                chartData.push(new SubIndicator(cd))
-                            })
-                        }
-                    }
-                }
-            }
-        } else {
-            for (const [indicatorTitle, subindicator] of Object.entries(this.indicators)) {
-                if (indicatorTitle === title) {
-                    chartData = subindicator.subindicators;
-                }
-            }
-        }
+        if (indicator == undefined)
+            return chartData
+
+        const subindicatorData = indicator[1]
+
+        if (selectedFilter !== allValues)
+            return this.getFilteredGroups(subindicatorData.groups, selectedGroup, selectedFilter)
+        else 
+            return this.getFilteredSubindicators(subindicatorData.subindicators)
 
         return chartData;
     }