@genspectrum/dashboard-components 0.11.4 → 0.11.6

package/src/utils/temporal.spec.ts

@@ -68,15 +68,69 @@ describe('YearMonthDay', () => {
 });
 
 describe('YearWeek', () => {
-    it('should parse from string', () => {
-        const underTest = YearWeekClass.parse('2020-W02', cache);
+    const examples = [
+        {
+            string: '2020-W01',
+            expectedYear: 2020,
+            expectedWeek: 1,
+            expectedFirstDay: '2019-12-30',
+            expectedLastDay: '2020-01-05',
+            expectedText: '2020-W01',
+        },
+        {
+            string: '2020-W53',
+            expectedYear: 2020,
+            expectedWeek: 53,
+            expectedFirstDay: '2020-12-28',
+            expectedLastDay: '2021-01-03',
+            expectedText: '2020-W53',
+        },
+        {
+            string: '2021-W01',
+            expectedYear: 2021,
+            expectedWeek: 1,
+            expectedFirstDay: '2021-01-04',
+            expectedLastDay: '2021-01-10',
+            expectedText: '2021-W01',
+        },
+        {
+            string: '2021-W53',
+            expectedYear: 2021,
+            expectedWeek: 53,
+            expectedFirstDay: '2022-01-03',
+            expectedLastDay: '2022-01-09',
+            expectedText: '2022-W01',
+        },
+        {
+            string: '2022-W01',
+            expectedYear: 2022,
+            expectedWeek: 1,
+            expectedFirstDay: '2022-01-03',
+            expectedLastDay: '2022-01-09',
+            expectedText: '2022-W01',
+        },
+        {
+            string: '2024-W01',
+            expectedYear: 2024,
+            expectedWeek: 1,
+            expectedFirstDay: '2024-01-01',
+            expectedLastDay: '2024-01-07',
+            expectedText: '2024-W01',
+        },
+    ];
 
-        expect(underTest.isoYearNumber).equal(2020);
-        expect(underTest.isoWeekNumber).equal(2);
-        expect(underTest.firstDay.text).equal('2020-01-06');
-        expect(underTest.text).equal('2020-W02');
-        expect(underTest.lastDay.text).equal('2020-01-12');
-    });
+    for (const example of examples) {
+        const { string, expectedYear, expectedWeek, expectedFirstDay, expectedLastDay, expectedText } = example;
+        it(`should parse ${string} from string`, () => {
+            const underTest = YearWeekClass.parse(string, cache);
+
+            expect(underTest.isoYearNumber).equal(expectedYear);
+            expect(underTest.isoWeekNumber).equal(expectedWeek);
+            expect(underTest.firstDay.text).equal(expectedFirstDay);
+            expect(underTest.text).equal(expectedText);
+            expect(underTest.lastDay.text).equal(expectedLastDay);
+        });
+    }
 });
 
 describe('YearMonth', () => {

package/src/utils/temporalClass.ts

@@ -171,14 +171,7 @@ export class YearWeekClass implements YearWeek {
     }
 
     get lastDay(): YearMonthDayClass {
-        const firstDay = dayjs()
-            .year(this.isoYearNumber)
-            .startOf('year')
-            .add((this.isoWeekNumber - 1) * 7, 'day')
-            .startOf('week')
-            .add(1, 'day');
-        const lastDay = firstDay.add(6, 'day');
-
+        const lastDay = this.firstDay.dayjs.add(6, 'days');
         return this.cache.getYearMonthDay(lastDay.format('YYYY-MM-DD'));
     }
 

package/src/web-components/visualization/gs-aggregate.stories.ts

@@ -4,6 +4,8 @@ import { html } from 'lit';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/aggregatedData/__mockData__/aggregated.json';
+import aggregatedDataWith1Field from '../../preact/aggregatedData/__mockData__/aggregatedWith1Field.json';
+import aggregatedDataWith2Fields from '../../preact/aggregatedData/__mockData__/aggregatedWith2Fields.json';
 import type { AggregateProps } from '../../preact/aggregatedData/aggregate';
 
 import './gs-aggregate';
@@ -19,6 +21,7 @@ const codeExample = `
     initialSortField="count"
     initialSortDirection="descending"
     pageSize="10"
+    maxNumberOfBars="50"
 ></gs-aggregate>`;
 
 const meta: Meta<Required<AggregateProps>> = {
@@ -27,7 +30,7 @@ const meta: Meta<Required<AggregateProps>> = {
     argTypes: {
         fields: [{ control: 'object' }],
         views: {
-            options: ['table'],
+            options: ['table', 'bar'],
             control: { type: 'check' },
         },
         width: { control: 'text' },
@@ -40,24 +43,6 @@ const meta: Meta<Required<AggregateProps>> = {
         },
     },
     parameters: withComponentDocs({
-        fetchMock: {
-            mocks: [
-                {
-                    matcher: {
-                        name: 'aggregatedData',
-                        url: AGGREGATED_ENDPOINT,
-                        body: {
-                            fields: ['division', 'host'],
-                            country: 'USA',
-                        },
-                    },
-                    response: {
-                        status: 200,
-                        body: aggregatedData,
-                    },
-                },
-            ],
-        },
         componentDocs: {
             opensShadowDom: true,
             expectsChildren: false,
@@ -81,12 +66,33 @@ export const Table: StoryObj<Required<AggregateProps>> = {
                 .initialSortField=${args.initialSortField}
                 .initialSortDirection=${args.initialSortDirection}
                 .pageSize=${args.pageSize}
+                .maxNumberOfBars=${args.maxNumberOfBars}
             ></gs-aggregate>
         </gs-app>
     `,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['division', 'host'],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                },
+            ],
+        },
+    },
     args: {
         fields: ['division', 'host'],
-        views: ['table'],
+        views: ['table', 'bar'],
         lapisFilter: {
             country: 'USA',
         },
@@ -95,5 +101,69 @@ export const Table: StoryObj<Required<AggregateProps>> = {
         initialSortField: 'count',
         initialSortDirection: 'descending',
         pageSize: 10,
+        maxNumberOfBars: 10,
+    },
+};
+
+export const BarChartWithOneField: StoryObj<Required<AggregateProps>> = {
+    ...Table,
+    args: {
+        ...Table.args,
+        fields: ['division'],
+        views: ['bar', 'table'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['division'],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedDataWith1Field,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const BarChartWithTwoFields: StoryObj<Required<AggregateProps>> = {
+    ...Table,
+    args: {
+        ...Table.args,
+        fields: ['division', 'nextstrainClade'],
+        lapisFilter: {
+            country: 'Germany',
+            dateTo: '2022-02-01',
+        },
+        views: ['bar', 'table'],
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['division', 'nextstrainClade'],
+                            country: 'Germany',
+                            dateTo: '2022-02-01',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedDataWith2Fields,
+                    },
+                },
+            ],
+        },
     },
 };

package/src/web-components/visualization/gs-aggregate.tsx

@@ -20,6 +20,16 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * along with the aggregated value and its proportion.
  * The proportion represents the ratio of the aggregated value to the total count of the data
  * (considering the applied filter).
+ *
+ * ### Bar Chart View
+ *
+ * In the bar chart view, the data is presented in vertical bars.
+ * The bar chart is supported when `fields` contains one or two entries.
+ * The first field will be used as the y-axis.
+ * If a second field is provided, it's values will be stacked along the x-axis for each key on the y-axis.
+ *
+ * The chart shows the bars with the highest aggregated `count`.
+ * The number of bars can be adjusted with the `maxNumberOfBars` property.
  */
 @customElement('gs-aggregate')
 export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
@@ -87,6 +97,12 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
     @property({ type: Object })
     pageSize: boolean | number = false;
 
+    /**
+     * The maximum number of bars to display in the bar chart view.
+     */
+    @property({ type: Object })
+    maxNumberOfBars: number = 20;
+
     override render() {
         return (
             <Aggregate
@@ -98,6 +114,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
                 initialSortField={this.initialSortField}
                 initialSortDirection={this.initialSortDirection}
                 pageSize={this.pageSize}
+                maxNumberOfBars={this.maxNumberOfBars}
             />
         );
     }
@@ -131,4 +148,7 @@ type InitialSortDirectionMatches = Expect<
     Equals<typeof AggregateComponent.prototype.initialSortDirection, AggregateProps['initialSortDirection']>
 >;
 type PageSizeMatches = Expect<Equals<typeof AggregateComponent.prototype.pageSize, AggregateProps['pageSize']>>;
+type MaxNumberOfBarsMatches = Expect<
+    Equals<typeof AggregateComponent.prototype.maxNumberOfBars, AggregateProps['maxNumberOfBars']>
+>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */