examples: web-analytics add measures switcher to custom report

Author: keydunov

examples/web-analytics/dashboard-app/src/components/DotsMenu.js

@@ -4,11 +4,6 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
-const options = [
-  'Edit',
-  'Delete'
-];
-
 const ITEM_HEIGHT = 48;
 
 export default function DotsMenu({ options }) {
@@ -21,7 +16,7 @@ export default function DotsMenu({ options }) {
 
   const handleClose = (callback) => {
     setAnchorEl(null);
-    callback();
+    callback && callback();
   };
 
   return (
@@ -39,7 +34,7 @@ export default function DotsMenu({ options }) {
         anchorEl={anchorEl}
         keepMounted
         open={open}
-        onClose={handleClose}
+        onClose={() => handleClose() }
         PaperProps={{
           style: {
             maxHeight: ITEM_HEIGHT * 4.5,

examples/web-analytics/dashboard-app/src/components/Dropdown.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+const ITEM_HEIGHT = 48;
+
+export default function Dropdown({ value, options }) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (callback) => {
+    setAnchorEl(null);
+    callback && callback();
+  };
+
+  return (
+    <div>
+      <Button
+        color="inherit"
+        aria-haspopup="true"
+        onClick={handleClick}
+      >
+        { value }
+        <ExpandMoreIcon fontSize="small" />
+      </Button>
+      <Menu
+        id="long-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        onClose={() => handleClose() }
+        PaperProps={{
+          style: {
+            maxHeight: ITEM_HEIGHT * 4.5,
+            width: 200,
+          },
+        }}
+      >
+        {Object.keys(options).map(option => (
+          <MenuItem key={option} onClick={() => handleClose(options[option])}>
+            {option}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}

examples/web-analytics/dashboard-app/src/pages/CustomReportPage.js

@@ -6,9 +6,11 @@ import Grid from "@material-ui/core/Grid";
 import { GET_CUSTOM_REPORT } from "../graphql/queries";
 import OverTimeChart from "../components/OverTimeChart";
 import DataTable from "../components/DataTable";
+import Dropdown from "../components/Dropdown";
 import { Link } from "react-router-dom";
 
 const CustomReportPage = ({ withTime }) => {
+  const [activeMeasure, setActiveMeasure] = useState(null);
   const { id } = useParams();
   const { loading, error, data } = useQuery(GET_CUSTOM_REPORT, {
     variables: {
@@ -19,9 +21,10 @@ const CustomReportPage = ({ withTime }) => {
     return "Loading";
   }
 
-  const query = JSON.parse(data.customReport.query);
+  const { measures, ...query } = JSON.parse(data.customReport.query);
+  const finalActiveMeasure = activeMeasure || measures[0];
   const overTimeChartQuery = {
-    measures: [query.measures[0]],
+    measures: [finalActiveMeasure],
     timeDimensions: [{
       dimension: query.timeDimensions[0].dimension,
       granularity: 'day'
@@ -44,7 +47,18 @@ const CustomReportPage = ({ withTime }) => {
       </Grid>
       <Grid item xs={12}>
         <OverTimeChart
-          title=""
+          title={
+            measures.length > 1 ?
+              <Dropdown
+                value={finalActiveMeasure}
+                options={
+                  measures.reduce((out, measure) => {
+                    out[measure] = () => setActiveMeasure(measure)
+                    return out;
+                  }, {})
+                }
+              /> : finalActiveMeasure
+          }
           vizState={withTime({ query: overTimeChartQuery, chartType: 'line' })}
         />
       </Grid>