const DashboardItem = ({ children, title }) => ( <Card> <CardContent> {title && ( <Typography component="h2" variant="h6" color="primary" gutterBottom> {title} </Typography> )} {children} </CardContent> </Card> )
const DashboardPage = () => { const dashboardItem = item => ( <Grid item xs={12} lg={6} key={item.id}> <DashboardItem title={item.name}> <ChartRenderer vizState={item.vizState} /> </DashboardItem> </Grid> ); const Empty = () => ( <div style={{ textAlign: "center", padding: 12 }} > <Typography variant="h5" color="inherit"> There are no charts on this dashboard. Use Playground Build to add one. </Typography> </div> ); return DashboardItems.length ? ( <Dashboard>{DashboardItems.map(dashboardItem)}</Dashboard> ) : ( <Empty /> ); }
const OverTimeChart = ({ title, vizState, granularityControls }) => { const [granularity, setGranularity] = useState(granularityFromQuery(vizState)); return ( <Card> <CardContent> <Grid container justify="space-between"> <Grid item> <Typography component="p" color="primary" gutterBottom> {title} </Typography> </Grid> <Grid item> <ButtonGroup size="small" color="primary" aria-label="outlined primary button group"> {['hour', 'day', 'week', 'month'].map(granOption => ( <Button variant={granularity === granOption ? 'contained' : ''} key={granOption} onClick={() => setGranularity(granOption)} > {granOption.toUpperCase()} </Button> ))} </ButtonGroup> </Grid> </Grid> <ChartRenderer height={250} vizState={withGranularity(vizState, granularity)} /> </CardContent> </Card> ) }
button: { color: theme.palette.text.secondary, fontWeight: theme.typography.fontWeightMedium, justifyContent: 'flex-start', letterSpacing: 0, color: theme.palette.primary.main, '& $title': { fontWeight: theme.typography.fontWeightMedium }, '& $icon': {
const Header = ({ location }) => { const classes = useStyles(); return ( <AppBar position="fixed" className={classes.appBar}> <Toolbar> <Typography variant="h6" color="inherit" noWrap className={classes.title}> Cube.js Web Analytics Demo </Typography> <div className={classes.grow} /> <Button component="a" href="https://web-analytics.cube.dev" endIcon={<DescriptionIcon />} color="inherit" > Tutorial </Button> <Button component="a" href="https://github.com/cube-js/cube.js/tree/master/examples/web-analytics" endIcon={<GitHubIcon />} color="inherit" > Source Code </Button> </Toolbar> </AppBar> ) }
<Typography color="textSecondary" gutterBottom <Typography color="textPrimary" variant="h3"
<Typography align="center" color="textPrimary" <Typography align="center" color="textPrimary"
<Grid container spacing={3} justify="space-between"> <Grid item> <Typography variant="h6" id="tableTitle"> Custom Reports </Typography>
src={user.avatar} /> <Typography color="textPrimary" gutterBottom <Typography color="textSecondary" variant="body1" <Typography className={classes.dateText} color="textSecondary"
const Chart = ({ title, vizState, height }) => ( <Card> <CardContent> <Typography component="p" color="primary" gutterBottom> {title} </Typography> <ChartRenderer vizState={vizState} height={height || heights[vizState.chartType]} /> </CardContent> </Card> )
xs={12} <Typography color="textPrimary" gutterBottom xs={12} <Typography color="textPrimary" gutterBottom
/> </Box> <Typography align="center" color="textPrimary" <Typography align="center" color="textPrimary" color="action" /> <Typography color="textSecondary" display="inline" color="action" /> <Typography color="textSecondary" display="inline"
<Typography color="textSecondary" gutterBottom <Typography color="textPrimary" variant="h3" <Typography className={classes.differenceValue} variant="body2" <Typography color="textSecondary" variant="caption"
<Typography color="textSecondary" gutterBottom <Typography color="textPrimary" variant="h3"
<Typography color="textSecondary" gutterBottom <Typography color="textPrimary" variant="h3" <Typography className={classes.differenceValue} variant="body2" <Typography color="textSecondary" variant="caption"