diff --git a/app/components/Chart.tsx b/app/components/Chart.tsx index e578bf262..f0c7934e6 100644 --- a/app/components/Chart.tsx +++ b/app/components/Chart.tsx @@ -5,10 +5,8 @@ import { LinearScale, LineElement, PointElement, - TimeScale, Tooltip, } from "chart.js"; -import "chartjs-adapter-date-fns"; import clsx from "clsx"; import * as React from "react"; import { useRef } from "react"; @@ -20,7 +18,6 @@ import styles from "./Chart.module.css"; ChartJS.register( CategoryScale, LinearScale, - TimeScale, PointElement, LineElement, Tooltip, @@ -34,6 +31,7 @@ export default function Chart({ xAxis, xTicksLimit, yTicksLimit, + xAbilityLimit, }: { options: [ { @@ -47,6 +45,7 @@ export default function Chart({ xAxis: "linear" | "localTime"; xTicksLimit?: number; yTicksLimit?: number; + xAbilityLimit?: number; }) { const isHydrated = useHydrated(); @@ -140,7 +139,7 @@ export default function Chart({ const chartData = React.useMemo( () => ({ - labels: options[0].data.map((d) => d.primary), + labels: options[0].data.map((_, i) => i), datasets: options.map((series, i) => ({ label: String(i), data: series.data.map((d) => d.secondary), @@ -173,15 +172,18 @@ export default function Chart({ scales: { x: { ...scaleDefaults, - type: xAxis === "localTime" ? "time" : "linear", + max: xAbilityLimit, + type: "linear", ticks: { ...scaleDefaults.ticks, maxRotation: 0, maxTicksLimit: xTicksLimit, callback: (value) => { if (xAxis === "localTime") { - const date = new Date(value as number); - return scaleFormatter.format(date); + const date = options[0].data[value as number]?.primary; + if (date instanceof Date) { + return scaleFormatter.format(date); + } } return value; }, diff --git a/app/features/build-analyzer/routes/analyzer.tsx b/app/features/build-analyzer/routes/analyzer.tsx index 27c6c4048..bdff6f6b6 100644 --- a/app/features/build-analyzer/routes/analyzer.tsx +++ b/app/features/build-analyzer/routes/analyzer.tsx @@ -1061,6 +1061,7 @@ function StatChart({ headerSuffix={t("analyzer:abilityPoints.short")} valueSuffix={valueSuffix} xAxis="linear" + xAbilityLimit={57} /> ); } diff --git a/package.json b/package.json index 3ce4c1f31..7dee0b818 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "@zumer/snapdom": "2.12.8", "better-sqlite3": "12.10.0", "chart.js": "4.5.1", - "chartjs-adapter-date-fns": "3.0.0", "clsx": "2.1.1", "compressorjs": "1.3.0", "date-fns": "4.4.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d8969a056..cc808f6e9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -69,9 +69,6 @@ importers: chart.js: specifier: 4.5.1 version: 4.5.1 - chartjs-adapter-date-fns: - specifier: 3.0.0 - version: 3.0.0(chart.js@4.5.1)(date-fns@4.4.0) clsx: specifier: 2.1.1 version: 2.1.1 @@ -3232,12 +3229,6 @@ packages: resolution: {integrity: sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==} engines: {pnpm: '>=8'} - chartjs-adapter-date-fns@3.0.0: - resolution: {integrity: sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==} - peerDependencies: - chart.js: '>=2.8.0' - date-fns: '>=2.0.0' - chokidar@4.0.3: resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} engines: {node: '>= 14.16.0'} @@ -8187,11 +8178,6 @@ snapshots: dependencies: '@kurkle/color': 0.3.4 - chartjs-adapter-date-fns@3.0.0(chart.js@4.5.1)(date-fns@4.4.0): - dependencies: - chart.js: 4.5.1 - date-fns: 4.4.0 - chokidar@4.0.3: dependencies: readdirp: 4.1.2