diff --git a/src/client/components/Pie.js b/src/client/components/Pie.js index 342061132366e7d12f949e970bde2bfa2846033b..d58d6a29612e96c40df9fe7b8e61ec13cfb7ee56 100644 --- a/src/client/components/Pie.js +++ b/src/client/components/Pie.js @@ -1,10 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { VictoryPie, VictoryLegend, VictoryContainer } from 'victory'; +import { + VictoryPie, + VictoryLegend, + VictoryContainer, + VictoryLabel, +} from 'victory'; +import PieTooltip from './PieTooltip'; 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 Typography from '@material-ui/core/Typography' // import { testDataArray } from './TestData'; @@ -28,7 +35,7 @@ const styles = theme => ({ paddingRight: theme.spacing.unit * 4, }, legendPaper: { - height: 300, + height: 275, overflowY: 'auto', } }); @@ -56,7 +63,8 @@ const combineSmallGroups = (dataArray) => { }; let Pie = (props) => { - const { classes, data } = props; + const { classes, data, query } = props; + const resultCount = data.length; const grouped = _.groupBy(data,'typeLabel'); let dataArray = []; for (let key in grouped) { @@ -72,21 +80,29 @@ let Pie = (props) => { dataArray = combineSmallGroups(dataArray); const legendArray = dataArray.map(group => ({ name: group.x + ' (' + group.y + ')' })); const legendHeigth = legendArray.length * 34; + const pieTitle = resultCount + ' results for the query "' + query + '"'; + // + // labels={p => `${p.x} (${p.y})\n\n${p.x/resultCount}` } return ( <div className={classes.root}> <Grid container className={classes.container}> + <Grid className={classes.pie} item xs={12} sm={6}> + <VictoryLabel + style={{ + fontSize: '0.875rem', + fontFamily: 'Roboto, Helvetica, Arial, sans-serif', + }} + text={pieTitle} + /> <VictoryPie padding={{ - left: 0, bottom: 0, top: 0 + left: 0, bottom: 0, top: 16 }} colorScale={'qualitative'} data={dataArray} - labels={() => null} - animate={{ - duration: 4000 - }} + labelComponent={<PieTooltip resultCount={resultCount} />} /> </Grid> <Grid className={classes.legend} item xs={12} sm={6}> @@ -116,7 +132,8 @@ let Pie = (props) => { Pie.propTypes = { classes: PropTypes.object.isRequired, - data: PropTypes.array.isRequired + data: PropTypes.array.isRequired, + query: PropTypes.string.isRequired, }; export default withStyles(styles)(Pie); diff --git a/src/client/components/PieTooltip.js b/src/client/components/PieTooltip.js new file mode 100644 index 0000000000000000000000000000000000000000..7b30840381b1988b319cad761559e8cbb8e543a5 --- /dev/null +++ b/src/client/components/PieTooltip.js @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + VictoryTooltip, +} from 'victory'; + +class PieTooltip extends React.Component { + static defaultEvents = VictoryTooltip.defaultEvents + + render() { + const { datum, resultCount } = this.props; + return ( + <VictoryTooltip + {...this.props} + text={`${datum.x}\n${datum.y}\n${Math.round((datum.y / resultCount) * 100)}%`} + /> + ); + } +} + +PieTooltip.propTypes = { + datum: PropTypes.object, + resultCount: PropTypes.number.isRequired, +}; + +export default PieTooltip; diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js index 134b355c95bb979099f0df0191abe4b227ec6a96..81d15c9cada7444d8c36ca1d69674bc86fcc8985 100644 --- a/src/client/containers/MapApp.js +++ b/src/client/containers/MapApp.js @@ -139,7 +139,7 @@ let MapApp = (props) => { resultsView = <VirtualizedTable list={Immutable.List(props.search.results)} />; break; case 'stats': - resultsView = <Pie data={props.search.results} />; + resultsView = <Pie data={props.search.results} query={props.search.query} />; break; default: resultsView = <VirtualizedTable list={Immutable.List(props.search.results)} />;