feat(components): make y-axis max value configurable

#264
GenSpectrum · Jun 25, 2024 · 87b2d6c · 87b2d6c
1 parent 6d7cba2
commit 87b2d6c
Show file tree

Hide file tree

Showing 14 changed files with 205 additions and 23 deletions.
diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time-bar-chart.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time-bar-chart.tsx
@@ -1,17 +1,20 @@
 import { Chart, type ChartConfiguration, registerables, type TooltipItem } from 'chart.js';
 import { BarWithErrorBar, BarWithErrorBarsController } from 'chartjs-chart-error-bars';
 
+import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
 import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
 import { type ConfidenceIntervalMethod, wilson95PercentConfidenceInterval } from '../shared/charts/confideceInterval';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface PrevalenceOverTimeBarChartProps {
     data: PrevalenceOverTimeData;
     yAxisScaleType: ScaleType;
     confidenceIntervalMethod: ConfidenceIntervalMethod;
+    yAxisMaxConfig?: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale, BarWithErrorBarsController, BarWithErrorBar);
@@ -20,7 +23,11 @@ const PrevalenceOverTimeBarChart = ({
     data,
     yAxisScaleType,
     confidenceIntervalMethod,
+    yAxisMaxConfig,
 }: PrevalenceOverTimeBarChartProps) => {
+    const maxY =
+        yAxisScaleType !== 'logit' ? getYAxisMax(maxInData(data), yAxisMaxConfig?.[yAxisScaleType]) : undefined;
+
     const config: ChartConfiguration = {
         type: BarWithErrorBarsController.id,
         data: {
@@ -31,7 +38,7 @@ const PrevalenceOverTimeBarChart = ({
             maintainAspectRatio: false,
             animation: false,
             scales: {
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {

diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx
@@ -1,28 +1,38 @@
 import { Chart, type ChartConfiguration, registerables } from 'chart.js';
 
+import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData } from '../../query/queryPrevalenceOverTime';
 import { addUnit, minusTemporal } from '../../utils/temporal';
 import { getMinMaxNumber } from '../../utils/utils';
 import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface PrevalenceOverTimeBubbleChartProps {
     data: PrevalenceOverTimeData;
     yAxisScaleType: ScaleType;
+    yAxisMaxConfig?: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale);
 
-const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverTimeBubbleChartProps) => {
+const PrevalenceOverTimeBubbleChart = ({
+    data,
+    yAxisScaleType,
+    yAxisMaxConfig,
+}: PrevalenceOverTimeBubbleChartProps) => {
     const firstDate = data[0].content[0].dateRange!;
     const total = data.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
     const [minTotal, maxTotal] = getMinMaxNumber(total)!;
     const scaleBubble = (value: number) => {
         return ((value - minTotal) / (maxTotal - minTotal)) * 4.5 + 0.5;
     };
 
+    const maxY =
+        yAxisScaleType !== 'logit' ? getYAxisMax(maxInData(data), yAxisMaxConfig?.[yAxisScaleType]) : undefined;
+
     const config: ChartConfiguration = {
         type: 'bubble',
         data: {
@@ -50,7 +60,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverT
                         callback: (value) => addUnit(firstDate, value as number).toString(),
                     },
                 },
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {

diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time-line-chart.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time-line-chart.tsx
@@ -1,6 +1,7 @@
 import { Chart, type ChartConfiguration, registerables } from 'chart.js';
 import { type TooltipItem } from 'chart.js/dist/types';
 
+import { maxInData } from './prevalence-over-time';
 import { type PrevalenceOverTimeData, type PrevalenceOverTimeVariantData } from '../../query/queryPrevalenceOverTime';
 import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
@@ -10,12 +11,14 @@ import {
     type ConfidenceIntervalMethod,
     wilson95PercentConfidenceInterval,
 } from '../shared/charts/confideceInterval';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface PrevalenceOverTimeLineChartProps {
     data: PrevalenceOverTimeData;
     yAxisScaleType: ScaleType;
     confidenceIntervalMethod: ConfidenceIntervalMethod;
+    yAxisMaxConfig?: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale);
@@ -24,10 +27,14 @@ const PrevalenceOverTimeLineChart = ({
     data,
     yAxisScaleType,
     confidenceIntervalMethod,
+    yAxisMaxConfig,
 }: PrevalenceOverTimeLineChartProps) => {
     const datasets = data.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod)).flat();
     const labels = data[0]?.content.map((dateRange) => dateRange.dateRange?.toString() ?? 'Unknown') || [];
 
+    const maxY =
+        yAxisScaleType !== 'logit' ? getYAxisMax(maxInData(data), yAxisMaxConfig?.[yAxisScaleType]) : undefined;
+
     const config: ChartConfiguration = {
         type: 'line',
         data: {
@@ -38,7 +45,7 @@ const PrevalenceOverTimeLineChart = ({
             animation: false,
             maintainAspectRatio: false,
             scales: {
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {

diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx
@@ -33,6 +33,7 @@ export default {
         height: { control: 'text' },
         headline: { control: 'text' },
         pageSize: { control: 'object' },
+        yAxisMaxConfig: { control: 'object' },
     },
 };
 
@@ -51,6 +52,7 @@ const Template = {
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
                 pageSize={args.pageSize}
+                yAxisMaxConfig={args.yAxisMaxConfig}
             />
         </LapisUrlContext.Provider>
     ),
@@ -73,6 +75,10 @@ export const TwoVariants = {
         headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {
@@ -146,6 +152,10 @@ export const OneVariant = {
         headline: 'Prevalence over time',
         lapisDateField: 'date',
         pageSize: 10,
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {

diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time.tsx b/components/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 } from '../shared/charts/confideceInterval';
+import type { YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
@@ -41,6 +42,7 @@ export interface PrevalenceOverTimeInnerProps {
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     lapisDateField: string;
     pageSize: boolean | number;
+    yAxisMaxConfig?: YAxisMaxConfig;
 }
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
@@ -55,6 +57,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     headline = 'Prevalence over time',
     lapisDateField,
     pageSize,
+    yAxisMaxConfig,
 }) => {
     const size = { height, width };
 
@@ -71,6 +74,7 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
                         confidenceIntervalMethods={confidenceIntervalMethods}
                         lapisDateField={lapisDateField}
                         pageSize={pageSize}
+                        yAxisMaxConfig={yAxisMaxConfig}
                     />
                 </Headline>
             </ResizeContainer>
@@ -87,6 +91,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
     confidenceIntervalMethods,
     lapisDateField,
     pageSize,
+    yAxisMaxConfig,
 }) => {
     const lapis = useContext(LapisUrlContext);
 
@@ -114,6 +119,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeInnerP
             granularity={granularity}
             confidenceIntervalMethods={confidenceIntervalMethods}
             pageSize={pageSize}
+            yAxisMaxConfig={yAxisMaxConfig}
         />
     );
 };
@@ -124,6 +130,7 @@ type PrevalenceOverTimeTabsProps = {
     granularity: TemporalGranularity;
     confidenceIntervalMethods: ConfidenceIntervalMethod[];
     pageSize: boolean | number;
+    yAxisMaxConfig?: YAxisMaxConfig;
 };
 
 const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = ({
@@ -132,6 +139,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     granularity,
     confidenceIntervalMethods,
     pageSize,
+    yAxisMaxConfig,
 }) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
@@ -148,6 +156,7 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };
@@ -159,13 +168,20 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
                             data={data}
                             yAxisScaleType={yAxisScaleType}
                             confidenceIntervalMethod={confidenceIntervalMethod}
+                            yAxisMaxConfig={yAxisMaxConfig}
                         />
                     ),
                 };
             case 'bubble':
                 return {
                     title: 'Bubble',
-                    content: <PrevalenceOverTimeBubbleChart data={data} yAxisScaleType={yAxisScaleType} />,
+                    content: (
+                        <PrevalenceOverTimeBubbleChart
+                            data={data}
+                            yAxisScaleType={yAxisScaleType}
+                            yAxisMaxConfig={yAxisMaxConfig}
+                        />
+                    ),
                 };
             case 'table':
                 return {
@@ -245,3 +261,6 @@ const PrevalenceOverTimeInfo: FunctionComponent = () => {
         </Info>
     );
 };
+
+export const maxInData = (data: PrevalenceOverTimeData) =>
+    Math.max(...data.flatMap((variant) => variant.content.map((dataPoint) => dataPoint.prevalence)));
diff --git a/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx b/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx
@@ -5,6 +5,7 @@ import GsChart from '../components/chart';
 import { LogitScale } from '../shared/charts/LogitScale';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { confidenceIntervalDataLabel } from '../shared/charts/confideceInterval';
+import { getYAxisMax, type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
 import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface RelativeGrowthAdvantageChartData {
@@ -25,11 +26,17 @@ interface RelativeGrowthAdvantageChartData {
 interface RelativeGrowthAdvantageChartProps {
     data: RelativeGrowthAdvantageChartData;
     yAxisScaleType: ScaleType;
+    yAxisMaxConfig?: YAxisMaxConfig;
 }
 
 Chart.register(...registerables, LogitScale);
 
-const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAdvantageChartProps) => {
+const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType, yAxisMaxConfig }: RelativeGrowthAdvantageChartProps) => {
+    const maxY =
+        yAxisScaleType !== 'logit'
+            ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig?.[yAxisScaleType])
+            : undefined;
+
     const config: ChartConfiguration = {
         type: 'line',
         data: {
@@ -39,8 +46,9 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
         options: {
             maintainAspectRatio: false,
             animation: false,
+
             scales: {
-                y: getYAxisScale(yAxisScaleType),
+                y: { ...getYAxisScale(yAxisScaleType), max: maxY },
             },
             plugins: {
                 legend: {

diff --git a/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx b/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx
@@ -21,6 +21,7 @@ export default {
         width: { control: 'text' },
         height: { control: 'text' },
         headline: { control: 'text' },
+        yAxisMaxConfig: { control: 'object' },
     },
 };
 
@@ -36,6 +37,7 @@ export const Primary = {
                 height={args.height}
                 headline={args.headline}
                 lapisDateField={args.lapisDateField}
+                yAxisMaxConfig={args.yAxisMaxConfig}
             />
         </LapisUrlContext.Provider>
     ),
@@ -48,6 +50,10 @@ export const Primary = {
         height: '700px',
         headline: 'Relative growth advantage',
         lapisDateField: 'date',
+        yAxisMaxConfig: {
+            linear: 1,
+            logarithmic: 1,
+        },
     },
     parameters: {
         fetchMock: {