@cdc/editor 4.24.2 → 4.24.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/editor",
-  "version": "4.24.2",
+  "version": "4.24.3",
   "description": "React component for generating a new component entry",
   "moduleName": "CdcEditor",
   "main": "dist/cdceditor",
@@ -24,13 +24,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.24.2",
-    "@cdc/core": "^4.24.2",
-    "@cdc/dashboard": "^4.24.2",
-    "@cdc/data-bite": "^4.24.2",
-    "@cdc/map": "^4.24.2",
-    "@cdc/markup-include": "^4.24.2",
-    "@cdc/waffle-chart": "^4.24.2",
+    "@cdc/chart": "^4.24.3",
+    "@cdc/core": "^4.24.3",
+    "@cdc/dashboard": "^4.24.3",
+    "@cdc/data-bite": "^4.24.3",
+    "@cdc/map": "^4.24.3",
+    "@cdc/markup-include": "^4.24.3",
+    "@cdc/waffle-chart": "^4.24.3",
     "axios": "^1.6.0",
     "d3": "^7.0.0",
     "html-react-parser": "^3.0.8",
@@ -43,5 +43,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "edde49c96dee146de5e3a4537880b1bcf4dbee08"
+  "gitHead": "9c7ef7ca74f2d2a1e04d923b133fe0fc557a62bf"
 }

package/src/_stories/Editor.stories.tsx

@@ -1,5 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react'
 import CdcEditor from '../CdcEditor'
+import StandAloneTableConfig from './_mock/standalone-table.json'
+import BlankConfig from './_mock/blank-config.json'
+import PivotFilterConfig from './_mock/pivot-filter.json'
 
 const meta: Meta<typeof CdcEditor> = {
   title: 'Components/Pages/CdcEditor',
@@ -9,88 +12,20 @@ export default meta
 
 type Story = StoryObj<typeof CdcEditor>
 
-const config = {
-  dashboard: {
-    theme: 'theme-blue'
-  },
-  rows: [
-    [
-      {
-        width: 12
-      },
-      {},
-      {}
-    ]
-  ],
-  visualizations: {},
-  table: {
-    label: 'Data Table',
-    show: true,
-    showDownloadUrl: false,
-    showVertical: true
-  },
-  newViz: true,
-  datasets: {
-    'https://data.cdc.gov/resource/vdgb-f9s3.json': {
-      data: [
-        {
-          surveyname: 'American Indian Adult Tobacco Survey',
-          surveynameabbrev: 'AI ATS',
-          year: '2007',
-          e_cigarettes: 'No',
-          question: 'During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?',
-          responses: "Don't know/Not sure"
-        },
-        {
-          surveyname: 'American Indian Adult Tobacco Survey',
-          surveynameabbrev: 'AI ATS',
-          year: '2007',
-          e_cigarettes: 'No',
-          question: 'During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?',
-          responses: 'Refused'
-        },
-        {
-          surveyname: 'American Indian Adult Tobacco Survey',
-          surveynameabbrev: 'AI ATS',
-          year: '2007',
-          e_cigarettes: 'No',
-          question: 'During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?',
-          responses: 'No'
-        }
-      ]
-    }
-  },
-  data: [
-    {
-      surveyname: 'American Indian Adult Tobacco Survey',
-      surveynameabbrev: 'AI ATS',
-      year: '2007',
-      e_cigarettes: 'No',
-      question: 'During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?',
-      responses: "Don't know/Not sure"
-    },
-    {
-      surveyname: 'American Indian Adult Tobacco Survey',
-      surveynameabbrev: 'AI ATS',
-      year: '2007',
-      e_cigarettes: 'No',
-      question: 'During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?',
-      responses: 'Refused'
-    },
-    {
-      surveyname: 'American Indian Adult Tobacco Survey',
-      surveynameabbrev: 'AI ATS',
-      year: '2007',
-      e_cigarettes: 'No',
-      question: 'During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?',
-      responses: 'No'
-    }
-  ],
-  type: 'dashboard'
+export const DefaultEditor: Story = {
+  args: {
+    config: BlankConfig
+  }
+}
+
+export const StandAloneTable: Story = {
+  args: {
+    config: StandAloneTableConfig
+  }
 }
 
-export const DashboardEditor: Story = {
+export const PivotFilter: Story = {
   args: {
-    config
+    config: PivotFilterConfig
   }
 }

package/src/_stories/_mock/blank-config.json

@@ -0,0 +1,79 @@
+{
+  "dashboard": {
+    "theme": "theme-blue"
+  },
+  "rows": [
+    [
+      {
+        "width": 12
+      },
+      {},
+      {}
+    ]
+  ],
+  "visualizations": {},
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showVertical": true
+  },
+  "newViz": true,
+  "datasets": {
+    "https://data.cdc.gov/resource/vdgb-f9s3.json": {
+      "data": [
+        {
+          "surveyname": "American Indian Adult Tobacco Survey",
+          "surveynameabbrev": "AI ATS",
+          "year": "2007",
+          "e_cigarettes": "No",
+          "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
+          "responses": "Don't know/Not sure"
+        },
+        {
+          "surveyname": "American Indian Adult Tobacco Survey",
+          "surveynameabbrev": "AI ATS",
+          "year": "2007",
+          "e_cigarettes": "No",
+          "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
+          "responses": "Refused"
+        },
+        {
+          "surveyname": "American Indian Adult Tobacco Survey",
+          "surveynameabbrev": "AI ATS",
+          "year": "2007",
+          "e_cigarettes": "No",
+          "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
+          "responses": "No"
+        }
+      ]
+    }
+  },
+  "data": [
+    {
+      "surveyname": "American Indian Adult Tobacco Survey",
+      "surveynameabbrev": "AI ATS",
+      "year": "2007",
+      "e_cigarettes": "No",
+      "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
+      "responses": "Don't know/Not sure"
+    },
+    {
+      "surveyname": "American Indian Adult Tobacco Survey",
+      "surveynameabbrev": "AI ATS",
+      "year": "2007",
+      "e_cigarettes": "No",
+      "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
+      "responses": "Refused"
+    },
+    {
+      "surveyname": "American Indian Adult Tobacco Survey",
+      "surveynameabbrev": "AI ATS",
+      "year": "2007",
+      "e_cigarettes": "No",
+      "question": "During the past 12 months, have you stopped smoking for one day or longer because you were trying to quit smoking?",
+      "responses": "No"
+    }
+  ],
+  "type": "dashboard"
+}

package/src/_stories/_mock/pivot-filter.json

@@ -0,0 +1,135 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": [
+      {
+        "key": "Race",
+        "type": "datafilter",
+        "showDropdown": true,
+        "columnName": "Race",
+        "pivot": "Age-adjusted rate",
+        "values": ["Hispanic or Latino", "Non-Hispanic American Indian", "Non-Hispanic Black", "Non-Hispanic Asian or Pacific Islander", "Non-Hispanic White"],
+        "active": "Hispanic or Latino",
+        "tier": 1
+      }
+    ]
+  },
+  "rows": [
+    [
+      {
+        "width": 12,
+        "widget": "table1707935263149"
+      },
+      {},
+      {}
+    ]
+  ],
+  "visualizations": {
+    "table1707935263149": {
+      "newViz": true,
+      "openModal": false,
+      "uid": "table1707935263149",
+      "type": "table",
+      "table": {
+        "label": "Data Table",
+        "show": true,
+        "showDownloadUrl": false,
+        "showVertical": true,
+        "expanded": true
+      },
+      "columns": {},
+      "dataFormat": {},
+      "visualizationType": "table",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "formattedData": [
+        {
+          "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"
+        }
+      ],
+      "dataKey": "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"
+        }
+      ]
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showVertical": true
+  },
+  "newViz": 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": 178,
+      "dataFileName": "valid-data-chart.csv",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "CSV",
+      "preview": true
+    }
+  },
+  "type": "dashboard",
+  "runtime": {},
+  "data": [1, 2, 3]
+}

