- Add unit tests for DashboardChartPanel to ensure re-rendering does not throw errors with changing datasets.

- Refactor chart options to use a constant for text color in dashboard components.
- Update DashboardPage to utilize new chart text color constant.
- Enhance date input field in dashboardDayPersonSections with max attribute for better date handling.
- Adjust monthly sections to ensure consistent prop usage across components.
- Improve chart options for monthly team distribution to handle compact view based on data length.
#deploy-test-dolly-frontend

Author: stigus

apps/dolly-frontend/src/main/js/src/__tests__/pages/adminPages/Dashboard/dashboardChartPanel.test.tsx

@@ -0,0 +1,60 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { DashboardChartPanel } from '@/pages/adminPages/Dashboard/dashboardSharedComponents'
+import { createPersonTrendChartOptions } from '@/pages/adminPages/Dashboard/dashboardTrendChartOptions'
+import type { PersonTrendPoint } from '@/pages/adminPages/Dashboard/dashboardUtils'
+
+const makePoints = (count: number, base: number): PersonTrendPoint[] =>
+	Array.from({ length: count }, (_, index) => ({
+		dato: `2026-01-${String(index + 1).padStart(2, '0')}`,
+		datoVisning: `${index + 1}. jan`,
+		personerTotalt: base * 10 + index,
+		nye: base + index,
+		gjenopprettede: base + index + 1,
+		pdlFeil: index,
+		andreFeil: index + 1,
+	}))
+
+const visibilityOptions = {
+	personerTotaltVisible: false,
+	feilTotaltVisible: false,
+	onPersonerTotaltVisibilityChange: () => undefined,
+	onFeilTotaltVisibilityChange: () => undefined,
+}
+
+const optionsFor = (count: number, base: number) =>
+	createPersonTrendChartOptions(makePoints(count, base), visibilityOptions)
+
+describe('DashboardChartPanel', () => {
+	it('should re-render across changing datasets without throwing (Highcharts 13 setData regression)', () => {
+		const { rerender } = render(
+			<DashboardChartPanel options={optionsFor(7, 0)} ariaLabel="Persontrend" />,
+		)
+
+		const transitions = [optionsFor(7, 9), optionsFor(20, 5), optionsFor(5, 3), optionsFor(31, 2)]
+		transitions.forEach((nextOptions) => {
+			expect(() =>
+				rerender(<DashboardChartPanel options={nextOptions} ariaLabel="Persontrend" />),
+			).not.toThrow()
+		})
+	})
+
+	it('should not throw when re-rendered with structurally unchanged options', () => {
+		const points = makePoints(12, 5)
+		const { rerender } = render(
+			<DashboardChartPanel
+				options={createPersonTrendChartOptions(points, visibilityOptions)}
+				ariaLabel="Persontrend"
+			/>,
+		)
+
+		expect(() =>
+			rerender(
+				<DashboardChartPanel
+					options={createPersonTrendChartOptions(points, visibilityOptions)}
+					ariaLabel="Persontrend"
+				/>,
+			),
+		).not.toThrow()
+	})
+})

apps/dolly-frontend/src/main/js/src/pages/adminPages/Dashboard/DashboardPage.tsx

@@ -12,7 +12,7 @@ import { useErDollyAdmin } from '@/utils/DollyAdmin'
 import { Alert, Box, Loader, VStack } from '@navikt/ds-react'
 import Highcharts from 'highcharts'
 import HighchartsAccessibility from 'highcharts/modules/accessibility'
-import { MONTH_SCOPE_ALL } from './dashboardUtils'
+import { CHART_TEXT_COLOR } from '@/pages/adminPages/Dashboard/dashboardChartBase'
 import { QUICK_RANGE_OPTIONS, useDashboardData } from './useDashboardData'
 
 const initAccessibilityModule =
@@ -21,6 +21,23 @@ const initAccessibilityModule =
 		: (HighchartsAccessibility as { default?: (chartInstance: typeof Highcharts) => void }).default
 initAccessibilityModule?.(Highcharts)
 
