optimize and long term token

package.json

@@ -36,6 +36,7 @@
     "body-parser": "^1.20.2",
     "chai": "^5.1.1",
     "compromise": "^14.13.0",
+    "compromise-speed": "^0.1.1",
     "daisyui": "^4.12.7",
     "emoji-regex": "^10.3.0",
     "eslint": "^8.57.0",
@@ -53,6 +54,7 @@
     "ky": "^1.3.0",
     "path": "^0.12.7",
     "pify": "^6.1.0",
+    "preline": "^2.3.0",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react-apexcharts": "^1.4.1",

src/components/UserInsightsChartView.tsx

@@ -35,7 +35,7 @@ const ObservedChart: FC<{ views: { end_time: string; value: number }[]; threads:
 	// const likes = useUserLikesByDay();
 	// const threadViews = useUserThreadViewsByDay();
 
-	const [timePeriod, timePeriods, handleTimePeriodChange] = useTimePeriod();
+	const [timePeriod] = useTimePeriod();
 
 	const viewByTimePeriod = useTimePeriodFilteredData(views, (value) => value.end_time, timePeriod);
 
@@ -114,7 +114,7 @@ const ObservedChart: FC<{ views: { end_time: string; value: number }[]; threads:
 	// 	new Date(currentValues[currentValues.length - 1].end_time),
 	// );
 
-	const [chartOptions, chartSeries] = useMemo(() => {
+	const Chart = useMemo(() => {
 		const opts: ApexOptions = {
 			chart: {
 				type: "area",
@@ -262,8 +262,8 @@ const ObservedChart: FC<{ views: { end_time: string; value: number }[]; threads:
 			// },
 		];
 
-		return [opts, chartSeries] as const;
-	}, [viewCountPerDay, threadCountPerDay, currentDays]);
+		return <ReactApexChart options={opts} series={chartSeries} width={chartWidth} height={300} type="area" />;
+	}, [viewCountPerDay, threadCountPerDay, currentDays, chartWidth]);
 
 	useEffect(() => {
 		const resizeObserver = new ResizeObserver((entries) => {
@@ -286,20 +286,8 @@ const ObservedChart: FC<{ views: { end_time: string; value: number }[]; threads:
 	}, []);
 
 	return (
-		<div ref={chartContainerRef} className="bg-white p-6 rounded-lg shadow-lg flex flex-col items-center w-full">
-			<div className="mb-4">
-				<label htmlFor="timePeriod" className="mr-2">
-					Select Time Period:
-				</label>
-				<select id="timePeriod" value={timePeriod.label} onChange={handleTimePeriodChange} className="p-2 border rounded">
-					{Object.entries(timePeriods).map(([, tp]) => (
-						<option key={tp.label} value={tp.label}>
-							{!tp.label.includes("days") ? tp.label : `Last ${tp.label.replace("days", "").replace("last", "")} Days`}
-						</option>
-					))}
-				</select>
-			</div>
-			<ReactApexChart options={chartOptions} series={chartSeries} width={chartWidth} height={300} type="area" />
+		<div ref={chartContainerRef} className="bg-white p-6 rounded-xl shadow-xl flex flex-col items-center w-full">
+			{Chart}
 		</div>
 	);
 };