-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components): number of sequences over time: implement table view
closes #318
- Loading branch information
1 parent
da0eddd
commit 621f06e
Showing
8 changed files
with
219 additions
and
14 deletions.
There are no files selected for viewing
75 changes: 75 additions & 0 deletions
75
components/src/preact/numberSequencesOverTime/getNumberOfSequencesOverTimeTableData.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
import { describe, expect, test } from 'vitest'; | ||
|
||
import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData'; | ||
import { yearMonth } from '../../utils/temporalTestHelpers'; | ||
|
||
describe('getNumberOfSequencesOverTimeTableData', () => { | ||
test('should return empty array if no data', () => { | ||
const result = getNumberOfSequencesOverTimeTableData([], 'day'); | ||
|
||
expect(result).to.deep.equal([]); | ||
}); | ||
|
||
test('should generate missing date ranges for non-overlapping datasets', () => { | ||
const data = [ | ||
{ | ||
displayName: 'dataset1', | ||
content: [{ count: 1, dateRange: yearMonth('2023-01') }], | ||
}, | ||
{ | ||
displayName: 'dataset2', | ||
content: [{ count: 3, dateRange: yearMonth('2023-04') }], | ||
}, | ||
]; | ||
|
||
const result = getNumberOfSequencesOverTimeTableData(data, 'month'); | ||
|
||
expect(result).to.deep.equal([ | ||
{ | ||
dataset1: 1, | ||
dataset2: 0, | ||
month: '2023-01', | ||
}, | ||
{ | ||
dataset1: 0, | ||
dataset2: 0, | ||
month: '2023-02', | ||
}, | ||
{ | ||
dataset1: 0, | ||
dataset2: 0, | ||
month: '2023-03', | ||
}, | ||
{ | ||
dataset1: 0, | ||
dataset2: 3, | ||
month: '2023-04', | ||
}, | ||
]); | ||
}); | ||
|
||
test('should maps null date ranges to "unknown"', () => { | ||
const data = [ | ||
{ | ||
displayName: 'dataset1', | ||
content: [ | ||
{ count: 5, dateRange: null }, | ||
{ count: 4, dateRange: yearMonth('2023-04') }, | ||
], | ||
}, | ||
]; | ||
|
||
const result = getNumberOfSequencesOverTimeTableData(data, 'month'); | ||
|
||
expect(result).to.deep.equal([ | ||
{ | ||
dataset1: 5, | ||
month: 'Unknown', | ||
}, | ||
{ | ||
dataset1: 4, | ||
month: '2023-04', | ||
}, | ||
]); | ||
}); | ||
}); |
38 changes: 38 additions & 0 deletions
38
components/src/preact/numberSequencesOverTime/getNumberOfSequencesOverTimeTableData.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import type { NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime'; | ||
import type { TemporalGranularity } from '../../types'; | ||
import { generateAllInRange, getMinMaxTemporal, type Temporal } from '../../utils/temporal'; | ||
|
||
export const getNumberOfSequencesOverTimeTableData = ( | ||
data: NumberOfSequencesDatasets, | ||
granularity: TemporalGranularity, | ||
) => { | ||
const datasetsWithCountByDate = data.map(({ displayName, content }) => ({ | ||
displayName, | ||
content: new Map(content.map((datum) => [datum.dateRange?.toString(), datum])), | ||
})); | ||
|
||
const allDateRangesThatOccurInData = datasetsWithCountByDate | ||
.map(({ content }) => [...content.values()].map((datum) => datum.dateRange)) | ||
.reduce((acc, keys) => new Set([...acc, ...keys]), new Set<Temporal | null>()); | ||
|
||
const minMax = getMinMaxTemporal(allDateRangesThatOccurInData); | ||
if (minMax === null) { | ||
return []; | ||
} | ||
|
||
const allDateRanges: (Temporal | null)[] = generateAllInRange(...minMax); | ||
|
||
if (allDateRangesThatOccurInData.has(null)) { | ||
allDateRanges.unshift(null); | ||
} | ||
|
||
return allDateRanges.map((dateRange) => { | ||
return datasetsWithCountByDate.reduce( | ||
(acc, dataset) => ({ | ||
...acc, | ||
[dataset.displayName]: dataset.content.get(dateRange?.toString())?.count ?? 0, | ||
}), | ||
{ [granularity]: dateRange?.toString() ?? 'Unknown' } as Record<string, number | string>, | ||
); | ||
}); | ||
}; |
32 changes: 32 additions & 0 deletions
32
components/src/preact/numberSequencesOverTime/number-sequences-over-time-table.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { useMemo } from 'preact/hooks'; | ||
|
||
import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData'; | ||
import { type NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime'; | ||
import { type TemporalGranularity } from '../../types'; | ||
import { Table } from '../components/table'; | ||
|
||
interface NumberSequencesOverTimeTableProps { | ||
data: NumberOfSequencesDatasets; | ||
granularity: TemporalGranularity; | ||
pageSize: boolean | number; | ||
} | ||
|
||
export const NumberSequencesOverTimeTable = ({ data, granularity, pageSize }: NumberSequencesOverTimeTableProps) => { | ||
const columns = [ | ||
{ | ||
name: granularity, | ||
sort: true, | ||
}, | ||
...data.map((dataset) => ({ | ||
name: dataset.displayName, | ||
sort: true, | ||
})), | ||
]; | ||
|
||
const flatTableData = useMemo(() => { | ||
const tableData = getNumberOfSequencesOverTimeTableData(data, granularity); | ||
return Object.values(tableData).map((row) => Object.values(row)); | ||
}, [data, granularity]); | ||
|
||
return <Table data={flatTableData} columns={columns} pageSize={pageSize} />; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { TemporalCache, YearMonth, YearMonthDay } from './temporal'; | ||
|
||
export function yearMonthDay(date: string) { | ||
return YearMonthDay.parse(date, TemporalCache.getInstance()); | ||
} | ||
|
||
export function yearMonth(date: string) { | ||
return YearMonth.parse(date, TemporalCache.getInstance()); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters