diff --git a/app/package-lock.json b/app/package-lock.json index b9cb5b1cf..2cc0184b9 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -37,7 +37,7 @@ "@trpc/client": "11.7.2", "@trpc/next": "11.7.2", "@trpc/react-query": "11.7.2", - "@trpc/server": "11.7.2", + "@trpc/server": "11.8.0", "@uidotdev/usehooks": "2.4.1", "@unleash/nextjs": "1.6.2", "@vercel/analytics": "1.6.1", @@ -6730,9 +6730,9 @@ } }, "node_modules/@trpc/server": { - "version": "11.7.2", - "resolved": "https://registry.npmjs.org/@trpc/server/-/server-11.7.2.tgz", - "integrity": "sha512-AgB26PXY69sckherIhCacKLY49rxE2XP5h38vr/KMZTbLCL1p8IuIoKPjALTcugC2kbyQ7Lbqo2JDVfRSmPmfQ==", + "version": "11.8.0", + "resolved": "https://registry.npmjs.org/@trpc/server/-/server-11.8.0.tgz", + "integrity": "sha512-DphyQnLuyX2nwJCQGWQ9zYz4hZGvRhSBqDhQ0SH3tDhQ3PU4u68xofA0pJ741Ir4InEAFD+TtJVLAQy+wVOkiQ==", "funding": [ "https://trpc.io/sponsor" ], diff --git a/app/package.json b/app/package.json index c27a7a9fc..bc0bbb2ba 100644 --- a/app/package.json +++ b/app/package.json @@ -40,7 +40,7 @@ "@trpc/client": "11.7.2", "@trpc/next": "11.7.2", "@trpc/react-query": "11.7.2", - "@trpc/server": "11.7.2", + "@trpc/server": "11.8.0", "@uidotdev/usehooks": "2.4.1", "@unleash/nextjs": "1.6.2", "@vercel/analytics": "1.6.1", diff --git a/app/src/modules/statistics/components/StatisticChart.tsx b/app/src/modules/statistics/components/StatisticChart.tsx index 397075423..c3d63c001 100644 --- a/app/src/modules/statistics/components/StatisticChart.tsx +++ b/app/src/modules/statistics/components/StatisticChart.tsx @@ -71,6 +71,12 @@ export const StatisticChart = ({ chart }: Props) => { ? chart.yAxes : [{ position: "left" as const }]; + const xAxisLabelSkipInterval = Math.max( + 0, + Math.ceil(chart.axisTimestamps.length / 5) - 1, + ); + const xAxisLabelInterval = xAxisLabelSkipInterval; + const option = { backgroundColor: "transparent", color: PALETTE, @@ -155,7 +161,7 @@ export const StatisticChart = ({ chart }: Props) => { data: chart.axisTimestamps, axisLabel: { color: "#737373", - interval: 0, + interval: xAxisLabelInterval, formatter: (value: number | string) => formatDate(new Date(Number(value)), "extra_short"), }, @@ -173,6 +179,8 @@ export const StatisticChart = ({ chart }: Props) => { type: "value", position: axis.position ?? (index === 0 ? "left" : "right"), name: axis.name, + // Keep the Y axis readable by limiting tick count. + splitNumber: 5, axisLabel: { color: axisLabelColor, }, @@ -201,6 +209,7 @@ export const StatisticChart = ({ chart }: Props) => { }, lineStyle: { width: 2, + ...serie.lineStyle, }, yAxisIndex: serie.yAxisIndex ?? 0, data: chart.axisTimestamps.map((_, index) => serie.data[index] ?? null), diff --git a/app/src/modules/statistics/queries.ts b/app/src/modules/statistics/queries.ts index 406d5d516..7c4bfcfb1 100644 --- a/app/src/modules/statistics/queries.ts +++ b/app/src/modules/statistics/queries.ts @@ -34,6 +34,10 @@ export interface StatisticSeries { name: string; data: (number | null)[]; yAxisIndex?: number; + lineStyle?: { + type?: "solid" | "dashed" | "dotted"; + width?: number; + }; } export interface StatisticYAxis { @@ -338,9 +342,13 @@ export const getTotalShipStatisticChart = cache( const series = chartData.series.map((serie) => serie.name === "Veränderung zum Vortag" ? { - ...serie, - yAxisIndex: 1, - } + ...serie, + yAxisIndex: 1, + lineStyle: { + type: "dashed" as const, + width: 1, + }, + } : serie, ); @@ -447,9 +455,13 @@ export const getTotalCitizenStatisticChart = cache( const series = chartData.series.map((serie) => serie.name === "Veränderung zum Vortag" ? { - ...serie, - yAxisIndex: 1, - } + ...serie, + yAxisIndex: 1, + lineStyle: { + type: "dashed" as const, + width: 1, + }, + } : serie, ); @@ -559,9 +571,13 @@ export const getTotalOrganizationStatisticChart = cache( const series = chartData.series.map((serie) => serie.name === "Veränderung zum Vortag" ? { - ...serie, - yAxisIndex: 1, - } + ...serie, + yAxisIndex: 1, + lineStyle: { + type: "dashed" as const, + width: 1, + }, + } : serie, ); @@ -673,9 +689,13 @@ export const getRegisteredUserStatisticChart = cache( const series = chartData.series.map((serie) => serie.name === "Veränderung zum Vortag" ? { - ...serie, - yAxisIndex: 1, - } + ...serie, + yAxisIndex: 1, + lineStyle: { + type: "dashed" as const, + width: 1, + }, + } : serie, ); @@ -751,9 +771,13 @@ export const getDailyLoginStatisticChart = cache( const series = chartData.series.map((serie) => serie.name === "Veränderung zum Vortag" ? { - ...serie, - yAxisIndex: 1, - } + ...serie, + yAxisIndex: 1, + lineStyle: { + type: "dashed" as const, + width: 1, + }, + } : serie, ); @@ -843,9 +867,13 @@ export const getEventsPerDayStatisticChart = cache( const series = chartData.series.map((serie) => serie.name === "Veränderung zum Vortag" ? { - ...serie, - yAxisIndex: 1, - } + ...serie, + yAxisIndex: 1, + lineStyle: { + type: "dashed" as const, + width: 1, + }, + } : serie, ); @@ -944,9 +972,13 @@ export const getDailySilcStatisticChart = cache( const series = chartData.series.map((serie) => serie.name === "Veränderung zum Vortag" ? { - ...serie, - yAxisIndex: 1, - } + ...serie, + yAxisIndex: 1, + lineStyle: { + type: "dashed" as const, + width: 1, + }, + } : serie, );