From b95ef0298b669d651c6123f66cbac39e8d1aa7e4 Mon Sep 17 00:00:00 2001 From: Esko Ikkala <esko.ikkala@aalto.fi> Date: Wed, 27 Jun 2018 17:16:33 +0300 Subject: [PATCH] Combine small groups in pie chart --- src/client/components/Pie.js | 25 ++++++++- src/client/components/TestData.js | 92 +------------------------------ src/client/containers/MapApp.js | 2 +- 3 files changed, 26 insertions(+), 93 deletions(-) diff --git a/src/client/components/Pie.js b/src/client/components/Pie.js index 1c5db556..34206113 100644 --- a/src/client/components/Pie.js +++ b/src/client/components/Pie.js @@ -5,7 +5,7 @@ import _ from 'lodash'; import { withStyles } from '@material-ui/core/styles'; import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; -//import { dataArray, legendArray } from './TestData'; +// import { testDataArray } from './TestData'; const styles = theme => ({ @@ -33,6 +33,28 @@ const styles = theme => ({ } }); +const combineSmallGroups = (dataArray) => { + const totalLength = dataArray.length; + const threshold = 0.1; + let other = { x: 'Other', y: 0, values: [] }; + let newArray = []; + for (let item of dataArray) { + const portion = item.y / totalLength; + if (portion < threshold) { + other.y += item.y; + other.values.push(item.values); + } else { + newArray.push(item); + } + } + if (other.y > 0) { + newArray.push(other); + return newArray; + } else { + return dataArray; + } +}; + let Pie = (props) => { const { classes, data } = props; const grouped = _.groupBy(data,'typeLabel'); @@ -47,6 +69,7 @@ let Pie = (props) => { }); } dataArray = _.orderBy(dataArray, 'y', 'desc'); + dataArray = combineSmallGroups(dataArray); const legendArray = dataArray.map(group => ({ name: group.x + ' (' + group.y + ')' })); const legendHeigth = legendArray.length * 34; diff --git a/src/client/components/TestData.js b/src/client/components/TestData.js index 5314c83e..a40885f6 100644 --- a/src/client/components/TestData.js +++ b/src/client/components/TestData.js @@ -1,4 +1,4 @@ -export const dataArray = [ +export const testDataArray = [ { 'x': 'Mäki', 'y': 172, @@ -2313,93 +2313,3 @@ export const dataArray = [ ] } ]; - -export const legendArray = [ - { - 'name': 'Mäki (172)' - }, - { - 'name': 'Undefined (25)' - }, - { - 'name': 'Talo (18)' - }, - { - 'name': 'Tila (12)' - }, - { - 'name': 'Kallio (6)' - }, - { - 'name': 'M (5)' - }, - { - 'name': 'Mökki (3)' - }, - { - 'name': 'Metsä (2)' - }, - { - 'name': 'Rinne (2)' - }, - { - 'name': 'Vaara (2)' - }, - { - 'name': 'Mäkialue (2)' - }, - { - 'name': 'Kalliomaa (1)' - }, - { - 'name': 'Kahvilarakennus (1)' - }, - { - 'name': 'Leikkipaikka (1)' - }, - { - 'name': 'Ranta (1)' - }, - { - 'name': 'Töyränne (1)' - }, - { - 'name': 'Työmiesasunto (1)' - }, - { - 'name': 'Kangas (1)' - }, - { - 'name': 'Korkea maa (1)' - }, - { - 'name': 'Kumpu (1)' - }, - { - 'name': 'Vuori (1)' - }, - { - 'name': 'Hakamaa (1)' - }, - { - 'name': 'Avokallio (1)' - }, - { - 'name': 'Kylänosa (1)' - }, - { - 'name': 'Kennäs (1)' - }, - { - 'name': 'Mäet (1)' - }, - { - 'name': 'Itärinne (1)' - }, - { - 'name': 'Pelto (1)' - }, - { - 'name': 'Kalliomäki (1)' - } -]; diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js index 85af43c2..9b64b858 100644 --- a/src/client/containers/MapApp.js +++ b/src/client/containers/MapApp.js @@ -178,7 +178,7 @@ let MapApp = (props) => { } </Drawer> ); -//<VirtualizedTable list={resultList} /> + //<VirtualizedTable list={resultList} /> let before = null; let after = null; -- GitLab