diff --git a/src/client/components/Pie.js b/src/client/components/Pie.js index b171ce26a9754a2009063958d42ca490d6e6e4e3..da1579256d542ced0fea863b0cb11d276c7715c9 100644 --- a/src/client/components/Pie.js +++ b/src/client/components/Pie.js @@ -17,7 +17,6 @@ const styles = theme => ({ height: '100%', display: 'flex', flexGrow: 1, - }, container: { marginLeft: 'auto', @@ -62,89 +61,95 @@ const combineSmallGroups = (dataArray) => { } }; -let Pie = (props) => { - const { classes, data, query, groupBy } = props; - const resultCount = data.length; - if (resultCount < 1) { - return ''; +class Pie extends React.Component { + + componentDidMount = () => { + this.props.fetchPlaces('creationPlaces'); } - // const grouped = _.groupBy(data, groupBy); - // let dataArray = []; - // for (let key in grouped) { - // const length = grouped[key].length; - // dataArray.push({ - // x: key, - // y: length, - // values: grouped[key] - // }); - // } - let placeLinks = 0; - let dataArray = data.map(item => { - const msCount = parseInt(item.manuscriptCount); - placeLinks += msCount; - return { - x: item.prefLabel, - y: msCount, - }; - }); - dataArray = _.orderBy(dataArray, 'y', 'desc'); - dataArray = combineSmallGroups(dataArray, placeLinks); - const legendArray = dataArray.map(group => ({ name: group.x + ' (' + group.y + ')' })); - const legendHeigth = legendArray.length * 33; + render() { + const { classes, data } = this.props; + const resultCount = data.length; + if (resultCount < 1) { + return ''; + } + // const grouped = _.groupBy(data, groupBy); + // let dataArray = []; + // for (let key in grouped) { + // const length = grouped[key].length; + // dataArray.push({ + // x: key, + // y: length, + // values: grouped[key] + // }); + // } + let placeLinks = 0; + let dataArray = data.map(item => { + const msCount = parseInt(item.manuscriptCount); + placeLinks += msCount; + return { + x: item.prefLabel, + y: msCount, + }; + }); + dataArray = _.orderBy(dataArray, 'y', 'desc'); + dataArray = combineSmallGroups(dataArray, placeLinks); + + const legendArray = dataArray.map(group => ({ name: group.x + ' (' + group.y + ')' })); + const legendHeigth = legendArray.length * 33; - const pieTitle = placeLinks + ' creation place links in total'; + const pieTitle = placeLinks + ' creation place links in total'; - return ( - <div className={classes.root}> - <Grid container className={classes.container}> - <Grid className={classes.pie} item xs={12} sm={6}> - <VictoryLabel - style={{ - fontSize: '14px', - fontFamily: 'Roboto, Helvetica, Arial, sans-serif', - }} - text={pieTitle} - /> - <VictoryPie - padding={{ - left: 0, bottom: 0, top: 32 - }} - colorScale={'qualitative'} - data={dataArray} - labelComponent={<PieTooltip resultCount={placeLinks} />} - /> - </Grid> - <Grid className={classes.legend} item xs={12} sm={6}> - <Paper className={classes.legendPaper}> - <VictoryLegend - height={legendHeigth} - title={'Creation place (manuscript count)'} - colorScale={'qualitative'} - data={legendArray} + return ( + <div className={classes.root}> + <Grid container className={classes.container}> + <Grid className={classes.pie} item xs={12} sm={6}> + <VictoryLabel style={{ - labels: { fontFamily: 'Roboto, Helvetica, Arial, sans-serif' }, - title: { fontFamily: 'Roboto, Helvetica, Arial, sans-serif' }, + fontSize: '14px', + fontFamily: 'Roboto, Helvetica, Arial, sans-serif', }} - containerComponent={ - <VictoryContainer - responsive={false} - width={250} - /> - } + text={pieTitle} /> - </Paper> + <VictoryPie + padding={{ + left: 0, bottom: 0, top: 32 + }} + colorScale={'qualitative'} + data={dataArray} + labelComponent={<PieTooltip resultCount={placeLinks} />} + /> + </Grid> + <Grid className={classes.legend} item xs={12} sm={6}> + <Paper className={classes.legendPaper}> + <VictoryLegend + height={legendHeigth} + title={'Creation place (manuscript count)'} + colorScale={'qualitative'} + data={legendArray} + style={{ + labels: { fontFamily: 'Roboto, Helvetica, Arial, sans-serif' }, + title: { fontFamily: 'Roboto, Helvetica, Arial, sans-serif' }, + }} + containerComponent={ + <VictoryContainer + responsive={false} + width={250} + /> + } + /> + </Paper> + </Grid> </Grid> - </Grid> - </div> - ); -}; + </div> + ); + } +} Pie.propTypes = { classes: PropTypes.object.isRequired, data: PropTypes.array.isRequired, - groupBy: PropTypes.string.isRequired, - query: PropTypes.string.isRequired, + fetchPlaces: PropTypes.func.isRequired }; export default withStyles(styles)(Pie); diff --git a/src/client/components/ViewTabs.js b/src/client/components/ViewTabs.js index a502792410868eb516bf3ea564427cc67e9cb9b4..291f384da065d9b5f762e5e36751674987c08a99 100644 --- a/src/client/components/ViewTabs.js +++ b/src/client/components/ViewTabs.js @@ -44,7 +44,7 @@ class ViewTabs extends React.Component { <Tab icon={<CalendarViewDayIcon />} label="table" component={Link} to="/manuscripts/table" /> <Tab icon={<AddLocationIcon />} label="creation places" component={Link} to="/manuscripts/creation_places" /> <Tab icon={<RedoIcon />} label="migrations" component={Link} to="/manuscripts/migrations" /> - <Tab icon={<PieChartIcon />} label="statistics" /> + <Tab icon={<PieChartIcon />} label="statistics" component={Link} to="/manuscripts/statistics"/> </Tabs> </Paper> );