@cdc/chart 4.25.3 → 4.25.5-1

package/index.html

@@ -45,7 +45,8 @@
   -->
 
     <!-- GENERIC CHART TYPES -->
-    <div class="react-container" data-config="/examples/private/ari-other-conditions-1.json"></div>
+    <!-- <div class="react-container" data-config="/examples/private/ari-other-conditions-1.json"></div> -->
+    <!-- <div class="react-container" data-config="/examples/private/Viral-Respiratory-Deaths-Age.json"></div> -->
     <!--    <div class="react-container" data-config="/examples/cases-year.json"></div>-->
     <!-- <div class="react-container" data-config="/examples/test.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.25.3",
+  "version": "4.25.5-1",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -27,43 +27,38 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@hello-pangea/dnd": "^16.2.0",
-    "@visx/axis": "^3.0.0",
-    "@visx/curve": "^3.0.0",
-    "@visx/event": "^3.0.1",
-    "@visx/glyph": "^3.3.0",
-    "@visx/gradient": "^3.0.0",
-    "@visx/group": "^3.0.0",
-    "@visx/legend": "^3.0.0",
-    "@visx/marker": "^3.0.0",
-    "@visx/mock-data": "^3.0.0",
-    "@visx/scale": "^3.0.0",
-    "@visx/shape": "^3.3.0",
-    "@visx/stats": "^3.0.0",
-    "@visx/text": "^3.0.0",
-    "@visx/tooltip": "^3.0.0",
-    "chroma-js": "^2.1.2",
-    "d3-array": "^2.8.0",
+    "@react-spring/web": "^9.7.5",
+    "@visx/axis": "3.12.0",
+    "@visx/curve": "3.12.0",
+    "@visx/event": "3.12.0",
+    "@visx/glyph": "3.12.0",
+    "@visx/gradient": "3.12.0",
+    "@visx/marker": "3.12.0",
+    "@visx/mock-data": "3.12.0",
+    "@visx/scale": "3.12.0",
+    "@visx/shape": "3.12.0",
+    "@visx/stats": "3.12.0",
+    "@visx/text": "3.12.0",
+    "@visx/tooltip": "3.12.0",
+    "d3-array": "3.2.4",
     "d3-format": "^3.1.0",
     "d3-sankey": "^0.12.3",
-    "d3-time-format": "^3.0.0",
-    "html-react-parser": "^3.0.8",
+    "d3-time-format": "4.1.0",
     "js-base64": "^2.5.2",
-    "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.3.4",
-    "react-icons": "^4.11.0",
-    "react-spring": "^8.0.27",
-    "react-table": "^7.5.0",
-    "react-tooltip": "5.8.2-beta.3",
-    "use-debounce": "^6.0.1",
-    "whatwg-fetch": "^3.6.2"
+    "react-icons": "5.5.0",
+    "use-debounce": "^6.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "b09566f5a7d57c8d0109e5f407257729d6b36846",
+  "gitHead": "1d0a6e716bc113e6bea3636fcae90ebf2d19bb5c",
   "devDependencies": {
+    "@types/d3-array": "^3.2.1",
+    "@types/d3-format": "^3.0.4",
     "@types/d3-sankey": "^0.12.4",
+    "@types/d3-time-format": "^4.0.3",
     "resize-observer-polyfill": "^1.5.1"
   }
 }

package/src/CdcChartComponent.tsx

@@ -64,6 +64,7 @@ import getViewport from '@cdc/core/helpers/getViewport'
 import isNumber from '@cdc/core/helpers/isNumber'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import EditorContext from '../../editor/src/ConfigContext'
+import { EDITOR_WIDTH } from '@cdc/core/helpers/constants'
 // Local helpers
 import { isConvertLineToBarGraph } from './helpers/isConvertLineToBarGraph'
 import { getBoxPlotConfig } from './helpers/getBoxPlotConfig'
@@ -74,8 +75,6 @@ import { getColorScale } from './helpers/getColorScale'
 import './scss/main.scss'
 import { getInitialState, reducer } from './store/chart.reducer'
 
-export const EDITOR_WIDTH = 350
-
 interface CdcChartProps {
   config?: ChartConfig
   isEditor?: boolean
@@ -142,8 +141,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
     dispatch({ type: 'SET_DRAG_ANNOTATIONS', payload: isDragging })
   }
 
-  if (isDebug) console.log('Chart config, isEditor', config, isEditor)
-
   // Destructure items from config for more readable JSX
   let { legend, title } = config
 
