@cdc/dashboard 4.26.3 → 4.26.5

package/src/_stories/FilteredTextMigrationComparison.stories.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import CdcFilteredText from '@cdc/filtered-text/src/CdcFilteredText'
+import CdcMarkupInclude from '@cdc/markup-include/src/CdcMarkupInclude'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import { expect, waitFor } from 'storybook/test'
+
+const comparisonData = [
+  {
+    State: 'CA',
+    Message: 'Representative filtered text output'
+  }
+]
+
+const meta: Meta = {
+  title: 'Components/Pages/Dashboard/Filtered Text Migration Comparison'
+}
+
+type Story = StoryObj
+
+export const Standalone_Handoff_And_Migrated_Output: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+      <CdcFilteredText
+        config={{
+          type: 'filtered-text',
+          title: 'Legacy filtered text',
+          textColumn: 'Message',
+          data: comparisonData,
+          filters: [{ columnName: 'State', columnValue: 'CA' }]
+        }}
+        isEditor={false}
+      />
+      <CdcMarkupInclude
+        config={
+          {
+            type: 'markup-include',
+            theme: 'theme-blue',
+            data: comparisonData,
+            enableMarkupVariables: true,
+            markupVariables: [
+              {
+                sourceType: 'column',
+                outputType: 'value',
+                name: 'Message',
+                tag: '{{message}}',
+                columnName: 'Message',
+                conditions: [{ columnName: 'State', isOrIsNotEqualTo: 'is', value: 'CA' }],
+                selectionMode: 'first'
+              }
+            ],
+            contentEditor: {
+              title: 'Migrated markup include',
+              inlineHTML: '{{message}}',
+              useInlineHTML: true,
+              srcUrl: '',
+              showHeader: true,
+              style: 'default'
+            },
+            visual: {
+              border: false,
+              accent: false,
+              background: false,
+              hideBackgroundColor: false,
+              borderColorTheme: false
+            }
+          } as any
+        }
+        configUrl=''
+        datasets={{}}
+        isEditor={false}
+        isDashboard={false}
+        setConfig={() => {}}
+      />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    await waitFor(() => {
+      expect(canvasElement.textContent).toContain('Filtered Text Has Been Migrated')
+      expect(canvasElement.textContent).toContain('Use the markup-include package to render this visualization.')
+      expect(canvasElement.textContent?.match(/Representative filtered text output/g)?.length).toBe(1)
+    })
+  }
+}
+
+export default meta

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/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/Column.test.tsx

