feat(components): add scale selector to relative growth advantage

Resolves #67

components/src/components/relativeGrowthAdvantage/relative-growth-advantage-chart.ts

@@ -1,7 +1,9 @@
 import { customElement, property } from 'lit/decorators.js';
 import { html, LitElement } from 'lit';
-import { Chart, registerables } from 'chart.js';
+import { Chart, ChartConfiguration, registerables } from 'chart.js';
 import { YearMonthDay } from '../../temporal';
+import { getYAxisScale, ScaleType } from '../container/component-scaling-selector';
+import { LogitScale } from '../charts/LogitScale';
 
 @customElement('gs-relative-growth-advantage-chart')
 export class RelativeGrowthAdvantageChart extends LitElement {
@@ -20,10 +22,20 @@ export class RelativeGrowthAdvantageChart extends LitElement {
         observed: [],
     };
 
+    @property()
+    yAxisScaleType: ScaleType = 'linear';
+
+    private chart?: Chart;
+
     override firstUpdated() {
-        const ctx = this.renderRoot.querySelector('canvas')!.getContext('2d')!;
-        Chart.register(...registerables);
-        new Chart(ctx, {
+        const ctx = this.renderRoot.querySelector('canvas')?.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+
+        Chart.register(...registerables, LogitScale);
+        const config: ChartConfiguration = {
+            type: 'line',
             data: {
                 labels: this.data.t,
                 datasets: [
@@ -59,9 +71,9 @@ export class RelativeGrowthAdvantageChart extends LitElement {
             options: {
                 animation: false,
                 scales: {
-                    y: {
-                        beginAtZero: true,
-                    },
+                    // chart.js typings are not complete with custom scales
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    y: getYAxisScale(this.yAxisScaleType) as any,
                 },
                 plugins: {
                     legend: {
@@ -73,7 +85,23 @@ export class RelativeGrowthAdvantageChart extends LitElement {
                     },
                 },
             },
-        });
+        };
+
+        this.chart = new Chart(ctx, config);
+    }
+
+    override updated(changedProperties: Map<string | number | symbol, unknown>): void {
+        if (changedProperties.has('yAxisScaleType')) {
+            this.updateChartScale();
+        }
+    }
+
+    updateChartScale(): void {
+        if (!this.chart) return;
+        // chart.js typings are not complete with custom scales
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.chart.options.scales!.y = getYAxisScale(this.yAxisScaleType) as any;
+        this.chart.update();
     }
 
     override render() {

components/src/components/relativeGrowthAdvantage/relative-growth-advantage.stories.ts

@@ -26,14 +26,16 @@ export default meta;
 
 const Template: StoryObj<RelativeGrowthAdvantageProps> = {
     render: (args) => html`
-        <gs-app lapis="${LAPIS_URL}">
-            <gs-relative-growth-advantage
-                .numerator=${args.numerator}
-                .denominator=${args.denominator}
-                .generationTime=${args.generationTime}
-                .views=${args.views}
-            ></gs-relative-growth-advantage>
-        </gs-app>
+        <div class="w-11/12 h-11/12">
+            <gs-app lapis="${LAPIS_URL}">
+                <gs-relative-growth-advantage
+                    .numerator=${args.numerator}
+                    .denominator=${args.denominator}
+                    .generationTime=${args.generationTime}
+                    .views=${args.views}
+                ></gs-relative-growth-advantage>
+            </gs-app>
+        </div>
     `,
 };
 

components/src/components/relativeGrowthAdvantage/relative-growth-advantage.ts

@@ -10,6 +10,7 @@ import { type LapisFilter } from '../../types';
 import { lapisContext } from '../../lapis-context';
 import { consume } from '@lit/context';
 import { queryRelativeGrowthAdvantage, RelativeGrowthAdvantageData } from '../../query/queryRelativeGrowthAdvantage';
+import { ScaleType } from '../container/component-scaling-selector';
 
 type View = 'line';
 
@@ -37,6 +38,25 @@ export class RelativeGrowthAdvantage extends LitElement {
     @property({ type: Array })
     views: View[] = ['line'];
 
+    yAxisScaleType: ScaleType = 'linear';
+
+    private setYAxisScaleType = (scaleType: ScaleType) => {
+        this.yAxisScaleType = scaleType;
+        this.requestUpdate();
+    };
+
+    private getScalingSelector() {
+        return html`
+            <gs-component-scaling-selector
+                .setYAxisScaleType=${(scaleType: ScaleType) => {
+                    this.setYAxisScaleType(scaleType);
+                }}
+                currentScaleType=${this.yAxisScaleType}
+            >
+            </gs-component-scaling-selector>
+        `;
+    }
+
     private fetchingTask = new Task(this, {
         task: async ([lapis, numerator, denominator, generationTime], { signal }) => {
             return await queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, signal);
@@ -46,14 +66,14 @@ export class RelativeGrowthAdvantage extends LitElement {
 
     heading: string = 'Relative growth advantage';
 
-    getViewTitle(view: View) {
+    private getViewTitle(view: View) {
         switch (view) {
             case 'line':
                 return 'Line';
         }
     }
 
-    getLineChartView(data: NonNullable<RelativeGrowthAdvantageData>) {
+    private getLineChartView(data: NonNullable<RelativeGrowthAdvantageData>) {
         const info = html` <gs-component-info content="Line chart"></gs-component-info>`;
 
         return html`
@@ -63,6 +83,7 @@ export class RelativeGrowthAdvantage extends LitElement {
                         ...data.estimatedProportions,
                         observed: data.observedProportions,
                     }}
+                    yAxisScaleType=${this.yAxisScaleType}
                 ></gs-relative-growth-advantage-chart>
                 <div>
                     Advantage: ${(data.params.fd.value * 100).toFixed(2)}%
@@ -72,7 +93,7 @@ export class RelativeGrowthAdvantage extends LitElement {
         `;
     }
 
-    getViewContent(view: View, data: NonNullable<RelativeGrowthAdvantageData>) {
+    private getViewContent(view: View, data: NonNullable<RelativeGrowthAdvantageData>) {
         switch (view) {
             case 'line':
                 return this.getLineChartView(data);
@@ -98,9 +119,11 @@ export class RelativeGrowthAdvantage extends LitElement {
                     };
                 });
 
+                const toolbar = this.getScalingSelector();
+
                 return html`
                     <gs-component-headline heading=${this.heading}>
-                        <gs-component-tabs .tabs=${tabs}></gs-component-tabs>
+                        <gs-component-tabs .tabs=${tabs} .toolbar=${toolbar}></gs-component-tabs>
                     </gs-component-headline>
                 `;
             },