@genspectrum/dashboard-components 0.11.5 → 0.11.6

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 */