npm - @cdc/editor - Versions diffs - 4.25.11 → 4.26.2 - Mend

@cdc/editor 4.25.11 → 4.26.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/cdceditor-8NmHlKRI.es.js +15 -0
package/dist/cdceditor-BPoPzKPz.es.js +6 -0
package/dist/cdceditor-Cf9_fbQf.es.js +6 -0
package/dist/{cdceditor-dgT_1dIT.es.js → cdceditor-DQ00cQCm.es.js} +1 -20
package/dist/cdceditor-jiQQPkty.es.js +6 -0
package/dist/cdceditor.js +121242 -122361
package/index.html +1 -20
package/package.json +35 -37
package/src/CdcEditor.tsx +0 -3
package/src/components/ChooseTab.tsx +196 -156
package/src/components/ConfigureTab.tsx +6 -1
package/src/components/DataImport/components/SampleData.tsx +34 -9
package/src/components/DataImport/components/samples/valid-horizon-chart.json +373 -0
package/src/components/DataImport/components/samples/valid-radar-chart.csv +3 -0
package/src/components/PreviewDataTable.tsx +32 -25
package/src/components/modal/Modal.jsx +0 -3
package/src/scss/choose-vis-tab.scss +40 -19
package/vite.config.js +2 -1
package/LICENSE +0 -201
package/dist/cdceditor-BnB1QM5d.es.js +0 -361528
package/dist/cdceditor-Ct2SB0vL.es.js +0 -231049
package/dist/cdceditor-D6CG2-Hb.es.js +0 -39377
package/dist/cdceditor-MXgURbdZ.es.js +0 -39194

package/index.html CHANGED Viewed

@@ -1,20 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <style type="text/css">
-      body {
-        margin: 0;
-      }
-      .react-container {
-        min-height: 100vh;
-      }
-    </style>
-    <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
-  </head>
-  <body>
-    <div class="react-container react--editor"></div>
-    <script type="module" src="./src/index.jsx"></script>
-  </body>
-</html>
+<!-- index.html is generated by @cdc/core/generateViteConfig.js using the files in @cdc/core/devTemplate/ -->

package/package.json CHANGED Viewed

@@ -1,51 +1,49 @@
 {
   "name": "@cdc/editor",
-  "version": "4.25.11",
+  "version": "4.26.2",
   "description": "React component for generating a new component entry",
-  "moduleName": "CdcEditor",
-  "main": "dist/cdceditor",
-  "type": "module",
-  "scripts": {
-    "start": "vite --open",
-    "build": "vite build",
-    "preview": "vite preview",
-    "graph": "nx graph",
-    "prepublishOnly": "lerna run --scope @cdc/editor build",
-    "test": "vitest run --reporter verbose",
-    "test-watch": "vitest watch --reporter verbose",
-    "test-watch:ui": "vitest --ui"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/CDCgov/cdc-open-viz",
-    "directory": "packages/editor"
-  },
-  "bugs": {
-    "url": "https://github.com/CDCgov/cdc-open-viz/issues"
-  },
   "license": "Apache-2.0",
+  "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/chart": "^4.25.11",
-    "@cdc/core": "^4.25.11",
-    "@cdc/dashboard": "^4.25.11",
-    "@cdc/data-bite": "^4.25.11",
-    "@cdc/map": "^4.25.11",
-    "@cdc/markup-include": "^4.25.11",
-    "@cdc/waffle-chart": "^4.25.11",
-    "axios": "^1.9.0",
+    "@cdc/chart": "^4.26.2",
+    "@cdc/core": "^4.26.2",
+    "@cdc/dashboard": "^4.26.2",
+    "@cdc/data-bite": "^4.26.2",
+    "@cdc/map": "^4.26.2",
+    "@cdc/markup-include": "^4.26.2",
+    "@cdc/waffle-chart": "^4.26.2",
+    "axios": "^1.13.2",
     "d3": "^7.9.0",
     "react-dropzone": "^14.3.8",
-    "use-debounce": "^10.0.5"
+    "use-debounce": "^10.1.0"
   },
+  "devDependencies": {
+    "@rollup/plugin-dsv": "^3.0.2",
+    "@vitejs/plugin-react": "^5.1.2",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "gitHead": "be3413e8e1149abf94225108f86a7910f56e0616",
+  "main": "dist/cdceditor",
+  "moduleName": "CdcEditor",
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "devDependencies": {
-    "@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"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CDCgov/cdc-open-viz",
+    "directory": "packages/editor"
+  },
+  "scripts": {
+    "build": "vite build",
+    "graph": "nx graph",
+    "prepublishOnly": "lerna run --scope @cdc/editor build",
+    "preview": "vite preview",
+    "start": "vite --open",
+    "test": "vitest run --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
   },
-  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd"
+  "type": "module"
 }

