Commit 2782c76d authored by Martin Wortschack's avatar Martin Wortschack Committed by Kushal Pandya

Add yAxis formatter to column chart

- This display axis labels as 0.5 instead of 500m
parent 0b03342f
...@@ -58,7 +58,7 @@ export default { ...@@ -58,7 +58,7 @@ export default {
...mapGetters('charts', [ ...mapGetters('charts', [
'chartLoading', 'chartLoading',
'getChartData', 'getChartData',
'getColumnChartOption', 'getColumnChartDatazoomOption',
'getMetricDropdownLabel', 'getMetricDropdownLabel',
'isSelectedMetric', 'isSelectedMetric',
]), ]),
...@@ -95,6 +95,16 @@ export default { ...@@ -95,6 +95,16 @@ export default {
getMetricTypes(chartKey) { getMetricTypes(chartKey) {
return metricTypes.filter(m => m.chart === chartKey); return metricTypes.filter(m => m.chart === chartKey);
}, },
getColumnChartOption(chartKey) {
return {
yAxis: {
axisLabel: {
formatter: value => value,
},
},
...this.getColumnChartDatazoomOption(chartKey),
};
},
}, },
}; };
</script> </script>
......
...@@ -78,8 +78,9 @@ export const getFilterParams = (state, getters, rootState, rootGetters) => chart ...@@ -78,8 +78,9 @@ export const getFilterParams = (state, getters, rootState, rootGetters) => chart
* *
* If the number of data items being displayed is below the MAX_ITEMS_PER_PAGE threshold, * If the number of data items being displayed is below the MAX_ITEMS_PER_PAGE threshold,
* it will return an empty dataZoom property. * it will return an empty dataZoom property.
*
*/ */
export const getColumnChartOption = state => chartKey => { export const getColumnChartDatazoomOption = state => chartKey => {
const { data } = state.charts[chartKey]; const { data } = state.charts[chartKey];
const totalItems = Object.keys(data).length; const totalItems = Object.keys(data).length;
const MAX_ITEMS_PER_PAGE = maxColumnChartItemsPerPage[chartKey] const MAX_ITEMS_PER_PAGE = maxColumnChartItemsPerPage[chartKey]
......
...@@ -142,7 +142,7 @@ describe('Productivity analytics chart getters', () => { ...@@ -142,7 +142,7 @@ describe('Productivity analytics chart getters', () => {
}); });
}); });
describe('getColumnChartOption', () => { describe('getColumnChartDatazoomOption', () => {
const chartKey = chartKeys.main; const chartKey = chartKeys.main;
describe(`data exceeds threshold of ${maxColumnChartItemsPerPage[chartKey]} items`, () => { describe(`data exceeds threshold of ${maxColumnChartItemsPerPage[chartKey]} items`, () => {
...@@ -167,7 +167,7 @@ describe('Productivity analytics chart getters', () => { ...@@ -167,7 +167,7 @@ describe('Productivity analytics chart getters', () => {
], ],
}; };
expect(getters.getColumnChartOption(state)(chartKeys.main)).toEqual(expected); expect(getters.getColumnChartDatazoomOption(state)(chartKeys.main)).toEqual(expected);
}); });
}); });
...@@ -175,7 +175,7 @@ describe('Productivity analytics chart getters', () => { ...@@ -175,7 +175,7 @@ describe('Productivity analytics chart getters', () => {
it('returns an empty dataZoom property', () => { it('returns an empty dataZoom property', () => {
state.charts[chartKey].data = { '1': 1, '2': 2, '3': 3 }; state.charts[chartKey].data = { '1': 1, '2': 2, '3': 3 };
expect(getters.getColumnChartOption(state)(chartKeys.main)).toEqual({}); expect(getters.getColumnChartDatazoomOption(state)(chartKeys.main)).toEqual({});
}); });
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment