fix: disable new linegraph, fix missing dependency

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

data/licenses-npm.json

@@ -2,7 +2,6 @@ import { useCallback, useMemo } from "react";
 import styles from "./graph.module.css";
 
 import { ResponsiveLine, type SliceTooltipProps } from "@nivo/line";
-import { useWindowSize } from "@uidotdev/usehooks";
 import { addMonths } from "date-fns";
 import type { DataPoint } from ".";
 import type { Metric } from "../../api";
@@ -62,13 +61,13 @@ export const LineGraph = ({
 
 	const axisRange = range.getAxisRange();
 	const yCount = 5;
-	const size = useWindowSize();
-	let xCount = Math.min(data.length, 8);
-	if (size.width && size.width < 1000) {
-		xCount = Math.min(data.length, 6);
-	} else if (size.width && size.width < 600) {
-		xCount = Math.min(data.length, 4);
-	}
+	// const size = useWindowSize();
+	const xCount = Math.min(data.length, 8);
+	// if (size.width && size.width < 1000) {
+	// 	xCount = Math.min(data.length, 6);
+	// } else if (size.width && size.width < 600) {
+	// 	xCount = Math.min(data.length, 4);
+	// }
 
 	return (
 		<ResponsiveLine

web/src/components/graph/graph.tsx

@@ -1,19 +1,16 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styles from "./graph.module.css";
 
-import { ResponsiveLine, type SliceTooltipProps } from "@nivo/line";
-import { useWindowSize } from "@uidotdev/usehooks";
+import { extent } from "d3-array";
+import { easeCubic, easeLinear } from "d3-ease";
+import { scaleLinear, scaleUtc } from "d3-scale";
+import { select } from "d3-selection";
+import { area, curveMonotoneX } from "d3-shape";
 import { addMonths } from "date-fns";
+import { Tooltip } from "react-tooltip";
 import type { DataPoint } from ".";
 import type { Metric } from "../../api";
 import type { DateRange } from "../../api/ranges";
-import { formatMetricVal } from "../../utils";
-import { Tooltip } from "react-tooltip";
-import { scaleLinear, scaleUtc } from "d3-scale";
-import { extent } from "d3-array";
-import { area, curveMonotoneX } from "d3-shape";
-import { select } from "d3-selection";
-import { easeCubic, easeLinear } from "d3-ease";
 
 export type GraphRange = "year" | "month" | "day" | "hour";
 

web/src/components/graph2/graph.tsx

@@ -11,11 +11,11 @@ import { useMetric, useRange } from "../hooks/persist";
 import { cls } from "../utils";
 import { DimensionCard, DimensionDropdownCard, DimensionTabs, DimensionTabsCard, cardStyles } from "./dimensions";
 import { LineGraph } from "./graph";
+// import { LineGraph2 } from "./graph2";
 import { SelectFilters } from "./project/filter";
 import { SelectMetrics } from "./project/metric";
 import { ProjectHeader } from "./project/project";
 import { SelectRange } from "./project/range";
-import { LineGraph2 } from "./graph2";
 
 const Worldmap = lazy(() => import("./worldmap").then((module) => ({ default: module.Worldmap })));
 
@@ -112,9 +112,9 @@ export const Project = () => {
 				<article className={cls(cardStyles, styles.graphCard)}>
 					<LineGraph data={graph ?? []} metric={metric} title={metricNames[metric]} range={range} />
 				</article>
-				<article className={cls(cardStyles, styles.graphCard2)}>
+				{/* <article className={cls(cardStyles, styles.graphCard2)}>
 					<LineGraph2 data={graph ?? []} metric={metric} title={metricNames[metric]} range={range} />
-				</article>
+				</article> */}
 				<div className={styles.tables}>
 					<DimensionTabsCard dimensions={["url", "fqdn"]} query={query} onSelect={onSelectDimRow} />
 					<DimensionDropdownCard