Front: Graphes de Score (#248)

2023-07-26 12:00:06 +01:00
parent 567d3250e2
commit 20eb62d19b
6 changed files with 120 additions and 53 deletions
--- a/front/components/ScoreGraph.tsx
+++ b/front/components/ScoreGraph.tsx
@@ -0,0 +1,78 @@
+import { Box, useBreakpointValue, useTheme } from 'native-base';
+import { LineChart } from 'react-native-chart-kit';
+import { CardBorderRadius } from './Card';
+import SongHistory from '../models/SongHistory';
+import { useState } from 'react';
+
+type ScoreGraphProps = {
+	// The result of the call to API.getSongHistory
+	songHistory: SongHistory;
+};
+
+const formatScoreDate = (playDate: Date): string => {
+	const pad = (n: number) => n.toString().padStart(2, '0');
+	const formattedDate = `${pad(playDate.getDay())}/${pad(playDate.getMonth())}`;
+	const formattedTime = `${pad(playDate.getHours())}:${pad(playDate.getMinutes())}`;
+	return `${formattedDate} ${formattedTime}`;
+};
+
+const ScoreGraph = (props: ScoreGraphProps) => {
+	const theme = useTheme();
+	const [containerWidth, setContainerWidth] = useState(0);
+	// We sort the scores by date, asc.
+	// By default, the API returns them in desc.
+	// const pointsToDisplay = props.width / 100;
+	const isSmall = useBreakpointValue({ base: true, md: false });
+	const scores = props.songHistory.history
+		.sort((a, b) => {
+			if (a.playDate < b.playDate) {
+				return -1;
+			} else if (a.playDate > b.playDate) {
+				return 1;
+			}
+			return 0;
+		})
+		.slice(-10);
+
+	return (
+		<Box
+			bgColor={theme.colors.primary[500]}
+			style={{ width: '100%', borderRadius: CardBorderRadius }}
+			onLayout={(event) => setContainerWidth(event.nativeEvent.layout.width)}
+		>
+			<LineChart
+				data={{
+					labels: isSmall ? [] : scores.map(({ playDate }) => formatScoreDate(playDate)),
+					datasets: [
+						{
+							data: scores.map(({ score }) => score),
+						},
+					],
+				}}
+				width={containerWidth}
+				height={200} // Completely arbitrary
+				transparent={true}
+				yAxisSuffix=" pts"
+				chartConfig={{
+					decimalPlaces: 0,
+					color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
+					labelColor: () => theme.colors.white,
+					propsForDots: {
+						r: '6',
+						strokeWidth: '2',
+					},
+				}}
+				bezier
+				style={{
+					margin: 3,
+					shadowColor: theme.colors.primary[400],
+					shadowOpacity: 1,
+					shadowRadius: 20,
+					borderRadius: CardBorderRadius,
+				}}
+			/>
+		</Box>
+	);
+};
+
+export default ScoreGraph;