@genspectrum/dashboard-components 0.8.4 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -2
- package/custom-elements.json +30 -7
- package/dist/assets/{mutationOverTimeWorker-kjUXkRmn.js.map → mutationOverTimeWorker-DuWGESoO.js.map} +1 -1
- package/dist/{genspectrum-components.d.ts → components.d.ts} +25 -59
- package/dist/{dashboard-components.js → components.js} +43 -66
- package/dist/components.js.map +1 -0
- package/dist/util.d.ts +301 -0
- package/dist/util.js +6 -0
- package/dist/util.js.map +1 -0
- package/dist/utilEntrypoint-g4DsyhU7.js +61 -0
- package/dist/utilEntrypoint-g4DsyhU7.js.map +1 -0
- package/package.json +10 -5
- package/src/{index.ts → componentsEntrypoint.ts} +0 -1
- package/src/preact/dateRangeSelector/date-range-selector.stories.tsx +101 -44
- package/src/preact/dateRangeSelector/date-range-selector.tsx +33 -14
- package/src/preact/dateRangeSelector/dateConversion.ts +1 -5
- package/src/preact/dateRangeSelector/dateRangeOption.ts +18 -0
- package/src/preact/webWorkers/useWebWorker.ts +32 -10
- package/src/preact/webWorkers/workerFunction.ts +19 -3
- package/src/standaloneEntrypoint.ts +2 -0
- package/src/utilEntrypoint.ts +6 -0
- package/src/web-components/input/gs-date-range-selector.stories.ts +41 -10
- package/src/web-components/input/gs-date-range-selector.tsx +16 -2
- package/standalone-bundle/assets/mutationOverTimeWorker-MVSt1FVw.js.map +1 -0
- package/standalone-bundle/dashboard-components.js +12986 -16649
- package/standalone-bundle/dashboard-components.js.map +1 -1
- package/standalone-bundle/style.css +1 -0
- package/dist/dashboard-components.js.map +0 -1
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ Usage with a bundler in HTML:
|
|
|
13
13
|
```html
|
|
14
14
|
<body>
|
|
15
15
|
<script>
|
|
16
|
-
import '@genspectrum/dashboard-components';
|
|
16
|
+
import '@genspectrum/dashboard-components/components';
|
|
17
17
|
import '@genspectrum/dashboard-components/style.css';
|
|
18
18
|
</script>
|
|
19
19
|
<gs-app lapis="https://your.lapis.url"></gs-app>
|
|
@@ -42,6 +42,13 @@ We also provide a standalone version of the components that can be used without
|
|
|
42
42
|
Internally, the components use [Preact](https://preactjs.com/).
|
|
43
43
|
We use [Lit](https://lit.dev/) to create web components.
|
|
44
44
|
|
|
45
|
+
We have split the package into two parts:
|
|
46
|
+
|
|
47
|
+
- The components, which are web components that can be used in the browser.
|
|
48
|
+
- They can be imported with `import '@genspectrum/dashboard-components/components';`
|
|
49
|
+
- utility functions, which can also be used in a node environment.
|
|
50
|
+
- They can be imported with `import '@genspectrum/dashboard-components/util';`
|
|
51
|
+
|
|
45
52
|
We primarily provide two kinds of components:
|
|
46
53
|
|
|
47
54
|
- **Visualization components** (charts, tables, etc.)
|
|
@@ -130,4 +137,9 @@ We follow this testing concept:
|
|
|
130
137
|
|
|
131
138
|
#### Mocking
|
|
132
139
|
|
|
133
|
-
All our tests use mock data. In general, we use `storybook-addon-fetch-mock` for all outgoing requests. This strategy
|
|
140
|
+
All our tests use mock data. In general, we use `storybook-addon-fetch-mock` for all outgoing requests. This strategy
|
|
141
|
+
cannot be used for components that use web workers, like gs-mutations-over-time. Therefore, we created custom mock
|
|
142
|
+
workers that return mocked data. The mock workers are enabled in the package.json using
|
|
143
|
+
Node.js [subpath imports](https://nodejs.org/api/packages.html#subpath-imports), following the guide
|
|
144
|
+
from [storybook](https://storybook.js.org/docs/writing-stories/mocking-data-and-modules/mocking-modules). This ensures
|
|
145
|
+
that when importing the worker in the component, the mock worker is used inside Storybook instead of the real worker.
|
package/custom-elements.json
CHANGED
|
@@ -274,15 +274,23 @@
|
|
|
274
274
|
"type": {
|
|
275
275
|
"text": "Meta<Required<DateRangeSelectorProps>>"
|
|
276
276
|
},
|
|
277
|
-
"default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'select', }, options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'], }, dateColumn: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes,
|
|
277
|
+
"default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'select', }, options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'], }, dateColumn: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes, customDateRange, ], earliestDate: '1970-01-01', initialValue: dateRangeOptionPresets.lastMonth.label, dateColumn: 'aDateColumn', width: '100%', initialDateFrom: '', initialDateTo: '', }, tags: ['autodocs'], }"
|
|
278
278
|
},
|
|
279
279
|
{
|
|
280
280
|
"kind": "variable",
|
|
281
|
-
"name": "
|
|
281
|
+
"name": "Default",
|
|
282
|
+
"type": {
|
|
283
|
+
"text": "StoryObj<Required<DateRangeSelectorProps>>"
|
|
284
|
+
},
|
|
285
|
+
"default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .initialValue=${args.initialValue} .initialDateFrom=${args.initialDateFrom} .initialDateTo=${args.initialDateTo} .width=${args.width} .dateColumn=${args.dateColumn} ></gs-date-range-selector> </div> </gs-app>`, }"
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"kind": "variable",
|
|
289
|
+
"name": "FiresEvents",
|
|
282
290
|
"type": {
|
|
283
291
|
"text": "StoryObj<Required<DateRangeSelectorProps>>"
|
|
284
292
|
},
|
|
285
|
-
"default": "{
|
|
293
|
+
"default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector'); const filterChangedListenerMock = fn(); const optionChangedListenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock); canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock); }); await step('Expect last 6 months to be selected', async () => { await expect(selectField(canvas)).toHaveValue('Last month'); await waitFor(() => { expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date())); }); }); await step('Expect event to be fired when selecting a different value', async () => { await userEvent.selectOptions(selectField(canvas), 'CustomDateRange'); await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo); await expect(filterChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { aDateColumnFrom: customDateRange.dateFrom, aDateColumnTo: customDateRange.dateTo, }, }), ); await expect(optionChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: customDateRange.label, }), ); }); }, }"
|
|
286
294
|
}
|
|
287
295
|
],
|
|
288
296
|
"exports": [
|
|
@@ -296,9 +304,17 @@
|
|
|
296
304
|
},
|
|
297
305
|
{
|
|
298
306
|
"kind": "js",
|
|
299
|
-
"name": "
|
|
307
|
+
"name": "Default",
|
|
300
308
|
"declaration": {
|
|
301
|
-
"name": "
|
|
309
|
+
"name": "Default",
|
|
310
|
+
"module": "src/web-components/input/gs-date-range-selector.stories.ts"
|
|
311
|
+
}
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
"kind": "js",
|
|
315
|
+
"name": "FiresEvents",
|
|
316
|
+
"declaration": {
|
|
317
|
+
"name": "FiresEvents",
|
|
302
318
|
"module": "src/web-components/input/gs-date-range-selector.stories.ts"
|
|
303
319
|
}
|
|
304
320
|
}
|
|
@@ -389,8 +405,15 @@
|
|
|
389
405
|
"type": {
|
|
390
406
|
"text": "CustomEvent<{ `${dateColumn}From`: string; `${dateColumn}To`: string; }>"
|
|
391
407
|
},
|
|
392
|
-
"description": "Fired when: - The select field is changed, - A date is selected in either of the date pickers, - A date was typed into either of the date input fields, and the input field loses focus (\"on blur\"). Contains the dates in the format `YYYY-MM-DD`. Example: For `dateColumn = yourDate`, an event with `detail` containing ``` { yourDataFrom: \"2021-01-01\", yourDataTo: \"2021-12-31\" } ``` will be fired.",
|
|
393
|
-
"name": "gs-date-range-changed"
|
|
408
|
+
"description": "Fired when: - The select field is changed, - A date is selected in either of the date pickers, - A date was typed into either of the date input fields, and the input field loses focus (\"on blur\"). Contains the dates in the format `YYYY-MM-DD`. Example: For `dateColumn = yourDate`, an event with `detail` containing ``` { yourDataFrom: \"2021-01-01\", yourDataTo: \"2021-12-31\" } ``` will be fired. Use this event, when you want to use the filter directly as a LAPIS filter.",
|
|
409
|
+
"name": "gs-date-range-filter-changed"
|
|
410
|
+
},
|
|
411
|
+
{
|
|
412
|
+
"type": {
|
|
413
|
+
"text": "CustomEvent<{ string | {dateFrom: string, dateTo: string}}>"
|
|
414
|
+
},
|
|
415
|
+
"description": "Fired when: - The select field is changed, - A date is selected in either of the date pickers, - A date was typed into either of the date input fields, and the input field loses focus (\"on blur\"). Contains the selected dateRangeOption or when users select custom values it contains the selected dates. Use this event, when you want to control this component in your JS application.",
|
|
416
|
+
"name": "gs-date-range-option-changed"
|
|
394
417
|
}
|
|
395
418
|
],
|
|
396
419
|
"attributes": [
|