feat(components): number sequences over time: add logarithmic scale f…

…or charts

closes #333

components/src/preact/components/scaling-selector.tsx

@@ -7,18 +7,24 @@ export type ScalingSelectorProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
     className?: string;
+    enabledTypes?: ScaleType[];
 };
 
+const scaleTypeItem: { label: string; value: ScaleType }[] = [
+    { label: 'Linear', value: 'linear' },
+    { label: 'Logarithmic', value: 'logarithmic' },
+    { label: 'Logit', value: 'logit' },
+];
+
 export const ScalingSelector: FunctionComponent<ScalingSelectorProps> = ({
     yAxisScaleType,
     setYAxisScaleType,
     className,
+    enabledTypes,
 }) => {
     const items = [
         { label: 'y axis scaling type', value: 'none', disabled: true },
-        { label: 'Linear', value: 'linear' },
-        { label: 'Logarithmic', value: 'logarithmic' },
-        { label: 'Logit', value: 'logit' },
+        ...scaleTypeItem.filter((item) => enabledTypes === undefined || enabledTypes.includes(item.value)),
     ];
 
     return (

components/src/preact/numberSequencesOverTime/number-sequences-over-time-bar-chart.tsx

@@ -5,14 +5,16 @@ import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOve
 import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
 import GsChart from '../components/chart';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface NumberSequencesOverBarChartProps {
     data: NumberOfSequencesDatasets;
+    yAxisScaleType: ScaleType;
 }
 
 Chart.register(...registerables);
 
-export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBarChartProps) => {
+export const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'bar',
@@ -22,6 +24,11 @@ export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBar
             options: {
                 maintainAspectRatio: false,
                 animation: false,
+                scales: {
+                    y: {
+                        type: getYAxisScale(yAxisScaleType).type,
+                    },
+                },
                 plugins: {
                     legend: {
                         display: false,
@@ -33,7 +40,7 @@ export const NumberSequencesOverTimeBarChart = ({ data }: NumberSequencesOverBar
                 },
             },
         }),
-        [data],
+        [data, yAxisScaleType],
     );
 
     return <GsChart configuration={config} />;

components/src/preact/numberSequencesOverTime/number-sequences-over-time-line-chart.tsx

@@ -5,14 +5,16 @@ import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOve
 import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
 import GsChart from '../components/chart';
 import { singleGraphColorRGBAById } from '../shared/charts/colors';
+import { getYAxisScale, type ScaleType } from '../shared/charts/getYAxisScale';
 
 interface NumberSequencesOverBarChartProps {
     data: NumberOfSequencesDatasets;
+    yAxisScaleType: ScaleType;
 }
 
 Chart.register(...registerables);
 
-export const NumberSequencesOverTimeLineChart = ({ data }: NumberSequencesOverBarChartProps) => {
+export const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }: NumberSequencesOverBarChartProps) => {
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'line',
@@ -22,6 +24,11 @@ export const NumberSequencesOverTimeLineChart = ({ data }: NumberSequencesOverBa
             options: {
                 maintainAspectRatio: false,
                 animation: false,
+                scales: {
+                    y: {
+                        type: getYAxisScale(yAxisScaleType).type,
+                    },
+                },
                 plugins: {
                     legend: {
                         display: false,
@@ -33,7 +40,7 @@ export const NumberSequencesOverTimeLineChart = ({ data }: NumberSequencesOverBa
                 },
             },
         }),
-        [data],
+        [data, yAxisScaleType],
     );
 
     return <GsChart configuration={config} />;

components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'preact/hooks';
+import { useContext, useState } from 'preact/hooks';
 
 import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
 import { NumberSequencesOverTimeBarChart } from './number-sequences-over-time-bar-chart';
@@ -18,7 +18,9 @@ import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 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 type { ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
 type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
@@ -89,12 +91,20 @@ interface NumberSequencesOverTimeTabsProps {
 }
 
 const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: NumberSequencesOverTimeTabsProps) => {
+    const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
+
     const getTab = (view: NumberSequencesOverTimeView) => {
         switch (view) {
             case 'bar':
-                return { title: 'Bar', content: <NumberSequencesOverTimeBarChart data={data} /> };
+                return {
+                    title: 'Bar',
+                    content: <NumberSequencesOverTimeBarChart data={data} yAxisScaleType={yAxisScaleType} />,
+                };
             case 'line':
-                return { title: 'Line', content: <NumberSequencesOverTimeLineChart data={data} /> };
+                return {
+                    title: 'Line',
+                    content: <NumberSequencesOverTimeLineChart data={data} yAxisScaleType={yAxisScaleType} />,
+                };
             case 'table':
                 return {
                     title: 'Table',
@@ -106,18 +116,39 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: Num
     };
 
     return (
-        <Tabs tabs={views.map((view) => getTab(view))} toolbar={<Toolbar data={data} granularity={granularity} />} />
+        <Tabs
+            tabs={views.map((view) => getTab(view))}
+            toolbar={(activeTab) => (
+                <Toolbar
+                    activeTab={activeTab}
+                    data={data}
+                    granularity={granularity}
+                    yAxisScaleType={yAxisScaleType}
+                    setYAxisScaleType={setYAxisScaleType}
+                />
+            )}
+        />
     );
 };
 
 interface ToolbarProps {
+    activeTab: string;
     data: NumberOfSequencesDatasets;
     granularity: TemporalGranularity;
+    yAxisScaleType: ScaleType;
+    setYAxisScaleType: (scaleType: ScaleType) => void;
 }
 
-const Toolbar = ({ data, granularity }: ToolbarProps) => {
+const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }: ToolbarProps) => {
     return (
         <>
+            {activeTab !== 'Table' && (
+                <ScalingSelector
+                    yAxisScaleType={yAxisScaleType}
+                    setYAxisScaleType={setYAxisScaleType}
+                    enabledTypes={['linear', 'logarithmic']}
+                />
+            )}
             <CsvDownloadButton
                 className='mx-1 btn btn-xs'
                 getData={() => getNumberOfSequencesOverTimeTableData(data, granularity)}