diff --git a/examples/web-analytics/dashboard-app/src/components/DotsMenu.js b/examples/web-analytics/dashboard-app/src/components/DotsMenu.js index a732eeeeae1c3..7620c27a610d0 100644 --- a/examples/web-analytics/dashboard-app/src/components/DotsMenu.js +++ b/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, diff --git a/examples/web-analytics/dashboard-app/src/components/Dropdown.js b/examples/web-analytics/dashboard-app/src/components/Dropdown.js new file mode 100644 index 0000000000000..e8f5870543aad --- /dev/null +++ b/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 ( +
+ + handleClose() } + PaperProps={{ + style: { + maxHeight: ITEM_HEIGHT * 4.5, + width: 200, + }, + }} + > + {Object.keys(options).map(option => ( + handleClose(options[option])}> + {option} + + ))} + +
+ ); +} diff --git a/examples/web-analytics/dashboard-app/src/pages/CustomReportPage.js b/examples/web-analytics/dashboard-app/src/pages/CustomReportPage.js index 591aee3a174c4..c28bf8a2ff878 100644 --- a/examples/web-analytics/dashboard-app/src/pages/CustomReportPage.js +++ b/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 }) => { 1 ? + { + out[measure] = () => setActiveMeasure(measure) + return out; + }, {}) + } + /> : finalActiveMeasure + } vizState={withTime({ query: overTimeChartQuery, chartType: 'line' })} />