From 8108c82db744f825a4d008c1b284ba3622959376 Mon Sep 17 00:00:00 2001 From: BoringBoredom <16615327+BoringBoredom@users.noreply.github.com> Date: Sun, 3 Mar 2024 08:50:31 +0200 Subject: [PATCH] assign colors by upload order --- package-lock.json | 12 +- src/App.tsx | 3 +- src/components/Buttons/Buttons.tsx | 6 +- src/components/DataDisplay/DataDisplay.tsx | 145 +++++++-------------- src/components/scripts.ts | 33 +++-- src/components/types.ts | 1 + 6 files changed, 82 insertions(+), 118 deletions(-) diff --git a/package-lock.json b/package-lock.json index da98082..438c519 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1033,9 +1033,9 @@ "dev": true }, "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.24", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.24.tgz", - "integrity": "sha512-+VaWXDa6+l6MhflBvVXjIEAzb59nQ2JUK3bwRp2zRpPtU+8TFRy9Gg/5oIcNlkEL5PGlBFGfemUVvIgLnTzq7Q==", + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -2257,9 +2257,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.689", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.689.tgz", - "integrity": "sha512-GatzRKnGPS1go29ep25reM94xxd1Wj8ritU0yRhCJ/tr1Bg8gKnm6R9O/yPOhGQBoLMZ9ezfrpghNaTw97C/PQ==", + "version": "1.4.690", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.690.tgz", + "integrity": "sha512-+2OAGjUx68xElQhydpcbqH50hE8Vs2K6TkAeLhICYfndb67CVH0UsZaijmRUE3rHlIxU1u0jxwhgVe6fK3YANA==", "dev": true }, "node_modules/es-abstract": { diff --git a/src/App.tsx b/src/App.tsx index ab47398..c502eb4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -101,7 +101,7 @@ export default function App() { return ( <> - + {data.benches.length < 1 ? ( diff --git a/src/components/Buttons/Buttons.tsx b/src/components/Buttons/Buttons.tsx index 7619265..b7e596d 100644 --- a/src/components/Buttons/Buttons.tsx +++ b/src/components/Buttons/Buttons.tsx @@ -6,7 +6,7 @@ import React from "react"; import type { Data } from "../types"; import html2canvas from "html2canvas"; import { saveAs } from "file-saver"; -import type { sortOptions } from "../static"; +import type { initialColors, sortOptions } from "../static"; function exportPage(download: boolean) { void html2canvas(document.body, { @@ -40,10 +40,12 @@ export default function Buttons({ data, setData, sortBy, + colors, }: { data: Data; setData: React.Dispatch>; sortBy: (typeof sortOptions)[number]; + colors: typeof initialColors; }) { const resetRef = React.useRef<() => void>(null); @@ -54,7 +56,7 @@ export default function Buttons({ multiple accept=".csv,.json" onChange={(files) => { - void handleUpload(files, data, setData, sortBy, resetRef); + void handleUpload(files, data, setData, sortBy, resetRef, colors); }} > {(props) => ( diff --git a/src/components/DataDisplay/DataDisplay.tsx b/src/components/DataDisplay/DataDisplay.tsx index 3bbe887..b9beffd 100644 --- a/src/components/DataDisplay/DataDisplay.tsx +++ b/src/components/DataDisplay/DataDisplay.tsx @@ -1,10 +1,5 @@ import { Group, SimpleGrid, Stack, Table, Tooltip } from "@mantine/core"; -import { - percentileList, - barMetrics, - type initialChartTypes, - type initialColors, -} from "../static"; +import { percentileList, barMetrics, type initialChartTypes } from "../static"; import type { Data } from "../types"; import { IconAlertTriangleFilled } from "@tabler/icons-react"; import s from "./DataDisplay.module.css"; @@ -70,7 +65,7 @@ function PresentModes({ presentModes }: { presentModes: string | undefined }) { return {presentModes}; } -function Info({ data, colors }: { data: Data; colors: typeof initialColors }) { +function Info({ data }: { data: Data }) { return ( @@ -87,11 +82,11 @@ function Info({ data, colors }: { data: Data; colors: typeof initialColors }) { - {data.benches.map((bench, index) => ( + {data.benches.map((bench) => ( {bench.name} {bench.applications} @@ -118,24 +113,18 @@ function Info({ data, colors }: { data: Data; colors: typeof initialColors }) { ); } -function LineMs({ - data, - colors, -}: { - data: Data; - colors: typeof initialColors; -}) { +function LineMs({ data }: { data: Data }) { return (
({ + datasets: data.benches.map((bench) => ({ datasetIdKey: bench.name + bench.uploaded, label: bench.name, data: bench.ms.chartFormat, - backgroundColor: colors[index], - borderColor: colors[index], + backgroundColor: bench.color, + borderColor: bench.color, })), }} options={{ @@ -195,24 +184,18 @@ function LineMs({ ); } -function LineFps({ - data, - colors, -}: { - data: Data; - colors: typeof initialColors; -}) { +function LineFps({ data }: { data: Data }) { return (
({ + datasets: data.benches.map((bench) => ({ datasetIdKey: bench.name + bench.uploaded, label: bench.name, data: bench.fps.chartFormat, - backgroundColor: colors[index], - borderColor: colors[index], + backgroundColor: bench.color, + borderColor: bench.color, })), }} options={{ @@ -272,24 +255,18 @@ function LineFps({ ); } -function ScatterMs({ - data, - colors, -}: { - data: Data; - colors: typeof initialColors; -}) { +function ScatterMs({ data }: { data: Data }) { return (
({ + datasets: data.benches.map((bench) => ({ datasetIdKey: bench.name + bench.uploaded, label: bench.name, data: bench.ms.chartFormat, - backgroundColor: colors[index], - borderColor: colors[index], + backgroundColor: bench.color, + borderColor: bench.color, })), }} options={{ @@ -343,24 +320,18 @@ function ScatterMs({ ); } -function ScatterFps({ - data, - colors, -}: { - data: Data; - colors: typeof initialColors; -}) { +function ScatterFps({ data }: { data: Data }) { return (
({ + datasets: data.benches.map((bench) => ({ datasetIdKey: bench.name + bench.uploaded, label: bench.name, data: bench.fps.chartFormat, - backgroundColor: colors[index], - borderColor: colors[index], + backgroundColor: bench.color, + borderColor: bench.color, })), }} options={{ @@ -414,27 +385,21 @@ function ScatterFps({ ); } -function PercentilesFps({ - data, - colors, -}: { - data: Data; - colors: typeof initialColors; -}) { +function PercentilesFps({ data }: { data: Data }) { return (
({ + datasets: data.benches.map((bench) => ({ datasetIdKey: bench.name + bench.uploaded, label: bench.name, data: percentileList.map((percentile) => ({ x: percentile, y: bench.fps.metrics.percentiles[percentile], })), - backgroundColor: colors[index], - borderColor: colors[index], + backgroundColor: bench.color, + borderColor: bench.color, })), }} options={{ @@ -489,27 +454,21 @@ function PercentilesFps({ ); } -function LowsFps({ - data, - colors, -}: { - data: Data; - colors: typeof initialColors; -}) { +function LowsFps({ data }: { data: Data }) { return (
({ + datasets: data.benches.map((bench) => ({ datasetIdKey: bench.name + bench.uploaded, label: bench.name, data: percentileList.map((percentile) => ({ x: percentile, y: bench.fps.metrics.lows[percentile], })), - backgroundColor: colors[index], - borderColor: colors[index], + backgroundColor: bench.color, + borderColor: bench.color, })), }} options={{ @@ -564,13 +523,7 @@ function LowsFps({ ); } -function BoxFps({ - data, - colors, -}: { - data: Data; - colors: typeof initialColors; -}) { +function BoxFps({ data }: { data: Data }) { return (
({ + datasets: data.benches.map((bench) => ({ datasetIdKey: bench.name + bench.uploaded, label: bench.name, data: [ @@ -608,12 +561,12 @@ function BoxFps({ ], }, ], - backgroundColor: colors[index], - borderColor: colors[index], + backgroundColor: bench.color, + borderColor: bench.color, borderWidth: 3, medianColor: "rgb(150,150,150)", - outlierBackgroundColor: colors[index], - outlierBorderColor: colors[index], + outlierBackgroundColor: bench.color, + outlierBorderColor: bench.color, outlierRadius: 4, })), }} @@ -638,13 +591,7 @@ function BoxFps({ ); } -function BarFps({ - data, - colors, -}: { - data: Data; - colors: typeof initialColors; -}) { +function BarFps({ data }: { data: Data }) { return (
bench.color), textStrokeColor: "white", textStrokeWidth: 3, font: { weight: 700 }, @@ -720,27 +667,25 @@ function BarFps({ export default function DataDisplay({ data, - colors, chartTypes, chartsPerRow, }: { data: Data; - colors: typeof initialColors; chartTypes: typeof initialChartTypes; chartsPerRow: number; }) { return ( - {chartTypes[0].show && } + {chartTypes[0].show && } - {chartTypes[1].show && } - {chartTypes[2].show && } - {chartTypes[3].show && } - {chartTypes[4].show && } - {chartTypes[5].show && } - {chartTypes[6].show && } - {chartTypes[7].show && } - {chartTypes[8].show && } + {chartTypes[1].show && } + {chartTypes[2].show && } + {chartTypes[3].show && } + {chartTypes[4].show && } + {chartTypes[5].show && } + {chartTypes[6].show && } + {chartTypes[7].show && } + {chartTypes[8].show && } ); diff --git a/src/components/scripts.ts b/src/components/scripts.ts index 58177e5..522ba40 100644 --- a/src/components/scripts.ts +++ b/src/components/scripts.ts @@ -1,6 +1,8 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion */ import type { Bench, Data, Ms, Fps, Cfx } from "./types"; -import { percentileList, type sortOptions } from "./static"; +import { percentileList, type sortOptions, type initialColors } from "./static"; + +let benchIndex = 0; function calculateMetrics( ms: Pick, @@ -62,7 +64,11 @@ function calculateMetrics( }; } -function processCfxJson(name: string, bench: Cfx): Bench { +function processCfxJson( + name: string, + bench: Cfx, + colors: typeof initialColors +): Bench { let unsortedMs: number[] = []; const chartFormatMs: { x: number; y: number }[] = []; const unsortedFps: number[] = []; @@ -107,6 +113,7 @@ function processCfxJson(name: string, bench: Cfx): Bench { return { name, uploaded: Date.now().toString(), + color: colors[benchIndex++], duration, frames: unsortedMs.length, ...(dropped.length !== 0 && { @@ -149,7 +156,8 @@ function processCsv( lines: string[], lowerCaseSplitRow: string[], indicator: "msbetweenpresents" | "frametime" | "fps", - transformFunc: (arg0: number) => number + transformFunc: (arg0: number) => number, + colors: typeof initialColors ): Bench { const unsortedMs: number[] = []; const chartFormatMs: { x: number; y: number }[] = []; @@ -214,6 +222,7 @@ function processCsv( return { name, uploaded: Date.now().toString(), + color: colors[benchIndex++], duration, frames: unsortedMs.length, ...(droppedIndex !== -1 && { dropped }), @@ -238,7 +247,8 @@ export async function handleUpload( data: Data, setData: React.Dispatch>, sortBy: (typeof sortOptions)[number], - resetRef: React.RefObject<() => void> + resetRef: React.RefObject<() => void>, + colors: typeof initialColors ) { const newBenches: Bench[] = []; @@ -262,7 +272,8 @@ export async function handleUpload( lines.slice(index + 1), lowerCaseSplitRow, "msbetweenpresents", - (value) => value + (value) => value, + colors ) ); @@ -274,7 +285,8 @@ export async function handleUpload( lines.slice(index + 3), lines[index + 2].toLowerCase().trim().split(","), "frametime", - (value) => value + (value) => value, + colors ) ); @@ -286,7 +298,8 @@ export async function handleUpload( lines.slice(index + 1), lowerCaseSplitRow, "fps", - (value) => 1000 / value + (value) => 1000 / value, + colors ) ); @@ -295,7 +308,11 @@ export async function handleUpload( } } else if (name.endsWith(".json")) { newBenches.push( - processCfxJson(name.slice(0, -5), JSON.parse(await file.text()) as Cfx) + processCfxJson( + name.slice(0, -5), + JSON.parse(await file.text()) as Cfx, + colors + ) ); } } diff --git a/src/components/types.ts b/src/components/types.ts index 0ec1e46..6219253 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -1,6 +1,7 @@ export interface Bench { name: string; uploaded: string; + color: string; duration: number; frames: number; dropped?: number;