@@ -280,14 +277,15 @@ const CdcChart: React.FC<CdcChartProps> = ({
       newConfig.series.forEach(series => {
         newConfig.runtime.areaSeriesKeys.push({ ...series, type: 'Area Chart' })
       })
+      newConfig.visualizationSubType = 'stacked'
     }
 
     if (
       (newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') ||
       ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)
     ) {
-      newConfig.runtime.xAxis = newConfig.yAxis['yAxis'] ? newConfig.yAxis['yAxis'] : newConfig.yAxis
-      newConfig.runtime.yAxis = newConfig.xAxis['xAxis'] ? newConfig.xAxis['xAxis'] : newConfig.xAxis
+      newConfig.runtime.xAxis = _.cloneDeep(newConfig.yAxis.yAxis || newConfig.yAxis)
+      newConfig.runtime.yAxis = _.cloneDeep(newConfig.xAxis.xAxis || newConfig.xAxis)
       newConfig.runtime.yAxis.labelOffset *= -1
 
       newConfig.runtime.horizontal = false
@@ -397,17 +395,16 @@ const CdcChart: React.FC<CdcChartProps> = ({
         newConfig.data = transform.developerStandardize(newConfig.data, newConfig.dataDescription)
       }
     } catch (err) {
-      console.log('Error on prepareData function ', err)
+      console.error('Error on prepareData function ', err)
     }
     return newConfig
   }
-
   useEffect(() => {
     const load = async () => {
       try {
         if (configObj) {
           const preparedConfig = await prepareConfig(configObj)
-          let preppedData = await prepareData(preparedConfig)
+          const preppedData = await prepareData(preparedConfig)
           dispatch({ type: 'SET_STATE_DATA', payload: preppedData.data })
           dispatch({ type: 'SET_EXCLUDED_DATA', payload: preppedData.data })
           updateConfig(preparedConfig, preppedData.data)
@@ -883,7 +880,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     className={
                       legend.hide || isLegendWrapViewport(currentViewport)
                         ? 'w-100'
-                        : legend.position === 'bottom' || legend.position === 'top' || visualizationType === 'Sankey'
+                        : legend.position === 'bottom' ||
+                          legend.position === 'top' ||
+                          visualizationType === 'Sankey' ||
+                          visualizationType === 'Spark Line'
                         ? 'w-100'
                         : 'w-75'
                     }

package/src/_stories/Chart.CI.stories.tsx

@@ -16,6 +16,16 @@ export const bar_chart_with_labels: Story = {
     isEditor: false
   }
 }
+export const bar_chart_horizontal_labels: Story = {
+  args: {
+    config: {
+      ...barChartCiLabels,
+      orientation: 'horizontal',
+      yAxis: { ...barChartCiLabels.yAxis, displayNumbersOnBar: true }
+    },
+    isEditor: false
+  }
+}
 
 export const line_Chart_Dynamic_Confidence_Intervals: Story = {
   args: {

package/src/_stories/Chart.DynamicSeries.stories.tsx

@@ -1,49 +1,68 @@
-import DynamicSeriesConfig from './_mock/dynamic_series_config.json'
-import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
-import { Meta, StoryObj } from '@storybook/react'
-import Chart from '../CdcChartComponent'
-
-const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Chart/Dynamic Series',
-  component: Chart
-}
-
-type Story = StoryObj<typeof Chart>
-
-// data with a line break
-const data = DynamicSeriesConfig.data.map((d, i) => (i === 4 ? { ...d, Data_Value: null } : d))
-export const LineShowPoints: Story = {
-  args: {
-    config: {
-      ...DynamicSeriesConfig,
-      data,
-      originalFormattedData: data,
-      formattedData: data,
-      lineDatapointStyle: 'always show'
-    },
-    isEditor: false
-  }
-}
-
-export const LineHoverPoints: Story = {
-  args: {
-    config: DynamicSeriesConfig,
-    isEditor: false
-  }
-}
-
-export const Bar_Vertical: Story = {
-  args: {
-    config: DynamicSeriesBarConfig,
-    isEditor: false
-  }
-}
-
-export const Bar_Horizontal: Story = {
-  args: {
-    config: { ...DynamicSeriesBarConfig, orientation: 'horizontal' },
-    isEditor: false
-  }
-}
-
-export default meta
+import DynamicSeriesConfig from './_mock/dynamic_series_config.json'
+import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
+import DynamicSeriesSuppression from './_mock/dynamic_series_suppression_mock.json'
+import { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChartComponent'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Dynamic Series',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+// data with a line break
+const data = DynamicSeriesConfig.data.map((d, i) => (i === 4 ? { ...d, Data_Value: null } : d))
+export const LineShowPoints: Story = {
+  args: {
+    config: {
+      ...DynamicSeriesConfig,
+      data,
+      originalFormattedData: data,
+      formattedData: data,
+      lineDatapointStyle: 'always show'
+    },
+    isEditor: false
+  }
+}
+
+export const LineSuppression: Story = {
+  args: {
+    config: DynamicSeriesSuppression,
+    isEditor: false
+  }
+}
+
+export const LineHoverPoints: Story = {
+  args: {
+    config: DynamicSeriesConfig,
+    isEditor: false
+  }
+}
+
+export const Bar_Vertical: Story = {
+  args: {
+    config: DynamicSeriesBarConfig,
+    isEditor: false
+  }
+}
+
+export const Bar_Horizontal: Story = {
+  args: {
+    config: { ...DynamicSeriesBarConfig, orientation: 'horizontal' },
+    isEditor: false
+  }
+}
+
+export const Legend_Order: Story = {
+  args: {
+    config: {
+      ...DynamicSeriesBarConfig,
+      orientation: 'vertical',
+      legend: { ...DynamicSeriesBarConfig, order: 'desc' }
+    },
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/Chart.stories.tsx

@@ -7,6 +7,7 @@ import lollipop from './_mock/lollipop.json'
 import forestPlot from '../../examples/feature/forest-plot/forest-plot.json'
 import pairedBar from './_mock/paired-bar.json'
 import horizontalBarConfig from './_mock/horizontal_bar.json'
+import barChartLabels from './_mock/barchart_labels.mock.json'
 import pieConfig from './_mock/pie_with_data.json'
 import boxPlotConfig from './_mock/boxplot_multiseries.json'
 import areaChartStacked from './_mock/area_chart_stacked.json'
@@ -58,6 +59,12 @@ export const Horizontal_Bar: Story = {
   }
 }
 
+export const BarChart_Labels: Story = {
+  args: {
+    config: barChartLabels
+  }
+}
+
 export const Pie: Story = {
   args: {
     config: pieConfig

package/{examples/private/line-issue.json → src/_stories/_mock/barchart_labels.mock.json}

@@ -24,11 +24,11 @@
   "isResponsiveTicks": true,
   "general": {
     "annotationDropdownText": "Annotations",
-    "showDownloadButton": false,
     "showMissingDataLabel": false,
     "showSuppressedSymbol": true,
     "showZeroValueData": false,
-    "hideNullValue": true
+    "hideNullValue": true,
+    "showDownloadButton": false
   },
   "padding": {
     "left": 5,
@@ -127,8 +127,8 @@
     "dataKey": "Year",
     "label": "Year",
     "manual": true,
-    "axisBBox": 52.939998626708984,
-    "tickWidthMax": 41
+    "axisBBox": 62.779998779296875,
+    "tickWidthMax": 39
   },
   "table": {
     "label": "Data Table",
@@ -172,6 +172,8 @@
     "seriesHighlight": [],
     "style": "boxes",
     "subStyle": "linear blocks",
+    "groupBy": "",
+    "shape": "circle",
     "tickRotation": "",
     "hideBorder": {
       "side": false,
@@ -193,7 +195,7 @@
     "palette": "monochrome-1",
     "isPaletteReversed": false
   },
-  "labels": false,
+  "labels": true,
   "dataFormat": {
     "commas": false,
     "prefix": "",
@@ -210,36 +212,14 @@
     "accent": true,
     "background": true,
     "verticalHoverLine": false,
-    "horizontalHoverLine": false
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "none",
+    "maximumShapeAmount": 7
   },
   "useLogScale": false,
   "filterBehavior": "Filter Change",
   "highlightedBarValues": [],
   "series": [
-    {
-      "dataKey": "American Indian/Alaska Native",
-      "type": "Line",
-      "axis": "Left",
-      "tooltip": true
-    },
-    {
-      "dataKey": "Asian/Pacific Islander",
-      "type": "Line",
-      "axis": "Left",
-      "tooltip": true
-    },
-    {
-      "dataKey": "Black, non-Hispanic",
-      "type": "Line",
-      "axis": "Left",
-      "tooltip": true
-    },
-    {
-      "dataKey": "White, non-Hispanic",
-      "type": "Line",
-      "axis": "Left",
-      "tooltip": true
-    },
     {
       "dataKey": "Hispanic",
       "type": "Line",
@@ -354,7 +334,7 @@
     "_owner": null
   },
   "content": "Present one or more data trends over time.",
-  "visualizationType": "Line",
+  "visualizationType": "Bar",
   "datasets": {},
   "activeVizButtonID": 4,
   "data": [
@@ -490,8 +470,143 @@
   "dataFileName": "chart_data 2-6.csv",
   "dataFileSourceType": "file",
   "dataDescription": {
-    "horizontal": true
+    "horizontal": false,
+    "series": false
   },
-  "version": "4.24.10",
-  "dynamicMarginTop": 0
-}
+  "version": "4.25.1",
+  "dynamicMarginTop": 0,
+  "formattedData": [
+    {
+      "Year": "2007",
+      "American Indian/Alaska Native": "1.4",
+      "Asian/Pacific Islander": "0.9",
+      "Black, non-Hispanic": "2.3",
+      "White, non-Hispanic": "1",
+      "Hispanic": "1"
+    },
+    {
+      "Year": "2008",
+      "American Indian/Alaska Native": "1.8",
+      "Asian/Pacific Islander": "0.8",
+      "Black, non-Hispanic": "2.2",
+      "White, non-Hispanic": "0.9",
+      "Hispanic": "0.8"
+    },
+    {
+      "Year": "2009",
+      "American Indian/Alaska Native": "1",
+      "Asian/Pacific Islander": "0.7",
+      "Black, non-Hispanic": "1.7",
+      "White, non-Hispanic": "0.8",
+      "Hispanic": "0.7"
+    },
+    {
+      "Year": "2010",
+      "American Indian/Alaska Native": "1.1",
+      "Asian/Pacific Islander": "0.6",
+      "Black, non-Hispanic": "1.7",
+      "White, non-Hispanic": "0.8",
+      "Hispanic": "0.6"
+    },
+    {
+      "Year": "2011",
+      "American Indian/Alaska Native": "0.5",
+      "Asian/Pacific Islander": "0.4",
+      "Black, non-Hispanic": "1.4",
+      "White, non-Hispanic": "0.8",
+      "Hispanic": "0.4"
+    },
+    {
+      "Year": "2012",
+      "American Indian/Alaska Native": "0.7",
+      "Asian/Pacific Islander": "0.4",
+      "Black, non-Hispanic": "1.1",
+      "White, non-Hispanic": "0.8",
+      "Hispanic": "0.4"
+    },
+    {
+      "Year": "2013",
+      "American Indian/Alaska Native": "0.7",
+      "Asian/Pacific Islander": "0.3",
+      "Black, non-Hispanic": "0.9",
+      "White, non-Hispanic": "0.9",
+      "Hispanic": "0.4"
+    },
+    {
+      "Year": "2014",
+      "American Indian/Alaska Native": "0.8",
+      "Asian/Pacific Islander": "0.3",
+      "Black, non-Hispanic": "0.8",
+      "White, non-Hispanic": "0.9",
+      "Hispanic": "0.3"
+    },
+    {
+      "Year": "2015",
+      "American Indian/Alaska Native": "0.7",
+      "Asian/Pacific Islander": "0.4",
+      "Black, non-Hispanic": "1",
+      "White, non-Hispanic": "1.1",
+      "Hispanic": "0.3"
+    },
+    {
+      "Year": "2016",
+      "American Indian/Alaska Native": "0.5",
+      "Asian/Pacific Islander": "0.3",
+      "Black, non-Hispanic": "0.9",
+      "White, non-Hispanic": "1",
+      "Hispanic": "0.3"
+    },
+    {
+      "Year": "2017",
+      "American Indian/Alaska Native": "0.7",
+      "Asian/Pacific Islander": "0.3",
+      "Black, non-Hispanic": "1",
+      "White, non-Hispanic": "1.1",
+      "Hispanic": "0.3"
+    },
+    {
+      "Year": "2018",
+      "American Indian/Alaska Native": "0.9",
+      "Asian/Pacific Islander": "0.3",
+      "Black, non-Hispanic": "1",
+      "White, non-Hispanic": "1",
+      "Hispanic": "0.4"
+    },
+    {
+      "Year": "2019",
+      "American Indian/Alaska Native": "0.6",
+      "Asian/Pacific Islander": "0.3",
+      "Black, non-Hispanic": "0.9",
+      "White, non-Hispanic": "1",
+      "Hispanic": "0.4"
+    },
+    {
+      "Year": "2020",
+      "American Indian/Alaska Native": "0.4",
+      "Asian/Pacific Islander": "0.2",
+      "Black, non-Hispanic": "0.7",
+      "White, non-Hispanic": "0.7",
+      "Hispanic": "0.3"
+    },
+    {
+      "Year": "2021",
+      "American Indian/Alaska Native": "0.4",
+      "Asian/Pacific Islander": "0.2",
+      "Black, non-Hispanic": "0.9",
+      "White, non-Hispanic": "0.6",
+      "Hispanic": "0.4"
+    },
+    {
+      "Year": "2022",
+      "American Indian/Alaska Native": "0.4",
+      "Asian/Pacific Islander": "0.3",
+      "Black, non-Hispanic": "1",
+      "White, non-Hispanic": "0.6",
+      "Hispanic": "0.4"
+    }
+  ],
+  "filters": [],
+  "migrations": {
+    "addColorMigration": true
+  }
+}

package/src/_stories/_mock/dynamic_series_bar_config.json

@@ -196,7 +196,7 @@
   ],
   "tooltips": {
     "opacity": 90,
-    "singleSeries": false,
+    "singleSeries": true,
     "dateDisplayFormat": ""
   },
   "area": {