Add statistics subview

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);

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>
     );