@cdc/core 4.23.10 → 4.23.11

package/components/_stories/DataTable.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import DataTable from '../DataTable'
+import './styles.scss'
+import Example_1 from './_mocks/dashboard_no_filter.json'
+import CityStateExample from './_mocks/example-city-state.json'
+import { displayGeoName } from '@cdc/map/src/helpers/displayGeoName'
+
+const meta: Meta<typeof DataTable> = {
+  title: 'Components/Organisms/DataTable',
+  component: DataTable
+}
+
+export default meta
+
+type Story = StoryObj<typeof DataTable>
+
+const datasetKey = 'dashboard_example_map.csv'
+
+export const Primary: Story = {
+  args: {
+    config: Example_1,
+    dataConfig: Example_1.datasets[datasetKey],
+    rawData: Example_1.datasets[datasetKey].data,
+    runtimeData: Example_1.datasets[datasetKey].data,
+    expandDataTable: true,
+    tableTitle: 'COVE DataTable',
+    viewport: 'lg',
+    tabbingId: datasetKey
+  }
+}
+
+export const CityState: Story = {
+  args: {
+    config: CityStateExample,
+    dataConfig: CityStateExample,
+    rawData: CityStateExample.data,
+    runtimeData: CityStateExample.data,
+    expandDataTable: true,
+    tableTitle: 'CityStateExample DataTable',
+    viewport: 'lg',
+    tabbingId: '#asdf',
+    columns: CityStateExample.columns,
+    applyLegendToRow: () => ['#000'],
+    displayGeoName,
+    displayDataAsText: d => d
+  }
+}
+
+export const Grouped: Story = {
+  args: {
+    config: Example_1,
+    dataConfig: Example_1.datasets[datasetKey],
+    rawData: Example_1.datasets[datasetKey].data,
+    runtimeData: Example_1.datasets[datasetKey].data,
+    expandDataTable: true,
+    tableTitle: 'COVE DataTable',
+    groupBy: 'TimeZone',
+    viewport: 'lg',
+    tabbingId: datasetKey
+  }
+}

package/components/_stories/Table.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import Table from '../Table'
+import { ReactNode } from 'react'
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Molecules/Table',
+  component: Table
+}
+
+export default meta
+
+type Story = StoryObj<typeof Table>
+
+function createMatrix(): ReactNode[][] {
+  const base = ['a', 'b', 'c'].map(el => <>{el}</>)
+  return [base, base]
+}
+
+export const Ungrouped: Story = {
+  args: {
+    childrenMatrix: createMatrix(),
+    tableName: 'COVE Table',
+    headContent: (
+      <tr>
+        <th>first</th>
+        <th>second</th>
+        <th>third</th>
+      </tr>
+    ),
+    tableOptions: { className: 'table table-bordered' }
+  }
+}
+
+function createGroupMatrix(): Record<string, ReactNode[][]> {
+  const base = ['a', 'b', 'c'].map(el => <>{el}</>)
+  return { group_1: [base, base], group_2: [base, base] }
+}
+
+export const Grouped: Story = {
+  args: {
+    childrenMatrix: createGroupMatrix(),
+    tableName: 'COVE Table',
+    headContent: (
+      <tr>
+        <th>first</th>
+        <th>second</th>
+        <th>third</th>
+      </tr>
+    ),
+    tableOptions: { className: 'table table-bordered' }
+  }
+}

package/components/_stories/_mocks/dashboard_no_filter.json

@@ -0,0 +1,121 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "title": "Dashboard with No Filters"
+  },
+  "rows": [
+    [
+      {
+        "width": 12,
+        "widget": "map1629143821077"
+      },
+      {},
+      {}
+    ],
+    [
+      {
+        "width": 6,
+        "widget": "data-bite1629144030877"
+      },
+      {
+        "width": 6,
+        "widget": "data-bite1629144267659"
+      },
+      {
+        "width": null
+      }
+    ]
+  ],
+  "table": {
+    "label": "Data Table",
+    "show": true
+  },
+  "type": "dashboard",
+  "uuid": 1629144022257,
+  "datasets": {
+    "dashboard_example_map.csv": {
+      "data": [
+        {
+          "Location": "Alabama",
+          "TimeZone": 1,
+          "Rate": 1375
+        },
+        {
+          "Location": "Alaska",
+          "TimeZone": 1,
+          "Rate": 1377
+        },
+        {
+          "Location": "American Samoa",
+          "TimeZone": 1,
+          "Rate": 1388
+        },
+        {
+          "Location": "Arizona",
+          "TimeZone": 1,
+          "Rate": 1401
+        },
+        {
+          "Location": "Arkansas",
+          "TimeZone": 1,
+          "Rate": 1398
+        },
+        {
+          "Location": "California",
+          "TimeZone": 2,
+          "Rate": 1381
+        },
+        {
+          "Location": "Colorado",
+          "TimeZone": 2,
+          "Rate": 1369
+        },
+        {
+          "Location": "Connecticut",
+          "TimeZone": 2,
+          "Rate": 1403
+        },
+        {
+          "Location": "Delaware\t",
+          "TimeZone": 2,
+          "Rate": "1384"
+        },
+        {
+          "Location": "District of Columbia",
+          "TimeZone": 2,
+          "Rate": 1400
+        },
+        {
+          "Location": "Florida",
+          "TimeZone": 2,
+          "Rate": 1387
+        },
+        {
+          "Location": "Georgia",
+          "TimeZone": 3,
+          "Rate": 1365
+        },
+        {
+          "Location": "Guam",
+          "TimeZone": 3,
+          "Rate": 1356
+        },
+        {
+          "Location": "Hawaii",
+          "TimeZone": 3,
+          "Rate": 1362
+        },
+        {
+          "Location": "Idaho",
+          "TimeZone": 3,
+          "Rate": 1374
+        }
+      ],
+      "dataFileSize": 971,
+      "dataFileName": "dashboard_example_map.csv",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "CSV",
+      "preview": true
+    }
+  }
+}