mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-09-27 19:48:59 +03:00
Josh HawkinsandGitHub
acc740a976
* update docusaurus to 3.10.2 * bump @types/node to 25.9.6 and ES2022 target ES2022, which already includes ES2020 and ES2021.String, so the lib list was also trimmed * bump vite to 8.3.0 and vitest to 4.1.11 Swap `@vitejs/plugin-react-swc` for `@vitejs/plugin-react` and add `esbuild` as a devDependency, since `vite-plugin-monaco-editor` requires it and Vite 8 no longer ships it. `keepNames` moves to `build.rolldownOptions.output` because Vite 8 ignores the `esbuild` block. Rolldown's minifier now writes the preload helper's base path as a template literal instead of a double-quoted string, so the nginx `sub_filter` for `return"/BASE_PATH/"` stopped matching and lazy-loaded chunks and their CSS were requested from a literal `/BASE_PATH/` under Home Assistant ingress. The rule now matches the backtick form. * bump apexcharts to 7.3.0 and react-apexcharts to 2.1.1 Under Vite 8, a default import from a CommonJS package resolves to its whole `module.exports` when `package.json` has `"type": "module"`, so react-apexcharts 1.4.1 handed React an object and every chart crashed. 2.x ships an ESM build. apexcharts 7 no longer sets `window.ApexCharts`, so the chart components now import it for `ApexCharts.exec`, and `ApexAxisChartSeries` is derived in `types/graph.ts` because it's no longer a global type. * remove unused immer dep * remove unused cython pin from tensorrt requirements The pin was added alongside tensorrt 8.5.3 and cuda-python 11.8, which needed Cython to build, and both have since been dropped from this file. Nothing imports Cython at runtime, and `pip3 wheel` runs with build isolation, so any source build gets its own build dependencies. The pin only installed an unused Cython wheel into the TensorRT image. * require node 20.19 for docs
115 lines
2.6 KiB
TypeScript
115 lines
2.6 KiB
TypeScript
import { useTheme } from "@/context/theme-provider";
|
|
import { useEffect, useMemo } from "react";
|
|
import ApexCharts from "apexcharts";
|
|
import Chart from "react-apexcharts";
|
|
import { getUnitSize } from "@/utils/storageUtil";
|
|
|
|
type StorageGraphProps = {
|
|
graphId: string;
|
|
used: number;
|
|
total: number;
|
|
};
|
|
export function StorageGraph({ graphId, used, total }: StorageGraphProps) {
|
|
const { theme, systemTheme } = useTheme();
|
|
|
|
const options = useMemo(() => {
|
|
return {
|
|
chart: {
|
|
id: graphId,
|
|
background: (systemTheme || theme) == "dark" ? "#404040" : "#E5E5E5",
|
|
selection: {
|
|
enabled: false,
|
|
},
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
bottom: -40,
|
|
top: -60,
|
|
left: -20,
|
|
right: 0,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
},
|
|
},
|
|
states: {
|
|
active: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
} as ApexCharts.ApexOptions;
|
|
}, [graphId, systemTheme, theme]);
|
|
|
|
useEffect(() => {
|
|
ApexCharts.exec(graphId, "updateOptions", options, true, true);
|
|
}, [graphId, options]);
|
|
|
|
return (
|
|
<div className="flex w-full flex-col gap-2.5">
|
|
<div className="flex w-full items-center justify-between gap-1">
|
|
<div className="flex items-center gap-1">
|
|
<div className="text-xs text-primary">{getUnitSize(used)}</div>
|
|
<div className="text-xs text-primary">/</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{getUnitSize(total)}
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-primary">
|
|
{Math.round((used / total) * 100)}%
|
|
</div>
|
|
</div>
|
|
<div className="h-5 overflow-hidden rounded-md">
|
|
<Chart
|
|
type="bar"
|
|
options={options}
|
|
series={[
|
|
{ data: [{ x: "storage", y: Math.round((used / total) * 100) }] },
|
|
]}
|
|
height="100%"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|