package/src/_stories/_mock/standalone-table.json

@@ -0,0 +1,144 @@
+{
+  "dashboard": {
+    "theme": "theme-blue"
+  },
+  "rows": [
+    [
+      {
+        "width": 12,
+        "widget": "table1707840146431"
+      },
+      {},
+      {}
+    ]
+  ],
+  "visualizations": {
+    "table1707840146431": {
+      "newViz": true,
+      "openModal": false,
+      "uid": "table1707840146431",
+      "table": {
+        "label": "Data Table",
+        "show": true,
+        "showDownloadUrl": false,
+        "showVertical": true,
+        "expanded": true
+      },
+      "type": "table",
+      "visualizationType": "table",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "columns": {},
+      "dataFormat": {},
+      "formattedData": [
+        {
+          "Race": "Hispanic or Latino",
+          "Age-adjusted rate": "644.2"
+        },
+        {
+          "Race": "Non-Hispanic American Indian",
+          "Age-adjusted rate": "6360.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"
+        }
+      ],
+      "dataKey": "valid-data-chart.csv",
+      "data": [
+        {
+          "Race": "Hispanic or Latino",
+          "Age-adjusted rate": "644.2"
+        },
+        {
+          "Race": "Non-Hispanic American Indian",
+          "Age-adjusted rate": "6360.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"
+        }
+      ]
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": false,
+    "showDownloadUrl": false,
+    "showVertical": true
+  },
+  "newViz": true,
+  "datasets": {
+    "valid-data-chart.csv": {
+      "data": [
+        {
+          "Race": "Hispanic or Latino",
+          "Age-adjusted rate": "644.2"
+        },
+        {
+          "Race": "Non-Hispanic American Indian",
+          "Age-adjusted rate": "6360.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": 178,
+      "dataFileName": "valid-data-chart.csv",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "CSV",
+      "preview": true
+    }
+  },
+  "data": [
+    {
+      "Race": "Hispanic or Latino",
+      "Age-adjusted rate": "644.2"
+    },
+    {
+      "Race": "Non-Hispanic American Indian",
+      "Age-adjusted rate": "6360.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"
+    }
+  ],
+  "type": "dashboard",
+  "runtime": {}
+}

package/src/components/ChooseTab.tsx

@@ -4,6 +4,7 @@ import '../scss/choose-vis-tab.scss'
 import ConfigContext, { EditorDispatchContext } from '../ConfigContext'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 
+import InfoIcon from '@cdc/core/assets/icon-info.svg'
 import DashboardIcon from '@cdc/core/assets/icon-dashboard.svg'
 import BarIcon from '@cdc/core/assets/icon-chart-bar.svg'
 import LineIcon from '@cdc/core/assets/icon-chart-line.svg'
@@ -23,6 +24,7 @@ import GaugeChartIcon from '@cdc/core/assets/icon-linear-gauge.svg'
 import ForestPlotIcon from '@cdc/core/assets/icon-chart-forest-plot.svg'
 import ForecastIcon from '@cdc/core/assets/icon-chart-forecast.svg'
 import DeviationIcon from '@cdc/core/assets/icon-deviation-bar.svg'
+import SankeyIcon from '@cdc/core/assets/icon-sankey.svg'
 import { Visualization } from '@cdc/core/types/Visualization'
 
 export default function ChooseTab() {
@@ -245,13 +247,22 @@ export default function ChooseTab() {
           </Tooltip>
         </li>
 
-        <li>
+        {/* <li>
           <Tooltip>
             <Tooltip.Target>
               <IconButton label='Forest Plot' type='chart' subType='Forest Plot' orientation='vertical' icon={<ForestPlotIcon />} />
             </Tooltip.Target>
             <Tooltip.Content>Display a forest plot</Tooltip.Content>
           </Tooltip>
+        </li> */}
+
+        <li>
+          <Tooltip>
+            <Tooltip.Target>
+              <IconButton label='Sankey Diagram' type='chart' subType='Sankey' orientation='vertical' icon={<SankeyIcon />} />
+            </Tooltip.Target>
+            <Tooltip.Content>Display a sankey diagram</Tooltip.Content>
+          </Tooltip>
         </li>
       </ul>
 

package/src/components/PreviewDataTable.tsx

@@ -101,7 +101,8 @@ const PreviewDataTable = ({ data }) => {
 
     let newData = [...data]
 
-    newData = generateColumns(newData)
+    const isSankey = Object.keys(newData[0]).includes('tableData')
+    newData = generateColumns(isSankey ? newData[0].tableData : newData)
     validateFipsCodeLength(newData)
     setTableData(newData)
   }, [data, generateColumns])

package/src/components/SampleData.tsx

@@ -2,18 +2,19 @@ import React, { useContext } from 'react'
 import SampleDataContext from '../samples/SampleDataContext'
 
 // Data Samples
-import validMapData from '../samples/valid-data-map.csv?raw'
-import validChartData from '../samples/valid-data-chart.csv?raw'
-import validCountyMapData from '../samples/valid-county-data.csv?raw'
-import validGeoPoint from '../samples/valid-geo-point.csv?raw'
-import validScatterPlot from '../samples/valid-scatterplot.csv?raw'
-import validBoxPlotData from '../samples/valid-boxplot.csv?raw'
-import validAreaChart from '../samples/valid-area-chart.json?raw'
-import validWorldGeocodeData from '../samples/valid-world-geocode.json?raw'
-import validForecastData from '../samples/valid-forecast-data.csv?raw'
-import validForestPlotData from '../samples/valid-forest-plot-data.csv?raw'
-import vaidWorldData from '../samples/valid-world-data.json?raw'
-import validRegionData from '../samples/valid-region-data.json?raw'
+import validMapData from './../samples/valid-data-map.csv?raw'
+import validChartData from './../samples/valid-data-chart.csv?raw'
+import validCountyMapData from './../samples/valid-county-data.csv?raw'
+import validGeoPoint from './../samples/valid-geo-point.csv?raw'
+import validScatterPlot from './../samples/valid-scatterplot.csv?raw'
+import validBoxPlotData from './../samples/valid-boxplot.csv?raw'
+import validAreaChart from './../samples/valid-area-chart.json?raw'
+import validWorldGeocodeData from './../samples/valid-world-geocode.json?raw'
+import validForecastData from './../samples/valid-forecast-data.csv?raw'
+import validForestPlotData from './../samples/valid-forest-plot-data.csv?raw'
+import vaidWorldData from './../samples/valid-world-data.json?raw'
+import validRegionData from './../samples/valid-region-data.json?raw'
+import validSankeyData from './../samples/valid-sankey-data.json?raw'
 
 // Add additional data to samples
 const sampleData = {
@@ -43,10 +44,15 @@ const sampleData = {
       fileName: 'valid-forecast-data.csv',
       data: validForecastData
     },
+    // {
+    //   text: 'Forest Plot Data',
+    //   fileName: 'valid-forest-plot-data.csv',
+    //   data: validForestPlotData
+    // },
     {
-      text: 'Forest Plot Data',
-      fileName: 'valid-forest-plot-data.csv',
-      data: validForestPlotData
+      text: 'Sankey Chart Data',
+      fileName: 'valid-sankey-data.json',
+      data: validSankeyData
     }
   ],
   maps: [