@cdc/chart 4.25.3-6 → 4.25.5-1

package/index.html

@@ -45,6 +45,7 @@
   -->
 
     <!-- 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/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> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.25.3-6",
+  "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": "d83d8555c1500ff0cad9d2c5c3486324afa15ec6",
+  "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/CdcChart.tsx

@@ -69,12 +69,7 @@ const CdcChartWrapper: React.FC<CdcChartProps> = ({ configUrl, isEditor, isDebug
       setIsLoading(true)
       try {
         const loadedConfig = await loadConfig(configUrl)
-        const data = await loadDataFromConfig(loadedConfig)
-
-        setConfig({
-          ...loadedConfig,
-          data
-        })
+        setConfig(loadedConfig)
       } catch (error) {
         console.error('Failed to load configuration or data', error)
       } finally {
@@ -124,19 +119,3 @@ const fetchAndParseData = async (url: string, ext: string) => {
     return []
   }
 }
-
-const loadDataFromConfig = async (response: any) => {
-  if (!response.dataUrl || _.some(_.get(response, 'filters', []), { type: 'url' })) {
-    return response.data || []
-  }
-
-  const ext = getFileExtension(response.dataUrl)
-  const urlWithCacheBuster = `${response.dataUrl}`
-
-  try {
-    return await fetchAndParseData(urlWithCacheBuster, ext)
-  } catch {
-    console.error(`Cannot parse URL: ${response.dataUrl}`)
-    return []
-  }
-}

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'
@@ -140,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
 
@@ -179,8 +178,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (newConfig.visualizationType === 'Bump Chart') {
       newConfig.xAxis.type === 'date-time'
     }
-
-    return { ...coveUpdateWorker(newConfig) }
+    if (!isDashboard) return coveUpdateWorker(newConfig)
+    return newConfig
   }
 
   const updateConfig = (_config: AllChartsConfig, dataOverride?: any[]) => {
@@ -278,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
@@ -344,10 +344,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
       let { width, height } = entry.contentRect
-      const svgMarginWidth = 15
-      const editorWidth = 350
 
-      width = isEditor ? width - editorWidth : width
+      width = isEditor ? width - EDITOR_WIDTH : width
 
       const newViewport = getViewport(width)
 
@@ -357,7 +355,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
         width = width - 2.5
       }
 
-      width = width - svgMarginWidth
+      width = width
       dispatch({ type: 'SET_DIMENSIONS', payload: [width, height] })
     }
   })
@@ -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)
@@ -565,6 +562,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     addColRoundTo,
     { index, length } = { index: null, length: null }
   ) => {
+    if (num === '') return 'N/A'
     // if num is NaN return num
     if (isNaN(num) || !num) return num
     // Check if the input number is negative
@@ -749,9 +747,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (!Array.isArray(data)) return []
     if (config.visualizationType === 'Forecasting') return data
     //  specify keys that needs  to be cleaned to render chart and skip rest
-    const CIkeys: string[] = Object.values(config.confidenceKeys) as string[]
-    const seriesKeys: string[] = config.series.map(s => s.dataKey)
-    const keysToClean: string[] = seriesKeys.concat(CIkeys)
+    const CIkeys: string[] = Object.values(_.get(config, 'confidenceKeys', {})) as string[]
+    const seriesKeys: string[] = _.get(config, 'series', []).map((s: any) => s.dataKey)
+    const keysToClean: string[] = [...(seriesKeys ?? []), ...(CIkeys ?? [])]
+
     // key that does not need to be cleaned
     const excludedKey = config.xAxis.dataKey
     return config?.xAxis?.dataKey ? transform.cleanData(data, excludedKey, keysToClean) : data
@@ -881,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'
                     }
@@ -913,11 +915,23 @@ const CdcChart: React.FC<CdcChartProps> = ({
                           </ParentSize>
                         </div>
                       ) : (
-                        <div ref={parentRef} style={{ width: `100%` }}>
+                        <div ref={parentRef} style={{ width: '100%' }}>
                           <ParentSize>
-                            {parent => (
-                              <LinearChart ref={svgRef} parentWidth={parent.width} parentHeight={parent.height} />
-                            )}
+                            {parent => {
+                              const labelMargin = 120
+                              const widthReduction =
+                                config.showLineSeriesLabels &&
+                                (config.legend.position !== 'right' || config.legend.hide)
+                                  ? labelMargin
+                                  : 0
+                              return (
+                                <LinearChart
+                                  ref={svgRef}
+                                  parentWidth={parent.width - widthReduction}
+                                  parentHeight={parent.height}
+                                />
+                              )
+                            }}
                           </ParentSize>
                         </div>
                       ))}

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import barChartCiLabels from './_mock/bar_chart_ci_labels.json'
+import lineChartDynamicCI from './_mock/line_chart_dynamic_ci.json'
+import lineChartNonDynamicCI from './_mock/line_chart_non_dynamic_ci.json'
+
+import Chart from '../CdcChartComponent'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Confidence Intervals',
+  component: Chart
+}
+type Story = StoryObj<typeof Chart>
+export const bar_chart_with_labels: Story = {
+  args: {
+    config: barChartCiLabels,
+    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: {
+    config: lineChartDynamicCI,
+    isEditor: false
+  }
+}
+
+export const line_Chart_Non_Dynamic_Confidence_Intervals: Story = {
+  args: {
+    config: lineChartNonDynamicCI,
+    isEditor: false
+  }
+}
+export default meta

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.Legend.Gradient.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import chartGradientConfig from './_mock/legend.gradient_mock.json'
+import chartGroupedLagend from './_mock/legend_groupBy_mock.json'
 import SimplifiedLineConfig from './_mock/simplified_line.json'
 
 import Chart from '../CdcChartComponent'
@@ -17,6 +18,11 @@ export const Legend_Gradient_Smooth: Story = {
     config: chartGradientConfig
   }
 }
+export const Legend_Group_By: Story = {
+  args: {
+    config: chartGroupedLagend
+  }
+}
 
 export const Legend_Gradient_Linear_Blocks: Story = {
   args: {

package/src/_stories/Chart.stories.tsx

@@ -7,12 +7,11 @@ 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'
 import multipleLines from './_mock/short_dates.json'
-import lineChartDynamicCI from './_mock/line_chart_dynamic_ci.json'
-import lineChartNonDynamicCI from './_mock/line_chart_non_dynamic_ci.json'
 import { editConfigKeys } from '../helpers/configHelpers'
 
 const meta: Meta<typeof Chart> = {
@@ -22,20 +21,6 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
-export const line_Chart_Dynamic_Confidence_Intervals: Story = {
-  args: {
-    config: lineChartDynamicCI,
-    isEditor: false
-  }
-}
-
-export const line_Chart_Non_Dynamic_Confidence_Intervals: Story = {
-  args: {
-    config: lineChartNonDynamicCI,
-    isEditor: false
-  }
-}
-
 export const line_Chart_Two_Points_Regression_Test: Story = {
   args: {
     config: lineChartTwoPointsRegressionTest,
@@ -74,6 +59,12 @@ export const Horizontal_Bar: Story = {
   }
 }
 
+export const BarChart_Labels: Story = {
+  args: {
+    config: barChartLabels
+  }
+}
+
 export const Pie: Story = {
   args: {
     config: pieConfig