package/src/CdcEditor.tsx CHANGED Viewed

@@ -1,7 +1,4 @@
 import React, { useState, useEffect, useCallback, useReducer, useMemo } from 'react'
-// IE11
-// import 'core-js/stable' // temp remove, appears to be used with html2pdf.js which we're temp removing
 import ResizeObserver from 'resize-observer-polyfill'
 import getViewport from '@cdc/core/helpers/getViewport'

package/src/components/ChooseTab.tsx CHANGED Viewed

@@ -4,29 +4,33 @@ import '../scss/choose-vis-tab.scss'
 import ConfigContext, { EditorDispatchContext } from '@cdc/core/contexts/EditorContext'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
-import DashboardIcon from '@cdc/core/assets/icon-dashboard.svg'
+import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg'
+import AreaChartIcon from '@cdc/core/assets/icon-area-chart.svg'
 import BarIcon from '@cdc/core/assets/icon-chart-bar.svg'
+import BoxPlotIcon from '@cdc/core/assets/icon-chart-box-whisker.svg'
+import CodeIcon from '@cdc/core/assets/icon-code.svg'
+import ComboChartIcon from '@cdc/core/assets/icon-combo-chart.svg'
+import DashboardIcon from '@cdc/core/assets/icon-dashboard.svg'
+import DataBiteIcon from '@cdc/core/assets/icon-databite.svg'
+import DeviationIcon from '@cdc/core/assets/icon-deviation-bar.svg'
+import EpiChartIcon from '@cdc/core/assets/icon-epi-chart.svg'
+import ForecastIcon from '@cdc/core/assets/icon-chart-forecast.svg'
+import GaugeChartIcon from '@cdc/core/assets/icon-linear-gauge.svg'
+import GlobeIcon from '@cdc/core/assets/icon-map-world.svg'
+import HorizonChartIcon from '@cdc/core/assets/icon-chart-area.svg'
+import HorizontalStackIcon from '@cdc/core/assets/icon-chart-bar-stacked.svg'
+import Icon from '@cdc/core/components/ui/Icon'
 import LineIcon from '@cdc/core/assets/icon-chart-line.svg'
+import PairedBarIcon from '@cdc/core/assets/icon-chart-bar-paired.svg'
 import PieIcon from '@cdc/core/assets/icon-chart-pie.svg'
-import GlobeIcon from '@cdc/core/assets/icon-map-world.svg'
+import RadarChartIcon from '@cdc/core/assets/icon-chart-radar.svg'
+import SankeyIcon from '@cdc/core/assets/icon-sankey.svg'
+import ScatterPlotIcon from '@cdc/core/assets/icon-chart-scatterplot.svg'
+import TableIcon from '@cdc/core/assets/icon-table.svg'
 import UsaIcon from '@cdc/core/assets/icon-map-usa.svg'
 import UsaRegionIcon from '@cdc/core/assets/usa-region-graphic.svg'
-import DataBiteIcon from '@cdc/core/assets/icon-databite.svg'
 import WaffleChartIcon from '@cdc/core/assets/icon-grid.svg'
