@genspectrum/dashboard-components 0.11.4 → 0.11.6

package/custom-elements.json

@@ -1369,7 +1369,7 @@
           "type": {
             "text": "Meta<Required<AggregateProps>>"
           },
-          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, initialSortField: { control: 'text' }, initialSortDirection: { options: ['ascending', 'descending'], control: { type: 'radio' }, }, }, 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, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table', 'bar'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, initialSortField: { control: 'text' }, initialSortDirection: { options: ['ascending', 'descending'], control: { type: 'radio' }, }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1377,7 +1377,23 @@
           "type": {
             "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .lapisFilter=${args.lapisFilter} .views=${args.views} .width=${args.width} .height=${args.height} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], lapisFilter: { country: 'USA', }, width: '100%', height: '700px', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .lapisFilter=${args.lapisFilter} .views=${args.views} .width=${args.width} .height=${args.height} .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', 'bar'], lapisFilter: { country: 'USA', }, width: '100%', height: '700px', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, maxNumberOfBars: 10, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "BarChartWithOneField",
+          "type": {
+            "text": "StoryObj<Required<AggregateProps>>"
+          },
+          "default": "{ ...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, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "BarChartWithTwoFields",
+          "type": {
+            "text": "StoryObj<Required<AggregateProps>>"
+          },
+          "default": "{ ...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, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -1396,6 +1412,22 @@
             "name": "Table",
             "module": "src/web-components/visualization/gs-aggregate.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "BarChartWithOneField",
+          "declaration": {
+            "name": "BarChartWithOneField",
+            "module": "src/web-components/visualization/gs-aggregate.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BarChartWithTwoFields",
+          "declaration": {
+            "name": "BarChartWithTwoFields",
+            "module": "src/web-components/visualization/gs-aggregate.stories.ts"
+          }
         }
       ]
     },
@@ -1405,7 +1437,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays aggregated data in a table, which can provide an overview of the underlying data.\n\nIt expects a list of `fields` to aggregate by and a `filter` to apply to the data.\n\n## Views\n\n### Table View\n\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).",
+          "description": "## Context\n\nThis component displays aggregated data in a table, which can provide an overview of the underlying data.\n\nIt expects a list of `fields` to aggregate by and a `filter` to apply to the data.\n\n## Views\n\n### Table View\n\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).\n\n### Bar Chart View\n\nIn the bar chart view, the data is presented in vertical bars.\nThe bar chart is supported when `fields` contains one or two entries.\nThe first field will be used as the y-axis.\nIf a second field is provided, it's values will be stacked along the x-axis for each key on the y-axis.\n\nThe chart shows the bars with the highest aggregated `count`.\nThe number of bars can be adjusted with the `maxNumberOfBars` property.",
           "name": "AggregateComponent",
           "members": [
             {
@@ -1487,6 +1519,16 @@
               "default": "false",
               "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
               "attribute": "pageSize"
+            },
+            {
+              "kind": "field",
+              "name": "maxNumberOfBars",
+              "type": {
+                "text": "number"
+              },
+              "default": "20",
+              "description": "The maximum number of bars to display in the bar chart view.",
+              "attribute": "maxNumberOfBars"
             }
           ],
           "attributes": [
@@ -1561,6 +1603,15 @@
               "default": "false",
               "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
               "fieldName": "pageSize"
+            },
+            {
+              "name": "maxNumberOfBars",
+              "type": {
+                "text": "number"
+              },
+              "default": "20",
+              "description": "The maximum number of bars to display in the bar chart view.",
+              "fieldName": "maxNumberOfBars"
             }
           ],
           "superclass": {