feat(client): chunithm graphs, song durations (#1284)

* feat: chunithm score graph

* feat: add life

* feat: add song duration data for all songs

* fix: make chunithm graphs non-nullable

* fix: test data

* fix: potrząsanie kanalizacją

* fix: misleading old function name

* fix: make duration optional for chunithm

* fix: add the missing duration

Author: nyairobi

…c/components/charts/OngekiScoreChart.tsx …/components/charts/GekichuScoreChart.tsxclient/src/components/charts/OngekiScoreChart.tsx renamed to client/src/components/charts/GekichuScoreChart.tsx client/src/components/charts/OngekiScoreChart.tsx renamed to client/src/components/charts/GekichuScoreChart.tsx

@@ -11,7 +11,7 @@ import {
 	PointTooltipProps,
 	LineSvgProps,
 } from "@nivo/line";
-import { COLOUR_SET, Difficulties } from "tachi-common";
+import { COLOUR_SET, Difficulties, Game } from "tachi-common";
 import { GPT_CLIENT_IMPLEMENTATIONS } from "lib/game-implementations";
 import ChartTooltip from "./ChartTooltip";
 
@@ -22,21 +22,39 @@ const formatTime = (s: DatumValue) =>
 		.toString()
 		.padStart(2, "0")}`;
 
-const scoreToLamp = (s: number) => {
-	switch (s) {
-		case 970000:
-			return "S";
-		case 990000:
-			return "SS";
-		case 1000000:
-			return "SSS";
-		case 1007500:
-			return "SSS+";
+const getScoreYAxisNotch = (game: Game) => (s: number) => {
+	if (game === "ongeki") {
+		switch (s) {
+			case 970_000:
+				return "S";
+			case 990_000:
+				return "SS";
+			case 1000_000:
+				return "SSS";
+			case 1007_500:
+				return "SSS+";
+		}
+	}
+	if (game === "chunithm") {
+		switch (s) {
+			case 990_000:
+				return "S+";
+			case 1000_000:
+				return "SS";
+			case 1005_000:
+				return "SS+";
+			case 1007_500:
+				return "SSS";
+			case 1009_000:
+				return "SSS+";
+		}
 	}
 	return "";
 };
 
-const strokeColor = (type: Difficulties["ongeki:Single"] | "BELLS") => {
+const strokeColor = (
+	type: Difficulties["ongeki:Single"] | Difficulties["chunithm:Single"] | "BELLS"
+) => {
 	const isLight = getTheme() === "light";
 	switch (type) {
 		case "BASIC":
@@ -49,21 +67,26 @@ const strokeColor = (type: Difficulties["ongeki:Single"] | "BELLS") => {
 			return `hsl(280, 60%, ${isLight ? 35 : 67}%)`;
 		case "BELLS":
 			return `hsl(55, 90%, ${isLight ? 35 : 42}%)`;
+		case "ULTIMA":
+			return `hsl(360, 50%, ${isLight ? 35 : 67}%)`;
 		default:
 			return `hsl(0, 0%, ${isLight ? 35 : 67}%)`;
 	}
 };
 
-const limitScoreGraph = (data: Serie[]) => {
+const limitScoreGraph = (game: Game, data: Serie[]) => {
 	for (const val of data[0].data) {
-		if (val.y === null || val.y === undefined) {
+		if (typeof val.y !== "number") {
 			break;
 		}
-		if (val.y < 970000) {
+		if (game === "ongeki" && val.y < 970_000) {
 			// 969999 will be used to represent values below S
 			// Without this, the line would cross the bottom axis
 			// which looks very bad
-			val.y = 969999;
+			val.y = 969_999;
+		}
+		if (game === "chunithm" && val.y < 990_000) {
+			val.y = 989_999;
 		}
 	}
 	return data;
@@ -77,7 +100,7 @@ const bellFloor = (data: Datum[], totalBellCount: number) => {
 		: clamp(-totalBellCount, Math.floor(lowestValue * 1.333), -1);
 };
 
-export default function OngekiScoreChart({
+export default function GekichuScoreChart({
 	width = "100%",
 	height = "100%",
 	mobileHeight = "100%",
@@ -86,28 +109,46 @@ export default function OngekiScoreChart({
 	difficulty,
 	totalBellCount,
 	data,
+	game,
+	duration,
 }: {
 	mobileHeight?: number | string;
 	mobileWidth?: number | string;
 	width?: number | string;
 	height?: number | string;
 	type: "Score" | "Bells" | "Life";
-	difficulty: Difficulties["ongeki:Single"];
-	totalBellCount: number;
+	difficulty: Difficulties["ongeki:Single"] | Difficulties["chunithm:Single"];
+	totalBellCount?: number;
 	data: Serie[];
+	game: Game;
+	duration: number;
 } & ResponsiveLine["props"]) {
-	const color =
-		type === "Score"
-			? GPT_CLIENT_IMPLEMENTATIONS["ongeki:Single"].difficultyColours[difficulty]
-			: type === "Bells"
-			? COLOUR_SET.vibrantYellow
-			: COLOUR_SET.vibrantGreen;
+	let color = COLOUR_SET.gray;
+
+	if (type === "Score") {
+		if (game === "chunithm") {
+			color =
+				GPT_CLIENT_IMPLEMENTATIONS["chunithm:Single"].difficultyColours[
+					difficulty as Difficulties["chunithm:Single"]
+				];
+		} else if (game === "ongeki") {
+			color =
+				GPT_CLIENT_IMPLEMENTATIONS["ongeki:Single"].difficultyColours[
+					difficulty as Difficulties["ongeki:Single"]
+				];
+		}
+	} else if (type === "Bells") {
+		color = COLOUR_SET.vibrantYellow;
+	} else {
+		color = COLOUR_SET.vibrantGreen;
+	}
+
 	const gradientId = type === "Score" ? difficulty : type;
 
 	const commonProps: Omit<LineSvgProps, "data"> = {
 		margin: { top: 30, bottom: 50, left: 50, right: 50 },
 		enableGridX: false,
-		xScale: { type: "linear", min: 0, max: data[0].data.length - 1 },
+		xScale: { type: "linear", min: 0, max: duration },
 		axisBottom: { format: (d: number) => formatTime(d) },
 		motionConfig: "stiff",
 		crosshairType: "x",
@@ -134,43 +175,68 @@ export default function OngekiScoreChart({
 
 	let component;
 	if (type === "Score") {
-		component = (
-			<ResponsiveLine
-				{...commonProps}
-				data={limitScoreGraph(data)}
-				yScale={{ type: "linear", min: 970000, max: 1010000 }}
-				yFormat={">-,.0f"}
-				axisLeft={{
-					tickValues: [970000, 990000, 1000000, 1007500, 1010000],
-					format: scoreToLamp,
-				}}
-				gridYValues={[970000, 980000, 990000, 1000000, 1007500, 1010000]}
-				enableGridY={true}
-				colors={strokeColor(difficulty)}
-				areaBaselineValue={970000}
-				tooltip={(d: PointTooltipProps) => (
-					<ChartTooltip>
-						{d.point.data.y === 969999 ? "< 970,000 " : d.point.data.yFormatted}@{" "}
-						{formatTime(d.point.data.x)}
-					</ChartTooltip>
-				)}
-			/>
-		);
+		if (game === "ongeki") {
+			component = (
+				<ResponsiveLine
+					{...commonProps}
+					data={limitScoreGraph(game, data)}
+					yScale={{ type: "linear", min: 970000, max: 1010000 }}
+					yFormat={">-,.0f"}
+					axisLeft={{
+						tickValues: [970000, 990000, 1000000, 1007500, 1010000],
+						format: getScoreYAxisNotch(game),
+					}}
+					gridYValues={[970000, 980000, 990000, 1000000, 1007500, 1010000]}
+					enableGridY={true}
+					colors={strokeColor(difficulty)}
+					areaBaselineValue={970000}
+					tooltip={(d: PointTooltipProps) => (
+						<ChartTooltip>
+							{d.point.data.y === 969999 ? "< 970,000 " : d.point.data.yFormatted}@{" "}
+							{formatTime(d.point.data.x)}
+						</ChartTooltip>
+					)}
+				/>
+			);
+		} else if (game === "chunithm") {
+			component = (
+				<ResponsiveLine
+					{...commonProps}
+					data={limitScoreGraph(game, data)}
+					yScale={{ type: "linear", min: 990_000, max: 1010_000 }}
+					yFormat={">-,.0f"}
+					axisLeft={{
+						tickValues: [990_000, 1000_000, 1005_000, 1007_500, 1009_000, 1010_000],
+						format: getScoreYAxisNotch(game),
+					}}
+					gridYValues={[990_000, 1000_000, 1005_000, 1007_500, 1009_000, 1010_000]}
+					enableGridY={true}
+					colors={strokeColor(difficulty)}
+					areaBaselineValue={990000}
+					tooltip={(d: PointTooltipProps) => (
+						<ChartTooltip>
+							{d.point.data.y === 989_999 ? "< 990,000 " : d.point.data.yFormatted}@{" "}
+							{formatTime(d.point.data.x)}
+						</ChartTooltip>
+					)}
+				/>
+			);
+		}
 	} else if (type === "Bells") {
 		component = (
 			<ResponsiveLine
 				{...commonProps}
 				data={data}
 				yScale={{
 					type: "linear",
-					min: bellFloor(data[0].data, totalBellCount),
+					min: bellFloor(data[0].data, totalBellCount!),
 					max: 0,
 					stacked: false,
 				}}
 				enableGridY={false}
 				axisLeft={{ format: (e: number) => Math.floor(e) === e && e }}
 				colors={strokeColor("BELLS")}
-				areaBaselineValue={bellFloor(data[0].data, totalBellCount)}
+				areaBaselineValue={bellFloor(data[0].data, totalBellCount!)}
 				tooltip={(d: PointTooltipProps) => (
 					<ChartTooltip>
 						MAX{d.point.data.y === 0 ? "" : d.point.data.y} @{" "}
@@ -179,19 +245,22 @@ export default function OngekiScoreChart({
 				)}
 			/>
 		);
-	} else {
+	} else if (type === "Life") {
+		const max = game === "ongeki" ? 100 : (data[0].data[0].y as number);
+		const suffix = game === "ongeki" ? "%" : "";
 		component = (
 			<ResponsiveLine
 				{...commonProps}
 				data={data}
-				yScale={{ type: "linear", min: 0, max: 100 }}
+				yScale={{ type: "linear", min: 0, max }}
 				enableGridY={false}
-				axisLeft={{ format: (d: number) => `${d}%` }}
+				axisLeft={{ format: (d: number) => `${d}${suffix}` }}
 				colors={strokeColor("BASIC")}
 				areaBaselineValue={0}
 				tooltip={(d: PointTooltipProps) => (
 					<ChartTooltip>
-						{d.point.data.y}% @ {formatTime(d.point.data.x)}
+						{d.point.data.y}
+						{suffix} @ {formatTime(d.point.data.x)}
 					</ChartTooltip>
 				)}
 			/>

client/src/components/tables/dropdowns/GPTDropdownSettings.tsx

@@ -4,6 +4,7 @@ import { IIDXGraphsComponent } from "./components/IIDXScoreDropdownParts";
 import { ITGGraphsComponent } from "./components/ITGScoreDropdownParts";
 import { JubeatGraphsComponent } from "./components/JubeatScoreDropdownParts";
 import { OngekiGraphsComponent } from "./components/OngekiScoreDropdownParts";
+import { ChunithmGraphsComponent } from "./components/ChunithmScoreDropdownParts";
 
 export function GPTDropdownSettings(game: Game, playtype: Playtype): any {
 	if (game === "iidx") {
@@ -33,6 +34,11 @@ export function GPTDropdownSettings(game: Game, playtype: Playtype): any {
 			renderScoreInfo: true,
 			GraphComponent: OngekiGraphsComponent as any,
 		};
+	} else if (game === "chunithm") {
+		return {
+			renderScoreInfo: true,
+			GraphComponent: ChunithmGraphsComponent as any,
+		};
 	}
 
 	return {};

client/src/components/tables/dropdowns/PBDropdown.tsx

@@ -148,6 +148,7 @@ export default function PBDropdown({
 				pbData={data}
 				scoreState={scoreState}
 				chart={chart}
+				song={song}
 			/>
 		);
 	}

client/src/components/tables/dropdowns/ScoreDropdown.tsx

@@ -120,10 +120,11 @@ export default function ScoreDropdown({
 				onScoreUpdate={onScoreUpdate}
 				pbData={data}
 				chart={chart}
+				song={song}
 			/>
 		);
 	} else if (view === "vsPB") {
-		body = <PBCompare data={data} DocComponent={DocComponent} scoreState={scoreState} />;
+		body = <PBCompare data={data} DocComponent={DocComponent as any} scoreState={scoreState} />;
 	} else if (view === "manage") {
 		body = <DeleteScoreBtn score={thisScore} />;
 	} else if (view === "targets") {