Skip to content

Commit

Permalink
Merge pull request #2529 from target/graph-autosize
Browse files Browse the repository at this point in the history 
ui: use autosizer for rechart graphs
  • Loading branch information
@mastercactapus
mastercactapus authored Aug 2, 2022
2 parents 9d30105 + 6b80dba commit 925767d
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 141 deletions.
152 changes: 77 additions & 75 deletions web/src/app/services/AlertMetrics/AlertAveragesGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from 'react'
import { Grid, Paper, Typography } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles/makeStyles'
import { Theme, useTheme } from '@mui/material/styles'
import AutoSizer from 'react-virtualized-auto-sizer'
import {
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
LineChart,
Line,
Legend,
Expand Down Expand Up @@ -59,81 +59,83 @@ export default function AlertAveragesGraph(
return (
<Grid container className={classes.graphContent}>
<Grid item xs={12} data-cy='metrics-averages-graph'>
<ResponsiveContainer width='100%' height='100%'>
<LineChart
width={730}
height={250}
data={props.data}
margin={{
top: 50,
right: 30,
bottom: 50,
}}
>
<CartesianGrid
strokeDasharray='4'
vertical={false}
stroke={theme.palette.text.secondary}
/>
<XAxis
dataKey='date'
type='category'
stroke={theme.palette.text.secondary}
/>
<YAxis
type='number'
allowDecimals={false}
interval='preserveStart'
stroke={theme.palette.text.secondary}
/>
<Tooltip
data-cy='metrics-tooltip'
cursor={{ fill: theme.palette.background.default }}
content={({ active, payload, label }) => {
if (!active || !payload?.length) return null

const ackAvg = `${payload[0].name}: ${Math.round(
payload[0].payload.avgTimeToAck,
)} min`
const closeAvg = `${payload[1].name}: ${Math.round(
payload[1].payload.avgTimeToClose,
)} min`
return (
<Paper variant='outlined' sx={{ p: 1 }}>
<Typography variant='body2'>{label}</Typography>
<Typography variant='body2'>{closeAvg}</Typography>
<Typography variant='body2'>{ackAvg}</Typography>
</Paper>
)
<AutoSizer>
{({ width, height }) => (
<LineChart
width={width}
height={height}
data={props.data}
margin={{
top: 50,
right: 30,
bottom: 50,
}}
/>
<Legend />
<Line
type='monotone'
dataKey='avgTimeToAck'
strokeWidth={2}
stroke={theme.palette.primary.main}
activeDot={{ r: 8 }}
isAnimationActive={false}
dot={CustomDot}
name='Avg. Ack'
/>
<Line
type='monotone'
strokeWidth={2}
dataKey='avgTimeToClose'
isAnimationActive={false}
stroke={
theme.palette.mode === 'light'
? theme.palette.secondary.dark
: theme.palette.secondary.light
}
activeDot={{ r: 8 }}
dot={CustomDot}
name='Avg. Close'
/>
</LineChart>
</ResponsiveContainer>
>
<CartesianGrid
strokeDasharray='4'
vertical={false}
stroke={theme.palette.text.secondary}
/>
<XAxis
dataKey='date'
type='category'
stroke={theme.palette.text.secondary}
/>
<YAxis
type='number'
allowDecimals={false}
interval='preserveStart'
stroke={theme.palette.text.secondary}
/>
<Tooltip
data-cy='metrics-tooltip'
cursor={{ fill: theme.palette.background.default }}
content={({ active, payload, label }) => {
if (!active || !payload?.length) return null

const ackAvg = `${payload[0].name}: ${Math.round(
payload[0].payload.avgTimeToAck,
)} min`
const closeAvg = `${payload[1].name}: ${Math.round(
payload[1].payload.avgTimeToClose,
)} min`
return (
<Paper variant='outlined' sx={{ p: 1 }}>
<Typography variant='body2'>{label}</Typography>
<Typography variant='body2'>{closeAvg}</Typography>
<Typography variant='body2'>{ackAvg}</Typography>
</Paper>
)
}}
/>
<Legend />
<Line
type='monotone'
dataKey='avgTimeToAck'
strokeWidth={2}
stroke={theme.palette.primary.main}
activeDot={{ r: 8 }}
isAnimationActive={false}
dot={CustomDot}
name='Avg. Ack'
/>
<Line
type='monotone'
strokeWidth={2}
dataKey='avgTimeToClose'
isAnimationActive={false}
stroke={
theme.palette.mode === 'light'
? theme.palette.secondary.dark
: theme.palette.secondary.light
}
activeDot={{ r: 8 }}
dot={CustomDot}
name='Avg. Close'
/>
</LineChart>
)}
</AutoSizer>
</Grid>
</Grid>
)
Expand Down
136 changes: 70 additions & 66 deletions web/src/app/services/AlertMetrics/AlertCountGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from 'react'
import { Grid, Paper, Typography } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles/makeStyles'
import { Theme, useTheme } from '@mui/material/styles'
import AutoSizer from 'react-virtualized-auto-sizer'
import {
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
BarChart,
Bar,
Legend,
Expand Down Expand Up @@ -37,72 +37,76 @@ export default function AlertCountGraph(
return (
<Grid container className={classes.graphContent}>
<Grid item xs={12} data-cy='metrics-count-graph'>
<ResponsiveContainer width='100%' height='100%'>
<BarChart
width={730}
height={250}
data={props.data}
margin={{
top: 50,
right: 30,
bottom: 50,
}}
>
<CartesianGrid
strokeDasharray='4'
vertical={false}
stroke={theme.palette.text.secondary}
/>
<XAxis
dataKey='date'
type='category'
stroke={theme.palette.text.secondary}
/>
<YAxis
allowDecimals={false}
dataKey='count'
stroke={theme.palette.text.secondary}
/>
<Tooltip
data-cy='metrics-tooltip'
cursor={{ fill: theme.palette.background.default }}
content={({ active, payload, label }) => {
if (!active || !payload?.length) return null

const alertCountStr = `${payload[1].name}: ${
(payload[1].value as number) + (payload[0].value as number)
}`
const escalatedCountStr = `${payload[0].name}: ${payload[0].value}`
return (
<Paper variant='outlined' sx={{ p: 1 }}>
<Typography variant='body2'>{label}</Typography>
<Typography variant='body2'>{alertCountStr}</Typography>
<Typography variant='body2'>{escalatedCountStr}</Typography>
</Paper>
)
<AutoSizer>
{({ width, height }) => (
<BarChart
width={width}
height={height}
data={props.data}
margin={{
top: 50,
right: 30,
bottom: 50,
}}
/>
<Legend />
<Bar
dataKey='escalatedCount'
stackId='a'
fill={theme.palette.primary.main}
className={classes.bar}
name='Escalated'
/>
<Bar
stackId='a'
dataKey='nonEscalatedCount'
fill={
theme.palette.mode === 'light'
? theme.palette.secondary.dark
: theme.palette.secondary.light
}
className={classes.bar}
name='Alert Count'
/>
</BarChart>
</ResponsiveContainer>
>
<CartesianGrid
strokeDasharray='4'
vertical={false}
stroke={theme.palette.text.secondary}
/>
<XAxis
dataKey='date'
type='category'
stroke={theme.palette.text.secondary}
/>
<YAxis
allowDecimals={false}
dataKey='count'
stroke={theme.palette.text.secondary}
/>
<Tooltip
data-cy='metrics-tooltip'
cursor={{ fill: theme.palette.background.default }}
content={({ active, payload, label }) => {
if (!active || !payload?.length) return null

const alertCountStr = `${payload[1].name}: ${
(payload[1].value as number) + (payload[0].value as number)
}`
const escalatedCountStr = `${payload[0].name}: ${payload[0].value}`
return (
<Paper variant='outlined' sx={{ p: 1 }}>
<Typography variant='body2'>{label}</Typography>
<Typography variant='body2'>{alertCountStr}</Typography>
<Typography variant='body2'>
{escalatedCountStr}
</Typography>
</Paper>
)
}}
/>
<Legend />
<Bar
dataKey='escalatedCount'
stackId='a'
fill={theme.palette.primary.main}
className={classes.bar}
name='Escalated'
/>
<Bar
stackId='a'
dataKey='nonEscalatedCount'
fill={
theme.palette.mode === 'light'
? theme.palette.secondary.dark
: theme.palette.secondary.light
}
className={classes.bar}
name='Alert Count'
/>
</BarChart>
)}
</AutoSizer>
</Grid>
</Grid>
)
Expand Down
2 changes: 2 additions & 0 deletions web/src/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"react-markdown": "8.0.0",
"react-redux": "8.0.0",
"react-transition-group": "4.4.2",
"react-virtualized-auto-sizer": "1.0.6",
"recharts": "2.1.8",
"redux-thunk": "2.4.0",
"remark-gfm": "3.0.0",
Expand All @@ -71,6 +72,7 @@
"@types/react-beautiful-dnd": "13.1.1",
"@types/react-big-calendar": "0.38.0",
"@types/react-dom": "18.0.1",
"@types/react-virtualized-auto-sizer": "1.0.1",
"chance": "1.1.7",
"cypress": "9.7.0",
"esbuild-jest": "0.5.0",
Expand Down
12 changes: 12 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1441,6 +1441,13 @@
dependencies:
"@types/react" "*"

"@types/react-virtualized-auto-sizer@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
dependencies:
"@types/react" "*"

"@types/react@*", "@types/react@18.0.5", "@types/react@>=16.9.11":
version "18.0.5"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.5.tgz#1a4d4b705ae6af5aed369dec22800b20f89f5301"
Expand Down Expand Up @@ -6609,6 +6616,11 @@ react-transition-group@4.4.2, react-transition-group@^4.4.2:
loose-envify "^1.4.0"
prop-types "^15.6.2"

react-virtualized-auto-sizer@1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==

react@18.1.0:
version "18.1.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
Expand Down

0 comments on commit 925767d

Please sign in to comment.