@@ -0,0 +1,176 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { DashboardContext, DashboardDispatchContext, initialState } from '../DashboardContext'
+import { DashboardCopyPasteContext } from '../DashboardCopyPasteContext'
+import Column from './Column'
+
+vi.mock('react-dnd', () => ({
+  useDrop: () => [{ isOver: false, canDrop: false }, vi.fn()]
+}))
+
+vi.mock('./Widget/Widget', () => ({
+  default: ({ title }) => <div>{title}</div>
+}))
+
+const renderColumn = ({
+  data,
+  copiedWidget = undefined,
+  sharedFilters = [],
+  visualizations = {}
+}: {
+  data: any
+  copiedWidget?: any
+  sharedFilters?: any[]
+  visualizations?: any
+}) => {
+  const dispatch = vi.fn()
+  const clearCopiedWidget = vi.fn()
+
+  render(
+    <DashboardContext.Provider
+      value={
+        {
+          ...initialState,
+          config: {
+            type: 'dashboard',
+            activeDashboard: 0,
+            dashboard: { sharedFilters },
+            datasets: {},
+            rows: [{ columns: [data], expandCollapseAllButtons: false }],
+            visualizations: {
+              'existing-widget': {
+                uid: 'existing-widget',
+                type: 'markup-include',
+                visualizationType: 'markup-include',
+                contentEditor: { title: 'Existing' }
+              },
+              ...visualizations
+            }
+          },
+          outerContainerRef: vi.fn(),
+          setParentConfig: vi.fn(),
+          isDebug: false,
+          isEditor: true,
+          reloadURLData: vi.fn(),
+          loadAPIFilters: vi.fn(),
+          setAPIFilterDropdowns: vi.fn(),
+          setAPILoading: vi.fn(),
+          data: {}
+        } as any
+      }
+    >
+      <DashboardDispatchContext.Provider value={dispatch}>
+        <DashboardCopyPasteContext.Provider value={{ copiedWidget, copyWidget: vi.fn(), clearCopiedWidget }}>
+          <Column data={data} rowIdx={0} colIdx={0} toggleRow={false} />
+        </DashboardCopyPasteContext.Provider>
+      </DashboardDispatchContext.Provider>
+    </DashboardContext.Provider>
+  )
+
+  return { dispatch, clearCopiedWidget }
+}
+
+describe('Column copy paste slots', () => {
+  it('shows paste-ready text in an empty simple column and dispatches clone on click', () => {
+    const copiedWidget = { sourceWidgetKey: 'source-widget', label: 'Source' }
+    const { dispatch, clearCopiedWidget } = renderColumn({ data: { width: 12 }, copiedWidget })
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Click here to paste copied component or drag and drop a new visualization' })
+    )
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'CLONE_VISUALIZATION',
+      payload: { sourceWidgetKey: 'source-widget', rowIdx: 0, colIdx: 0 }
+    })
+    expect(clearCopiedWidget).toHaveBeenCalled()
+  })
+
+  it('shows paste-ready text in the empty conditional slot and dispatches with entry index', () => {
+    const copiedWidget = { sourceWidgetKey: 'source-widget', label: 'Source' }
+    const { dispatch } = renderColumn({
+      data: { width: 12, conditionalWidgets: [{ widget: 'existing-widget' }] },
+      copiedWidget
+    })
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'Click here to paste copied alternate visualization or drag and drop a new alternate'
+      })
+    )
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'CLONE_VISUALIZATION',
+      payload: { sourceWidgetKey: 'source-widget', rowIdx: 0, colIdx: 0, entryIdx: 1 }
+    })
+  })
+
+  it('labels empty conditional slots as first-match alternates', () => {
+    renderColumn({
+      data: { width: 12, conditionalWidgets: [{ widget: 'existing-widget' }] }
+    })
+
+    expect(screen.getByText('Drag and drop an alternate visualization.')).toBeInTheDocument()
+    expect(
+      screen.getByText('If multiple conditions match, only the first match in this column is shown.')
+    ).toBeInTheDocument()
+  })
+})
+
+describe('Column widget summaries', () => {
+  it('shows dashboard filter labels from user-entered keys when they are configured', () => {
+    renderColumn({
+      data: { width: 12, widget: 'dashboard-filters' },
+      sharedFilters: [
+        { key: 'State', columnName: 'state' },
+        { key: 'Year', columnName: 'year' },
+        { key: 'Topic', columnName: 'topic' },
+        { key: 'Response', columnName: 'response' }
+      ],
+      visualizations: {
+        'dashboard-filters': {
+          uid: 'dashboard-filters',
+          type: 'dashboardFilters',
+          visualizationType: 'dashboardFilters',
+          sharedFilterIndexes: [0, 1, 2, 3]
+        }
+      }
+    })
+
+    expect(screen.getByText('State, Year, Topic, Response')).toBeInTheDocument()
+  })
+
+  it('falls back to dashboard filter columns when labels are not configured', () => {
+    renderColumn({
+      data: { width: 12, widget: 'dashboard-filters' },
+      sharedFilters: [{ key: '', columnName: 'state' }, { columnName: 'year' }],
+      visualizations: {
+        'dashboard-filters': {
+          uid: 'dashboard-filters',
+          type: 'dashboardFilters',
+          visualizationType: 'dashboardFilters',
+          sharedFilterIndexes: [0, 1]
+        }
+      }
+    })
+
+    expect(screen.getByText('state, year')).toBeInTheDocument()
+  })
+
+  it('uses the table label for table summaries', () => {
+    renderColumn({
+      data: { width: 12, widget: 'table-widget' },
+      visualizations: {
+        'table-widget': {
+          uid: 'table-widget',
+          type: 'table',
+          visualizationType: 'table',
+          table: { label: 'Custom Table' }
+        }
+      }
+    })
+
+    expect(screen.getByText('Custom Table')).toBeInTheDocument()
+  })
+})