diff --git a/src/components/BodyWeight/WeightChart/index.test.tsx b/src/components/BodyWeight/WeightChart/index.test.tsx index 25f616da..1e37f8c1 100644 --- a/src/components/BodyWeight/WeightChart/index.test.tsx +++ b/src/components/BodyWeight/WeightChart/index.test.tsx @@ -1,5 +1,5 @@ import { QueryClientProvider } from "@tanstack/react-query"; -import { render, screen } from '@testing-library/react'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import { WeightEntry } from "components/BodyWeight/model"; import React from 'react'; import { testQueryClient } from "tests/queryClient"; @@ -24,9 +24,8 @@ afterEach(() => { }); -describe("Test BodyWeight component", () => { - test('renders without crashing', async () => { - +describe("Test WeightChart component", () => { + test('renders without crashing with weight data', async () => { // Arrange const weightData = [ new WeightEntry(new Date('2021-12-10'), 80, 1), @@ -40,11 +39,30 @@ describe("Test BodyWeight component", () => { ); - // Renders without crashing + // Assert - Component renders without crashing + expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument(); // LineChart renders as SVG }); - test('errors get handled', () => { + test('renders with custom height prop', () => { + // Arrange + const weightData = [ + new WeightEntry(new Date('2021-12-10'), 80, 1), + new WeightEntry(new Date('2021-12-20'), 85, 2), + ]; + + // Act + const { container } = render( + + + + ); + + // Assert - Check that chart is rendered with custom height + const chart = container.querySelector('.recharts-wrapper'); + expect(chart).toBeInTheDocument(); + }); + test('handles empty weight data gracefully', () => { // Arrange const weightData: WeightEntry[] = []; @@ -55,12 +73,215 @@ describe("Test BodyWeight component", () => { ); + // Assert - No crash, chart still renders + expect(screen.queryByRole('img', { hidden: true })).toBeInTheDocument(); + }); + + test('calculates and displays EMA trend line', () => { + // Arrange + const weightData = [ + new WeightEntry(new Date('2021-12-01'), 80, 1), + new WeightEntry(new Date('2021-12-05'), 82, 2), + new WeightEntry(new Date('2021-12-10'), 81, 3), + new WeightEntry(new Date('2021-12-15'), 83, 4), + ]; + + // Act + const { container } = render( + + + + ); + + // Assert - Check for trend line in legend + expect(screen.getByText('Trend')).toBeInTheDocument(); + }); + + test('displays mean weight reference line', () => { + // Arrange + const weightData = [ + new WeightEntry(new Date('2021-12-01'), 80, 1), + new WeightEntry(new Date('2021-12-10'), 90, 2), + ]; + + // Act + const { container } = render( + + + + ); + + // Assert - Mean should be 85 (80 + 90) / 2 + expect(container.textContent).toContain('Mean'); + }); + + test('displays current trend reference line', () => { + // Arrange + const weightData = [ + new WeightEntry(new Date('2021-12-01'), 80, 1), + new WeightEntry(new Date('2021-12-10'), 85, 2), + ]; + + // Act + const { container } = render( + + + + ); + // Assert - // No weights are found in the document - const linkElement = screen.queryByText("80"); - expect(linkElement).toBeNull(); + expect(container.textContent).toContain('Current Trend'); + }); + + test('renders weight and trend in legend', () => { + // Arrange + const weightData = [ + new WeightEntry(new Date('2021-12-01'), 80, 1), + new WeightEntry(new Date('2021-12-10'), 85, 2), + ]; + + // Act + render( + + + + ); + + // Assert - Check legend items + expect(screen.getByText('Weight')).toBeInTheDocument(); + expect(screen.getByText('Trend')).toBeInTheDocument(); + }); + + test('sorts weight data by date', () => { + // Arrange - Weights provided out of order + const weightData = [ + new WeightEntry(new Date('2021-12-20'), 90, 2), + new WeightEntry(new Date('2021-12-10'), 80, 1), + new WeightEntry(new Date('2021-12-15'), 85, 3), + ]; + + // Act + const { container } = render( + + + + ); + + // Assert - Should render without errors (sorting happens internally) + expect(container.querySelector('.recharts-wrapper')).toBeInTheDocument(); + }); + + test('handles single weight entry', () => { + // Arrange + const weightData = [ + new WeightEntry(new Date('2021-12-10'), 80, 1), + ]; + + // Act + const { container } = render( + + + + ); + + // Assert - Should render without errors + expect(container.querySelector('.recharts-wrapper')).toBeInTheDocument(); + expect(screen.getByText('Weight')).toBeInTheDocument(); + }); + + test('custom dot renders with variance line', () => { + // Arrange + const weightData = [ + new WeightEntry(new Date('2021-12-01'), 80, 1), + new WeightEntry(new Date('2021-12-10'), 85, 2), + new WeightEntry(new Date('2021-12-20'), 82, 3), + ]; + + // Act + const { container } = render( + + + + ); + + // Assert - Check for circles (custom dots) in the SVG + const circles = container.querySelectorAll('circle'); + expect(circles.length).toBeGreaterThan(0); + + // Check for variance lines (dashed lines) + const lines = container.querySelectorAll('line[stroke-dasharray="2,2"]'); + expect(lines.length).toBeGreaterThan(0); + }); + + test('opens modal when clicking on weight dot', async () => { + // Arrange + const weightData = [ + new WeightEntry(new Date('2021-12-10'), 80, 1), + ]; + + // Act + const { container } = render( + + + + ); + + // Click on a weight dot (circle element) + const circles = container.querySelectorAll('circle'); + const weightDot = Array.from(circles).find(circle => + circle.getAttribute('style')?.includes('cursor: pointer') + ); + + if (weightDot) { + fireEvent.click(weightDot); + } + + // Assert - Modal should open (check for "edit" in the document) + await waitFor(() => { + // The modal title uses translation key 'edit' + expect(container.textContent).toContain('edit'); + }); + }); + + test('calculates EMA correctly with multiple data points', () => { + // Arrange - Data where we can verify EMA calculation + const weightData = [ + new WeightEntry(new Date('2021-12-01'), 100, 1), + new WeightEntry(new Date('2021-12-02'), 100, 2), + new WeightEntry(new Date('2021-12-03'), 100, 3), + ]; + + // Act + const { container } = render( + + + + ); + + // Assert - With constant weight, trend should converge to that weight + expect(container.textContent).toContain('Current Trend: 100.0'); + }); + + test('applies correct variance coloring (positive and negative)', () => { + // Arrange + const weightData = [ + new WeightEntry(new Date('2021-12-01'), 80, 1), + new WeightEntry(new Date('2021-12-10'), 85, 2), + new WeightEntry(new Date('2021-12-20'), 78, 3), + ]; + + // Act + const { container } = render( + + + + ); - const linkElement2 = screen.queryByText("90"); - expect(linkElement2).toBeNull(); + // Assert - Check for variance lines with different colors + const redLines = container.querySelectorAll('line[stroke="#ff6b6b"]'); // Positive variance + const greenLines = container.querySelectorAll('line[stroke="#51cf66"]'); // Negative variance + + // Should have both positive and negative variance lines + expect(redLines.length + greenLines.length).toBeGreaterThan(0); }); }); diff --git a/src/components/BodyWeight/WeightChart/index.tsx b/src/components/BodyWeight/WeightChart/index.tsx index b94063f2..131ff850 100644 --- a/src/components/BodyWeight/WeightChart/index.tsx +++ b/src/components/BodyWeight/WeightChart/index.tsx @@ -4,7 +4,7 @@ import { WeightEntry } from "components/BodyWeight/model"; import { WgerModal } from "components/Core/Modals/WgerModal"; import React from 'react'; import { useTranslation } from "react-i18next"; -import { CartesianGrid, DotProps, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts'; +import { CartesianGrid, DotProps, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis, Legend } from 'recharts'; import { dateToLocale } from "utils/date"; export interface WeightChartProps { @@ -19,14 +19,70 @@ export interface TooltipProps { label?: string, } +interface WeightDataPoint { + date: number; + weight: number; + entry: WeightEntry; +} + +interface EMADataPoint { + date: number; + weight: number; + ema: number; +} + +/** + * Calculate exponentially weighted moving average (EMA) + * Using the Hacker's Diet approach with approximately 10% smoothing + */ +const calculateEMA = (weights: WeightDataPoint[], period: number = 10): EMADataPoint[] => { + if (weights.length === 0) return []; + + // Smoothing factor: 2 / (period + 1) + // For period=10, this gives us ~0.18 (10% smoothing as in Hacker's Diet) + const smoothing = 2 / (period + 1); + + const emaData: EMADataPoint[] = []; + let ema = weights[0].weight; // Start with first measurement + + for (let i = 0; i < weights.length; i++) { + if (i === 0) { + ema = weights[i].weight; + } else { + // EMA = (Current Value × Smoothing) + (Previous EMA × (1 - Smoothing)) + ema = weights[i].weight * smoothing + ema * (1 - smoothing); + } + + emaData.push({ + date: weights[i].date, + weight: weights[i].weight, + ema: ema + }); + } + + return emaData; +}; + const CustomTooltip = ({ active, payload, label }: TooltipProps) => { const [t] = useTranslation(); if (active && payload && payload.length) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const actualWeight = payload.find((p: any) => p.dataKey === 'weight'); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const trendWeight = payload.find((p: any) => p.dataKey === 'ema'); + const variance = actualWeight && trendWeight ? actualWeight.value - trendWeight.value : 0; + return (

{dateToLocale(new Date(label!))}

-

{t('weight')}: {payload[0].value}

+ {actualWeight &&

{t('weight')}: {actualWeight.value.toFixed(1)}

} + {trendWeight &&

Trend: {trendWeight.value.toFixed(1)}

} + {actualWeight && trendWeight && ( +

0 ? '#ff6b6b' : '#51cf66' }}> + Variance: {variance > 0 ? '+' : ''}{variance.toFixed(1)} +

+ )} ); } @@ -34,9 +90,18 @@ const CustomTooltip = ({ active, payload, label }: TooltipProps) => { return null; }; +interface CustomDotProps extends DotProps { + cx?: number; + cy?: number; + payload?: EMADataPoint; + emaData: EMADataPoint[]; + yAxisDomain: [number, number]; + chartHeight: number; + onClick: (payload: EMADataPoint) => void; +} + export const WeightChart = ({ weights, height }: WeightChartProps) => { - const NR_OF_WEIGHTS_CHART_DOT = 30; height = height || 300; const theme = useTheme(); @@ -45,25 +110,99 @@ export const WeightChart = ({ weights, height }: WeightChartProps) => { const [currentEntry, setCurrentEntry] = React.useState(); const handleCloseModal = () => setIsModalOpen(false); - // map the list of weights to an array of objects with the date and weight - const weightData = [...weights].sort((a, b) => a.date.getTime() - b.date.getTime()).map(weight => { - return { - date: weight.date.getTime(), - weight: weight.weight, - entry: weight - }; - }); + // Sort and map the weights + const sortedWeights = [...weights].sort((a, b) => a.date.getTime() - b.date.getTime()); + const weightData: WeightDataPoint[] = sortedWeights.map(weight => ({ + date: weight.date.getTime(), + weight: weight.weight, + entry: weight + })); + + // Calculate EMA (exponentially weighted moving average) + const emaData = calculateEMA(weightData, 10); + + // Calculate mean weight + const meanWeight = weightData.length > 0 + ? weightData.reduce((sum, w) => sum + w.weight, 0) / weightData.length + : 0; + + // Get current trend (latest EMA value) + const currentTrend = emaData.length > 0 ? emaData[emaData.length - 1].ema : 0; + + // Calculate Y-axis domain for proper variance line positioning + const allWeights = emaData.flatMap(d => [d.weight, d.ema]); + const minWeight = Math.min(...allWeights); + const maxWeight = Math.max(...allWeights); + const padding = (maxWeight - minWeight) * 0.1; // 10% padding + const yAxisDomain: [number, number] = [minWeight - padding, maxWeight + padding]; /* * Edit the currently selected weight */ - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - function handleClick(e: DotProps, data: any) { - setCurrentEntry(data.payload.entry); - setIsModalOpen(true); + function handleClick(payload: EMADataPoint) { + const entry = weights.find(w => w.date.getTime() === payload.date); + if (entry) { + setCurrentEntry(entry); + setIsModalOpen(true); + } } + // Custom dot component that also renders variance lines + const CustomDot = (props: CustomDotProps) => { + const { cx, cy, payload, emaData, yAxisDomain, chartHeight, onClick } = props; + + if (cx === undefined || cy === undefined || !payload) { + return null; + } + + // Find the EMA value for this data point + const emaPoint = emaData.find(d => d.date === payload.date); + if (!emaPoint) { + return null; + } + + const variance = payload.weight - emaPoint.ema; + + // Calculate the y-coordinate for the EMA point + // Map the EMA value to the chart coordinate system + const [minY, maxY] = yAxisDomain; + const valueRange = maxY - minY; + const normalizedEma = (emaPoint.ema - minY) / valueRange; + + // In SVG, y=0 is at the top, so we need to invert + // Account for chart margins (approximately 5 pixels top and bottom) + const margin = 5; + const effectiveHeight = chartHeight - (2 * margin); + const emaY = margin + effectiveHeight * (1 - normalizedEma); + + return ( + + {/* Variance line from dot to trend */} + 0 ? '#ff6b6b' : '#51cf66'} + strokeWidth={1} + strokeDasharray="2,2" + opacity={0.5} + /> + {/* The actual dot */} + onClick(payload)} + /> + + ); + }; + return (
{ @@ -72,19 +211,7 @@ export const WeightChart = ({ weights, height }: WeightChartProps) => { } - - NR_OF_WEIGHTS_CHART_DOT ? false : { strokeWidth: 1, r: 4 }} - activeDot={{ - stroke: 'black', - strokeWidth: 1, - r: 6, - onClick: handleClick - }} /> + @@ -94,9 +221,76 @@ export const WeightChart = ({ weights, height }: WeightChartProps) => { domain={['dataMin', 'dataMax']} tickFormatter={timeStr => dateToLocale(new Date(timeStr))} /> - + + + {/* Mean weight reference line */} + + + {/* Current trend annotation */} + + + {/* Trend line (EMA) - smooth line */} + + + {/* Individual weight measurements - dots with variance lines */} + ( + + )} + activeDot={{ + stroke: 'black', + strokeWidth: 2, + r: 6, + }} + name="Weight" + legendType="circle" + /> + } /> +
); -}; \ No newline at end of file +};