Adjust pie chart

src/client/components/IntegrationAutosuggest.js

@@ -96,7 +96,7 @@ const IntegrationAutosuggest = (props) => {
 
   const searchPlaces = () => {
     if (props.search.query.length > 0) {
-      console.log('fetching results');
+      // console.log('fetching results');
       autosuggestDOM.current.input.blur();
       props.clearResults();
       props.fetchResults();
@@ -110,11 +110,11 @@ const IntegrationAutosuggest = (props) => {
 
   const handleOnSuggestionsFetchRequested = ({ value }) => {
     if (props.search.suggestionsQuery != value || props.search.suggestions.length === 0) {
-      console.log('fetching suggestions');
+      // console.log('fetching suggestions');
       props.fetchSuggestions();
     }
     else {
-      console.log('using old suggestions');
+      // console.log('using old suggestions');
     }
   };
 

src/client/components/Pie.js

@@ -11,9 +11,6 @@ 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';
-
 
 const styles = theme => ({
   root: {
@@ -63,16 +60,15 @@ const combineSmallGroups = (dataArray) => {
 };
 
 let Pie = (props) => {
-  const { classes, data, query } = props;
+  const { classes, data, query, groupBy } = props;
   const resultCount = data.length;
   if (resultCount < 1) {
     return '';
   }
-  const grouped = _.groupBy(data,'typeLabel');
+  const grouped = _.groupBy(data, groupBy);
   let dataArray = [];
   for (let key in grouped) {
     const length = grouped[key].length;
-    //console.log(key)
     dataArray.push({
       x: key,
       y: length,
@@ -84,8 +80,6 @@ let Pie = (props) => {
   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}>
@@ -112,7 +106,7 @@ let Pie = (props) => {
           <Paper className={classes.legendPaper}>
             <VictoryLegend
               height={legendHeigth}
-              title={'Place type'}
+              title={groupBy}
               colorScale={'qualitative'}
               data={legendArray}
               style={{
@@ -136,6 +130,7 @@ let Pie = (props) => {
 Pie.propTypes = {
   classes: PropTypes.object.isRequired,
   data: PropTypes.array.isRequired,
+  groupBy: PropTypes.string.isRequired,
   query: PropTypes.string.isRequired,
 };
 

src/client/containers/MapApp.js

@@ -8,6 +8,7 @@ import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
 import Immutable from 'immutable';
 import VirtualizedTable from '../components/VirtualizedTable';
 import LeafletMap from '../components/map/LeafletMap';
@@ -58,13 +59,14 @@ const styles = theme => ({
     height: 'calc(100% - 64px)'
   },
   map: {
+    marginLeft: theme.spacing.unit,
     height: '50%'
   }
 });
 
 let MapApp = (props) => {
   const { classes, error, analysisView } = props;
-  console.log(props.results);
+  // console.log(props.results);
 
   return (
     <div className={classes.root}>
@@ -98,7 +100,7 @@ let MapApp = (props) => {
             />
           </Grid>
           <Grid item xs={12} sm={analysisView ? 4 : 8}>
-            <div className={classes.map}>
+            <Paper className={classes.map}>
               <LeafletMap
                 sliderValue={100}
                 results={props.results}
@@ -106,9 +108,9 @@ let MapApp = (props) => {
                 geoJSONKey={props.geoJSONKey}
                 getGeoJSON={props.getGeoJSON}
               />
-            </div>
+            </Paper>
             <div className={classes.map}>
-              <Pie data={props.results} query={props.search.query} />
+              <Pie data={props.results} groupBy={props.search.groupBy} query={props.search.query} />
             </div>
           </Grid>
         </Grid>

src/client/reducers/search.js

@@ -59,6 +59,7 @@ export const INITIAL_STATE = {
   },
   sortBy: 'broaderAreaLabel',
   sortDirection: 'asc',
+  groupBy: 'broaderAreaLabel',
   resultsQuery: '',
   fetchingResults: false,
 };