-import AlabamaGraphic from '@cdc/core/assets/icon-map-alabama.svg'
-import PairedBarIcon from '@cdc/core/assets/icon-chart-bar-paired.svg'
-import HorizontalStackIcon from '@cdc/core/assets/icon-chart-bar-stacked.svg'
-import ScatterPlotIcon from '@cdc/core/assets/icon-chart-scatterplot.svg'
-import BoxPlotIcon from '@cdc/core/assets/icon-chart-box-whisker.svg'
-import AreaChartIcon from '@cdc/core/assets/icon-area-chart.svg'
-import GaugeChartIcon from '@cdc/core/assets/icon-linear-gauge.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 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 Icon from '@cdc/core/components/ui/Icon'
+import WarmingStripesIcon from '@cdc/core/assets/icon-warming-stripes.svg'
 import {
   convertVegaConfig,
@@ -276,6 +280,77 @@ 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: 26,
+    category: 'General',
+    label: 'Markup Include',
+    type: 'markup-include',
+    subType: null,
+    orientation: null,
+    icon: <CodeIcon />,
+    content: 'Include custom HTML markup or embed content from external URLs.'
+  },
+  {
+    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',
@@ -295,23 +370,14 @@ const buttons = [
     content: 'Use bars to show comparisons between data categories.'
   },
   {
-    id: 2,
+    id: 9,
     category: 'Charts',
-    label: 'Epi Chart',
+    label: 'Box Plot',
     type: 'chart',
-    subType: 'Bar',
+    subType: 'Box Plot',
     orientation: 'vertical',
-    barThickness: '0.95',
-    isResponsiveTicks: true,
-    visualizationSubType: 'regular',
-    xAxis: {
-      type: 'date-time',
-      size: 0,
-      labelOffset: 0,
-      maxTickRotation: 45
-    },
-    icon: <EpiChartIcon />,
-    content: 'Use bars to show comparisons between data categories.'
+    icon: <BoxPlotIcon />,
+    content: 'Display a box plot to visualize the distribution of numerical data through quartiles.'
   },
   {
     id: 3,
@@ -324,34 +390,33 @@ const buttons = [
     content: 'Use bars to show comparisons between data categories.'
   },
   {
-    id: 4,
-    category: 'Charts',
-    label: 'Line',
-    type: 'chart',
-    subType: 'Line',
-    orientation: 'vertical',
-    icon: <LineIcon />,
-    content: 'Present one or more data trends over time.'
-  },
-  {
-    id: 5,
+    id: 14,
     category: 'Charts',
-    label: 'Paired Bar',
+    label: 'Deviation Bar',
     type: 'chart',
-    subType: 'Paired Bar',
-    orientation: 'horizontal',
-    icon: <PairedBarIcon />,
-    content: 'Use paired bars to show comparisons between two different data categories.'
+    subType: 'Deviation Bar',
+    orientation: 'Pie',
+    icon: <DeviationIcon />,
+    content: 'Use deviation bars to display how individual values differ from a target'
   },
   {
-    id: 6,
+    id: 2,
     category: 'Charts',
-    label: 'Area Chart',
+    label: 'Epi Chart',
     type: 'chart',
-    subType: 'Area Chart',
+    subType: 'Bar',
     orientation: 'vertical',
-    icon: <AreaChartIcon />,
-    content: 'Display an area chart to visualize quantities over time.'
+    barThickness: '0.95',
+    isResponsiveTicks: true,
+    visualizationSubType: 'regular',
+    xAxis: {
+      type: 'date-time',
+      size: 0,
+      labelOffset: 0,
+      maxTickRotation: 45
+    },
+    icon: <EpiChartIcon />,
+    content: 'Use bars to show comparisons between data categories.'
   },
   {
     id: 7,
@@ -364,55 +429,45 @@ const buttons = [
     content: 'Display a forecasting chart to predict future data trends.'
   },
   {
-    id: 8,
+    id: 27,
     category: 'Charts',
-    label: 'Scatter Plot',
+    label: 'Horizon Chart',
     type: 'chart',
-    subType: 'Scatter Plot',
+    subType: 'Horizon Chart',
     orientation: 'vertical',
-    icon: <ScatterPlotIcon />,
-    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.'
+    icon: <HorizonChartIcon />,
+    content: 'Display a horizon chart to visualize quantities over time in a smaller space.'
   },
   {
-    id: 10,
+    id: 12,
     category: 'Charts',
-    label: 'Sankey Diagram',
+    label: 'Horizontal Bar (Stacked)',
     type: 'chart',
-    subType: 'Sankey',
-    orientation: 'vertical',
-    icon: <SankeyIcon />,
-    content: 'Display a sankey diagram'
+    subType: 'Bar',
+    visualizationSubType: 'stacked',
+    orientation: 'horizontal',
+    icon: <HorizontalStackIcon />,
+    content: 'Use bars to show comparisons between data categories.'
   },
   {
-    id: 11,
+    id: 4,
     category: 'Charts',
-    label: 'Forecast Chart',
+    label: 'Line',
     type: 'chart',
-    subType: 'Forecasting',
+    subType: 'Line',
     orientation: 'vertical',
-    icon: <ForecastIcon />,
-    content: 'Display a forecasting chart'
+    icon: <LineIcon />,
+    content: 'Present one or more data trends over time.'
   },
   {
-    id: 12,
+    id: 5,
     category: 'Charts',
-    label: 'Horizontal Bar (Stacked)',
+    label: 'Paired Bar',
     type: 'chart',
-    subType: 'Bar',
-    visualizationSubType: 'stacked',
+    subType: 'Paired Bar',
     orientation: 'horizontal',
-    icon: <HorizontalStackIcon />,
-    content: 'Use bars to show comparisons between data categories.'
+    icon: <PairedBarIcon />,
+    content: 'Use paired bars to show comparisons between two different data categories.'
   },
   {
     id: 13,
@@ -425,65 +480,67 @@ const buttons = [
     content: 'Present the numerical proportions of a data series.'
   },
   {
-    id: 14,
+    id: 27,
     category: 'Charts',
-    label: 'Deviation Bar',
+    label: 'Radar',
     type: 'chart',
-    subType: 'Deviation Bar',
-    orientation: 'Pie',
-    icon: <DeviationIcon />,
-    content: 'Use deviation bars to display how individual values differ from a target'
+    subType: 'Radar',
+    orientation: 'vertical',
+    icon: <RadarChartIcon />,
+    content: 'Compare multiple quantitative variables across categories using a radial layout.'
   },
   {
-    id: 15,
-    category: 'General',
-    label: 'Dashboard',
-    type: 'dashboard',
-    subType: null,
-    orientation: null,
-    icon: <DashboardIcon />,
-    content: 'Present multiple data visualizations with shared filter controls.'
+    id: 10,
+    category: 'Charts',
+    label: 'Sankey Diagram',
+    type: 'chart',
+    subType: 'Sankey',
+    orientation: 'vertical',
+    icon: <SankeyIcon />,
+    content: 'Display a sankey diagram'
   },
   {
-    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: 8,
+    category: 'Charts',
+    label: 'Scatter Plot',
+    type: 'chart',
+    subType: 'Scatter Plot',
+    orientation: 'vertical',
+    icon: <ScatterPlotIcon />,
+    content: 'Display a scatter plot to explore relationships between numeric variables.'
   },
   {
-    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.'
+    id: 25,
+    category: 'Charts',
+    label: 'Warming Stripes',
+    type: 'chart',
+    subType: 'Warming Stripes',
+    orientation: 'vertical',
+    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 +552,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 +570,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 CHANGED Viewed

@@ -30,7 +30,12 @@ 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' ||
+        config.visualizationType === 'TP5 Gauge'
+      ) {
         return (
           <ErrorBoundary component='CdcWaffleChart'>
             <CdcWaffleChart isEditor={true} isDebug={isDebug} config={config} setConfig={setTempConfig} />

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

@@ -1,21 +1,31 @@
 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'
-import validMapDataFootnotes from './samples/valid-data-map-footnotes.csv?raw'
+import pivotData from './samples/pivotData.json?raw'
+import vaidWorldData from './samples/valid-world-data.json?raw'
+import validAreaChart from './samples/valid-area-chart.json?raw'
+import validBoxPlotData from './samples/valid-boxplot.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 vaidWorldData from './samples/valid-world-data.json?raw'
+import validGeoPoint from './samples/valid-geo-point.csv?raw'
+import validHorizonData from './samples/valid-horizon-chart.json?raw'
+import validMapData from './samples/valid-data-map.csv?raw'
+import validMapDataFootnotes from './samples/valid-data-map-footnotes.csv?raw'
+import validRadarData from './samples/valid-radar-chart.csv?raw'
 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'
+import validScatterPlot from './samples/valid-scatterplot.csv?raw'
+import validWorldGeocodeData from './samples/valid-world-geocode.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 = {
@@ -45,15 +55,30 @@ const sampleData = {
       fileName: 'valid-forecast-data.csv',
       data: validForecastData
     },
+    {
+      text: 'Horizon Chart Data',
+      fileName: 'valid-horizon-data.json',
+      data: validHorizonData
+    },
     {
       text: 'Sankey Chart Data',
       fileName: 'valid-sankey-data.json',
       data: validSankeyData
     },
+    {
+      text: 'Radar Chart Data (Program Comparison)',
+      fileName: 'valid-radar-chart.csv',
+      data: validRadarData
+    },
     {
       text: 'Pivot Table Data',
       fileName: 'pivotData.json',
       data: pivotData
+    },
+    {
+      text: 'Warming Stripes Temperature Data',
+      fileName: 'visx-temperature-data.csv',
+      data: visxTemperatureData
     }
   ],
   maps: [