diff --git a/changelog.md b/changelog.md index 08eaa17..9652904 100644 --- a/changelog.md +++ b/changelog.md @@ -1,6 +1,7 @@ ## Version 0.12.0 - New Dashboard - New metrics gathering system + - Integrated a new docker-less mode of functioning for networking - Added Button to force reset HTTPS cert in settings ## Version 0.11.3 diff --git a/client/src/pages/dashboard/components/plot.jsx b/client/src/pages/dashboard/components/plot.jsx index acb93f3..1ea333e 100644 --- a/client/src/pages/dashboard/components/plot.jsx +++ b/client/src/pages/dashboard/components/plot.jsx @@ -46,12 +46,19 @@ function toUTC(date, time) { return formatDate(now, time); } -const PlotComponent = ({ title, data, defaultSlot = 'latest' }) => { +const PlotComponent = ({ title, data, SimpleDesign, withSelector, defaultSlot = 'latest' }) => { const [slot, setSlot] = useState(defaultSlot); const theme = useTheme(); const { primary, secondary } = theme.palette.text; const line = theme.palette.divider; const [series, setSeries] = useState([]); + const [selected, setSelected] = useState(withSelector ? data.findIndex((d) => d.Key === withSelector) + : 0); + + const isDark = theme.palette.mode === 'dark'; + + const backColor = isDark ? '0,0,0' : '255,255,255'; + const textColor = isDark ? 'white' : 'dark'; // chart options const areaChartOptions = { @@ -99,8 +106,12 @@ const PlotComponent = ({ title, data, defaultSlot = 'latest' }) => { } } + let toProcess = data; + if(withSelector) { + toProcess = data.filter((d, id) => id === selected); + } const dataSeries = []; - data.forEach((serie) => { + toProcess.forEach((serie) => { dataSeries.push({ name: serie.Label, dataAxis: xAxis.map((date) => { @@ -131,26 +142,27 @@ const PlotComponent = ({ title, data, defaultSlot = 'latest' }) => { : xAxis, labels: { style: { - fontSize: slot === 'latest' ? '0' : '11px', + fontSize: (slot === 'latest' || SimpleDesign) ? '0' : '11px', } }, axisBorder: { - show: true, + show: !SimpleDesign, color: line }, tickAmount: xAxis.length, }, - yaxis: data.map((thisdata, ida) => ({ + yaxis: toProcess.map((thisdata, ida) => ({ opposite: ida === 1, labels: { style: { - colors: [secondary] + colors: [secondary], + fontSize: '11px', }, formatter: FormaterForMetric(thisdata) }, title: { - text: thisdata.Label, + text: SimpleDesign ? '' : thisdata.Label, } })), grid: { @@ -167,16 +179,34 @@ const PlotComponent = ({ title, data, defaultSlot = 'latest' }) => { data: serie.dataAxis } })); - }, [slot, data]); + }, [slot, data, selected]); - return + return {title} - + + + {withSelector && +
+ setSelected(e.target.value)} + sx={{ '& .MuiInputBase-input': { py: 0.5, fontSize: '0.875rem', } }} + > + {data.map((option, i) => ( + + {option.Label} + + ))} +
} +