@cdc/editor 4.25.10 → 4.26.1

package/example/private/markup-footer/mortality-deaths-footnotes-age.csv

@@ -0,0 +1,3 @@
+M_short_indicator_text,M_footnote_text_to_define_short_text,M_datasource_footnotetext,M_footnote_context1,M_footnote_context2,M_footnote_context3
+Cause-specific Deaths,ATD = Attributable to Diabetes,"Data Sources: Centers for Disease Control and Prevention, National Center for Health Statistics. Multiple Cause of Death 1999-2013 from CDC WONDER Online Database, 2013 United States Renal Data System.","All Causes of Death (Estimated): Reports the estimated number of deaths from all causes attributable to diabetes as a rate (per 100,000 persons age 15+). ","Cardiovascular Disease (Estimated): Reports the estimated number of deaths from cardiovascular disease attributable to diabetes as a rate (per 100,000 persons age 15+). ","End-stage Renal Disease: Reports the number of deaths from end-stage renal disease attributable to diabetes as a rate (per 100,000 persons age 15+). "
+Diabetes Cause of Death,,"Data Sources: Centers for Disease Control and Prevention, National Center for Health Statistics. Multiple Cause of Death 2021 from CDC WONDER Online Database.",Number of Deaths: Reports the number of deaths with diabetes as the underlying cause of death.,,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.25.10",
+  "version": "4.26.1",
   "description": "React component for generating a new component entry",
   "moduleName": "CdcEditor",
   "main": "dist/cdceditor",
@@ -25,13 +25,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.25.10",
-    "@cdc/core": "^4.25.10",
-    "@cdc/dashboard": "^4.25.10",
-    "@cdc/data-bite": "^4.25.10",
-    "@cdc/map": "^4.25.10",
-    "@cdc/markup-include": "^4.25.10",
-    "@cdc/waffle-chart": "^4.25.10",
+    "@cdc/chart": "^4.26.1",
+    "@cdc/core": "^4.26.1",
+    "@cdc/dashboard": "^4.26.1",
+    "@cdc/data-bite": "^4.26.1",
+    "@cdc/map": "^4.26.1",
+    "@cdc/markup-include": "^4.26.1",
+    "@cdc/waffle-chart": "^4.26.1",
     "axios": "^1.9.0",
     "d3": "^7.9.0",
     "react-dropzone": "^14.3.8",
@@ -44,9 +44,8 @@
   "devDependencies": {
     "@rollup/plugin-dsv": "^3.0.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^4.4.11",
     "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vite-plugin-svgr": "^2.4.0"
+    "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "c2db758e74ab9b9ca1667a6f9cb41dd0dccf985d"
+  "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16"
 }

package/src/components/ChooseTab.tsx

@@ -26,6 +26,7 @@ import SankeyIcon from '@cdc/core/assets/icon-sankey.svg'
 import ComboChartIcon from '@cdc/core/assets/icon-combo-chart.svg'
 import EpiChartIcon from '@cdc/core/assets/icon-epi-chart.svg'
 import TableIcon from '@cdc/core/assets/icon-table.svg'
