Improve data label distribution

This commit is contained in:
Nicolas Mowen 2024-04-05 20:19:49 -06:00
parent de11e97e59
commit 5b35839cba

View File

@ -3,6 +3,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
import { Threshold } from "@/types/graph"; import { Threshold } from "@/types/graph";
import { useCallback, useEffect, useMemo } from "react"; import { useCallback, useEffect, useMemo } from "react";
import Chart from "react-apexcharts"; import Chart from "react-apexcharts";
import { isMobile, isMobileOnly } from "react-device-detect";
import { MdCircle } from "react-icons/md"; import { MdCircle } from "react-icons/md";
import useSWR from "swr"; import useSWR from "swr";
@ -36,7 +37,7 @@ export function ThresholdBarGraph({
const formatTime = useCallback( const formatTime = useCallback(
(val: unknown) => { (val: unknown) => {
if (val == 0) { if (val == 1) {
return; return;
} }
@ -96,10 +97,10 @@ export function ThresholdBarGraph({
size: 0, size: 0,
}, },
xaxis: { xaxis: {
tickAmount: 4, tickAmount: isMobileOnly ? 3 : 4,
tickPlacement: "on", tickPlacement: "on",
labels: { labels: {
offsetX: -30, offsetX: -18,
formatter: formatTime, formatter: formatTime,
}, },
axisBorder: { axisBorder: {
@ -280,7 +281,7 @@ export function CameraLineGraph({
const formatTime = useCallback( const formatTime = useCallback(
(val: unknown) => { (val: unknown) => {
if (val == 0) { if (val == 1) {
return; return;
} }
@ -328,10 +329,10 @@ export function CameraLineGraph({
size: 0, size: 0,
}, },
xaxis: { xaxis: {
tickAmount: 4, tickAmount: isMobileOnly ? 3 : 4,
tickPlacement: "between", tickPlacement: "on",
labels: { labels: {
offsetX: -30, offsetX: isMobileOnly ? -18 : 0,
formatter: formatTime, formatter: formatTime,
}, },
axisBorder: { axisBorder: {