@cdc/dashboard 4.26.2 → 4.26.4

package/src/_stories/_mock/dashboard-data-driven-colors.json

@@ -0,0 +1,171 @@
+{
+  "type": "dashboard",
+  "title": "COVID-19 County Case Tracker",
+  "description": "Select a state to view COVID-19 case counts by county. Background colors reflect the current alert status.",
+  "datasets": {
+    "covid-counties": {
+      "data": [
+        {
+          "State": "California",
+          "County1": "Los Angeles", "Cases1": "12847", "Status1": "Critical",
+          "County2": "San Diego", "Cases2": "4521", "Status2": "High",
+          "County3": "Sacramento", "Cases3": "1893", "Status3": "Medium"
+        },
+        {
+          "State": "Texas",
+          "County1": "Harris", "Cases1": "9734", "Status1": "High",
+          "County2": "Dallas", "Cases2": "7218", "Status2": "High",
+          "County3": "Travis", "Cases3": "2105", "Status3": "Medium"
+        },
+        {
+          "State": "New York",
+          "County1": "Kings", "Cases1": "3842", "Status1": "Medium",
+          "County2": "Queens", "Cases2": "3156", "Status2": "Medium",
+          "County3": "Erie", "Cases3": "987", "Status3": "Low"
+        },
+        {
+          "State": "Florida",
+          "County1": "Miami-Dade", "Cases1": "11203", "Status1": "Critical",
+          "County2": "Broward", "Cases2": "6890", "Status2": "High",
+          "County3": "Hillsborough", "Cases3": "3214", "Status3": "Medium"
+        },
+        {
+          "State": "Ohio",
+          "County1": "Franklin", "Cases1": "1542", "Status1": "Low",
+          "County2": "Cuyahoga", "Cases2": "1321", "Status2": "Low",
+          "County3": "Hamilton", "Cases3": "876", "Status3": "Low"
+        }
+      ]
+    }
+  },
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "State Filter",
+        "label": "Select State",
+        "columnName": "State",
+        "showDropdown": true,
+        "active": "California",
+        "values": ["California", "Florida", "New York", "Ohio", "Texas"],
+        "usedBy": ["bite-county-1", "bite-county-2", "bite-county-3"],
+        "tier": 1,
+        "type": "datafilter"
+      }
+    ]
+  },
+  "rows": [
+    [
+      { "width": 4, "widget": "bite-county-1" },
+      { "width": 4, "widget": "bite-county-2" },
+      { "width": 4, "widget": "bite-county-3" }
+    ]
+  ],
+  "visualizations": {
+    "bite-county-1": {
+      "uid": "bite-county-1",
+      "type": "data-bite",
+      "title": "County 1",
+      "biteStyle": "tp5",
+      "dataKey": "covid-counties",
+      "dataColumn": "Cases1",
+      "dataFunction": "Pass Through",
+      "biteBody": "confirmed cases",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "",
+        "suffix": ""
+      },
+      "filters": [],
+      "theme": "theme-blue",
+      "visual": {
+        "border": false,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      },
+      "dataColors": {
+        "column": "Status1",
+        "mappings": [
+          { "sourceValue": "Low", "color": "#d7f2ed" },
+          { "sourceValue": "Medium", "color": "#b8e5ac" },
+          { "sourceValue": "High", "color": "#fea82f" },
+          { "sourceValue": "Critical", "color": "#a03169" }
+        ]
+      }
+    },
+    "bite-county-2": {
+      "uid": "bite-county-2",
+      "type": "data-bite",
+      "title": "County 2",
+      "biteStyle": "tp5",
+      "dataKey": "covid-counties",
+      "dataColumn": "Cases2",
+      "dataFunction": "Pass Through",
+      "biteBody": "confirmed cases",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "",
+        "suffix": ""
+      },
+      "filters": [],
+      "theme": "theme-blue",
+      "visual": {
+        "border": false,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      },
+      "dataColors": {
+        "column": "Status2",
+        "mappings": [
+          { "sourceValue": "Low", "color": "#d7f2ed" },
+          { "sourceValue": "Medium", "color": "#b8e5ac" },
+          { "sourceValue": "High", "color": "#fea82f" },
+          { "sourceValue": "Critical", "color": "#a03169" }
+        ]
+      }
+    },
+    "bite-county-3": {
+      "uid": "bite-county-3",
+      "type": "data-bite",
+      "title": "County 3",
+      "biteStyle": "tp5",
+      "dataKey": "covid-counties",
+      "dataColumn": "Cases3",
+      "dataFunction": "Pass Through",
+      "biteBody": "confirmed cases",
+      "subtext": "",
+      "dataFormat": {
+        "roundToPlace": 0,
+        "commas": true,
+        "prefix": "",
+        "suffix": ""
+      },
+      "filters": [],
+      "theme": "theme-blue",
+      "visual": {
+        "border": false,
+        "accent": false,
+        "background": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      },
+      "dataColors": {
+        "column": "Status3",
+        "mappings": [
+          { "sourceValue": "Low", "color": "#d7f2ed" },
+          { "sourceValue": "Medium", "color": "#b8e5ac" },
+          { "sourceValue": "High", "color": "#fea82f" },
+          { "sourceValue": "Critical", "color": "#a03169" }
+        ]
+      }
+    }
+  }
+}

