@genspectrum/dashboard-components 0.2.0 → 0.3.0

package/src/web-components/visualization/gs-relative-growth-advantage.stories.ts

@@ -15,6 +15,9 @@ const codeExample = String.raw`
     denominator='{ "country": "Switzerland", "dateFrom": "2020-12-01" }'
     generationTime="7"
     views='["line"]'
+    width='100%'
+    height='700px'
+    headline="Relative growth advantage"
 ></gs-relative-growth-advantage>`;
 
 const meta: Meta<RelativeGrowthAdvantageProps> = {
@@ -28,7 +31,8 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
             options: ['line'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
     parameters: withComponentDocs({
@@ -43,7 +47,7 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
 
 export default meta;
 
-const Template: StoryObj<RelativeGrowthAdvantageProps> = {
+const Template: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-relative-growth-advantage
@@ -51,21 +55,23 @@ const Template: StoryObj<RelativeGrowthAdvantageProps> = {
                 .denominator=${args.denominator}
                 .generationTime=${args.generationTime}
                 .views=${args.views}
-                .size=${args.size}
+                .width=${args.width}
+                .height=${args.height}
                 .headline=${args.headline}
             ></gs-relative-growth-advantage>
         </gs-app>
     `,
 };
 
-export const Default: StoryObj<RelativeGrowthAdvantageProps> = {
+export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
     ...Template,
     args: {
         numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Relative growth advantage',
     },
     parameters: {

package/src/web-components/visualization/gs-relative-growth-advantage.tsx

@@ -6,7 +6,9 @@ import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
 /**
- * We assume a discrete time model, where new infections happen exactly every `generationTime` days.
+ * ## Context
+ *
+ * For this component, we assume a discrete time model, where new infections happen exactly every `generationTime` days.
  * This is what we call a "generation".
  *
  * This component estimates the relative growth advantage of a variant by performing a logistic regression.
@@ -32,12 +34,16 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
 @customElement('gs-relative-growth-advantage')
 export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
+     * Required.
+     *
      * The LAPIS filter for the focal variant.
      */
     @property({ type: Object })
     numerator: Record<string, string | number | null | boolean> = {};
 
     /**
+     * Required.
+     *
      * The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.
      */
     @property({ type: Object })
@@ -60,18 +66,23 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * The headline of the component. Set to an empty string to hide the headline.
      */
     @property({ type: String })
-    headline: string | undefined = 'Relative growth advantage';
+    headline: string = 'Relative growth advantage';
 
     /**
-     * The size of the component.
+     * The width of the component.
      *
-     * If not set, the component will take the full width of its container with height 700px.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    /**
+     * The height of the component.
      *
-     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
-     * If the unit is %, the size will be relative to the container of the component.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
-    @property({ type: Object })
-    size: { width?: string; height?: string } | undefined = undefined;
+    @property({ type: String })
+    height: string = '700px';
 
     override render() {
         return (
@@ -80,7 +91,8 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
                 denominator={this.denominator}
                 generationTime={this.generationTime}
                 views={this.views}
-                size={this.size}
+                width={this.width}
+                height={this.height}
                 headline={this.headline}
             />
         );