forked from Github/frigate
af3f6dadcb
* Ensure viewport is always full screen * Protect against hour with no cards and ensure data is consistent * Reduce grouped up image refreshes * Include current hour and fix scrubbing bugginess * Scroll initially selected timeline in to view * Expand timelne class type * Use poster image for preview on video player instead of using separate image view * Fix available streaming modes * Incrase timing for grouping timline items * Fix audio activity listener * Fix player not switching views correctly * Use player time to convert to timeline time * Update sub labels for previous timeline items * Show mini timeline bar for non selected items * Rewrite desktop timeline to use separate dynamic video player component * Extend improvements to mobile as well * Improve time formatting * Fix scroll * Fix no preview case * Mobile fixes * Audio toggle fixes * More fixes for mobile * Improve scaling of graph motion activity * Add keyboard shortcut hook and support shortcuts for playback page * Fix sizing of dialog * Improve height scaling of dialog * simplify and fix layout system for timeline * Fix timeilne items not working * Implement basic Frigate+ submitting from timeline
102 lines
1.9 KiB
TypeScript
102 lines
1.9 KiB
TypeScript
import { GraphData } from "@/types/graph";
|
|
import Chart from "react-apexcharts";
|
|
|
|
type TimelineGraphProps = {
|
|
id: string;
|
|
data: GraphData[];
|
|
start: number;
|
|
end: number;
|
|
objects: number[];
|
|
};
|
|
|
|
/**
|
|
* A graph meant to be overlaid on top of a timeline
|
|
*/
|
|
export default function TimelineGraph({
|
|
id,
|
|
data,
|
|
start,
|
|
end,
|
|
objects,
|
|
}: TimelineGraphProps) {
|
|
return (
|
|
<Chart
|
|
type="bar"
|
|
options={{
|
|
colors: [
|
|
({ dataPointIndex }: { dataPointIndex: number }) => {
|
|
if (objects.includes(dataPointIndex)) {
|
|
return "#06b6d4";
|
|
} else {
|
|
return "#991b1b";
|
|
}
|
|
},
|
|
],
|
|
chart: {
|
|
id: id,
|
|
selection: {
|
|
enabled: false,
|
|
},
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
dataLabels: { enabled: false },
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
bottom: 2,
|
|
top: -12,
|
|
left: -20,
|
|
right: 0,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
position: "top",
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: "100%",
|
|
barHeight: "100%",
|
|
hideZeroBarsWhenGrouped: true,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 0,
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
xaxis: {
|
|
type: "datetime",
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
min: start,
|
|
max: end,
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
}}
|
|
series={data}
|
|
height="100%"
|
|
/>
|
|
);
|
|
}
|