package/src/_stories/_mock/tab-simple-filter.json

@@ -0,0 +1,153 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "category",
+        "showDropdown": true,
+        "filterStyle": "tab-simple",
+        "values": ["Category A", "Category B", "Category C"],
+        "orderedValues": ["Category A", "Category B", "Category C"],
+        "type": "datafilter",
+        "columnName": "category",
+        "tier": 1,
+        "order": "cust",
+        "defaultValue": "Category A"
+      }
+    ]
+  },
+  "rows": [
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "dashboardFilters1"
+        }
+      ]
+    },
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "chart1"
+        }
+      ]
+    }
+  ],
+  "visualizations": {
+    "dashboardFilters1": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "newViz": true,
+      "uid": "dashboardFilters1",
+      "type": "dashboardFilters",
+      "sharedFilterIndexes": [0],
+      "visualizationType": "dashboardFilters"
+    },
+    "chart1": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "uid": "chart1",
+      "type": "chart",
+      "visualizationType": "Bar",
+      "title": "Sales by Category",
+      "showTitle": true,
+      "theme": "theme-blue",
+      "animate": false,
+      "dataKey": "./tab-simple-data.json",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "xAxis": {
+        "dataKey": "product",
+        "type": "categorical",
+        "hideAxis": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 75,
+        "tickRotation": 0,
+        "labelColor": "#1c1d1f",
+        "tickLabelColor": "#1c1d1f",
+        "tickColor": "#1c1d1f",
+        "axisPadding": 200,
+        "padding": 5,
+        "sortDates": false,
+        "anchors": []
+      },
+      "yAxis": {
+        "hideAxis": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 50,
+        "gridLines": false,
+        "labelColor": "#1c1d1f",
+        "tickLabelColor": "#1c1d1f",
+        "tickColor": "#1c1d1f",
+        "anchors": [],
+        "categories": []
+      },
+      "series": [
+        {
+          "dataKey": "sales",
+          "type": "Bar",
+          "axis": "Left",
+          "tooltip": true
+        }
+      ],
+      "orientation": "vertical",
+      "general": {
+        "showZeroValueData": true,
+        "palette": {
+          "name": "qualitative_bold",
+          "version": "1.0"
+        }
+      },
+      "columns": {},
+      "legend": {
+        "hide": true
+      },
+      "table": {
+        "label": "Data Table",
+        "show": false,
+        "sharedFilterColumns": ["category"]
+      },
+      "heights": {
+        "vertical": 300,
+        "horizontal": 750
+      },
+      "visual": {
+        "border": true,
+        "accent": true,
+        "background": true
+      },
+      "tooltips": {
+        "opacity": 90,
+        "singleSeries": false
+      },
+      "barThickness": 0.35
+    }
+  },
+  "datasets": {
+    "./tab-simple-data.json": {
+      "data": [
+        { "category": "Category A", "product": "Widget", "sales": "120" },
+        { "category": "Category A", "product": "Gadget", "sales": "85" },
+        { "category": "Category A", "product": "Doohickey", "sales": "210" },
+        { "category": "Category B", "product": "Widget", "sales": "95" },
+        { "category": "Category B", "product": "Gadget", "sales": "150" },
+        { "category": "Category B", "product": "Doohickey", "sales": "60" },
+        { "category": "Category C", "product": "Widget", "sales": "175" },
+        { "category": "Category C", "product": "Gadget", "sales": "110" },
+        { "category": "Category C", "product": "Doohickey", "sales": "140" }
+      ],
+      "dataFileSize": 500,
+      "dataFileName": "./tab-simple-data.json",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "JSON",
+      "preview": true
+    }
+  },
+  "type": "dashboard",
+  "version": "4.26.1"
+}

package/src/_stories/_mock/tp5-test.json

@@ -40,13 +40,23 @@
       { "width": 4, "widget": "gauge1" },
       { "width": 4, "widget": "gauge2" },
       { "width": 4, "widget": "gauge3" }