+Highcharts.setOptions({
+	xAxis: {
+		labels: { style: { color: CHART_TEXT_COLOR, fontSize: '12px' } },
+		title: { style: { color: CHART_TEXT_COLOR } },
+	},
+	yAxis: {
+		labels: { style: { color: CHART_TEXT_COLOR, fontSize: '12px' } },
+		title: { style: { color: CHART_TEXT_COLOR } },
+	},
+	legend: {
+		itemStyle: { color: CHART_TEXT_COLOR },
+		itemHoverStyle: { color: CHART_TEXT_COLOR },
+	},
+	title: { style: { color: CHART_TEXT_COLOR } },
+	subtitle: { style: { color: CHART_TEXT_COLOR } },
+})
+
 export default () => {
 	const isAdmin = useErDollyAdmin()
 	const d = useDashboardData()
@@ -115,10 +132,10 @@ export default () => {
 				<MonthlyTeamDistributionSection
 					yearOptions={d.teamYearOptions}
 					selectedYear={d.selectedTeamYear}
-					monthOptions={d.teamMonthOptions}
 					onSelectedYearChange={d.onSelectedTeamYearChange}
-					selectedInterval={d.selectedTeamInterval}
+					monthOptions={d.teamMonthOptions}
 					onSelectedIntervalChange={d.onSelectedTeamIntervalChange}
+					selectedInterval={d.selectedTeamInterval}
 					selectedMonthlyPoint={d.selectedMonthlyPoint}
 					teamDistribution={d.teamDistribution}
 					monthlyDistributionChartOptions={d.monthlyDistributionChartOptions}
@@ -139,21 +156,20 @@ export default () => {
 					secondaryTotalLabel="Antall organisasjoner totalt"
 					yearOptions={d.organisasjonYearOptions}
 					selectedYear={d.selectedOrganisasjonYear}
-					monthOptions={d.organisasjonMonthOptions}
 					onSelectedYearChange={d.onSelectedOrganisasjonYearChange}
-					selectedInterval={d.selectedOrganisasjonInterval}
+					monthOptions={d.organisasjonMonthOptions}
 					onSelectedIntervalChange={d.onSelectedOrganisasjonIntervalChange}
+					selectedInterval={d.selectedOrganisasjonInterval}
 					selectedMonthlyPoint={d.selectedOrganisasjonPoint}
 					teamDistribution={d.organisasjonDistribution}
 					monthlyDistributionChartOptions={d.organisasjonDistributionChartOptions}
 				/>
 
 				<MonthlyTeamTrendSection
 					title="Dolly-team statistikk"
-					showScopeToggle={false}
 					filteredMonthlyTeamPointsLength={d.filteredDollyTeamsPointsLength}
-					monthScope={MONTH_SCOPE_ALL}
-					onMonthScopeChange={() => undefined}
+					monthScope={d.dollyTeamsMonthScope}
+					onMonthScopeChange={d.onDollyTeamsMonthScopeChange}
 					monthlyTrendChartOptions={d.dollyTeamsMonthlyTrendChartOptions}
 				/>
 
@@ -164,10 +180,10 @@ export default () => {
 					secondaryTotalLabel="Antall teams totalt"
 					yearOptions={d.dollyTeamsYearOptions}
 					selectedYear={d.selectedDollyTeamsYear}
-					monthOptions={d.dollyTeamsMonthOptions}
 					onSelectedYearChange={d.onSelectedDollyTeamsYearChange}
-					selectedInterval={d.selectedDollyTeamsInterval}
+					monthOptions={d.dollyTeamsMonthOptions}
 					onSelectedIntervalChange={d.onSelectedDollyTeamsIntervalChange}
+					selectedInterval={d.selectedDollyTeamsInterval}
 					selectedMonthlyPoint={d.selectedDollyTeamsPoint}
 					teamDistribution={d.dollyTeamsDistribution}
 					monthlyDistributionChartOptions={d.dollyTeamsDistributionChartOptions}

apps/dolly-frontend/src/main/js/src/pages/adminPages/Dashboard/dashboardChartBase.ts

@@ -1,5 +1,7 @@
 import { type Options } from 'highcharts'
 
+export const CHART_TEXT_COLOR = '#23262A'
+
 export const CHART_COLORS = [
 	'var(--ax-accent-700)',
 	'var(--ax-success-700)',
@@ -75,7 +77,7 @@ export const TOOLTIP_OPTIONS: Options['tooltip'] = {
 	padding: 12,
 	shadow: false,
 	style: {
-		color: '#23262A',
+		color: CHART_TEXT_COLOR,
 		fontSize: '13px',
 	},
 	outside: true,

apps/dolly-frontend/src/main/js/src/pages/adminPages/Dashboard/dashboardDayPersonSections.tsx

@@ -187,6 +187,7 @@ export const PersonAnalysisSection = ({
 				<TextField
 					label="Fra dato"
 					type="date"
+					max={tilDatoMax}
 					value={fraDato}
 					onChange={(event) => onFraDatoChange(event.target.value)}
 				/>

apps/dolly-frontend/src/main/js/src/pages/adminPages/Dashboard/dashboardMonthlySections.tsx

@@ -67,10 +67,10 @@ export const MonthlyTeamDistributionSection = ({
 	secondaryTotalLabel = 'Antall teams totalt',
 	yearOptions,
 	selectedYear,
-	monthOptions,
 	onSelectedYearChange,
-	selectedInterval,
+	monthOptions,
 	onSelectedIntervalChange,
+	selectedInterval,
 	selectedMonthlyPoint,
 	teamDistribution,
 	monthlyDistributionChartOptions,
@@ -81,10 +81,10 @@ export const MonthlyTeamDistributionSection = ({
 	secondaryTotalLabel?: string
 	yearOptions: string[]
 	selectedYear: string
-	monthOptions: { value: string; label: string }[]
 	onSelectedYearChange: (value: string) => void
-	selectedInterval: string
+	monthOptions: { value: string; label: string }[]
 	onSelectedIntervalChange: (value: string) => void
+	selectedInterval: string
 	selectedMonthlyPoint: {
 		interval: string
 		intervalVisning: string

apps/dolly-frontend/src/main/js/src/pages/adminPages/Dashboard/dashboardMonthlyTeamChartOptions.ts

@@ -2,17 +2,21 @@ import { type Options } from 'highcharts'
 import { BAR_COLUMN_PLOT_OPTIONS, TOOLTIP_OPTIONS, withBaseChart } from './dashboardChartBase'
 import { TeamDistributionPoint } from './dashboardUtils'
 
+const COMPACT_THRESHOLD = 10
 const BAR_HEIGHT_PER_CATEGORY = 28
+const BAR_HEIGHT_PER_CATEGORY_COMPACT = 20
 const BAR_CHART_VERTICAL_PADDING = 80
 const BAR_CHART_MIN_HEIGHT = 320
 
 export const createMonthlyTeamDistributionChartOptions = (
 	teamDistributionData: TeamDistributionPoint[],
 	seriesName = 'Unike brukere',
 ): Options => {
+	const isCompact = teamDistributionData.length >= COMPACT_THRESHOLD
+	const heightPerCategory = isCompact ? BAR_HEIGHT_PER_CATEGORY_COMPACT : BAR_HEIGHT_PER_CATEGORY
 	const chartHeight = Math.max(
 		BAR_CHART_MIN_HEIGHT,
-		teamDistributionData.length * BAR_HEIGHT_PER_CATEGORY + BAR_CHART_VERTICAL_PADDING,
+		teamDistributionData.length * heightPerCategory + BAR_CHART_VERTICAL_PADDING,
 	)
 	return {
 		...withBaseChart('Stolpediagram med fordeling per team i valgt måned.', {
@@ -30,7 +34,11 @@ export const createMonthlyTeamDistributionChartOptions = (
 		},
 		legend: { enabled: false },
 		tooltip: { ...TOOLTIP_OPTIONS, pointFormat: '<b>{point.y}</b>' },
-		plotOptions: { bar: BAR_COLUMN_PLOT_OPTIONS },
+		plotOptions: {
+			bar: isCompact
+				? { ...BAR_COLUMN_PLOT_OPTIONS, pointPadding: 0.05, groupPadding: 0.07 }
+				: BAR_COLUMN_PLOT_OPTIONS,
+		},
 		series: [
 			{
 				type: 'bar',

apps/dolly-frontend/src/main/js/src/pages/adminPages/Dashboard/dashboardPreviousDayChartOptions.ts

@@ -96,6 +96,7 @@ export const createPreviousDayErrorBreakdownChartOptions = (
 	series: [
 		{
 			type: 'pie',
+			borderColor: 'white',
 			name: 'Feil',
 			data: [
 				{

apps/dolly-frontend/src/main/js/src/pages/adminPages/Dashboard/dashboardSharedComponents.tsx

@@ -1,7 +1,7 @@
 import Highcharts, { type Options } from 'highcharts'
 import { Alert, Box, Button, Heading, HGrid, HStack, Label, VStack } from '@navikt/ds-react'
 import { HighchartsReact } from 'highcharts-react-official'
-import { type ReactNode, useEffect, useRef } from 'react'
+import { type ReactNode, useEffect, useMemo, useRef } from 'react'
 
 export type DashboardSelectOption = {
 	value: string
@@ -99,6 +99,9 @@ export const DashboardChartPanel = ({
 				? chartHeightOption
 				: '320px'
 
+	const optionsSignature = JSON.stringify(options)
+	const stableOptions = useMemo(() => options, [optionsSignature])
+
 	useEffect(() => {
 		const chart = chartRef.current?.chart
 		if (!chart) return
@@ -115,7 +118,8 @@ export const DashboardChartPanel = ({
 				<HighchartsReact
 					ref={chartRef}
 					highcharts={Highcharts}
-					options={options}
+					options={stableOptions}
+					immutable
 					containerProps={{ style: { width: '100%', height: containerHeight } }}
 				/>
 			</Box>

apps/dolly-frontend/src/main/js/src/pages/adminPages/Dashboard/dashboardTrendChartOptions.ts

@@ -51,24 +51,6 @@ export const createPersonTrendChartOptions = (
 			itemMarginBottom: 4,
 		},
 		series: [
-			{ type: 'line', name: 'Nye', data: personTrendData.map((point) => point.nye) },
-			{
-				type: 'line',
-				name: 'Gjenopprettede',
-				data: personTrendData.map((point) => point.gjenopprettede),
-			},
-			{
-				type: 'line',
-				name: 'PDL-feil',
-				data: personTrendData.map((point) => point.pdlFeil),
-				color: ERROR_PRIMARY_COLOR,
-			},
-			{
-				type: 'line',
-				name: 'Andre feil',
-				data: personTrendData.map((point) => point.andreFeil),
-				color: ERROR_SECONDARY_COLOR,
-			},
 			{
 				type: 'line',
 				name: 'Personer totalt',
@@ -79,6 +61,12 @@ export const createPersonTrendChartOptions = (
 					hide: () => visibilityOptions?.onPersonerTotaltVisibilityChange?.(false),
 				},
 			},
+			{ type: 'line', name: 'Nye', data: personTrendData.map((point) => point.nye) },
+			{
+				type: 'line',
+				name: 'Gjenopprettede',
+				data: personTrendData.map((point) => point.gjenopprettede),
+			},
 			{
 				type: 'line',
 				name: 'Feil totalt',
@@ -89,6 +77,18 @@ export const createPersonTrendChartOptions = (
 					hide: () => visibilityOptions?.onFeilTotaltVisibilityChange?.(false),
 				},
 			},
+			{
+				type: 'line',
+				name: 'PDL-feil',
+				data: personTrendData.map((point) => point.pdlFeil),
+				color: ERROR_PRIMARY_COLOR,
+			},
+			{
+				type: 'line',
+				name: 'Andre feil',
+				data: personTrendData.map((point) => point.andreFeil),
+				color: ERROR_SECONDARY_COLOR,
+			},
 		],
 	})