+import WarmingStripesIcon from '@cdc/core/assets/icon-warming-stripes.svg'
 import Icon from '@cdc/core/components/ui/Icon'
 
 import {
@@ -276,6 +277,67 @@ const ChooseTab: React.FC = (): JSX.Element => {
 export default ChooseTab
 
 const buttons = [
+  // General - sorted by label
+  {
+    id: 15,
+    category: 'General',
+    label: 'Dashboard',
+    type: 'dashboard',
+    subType: null,
+    orientation: null,
+    icon: <DashboardIcon />,
+    content: 'Present multiple data visualizations with shared filter controls.'
+  },
+  {
+    id: 16,
+    category: 'General',
+    label: 'Data Bite',
+    type: 'data-bite',
+    subType: null,
+    orientation: null,
+    icon: <DataBiteIcon />,
+    content: 'Highlight a single aggregated value (e.g., sum or median).'
+  },
+  {
+    id: 24,
+    category: 'General',
+    label: 'Data Table',
+    type: 'table',
+    subType: null,
+    icon: <TableIcon />
+  },
+  {
+    id: 18,
+    category: 'General',
+    label: 'Gauge Chart',
+    type: 'waffle-chart',
+    subType: 'Gauge',
+    orientation: null,
+    icon: <GaugeChartIcon />,
+    content: `Specify the calculation of a single data point (such as a percentage value) and present it on a horizontal
+              scale.`
+  },
+  {
+    id: 17,
+    category: 'General',
+    label: 'Waffle Chart',
+    type: 'waffle-chart',
+    subType: 'Waffle',
+    orientation: null,
+    icon: <WaffleChartIcon />,
+    content: 'Highlight a piece of data in relationship to a data set.'
+  },
+  // Charts - sorted by label
+  {
+    id: 6,
+    category: 'Charts',
+    label: 'Area Chart',
+    type: 'chart',
+    subType: 'Area Chart',
+    orientation: 'vertical',
+    icon: <AreaChartIcon />,
+    content: 'Display an area chart to visualize quantities over time.'
+  },
   {
     id: 1,
     category: 'Charts',
@@ -294,6 +356,36 @@ const buttons = [
     icon: <BarIcon />,
     content: 'Use bars to show comparisons between data categories.'
   },
+  {
+    id: 9,
+    category: 'Charts',
+    label: 'Box Plot',
+    type: 'chart',
+    subType: 'Box Plot',
+    orientation: 'vertical',
+    icon: <BoxPlotIcon />,
+    content: 'Display a box plot to visualize the distribution of numerical data through quartiles.'
+  },
+  {
+    id: 3,
+    category: 'Charts',
+    label: 'Combo Chart',
+    type: 'chart',
+    subType: 'Combo',
+    orientation: 'vertical',
+    icon: <ComboChartIcon />,
+    content: 'Use bars to show comparisons between data categories.'
+  },
+  {
+    id: 14,
+    category: 'Charts',
+    label: 'Deviation Bar',
+    type: 'chart',
+    subType: 'Deviation Bar',
+    orientation: 'Pie',
+    icon: <DeviationIcon />,
+    content: 'Use deviation bars to display how individual values differ from a target'
+  },
   {
     id: 2,
     category: 'Charts',
@@ -314,13 +406,24 @@ const buttons = [
     content: 'Use bars to show comparisons between data categories.'
   },
   {
-    id: 3,
+    id: 7,
     category: 'Charts',
-    label: 'Combo Chart',
+    label: 'Forecast Chart',
     type: 'chart',
-    subType: 'Combo',
+    subType: 'Forecasting',
     orientation: 'vertical',
-    icon: <ComboChartIcon />,
+    icon: <ForecastIcon />,
+    content: 'Display a forecasting chart to predict future data trends.'
+  },
+  {
+    id: 12,
+    category: 'Charts',
+    label: 'Horizontal Bar (Stacked)',
+    type: 'chart',
+    subType: 'Bar',
+    visualizationSubType: 'stacked',
+    orientation: 'horizontal',
+    icon: <HorizontalStackIcon />,
     content: 'Use bars to show comparisons between data categories.'
   },
   {
@@ -344,24 +447,24 @@ const buttons = [
     content: 'Use paired bars to show comparisons between two different data categories.'
   },
   {
-    id: 6,
+    id: 13,
     category: 'Charts',
-    label: 'Area Chart',
+    label: 'Pie',
     type: 'chart',
-    subType: 'Area Chart',
-    orientation: 'vertical',
-    icon: <AreaChartIcon />,
-    content: 'Display an area chart to visualize quantities over time.'
+    subType: 'Pie',
+    orientation: 'Pie',
+    icon: <PieIcon />,
+    content: 'Present the numerical proportions of a data series.'
   },
   {
-    id: 7,
+    id: 10,
     category: 'Charts',
-    label: 'Forecast Chart',
+    label: 'Sankey Diagram',
     type: 'chart',
-    subType: 'Forecasting',
+    subType: 'Sankey',
     orientation: 'vertical',
-    icon: <ForecastIcon />,
-    content: 'Display a forecasting chart to predict future data trends.'
+    icon: <SankeyIcon />,
+    content: 'Display a sankey diagram'
   },
   {
     id: 8,
@@ -374,116 +477,37 @@ const buttons = [
     content: 'Display a scatter plot to explore relationships between numeric variables.'
   },
   {
-    id: 9,
-    category: 'Charts',
-    label: 'Box Plot',
-    type: 'chart',
-    subType: 'Box Plot',
-    orientation: 'vertical',
-    icon: <BoxPlotIcon />,
-    content: 'Display a box plot to visualize the distribution of numerical data through quartiles.'
-  },
-  {
-    id: 10,
-    category: 'Charts',
-    label: 'Sankey Diagram',
-    type: 'chart',
-    subType: 'Sankey',
-    orientation: 'vertical',
-    icon: <SankeyIcon />,
-    content: 'Display a sankey diagram'
-  },
-  {
-    id: 11,
+    id: 25,
     category: 'Charts',
-    label: 'Forecast Chart',
+    label: 'Warming Stripes',
     type: 'chart',
-    subType: 'Forecasting',
+    subType: 'Warming Stripes',
     orientation: 'vertical',
-    icon: <ForecastIcon />,
-    content: 'Display a forecasting chart'
-  },
-  {
-    id: 12,
-    category: 'Charts',
-    label: 'Horizontal Bar (Stacked)',
-    type: 'chart',
-    subType: 'Bar',
-    visualizationSubType: 'stacked',
-    orientation: 'horizontal',
-    icon: <HorizontalStackIcon />,
-    content: 'Use bars to show comparisons between data categories.'
-  },
-  {
-    id: 13,
-    category: 'Charts',
-    label: 'Pie',
-    type: 'chart',
-    subType: 'Pie',
-    orientation: 'Pie',
-    icon: <PieIcon />,
-    content: 'Present the numerical proportions of a data series.'
-  },
-  {
-    id: 14,
-    category: 'Charts',
-    label: 'Deviation Bar',
-    type: 'chart',
-    subType: 'Deviation Bar',
-    orientation: 'Pie',
-    icon: <DeviationIcon />,
-    content: 'Use deviation bars to display how individual values differ from a target'
-  },
-  {
-    id: 15,
-    category: 'General',
-    label: 'Dashboard',
-    type: 'dashboard',
-    subType: null,
-    orientation: null,
-    icon: <DashboardIcon />,
-    content: 'Present multiple data visualizations with shared filter controls.'
-  },
-  {
-    id: 16,
-    category: 'General',
-    label: 'Data Bite',
-    type: 'data-bite',
-    subType: null,
-    orientation: null,
-    icon: <DataBiteIcon />,
-    content: 'Highlight a single aggregated value (e.g., sum or median).'
-  },
-  {
-    id: 17,
-    category: 'General',
-    label: 'Waffle Chart',
-    type: 'waffle-chart',
-    subType: 'Waffle',
-    orientation: null,
-    icon: <WaffleChartIcon />,
-    content: 'Highlight a piece of data in relationship to a data set.'
+    legend: {
+      position: 'bottom'
+    },
+    icon: <WarmingStripesIcon />,
+    content: 'Display temperature anomalies over time using color-coded vertical stripes.'
   },
+  // Maps - sorted by label
   {
-    id: 18,
-    category: 'General',
-    label: 'Gauge Chart',
-    type: 'waffle-chart',
-    subType: 'Gauge',
-    orientation: null,
-    icon: <GaugeChartIcon />,
-    content: `Specify the calculation of a single data point (such as a percentage value) and present it on a horizontal
-              scale.`
+    id: 23,
+    category: 'Maps',
+    label: 'U.S. Geocode',
+    type: 'map',
+    subType: 'us-county',
+    generalType: 'us-geocode',
+    icon: <UsaIcon />,
+    content: 'United States GeoCode'
   },
   {
-    id: 19,
+    id: 22,
     category: 'Maps',
-    label: 'United States (State- or County-Level)',
+    label: 'U.S. State',
     type: 'map',
-    subType: 'us',
-    icon: <UsaIcon />,
-    content: 'Present a U.S. choropleth map at state or county level.',
-    position: 'right'
+    subType: 'single-state',
+    icon: <AlabamaGraphic />,
+    content: 'Present a choropleth map of an individual U.S. state.'
   },
   {
     id: 20,
@@ -495,6 +519,16 @@ const buttons = [
     content: 'Present a U.S. choropleth map at state or county level.',
     position: 'right'
   },
+  {
+    id: 19,
+    category: 'Maps',
+    label: 'United States (State- or County-Level)',
+    type: 'map',
+    subType: 'us',
+    icon: <UsaIcon />,
+    content: 'Present a U.S. choropleth map at state or county level.',
+    position: 'right'
+  },
   {
     id: 21,
     category: 'Maps',
@@ -503,32 +537,5 @@ const buttons = [
     subType: 'world',
     icon: <GlobeIcon />,
     content: 'Present a choropleth map of the world.'
-  },
-  {
-    id: 22,
-    category: 'Maps',
-    label: 'U.S. State',
-    type: 'map',
-    subType: 'single-state',
-    icon: <AlabamaGraphic />,
-    content: 'Present a choropleth map of an individual U.S. state.'
-  },
-  {
-    id: 23,
-    category: 'Maps',
-    label: 'U.S. Geocode',
-    type: 'map',
-    subType: 'us-county',
-    generalType: 'us-geocode',
-    icon: <UsaIcon />,
-    content: 'United States GeoCode'
-  },
-  {
-    id: 24,
-    category: 'General',
-    label: 'Data Table',
-    type: 'table',
-    subType: null,
-    icon: <TableIcon />
   }
 ]

package/src/components/ConfigureTab.tsx

@@ -30,7 +30,11 @@ export default function ConfigureTab({ containerEl }) {
         </ErrorBoundary>
       )
     case 'waffle-chart':
-      if (config.visualizationType === 'Waffle' || config.visualizationType === 'Gauge') {
+      if (
+        config.visualizationType === 'Waffle' ||
+        config.visualizationType === 'TP5 Waffle' ||
+        config.visualizationType === 'Gauge'
+      ) {
         return (
           <ErrorBoundary component='CdcWaffleChart'>
             <CdcWaffleChart isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />

package/src/components/DataImport/components/SampleData.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 import SampleDataContext from './samples/SampleDataContext'
+import { cityTemperature } from '@visx/mock-data'
 
 // Data Samples
 import validMapData from './samples/valid-data-map.csv?raw'
@@ -17,6 +18,13 @@ import validRegionData from './samples/valid-region-data.json?raw'
 import validSankeyData from './samples/valid-sankey-data.json?raw'
 import pivotData from './samples/pivotData.json?raw'
 
+// Convert visx cityTemperature data to CSV format
+const visxTemperatureData = (() => {
+  const headers = Object.keys(cityTemperature[0])
+  const rows = cityTemperature.map(row => Object.values(row).join(','))
+  return [headers.join(','), ...rows].join('\n')
+})()
+
 // Add additional data to samples
 const sampleData = {
   charts: [
@@ -54,6 +62,11 @@ const sampleData = {
       text: 'Pivot Table Data',
       fileName: 'pivotData.json',
       data: pivotData
+    },
+    {
+      text: 'Warming Stripes Temperature Data',
+      fileName: 'visx-temperature-data.csv',
+      data: visxTemperatureData
     }
   ],
   maps: [

package/src/components/DataImport/components/samples/valid-boxplot.csv

@@ -1,17 +1,37 @@
-Group_Category,Value
-category one,21
-category one,19
-category one,23
-category one,24
-category two,18
-category two,10
-category two,12
-category two,19
-category three,30
-category three,35
-category three,36
-category three,40
-category four,50
-category four,54
-category four,42
-category four,159
+Group,Score
+Group A,8
+Group A,24
+Group A,32
+Group A,40
+Group A,43
+Group A,72
+Group A,83
+Group A,90
+Group A,92
+Group A,96
+Group A,112
+Group A,278
+Group B,5
+Group B,10
+Group B,15
+Group B,20
+Group B,25
+Group B,30
+Group B,35
+Group B,40
+Group B,45
+Group B,50
+Group B,55
+Group B,60
+Group C,12
+Group C,44
+Group C,46
+Group C,63
+Group C,76
+Group C,88
+Group C,94
+Group C,99
+Group C,112
+Group C,118
+Group C,240
+Group C,256

package/src/components/PreviewDataTable.tsx

@@ -260,36 +260,43 @@ const PreviewDataTable = () => {
     <div className='table-responsive'>
       <table className='mt-2 w-100 table table-striped data-table table-sm ' aria-hidden='true' {...getTableProps}>
         <thead>
-          {headerGroups.map(headerGroup => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => {
-                const { key, ...headerProps } = column.getHeaderProps(column.getSortByToggleProps())
-                return (
-                  <th
-                    key={key}
-                    scope='col'
-                    {...headerProps}
-                    className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : ''}
-                    title={column.Header}
-                  >
-                    {column.render('Header')}
-                    <div {...column.getResizerProps()} className='resizer' />
-                  </th>
-                )
-              })}
-            </tr>
-          ))}
+          {headerGroups.map(headerGroup => {
+            const { key, ...headerGroupProps } = headerGroup.getHeaderGroupProps()
+            return (
+              <tr key={key} {...headerGroupProps}>
+                {headerGroup.headers.map(column => {
+                  const { key: columnKey, ...headerProps } = column.getHeaderProps(column.getSortByToggleProps())
+                  return (
+                    <th
+                      key={columnKey}
+                      scope='col'
+                      {...headerProps}
+                      className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : ''}
+                      title={column.Header}
+                    >
+                      {column.render('Header')}
+                      <div {...column.getResizerProps()} className='resizer' />
+                    </th>
+                  )
+                })}
+              </tr>
+            )
+          })}
         </thead>
         <tbody {...getTableBodyProps()}>
           {page.map(row => {
             prepareRow(row)
+            const { key, ...rowProps } = row.getRowProps()
             return (
-              <tr {...row.getRowProps()}>
-                {row.cells.map(cell => (
-                  <td {...cell.getCellProps()} title={cell.value}>
-                    {cell.render('Cell')}
-                  </td>
-                ))}
+              <tr key={key} {...rowProps}>
+                {row.cells.map(cell => {
+                  const { key: cellKey, ...cellProps } = cell.getCellProps()
+                  return (
+                    <td key={cellKey} {...cellProps} title={cell.value}>
+                      {cell.render('Cell')}
+                    </td>
+                  )
+                })}
               </tr>
             )
           })}