+    ],
+    [
+      { "width": 4, "widget": "markup1" },
+      { "width": 4, "widget": "markup2" },
+      { "width": 4, "widget": "markup3" }
+    ],
+    [
+      { "width": 4, "widget": "waffle2" },
+      { "width": 4, "widget": "bite3" },
+      { "width": 4, "widget": "markup2" }
     ]
   ],
   "visualizations": {
     "waffle1": {
       "uid": "waffle1",
       "type": "waffle-chart",
-      "title": "Vaccination Coverage",
+      "title": "Vaccination",
       "visualizationType": "TP5 Waffle",
       "visualizationSubType": "linear",
       "showPercent": true,
@@ -71,7 +81,7 @@
     "waffle2": {
       "uid": "waffle2",
       "type": "waffle-chart",
-      "title": "Health Insurance Coverage Rate",
+      "title": "Health",
       "visualizationType": "TP5 Waffle",
       "visualizationSubType": "linear",
       "showPercent": true,
@@ -96,7 +106,7 @@
     "waffle3": {
       "uid": "waffle3",
       "type": "waffle-chart",
-      "title": "Cancer Screening Completion",
+      "title": "Cancer",
       "visualizationType": "TP5 Waffle",
       "visualizationSubType": "linear",
       "showPercent": true,
@@ -245,7 +255,7 @@
     "bite3": {
       "uid": "bite3",
       "type": "data-bite",
-      "title": "Cancer Screening Completion",
+      "title": "Cancer Screening Completion, and a little something else to make the title taller",
       "biteStyle": "tp5",
       "dataColumn": "Screening Rate",
       "dataFunction": "Mean (Average)",
@@ -261,7 +271,78 @@
       "visual": {
         "hideBackgroundColor": false
       }
+    },
+    "markup1": {
+      "uid": "markup1",
+      "type": "markup-include",
+      "title": "",
+      "theme": "theme-blue",
+      "contentEditor": {
+        "style": "tp5",
+        "title": "TP5 Markup Include",
+        "titleStyle": "small",
+        "useInlineHTML": true,
+        "inlineHTML": "<p><strong>68.5%</strong> of adults were vaccinated against seasonal flu in this sample dataset.</p>",
+        "srcUrl": "#example",
+        "showHeader": true,
+        "showNoDataMessage": false,
+        "noDataMessageText": "No Data Available"
+      },
+      "visual": {
+        "border": true,
+        "accent": false,
+        "whiteBackground": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      }
+    },
+    "markup2": {
+      "uid": "markup2",
+      "type": "markup-include",
+      "title": "",
+      "theme": "theme-teal",
+      "contentEditor": {
+        "style": "tp5",
+        "title": "White Background TP5",
+        "titleStyle": "small",
+        "useInlineHTML": true,
+        "inlineHTML": "<p>This TP5 markup include uses white-background styling with border enabled for comparison.</p>",
+        "srcUrl": "#example",
+        "showHeader": true,
+        "showNoDataMessage": false,
+        "noDataMessageText": "No Data Available"
+      },
+      "visual": {
+        "border": true,
+        "accent": false,
+        "whiteBackground": true,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      }
+    },
+    "markup3": {
+      "uid": "markup3",
+      "type": "markup-include",
+      "title": "",
+      "theme": "theme-purple",
+      "contentEditor": {
+        "style": "tp5",
+        "title": "TP5 Markup Include (No White BG)",
+        "titleStyle": "small",
+        "useInlineHTML": true,
+        "inlineHTML": "<p>This TP5 markup include uses the standard background and border settings for side-by-side alignment testing.</p>",
+        "srcUrl": "#example",
+        "showHeader": true,
+        "showNoDataMessage": false,
+        "noDataMessageText": "No Data Available"
+      },
+      "visual": {
+        "border": true,
+        "accent": false,
+        "whiteBackground": false,
+        "hideBackgroundColor": false,
+        "borderColorTheme": false
+      }
     }
   }
 }
-

package/src/components/DashboardEditors.tsx

@@ -77,6 +77,11 @@ const DashboardEditors: React.FC<DashboardEditorProps> = ({
         <CdcDataBite
           key={visualizationKey}
           config={{ ...visualizationConfig, newViz: true }}
+          rawData={
+            state.data?.[visualizationConfig.dataKey] ||
+            state.config.datasets?.[visualizationConfig.dataKey]?.data ||
+            []
+          }
           isEditor={true}
           setConfig={_updateConfig}
           isDashboard={true}
@@ -89,6 +94,11 @@ const DashboardEditors: React.FC<DashboardEditorProps> = ({
         <CdcWaffleChart
           key={visualizationKey}
           config={visualizationConfig}
+          rawData={
+            state.data?.[visualizationConfig.dataKey] ||
+            state.config.datasets?.[visualizationConfig.dataKey]?.data ||
+            []
+          }
           isEditor={true}
           setConfig={_updateConfig}
           isDashboard={true}
@@ -101,6 +111,11 @@ const DashboardEditors: React.FC<DashboardEditorProps> = ({
         <CdcMarkupInclude
           key={visualizationKey}
           config={visualizationConfig}
+          rawData={
+            state.data?.[visualizationConfig.dataKey] ||
+            state.config.datasets?.[visualizationConfig.dataKey]?.data ||
+            []
+          }
           isEditor={true}
           setConfig={_updateConfig}
           isDashboard={true}

package/src/components/DashboardFilters/DashboardFilters.test.tsx

@@ -0,0 +1,129 @@
+import { fireEvent, render } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import DashboardFilters from './DashboardFilters'
+
+vi.mock('@cdc/core/components/ui/Icon', () => ({
+  default: props => <span data-testid='mock-icon' {...props} />
+}))
+
+const createDataBackedFilter = (displaySubgroupingOnly = false) =>
+  ({
+    key: 'Year and Quarter',
+    type: 'datafilter',
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: ['2023', '2024'],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    active: '2023',
+    displaySubgroupingOnly,
+    subGrouping: {
+      columnName: 'quarter',
+      active: 'Q2',
+      valuesLookup: {
+        '2023': { values: ['Q1', 'Q2'] },
+        '2024': { values: ['Q3', 'Q4'] }
+      }
+    }
+  } as any)
+
+const createApiBackedFilter = (displaySubgroupingOnly = false) =>
+  ({
+    key: 'API Year and Quarter',
+    type: 'urlfilter',
+    filterStyle: 'nested-dropdown',
+    showDropdown: true,
+    values: [],
+    columnName: 'year',
+    id: 0,
+    parents: [],
+    order: 'asc',
+    active: '2023',
+    displaySubgroupingOnly,
+    apiFilter: {
+      apiEndpoint: '/api/nested-options',
+      valueSelector: 'year',
+      subgroupValueSelector: 'quarter'
+    },
+    subGrouping: {
+      columnName: 'quarter',
+      active: 'Q2',
+      valuesLookup: {}
+    }
+  } as any)
+
+const apiFilterDropdowns = {
+  '/api/nested-options': [
+    {
+      value: '2023',
+      text: '2023',
+      subOptions: [
+        { value: 'Q1', text: 'Q1' },
+        { value: 'Q2', text: 'Q2' }
+      ]
+    },
+    {
+      value: '2024',
+      text: '2024',
+      subOptions: [
+        { value: 'Q3', text: 'Q3' },
+        { value: 'Q4', text: 'Q4' }
+      ]
+    }
+  ]
+}
+
+describe('DashboardFilters nested dropdown display', () => {
+  it.each([
+    ['data-backed', createDataBackedFilter(false), {}, '2023 - Q2'],
+    ['data-backed subgroup only', createDataBackedFilter(true), {}, 'Q2'],
+    ['api-backed', createApiBackedFilter(false), apiFilterDropdowns, '2023 - Q2'],
+    ['api-backed subgroup only', createApiBackedFilter(true), apiFilterDropdowns, 'Q2']
+  ])('shows the expected closed text for %s filters', (_label, filter, dropdowns, expectedValue) => {
+    const { container } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={dropdowns as any}
+        filters={[filter]}
+        handleOnChange={vi.fn()}
+        show={[0]}
+        showSubmit={false}
+      />
+    )
+
+    const input = container.querySelector('.nested-dropdown input')
+    expect(input).toHaveValue(expectedValue)
+  })
+
+  it.each([
+    ['data-backed', createDataBackedFilter(false), {}],
+    ['data-backed subgroup only', createDataBackedFilter(true), {}],
+    ['api-backed', createApiBackedFilter(false), apiFilterDropdowns],
+    ['api-backed subgroup only', createApiBackedFilter(true), apiFilterDropdowns]
+  ])('keeps nested dropdown selection behavior unchanged for %s filters', (_label, filter, dropdowns) => {
+    const handleOnChange = vi.fn()
+    const { container, getByText, queryByText } = render(
+      <DashboardFilters
+        applyFilters={vi.fn()}
+        apiFilterDropdowns={dropdowns as any}
+        filters={[filter]}
+        handleOnChange={handleOnChange}
+        show={[0]}
+        showSubmit={false}
+      />
+    )
+
+    const input = container.querySelector('.nested-dropdown input') as HTMLInputElement
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'Q3' } })
+
+    expect(getByText('2024')).toBeInTheDocument()
+    expect(queryByText('2023')).not.toBeInTheDocument()
+
+    fireEvent.click(getByText('Q3'))
+
+    expect(handleOnChange).toHaveBeenCalledWith(0, ['2024', 'Q3'])
+  })
+})