@cdc/dashboard 4.24.3 → 4.24.5

package/src/_stories/Dashboard.stories.tsx

@@ -1,16 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { faker } from '@faker-js/faker'
 import APIFiltersMapData from './_mock/api-filter-map.json'
 import APIFiltersChartData from './_mock/api-filter-chart.json'
 import ExampleConfig_1 from './_mock/dashboard-gallery.json'
 import ExampleConfig_2 from './_mock/dashboard-2.json'
 import ExampleConfig_3 from './_mock/dashboard_no_filter.json'
 import Dashboard_Filter from './_mock/dashboard-filter.json'
+import MultiVizConfig from './_mock/multi-viz.json'
+import MultiDashboardConfig from './_mock/multi-dashboards.json'
 import Dashboard from '../CdcDashboard'
 import StandaloneTable from './_mock/standalone-table.json'
 import PivotFitlerConfig from './_mock/pivot-filter.json'
 import { type DashboardConfig as Config } from '../types/DashboardConfig'
 import { userEvent, within } from '@storybook/testing-library'
 import ToggleExampleConfig from './_mock/toggle-example.json'
+import _ from 'lodash'
 
 const meta: Meta<typeof Dashboard> = {
   title: 'Components/Pages/Dashboard',
@@ -21,44 +25,85 @@ type Story = StoryObj<typeof Dashboard>
 
 export const Example_1: Story = {
   args: {
-    config: ExampleConfig_1
+    config: ExampleConfig_1,
+    isEditor: false
   }
 }
 
 export const Example_2: Story = {
   args: {
-    config: ExampleConfig_2
+    config: ExampleConfig_2,
+    isEditor: false
   }
 }
 
 export const Example_3: Story = {
   args: {
-    config: ExampleConfig_3
+    config: ExampleConfig_3,
+    isEditor: false
   }
 }
 
 export const Dashboard_Filters: Story = {
   args: {
-    config: Dashboard_Filter
+    config: Dashboard_Filter,
+    isEditor: false
   }
 }
 
 export const StandAloneTable: Story = {
   args: {
-    config: StandaloneTable
+    config: StandaloneTable,
+    isEditor: false
   }
 }
 
 export const ToggleExample: Story = {
   args: {
     config: ToggleExampleConfig,
-    isEditor: true
+    isEditor: false
   }
 }
 
 export const PivotFilter: Story = {
   args: {
-    config: PivotFitlerConfig
+    config: PivotFitlerConfig,
+    isEditor: false
+  }
+}
+
+faker.seed(123)
+
+const countries = _.times(5, faker.location.country)
+const categories = _.times(3, val => `category-${val + 1}`)
+
+const data = []
+countries.forEach((country, i) => {
+  categories.forEach((category, j) => {
+    if ((i + j) % 3 === 0) return
+    data.push({
+      Country: country,
+      'Sample Categories': category,
+      Data: faker.number.int({ min: 5, max: 50 })
+    })
+  })
+})
+
+const multiVizData = {
+  'valid-world-data.json': { data }
+}
+
+export const MultiVisualization: Story = {
+  args: {
+    config: { ...MultiVizConfig, datasets: multiVizData },
+    isEditor: false
+  }
+}
+
+export const MultiDashboard: Story = {
+  args: {
+    config: MultiDashboardConfig,
+    isEditor: false
   }
 }
 

package/src/_stories/_mock/markup-include.json

@@ -0,0 +1,78 @@
+{
+  "dashboard": {
+    "theme": "theme-blue"
+  },
+  "rows": [
+    [
+      {
+        "width": 12,
+        "widget": "markup-include1709307330120"
+      },
+      {},
+      {}
+    ]
+  ],
+  "visualizations": {
+    "markup-include1709307330120": {
+      "inlineHTML": "",
+      "markupSource": "inline",
+      "showHeader": false,
+      "srcUrl": "#example",
+      "theme": "theme-blue",
+      "title": "Markup Include",
+      "type": "markup-include",
+      "visual": {
+        "border": false,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      },
+      "openModal": false,
+      "uid": "markup-include1709307330120",
+      "visualizationType": "markup-include",
+      "editing": false,
+      "data": {},
+      "validated": 4.23
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": false,
+    "showDownloadUrl": false,
+    "showVertical": true
+  },
+  "datasets": {
+    "valid-data-chart.csv": {
+      "data": [
+        {
+          "Race": "Hispanic or Latino",
+          "Age-adjusted rate": "644.2"
+        },
+        {
+          "Race": "Non-Hispanic American Indian",
+          "Age-adjusted rate": "636.1"
+        },
+        {
+          "Race": "Non-Hispanic Black",
+          "Age-adjusted rate": "563.7"
+        },
+        {
+          "Race": "Non-Hispanic Asian or Pacific Islander",
+          "Age-adjusted rate": "202.5"
+        },
+        {
+          "Race": "Non-Hispanic White",
+          "Age-adjusted rate": "183.6"
+        }
+      ],
+      "dataFileSize": 184,
+      "dataFileName": "valid-data-chart.csv",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "CSV",
+      "preview": true
+    }
+  },
+  "type": "dashboard",
+  "runtime": {}
+}