diff --git a/components/src/preact/components/scaling-selector.tsx b/components/src/preact/components/scaling-selector.tsx index 69c1b78c..2513c067 100644 --- a/components/src/preact/components/scaling-selector.tsx +++ b/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 = ({ 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 ( diff --git a/components/src/preact/numberSequencesOverTime/number-sequences-over-time-bar-chart.tsx b/components/src/preact/numberSequencesOverTime/number-sequences-over-time-bar-chart.tsx index 6e38db07..37138070 100644 --- a/components/src/preact/numberSequencesOverTime/number-sequences-over-time-bar-chart.tsx +++ b/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 ; diff --git a/components/src/preact/numberSequencesOverTime/number-sequences-over-time-line-chart.tsx b/components/src/preact/numberSequencesOverTime/number-sequences-over-time-line-chart.tsx index 35c2bd83..81ae81b0 100644 --- a/components/src/preact/numberSequencesOverTime/number-sequences-over-time-line-chart.tsx +++ b/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 ; diff --git a/components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx b/components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx index e9a313fd..61035868 100644 --- a/components/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx +++ b/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('linear'); + const getTab = (view: NumberSequencesOverTimeView) => { switch (view) { case 'bar': - return { title: 'Bar', content: }; + return { + title: 'Bar', + content: , + }; case 'line': - return { title: 'Line', content: }; + return { + title: 'Line', + content: , + }; case 'table': return { title: 'Table', @@ -106,18 +116,39 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }: Num }; return ( - getTab(view))} toolbar={} /> + getTab(view))} + toolbar={(activeTab) => ( + + )} + /> ); }; 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' && ( + + )} getNumberOfSequencesOverTimeTableData(data, granularity)} diff --git a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-43ba6-one-dataset-bar-chart-should-match-screenshot-1-chromium-linux.png b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-43ba6-one-dataset-bar-chart-should-match-screenshot-1-chromium-linux.png index d7bf76cc..4a7acc6d 100644 Binary files a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-43ba6-one-dataset-bar-chart-should-match-screenshot-1-chromium-linux.png and b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-43ba6-one-dataset-bar-chart-should-match-screenshot-1-chromium-linux.png differ diff --git a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-43ba6-one-dataset-bar-chart-should-match-screenshot-1-firefox-linux.png b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-43ba6-one-dataset-bar-chart-should-match-screenshot-1-firefox-linux.png index 5cd39b90..cc1a075c 100644 Binary files a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-43ba6-one-dataset-bar-chart-should-match-screenshot-1-firefox-linux.png and b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-43ba6-one-dataset-bar-chart-should-match-screenshot-1-firefox-linux.png differ diff --git a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-a36f3-non-overlapping-dates-should-match-screenshot-1-chromium-linux.png b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-a36f3-non-overlapping-dates-should-match-screenshot-1-chromium-linux.png index f3277f55..0c004d42 100644 Binary files a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-a36f3-non-overlapping-dates-should-match-screenshot-1-chromium-linux.png and b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-a36f3-non-overlapping-dates-should-match-screenshot-1-chromium-linux.png differ diff --git a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-a36f3-non-overlapping-dates-should-match-screenshot-1-firefox-linux.png b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-a36f3-non-overlapping-dates-should-match-screenshot-1-firefox-linux.png index ab0a9eed..0b17706f 100644 Binary files a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-a36f3-non-overlapping-dates-should-match-screenshot-1-firefox-linux.png and b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-a36f3-non-overlapping-dates-should-match-screenshot-1-firefox-linux.png differ diff --git a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-af907-ne-dataset-line-chart-should-match-screenshot-1-chromium-linux.png b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-af907-ne-dataset-line-chart-should-match-screenshot-1-chromium-linux.png index 80fb52b1..36241dcf 100644 Binary files a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-af907-ne-dataset-line-chart-should-match-screenshot-1-chromium-linux.png and b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-af907-ne-dataset-line-chart-should-match-screenshot-1-chromium-linux.png differ diff --git a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-af907-ne-dataset-line-chart-should-match-screenshot-1-firefox-linux.png b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-af907-ne-dataset-line-chart-should-match-screenshot-1-firefox-linux.png index 5e778c2f..19a91ba7 100644 Binary files a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-af907-ne-dataset-line-chart-should-match-screenshot-1-firefox-linux.png and b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-af907-ne-dataset-line-chart-should-match-screenshot-1-firefox-linux.png differ diff --git a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-chromium-linux.png b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-chromium-linux.png index 9ece0aeb..889420d9 100644 Binary files a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-chromium-linux.png and b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-chromium-linux.png differ diff --git a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-firefox-linux.png b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-firefox-linux.png index 91e3f075..2617841f 100644 Binary files a/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-firefox-linux.png and b/components/tests/snapshots.spec.ts-snapshots/Number-of-sequences-of-time-Story-visualizatio-ffd47-er-time--two-datasets-should-match-screenshot-1-firefox-linux.png differ