feat: add logarithmic and logistic scale to prevalence over time charts

components/.eslintignore

@@ -4,3 +4,5 @@ docs-src/*
 rollup-config.js
 custom-elements.json
 web-dev-server.config.js
+build/*
+storybook-static/*

components/.gitignore

@@ -4,3 +4,6 @@
 /build/
 custom-elements.json
 components.iml
+.env
+componets/storybook-static/
+/storybook-static/*

components/package.json

@@ -35,6 +35,7 @@
         "@lit/context": "^1.1.0",
         "@lit/task": "^1.0.0",
         "chart.js": "^4.4.1",
+        "daisyui": "^4.7.2",
         "dayjs": "^1.11.10",
         "lit": "^3.1.2"
     },

components/src/components/charts/LogisticScale.ts

@@ -0,0 +1,47 @@
+import { Scale } from 'chart.js';
+import { Chart } from 'chart.js/dist/types';
+
+export class LogisticScale extends Scale {
+    static id = 'logistic';
+
+    constructor(cfg: { id: string; type: string; ctx: CanvasRenderingContext2D; chart: Chart }) {
+        super(cfg);
+        this.min = 0.001;
+        this.max = 0.999;
+    }
+
+    override buildTicks() {
+        const ticks: { value: number }[] = [];
+
+        const tickValues = [this.min, 0.01, 0.1, 0.5, 0.9, 0.99, this.max];
+
+        tickValues.forEach((value) => {
+            ticks.push({ value: value });
+        });
+
+        this.ticks = ticks;
+        return this.ticks;
+    }
+
+    getLogit(value: number): number {
+        if (value <= 0) {
+            return -Infinity;
+        }
+        if (value >= 1) {
+            return Infinity;
+        }
+
+        return Math.log(value / (1 - value));
+    }
+
+    override getPixelForValue(value: number): number {
+        const logitMin = this.getLogit(this.min);
+        const logitMax = this.getLogit(this.max);
+
+        const logitValue = this.getLogit(value);
+
+        const decimal = (logitValue - logitMin) / (logitMax - logitMin);
+
+        return this.getPixelForDecimal(decimal);
+    }
+}

components/src/components/container/component-scaling-selector.stories.ts

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+import { Meta, StoryObj } from '@storybook/web-components';
+import './component-scaling-selector';
+
+const meta: Meta = {
+    title: 'Component/Scaling Selector',
+    component: 'gs-component-scaling-selector',
+};
+
+export default meta;
+
+const Template: StoryObj = {
+    render: () => html`<gs-component-scaling-selector />`,
+};
+
+export const ScalingSelectorStory = {
+    ...Template,
+};

components/src/components/container/component-scaling-selector.ts

@@ -0,0 +1,40 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type scaleType = 'linear' | 'logarithmic' | 'logistic';
+
+@customElement('gs-component-scaling-selector')
+export class ComponentScalingSelector extends LitElement {
+    @property({ attribute: false })
+    setYAxisScaleType: (scaleType: scaleType) => void = () => {};
+
+    @property({ type: String })
+    currentScaleType: scaleType = 'linear';
+
+    private scales = [
+        { label: 'Linear', value: 'linear' },
+        { label: 'Logarithmic', value: 'logarithmic' },
+        { label: 'Logistic', value: 'logistic' },
+    ];
+
+    private onChange(event: Event) {
+        const select = event.target as HTMLSelectElement;
+        const value = select.value as scaleType;
+        this.setYAxisScaleType(value);
+    }
+
+    override render() {
+        const scaleOptions = this.scales.map((scale) => {
+            return html` <option value="${scale.value}" ?selected=${this.currentScaleType === scale.value}>
+                ${scale.label}
+            </option>`;
+        });
+
+        return html`
+            <select class="select select-bordered" @change="${this.onChange}">
+                <option disabled selected>Pick your y axis scaling</option>
+                ${scaleOptions}
+            </select>
+        `;
+    }
+}

components/src/components/container/component-toolbar-button-checkboxes.stories.ts

@@ -0,0 +1,45 @@
+import { html } from 'lit';
+import { Meta, StoryObj } from '@storybook/web-components';
+import { renderAllNoneOrCommaSeparated } from './component-toolbar-button-checkboxes';
+
+const meta: Meta = {
+    title: 'Toolbar/Toolbar button checkboxes',
+    component: 'gs-component-toolbar-button-checkboxes',
+    argTypes: {
+        options: {
+            options: ['firstOption', 'secondOption'],
+            control: { type: 'check' },
+            defaultValue: ['firstOption'],
+        },
+        selected: {
+            options: ['firstOption', 'secondOption'],
+            control: { type: 'check' },
+            defaultValue: ['firstOption'],
+        },
+        prefix: {
+            control: { type: 'text' },
+            defaultValue: 'somePrefix: ',
+        },
+    },
+};
+
+export default meta;
+
+const Template: StoryObj = {
+    render: (args) =>
+        html` <gs-component-toolbar-button-checkboxes
+            .options=${args.options}
+            .renderButtonLabel=${renderAllNoneOrCommaSeparated(args.options.length, args.prefix)}
+            .selected=${args.selected}
+        >
+        </gs-component-toolbar-button-checkboxes>`,
+};
+
+export const ButtonCheckboxesStory = {
+    ...Template,
+    args: {
+        options: ['firstOption', 'secondOption'],
+        selected: ['firstOption'],
+        prefix: 'somePrefix: ',
+    },
+};