@genspectrum/dashboard-components 0.15.0 → 0.16.0

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -21,6 +21,7 @@ import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ConfidenceIntervalMethod, confidenceIntervalMethodSchema } from '../shared/charts/confideceInterval';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 import { axisMaxSchema } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
@@ -35,7 +36,7 @@ export type PrevalenceOverTimeView = z.infer<typeof prevalenceOverTimeViewSchema
 
 const prevalenceOverTimePropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     numeratorFilters: z.array(namedLapisFilterSchema).min(1),
     denominatorFilter: lapisFilterSchema,
     granularity: temporalGranularitySchema,
@@ -117,6 +118,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     }, [confidenceIntervalMethods]);
 
     const yAxisMaxConfig = { linear: yAxisMaxLinear, logarithmic: yAxisMaxLogarithmic };
+    const maintainAspectRatio = getMaintainAspectRatio(componentProps.height);
 
     const getTab = (view: PrevalenceOverTimeView) => {
         switch (view) {
@@ -129,6 +131,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
                             yAxisMaxConfig={yAxisMaxConfig}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };
@@ -141,6 +144,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
                             yAxisMaxConfig={yAxisMaxConfig}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };
@@ -152,6 +156,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             yAxisMaxConfig={yAxisMaxConfig}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx

@@ -1,4 +1,5 @@
 import { Chart, type ChartConfiguration, registerables, type TooltipItem } from 'chart.js';
+import { useMemo } from 'preact/hooks';
 
 import { type YearMonthDayClass } from '../../utils/temporalClass';
 import GsChart from '../components/chart';
@@ -28,37 +29,44 @@ interface RelativeGrowthAdvantageChartProps {
     data: RelativeGrowthAdvantageChartData;
     yAxisScaleType: ScaleType;
     yAxisMaxConfig: YAxisMaxConfig;
+    maintainAspectRatio: boolean;
 }
 
 Chart.register(...registerables, LogitScale);
 
-const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType, yAxisMaxConfig }: RelativeGrowthAdvantageChartProps) => {
-    const maxY =
-        yAxisScaleType !== 'logit'
-            ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig?.[yAxisScaleType])
-            : undefined;
+const RelativeGrowthAdvantageChart = ({
+    data,
+    yAxisScaleType,
+    yAxisMaxConfig,
+    maintainAspectRatio,
+}: RelativeGrowthAdvantageChartProps) => {
+    const config = useMemo<ChartConfiguration>(() => {
+        const maxY =
+            yAxisScaleType !== 'logit'
+                ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig?.[yAxisScaleType])
+                : undefined;
 
-    const config: ChartConfiguration = {
-        type: 'line',
-        data: {
-            labels: data.t,
-            datasets: datasets(data),
-        },
-        options: {
-            maintainAspectRatio: false,
-            animation: false,
-
-            scales: {
-                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+        return {
+            type: 'line',
+            data: {
+                labels: data.t,
+                datasets: datasets(data),
             },
-            plugins: {
-                legend: {
-                    display: false,
+            options: {
+                maintainAspectRatio,
+                animation: false,
+                scales: {
+                    y: { ...getYAxisScale(yAxisScaleType), max: maxY },
+                },
+                plugins: {
+                    legend: {
+                        display: false,
+                    },
+                    tooltip: tooltip(),
                 },
-                tooltip: tooltip(),
             },
-        },
-    };
+        };
+    }, [data, yAxisScaleType, yAxisMaxConfig, maintainAspectRatio]);
 
     return (
         <div className='flex h-full flex-col'>

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -45,7 +45,6 @@ export const Primary: StoryObj<RelativeGrowthAdvantageProps> = {
         generationTime: 7,
         views: ['line'],
         width: '100%',
-        height: '700px',
         lapisDateField: 'date',
         yAxisMaxLinear: 1,
         yAxisMaxLogarithmic: 1,

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -18,6 +18,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 import { axisMaxSchema } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
@@ -27,7 +28,7 @@ export type RelativeGrowthAdvantageView = z.infer<typeof relativeGrowthAdvantage
 
 export const relativeGrowthAdvantagePropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     numeratorFilter: lapisFilterSchema,
     denominatorFilter: lapisFilterSchema,
     generationTime: z.number(),
@@ -102,6 +103,8 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
     setYAxisScaleType,
     originalComponentProps,
 }) => {
+    const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
+
     const getTab = (view: RelativeGrowthAdvantageView) => {
         switch (view) {
             case 'line':
@@ -119,6 +122,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
                                 linear: originalComponentProps.yAxisMaxLinear,
                                 logarithmic: originalComponentProps.yAxisMaxLogarithmic,
                             }}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };