@cdc/chart 4.25.2-25 → 4.25.3

package/index.html

@@ -45,7 +45,7 @@
   -->
 
     <!-- GENERIC CHART TYPES -->
-    <!-- <div class="react-container" data-config="/examples/private/Viral-Respiratory-Deaths-Age.json"></div> -->
+    <div class="react-container" data-config="/examples/private/ari-other-conditions-1.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.2-25",
+  "version": "4.25.3",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -61,7 +61,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "f00bd8a0fc746def7cc23b91ef49a03a3ceac65e",
+  "gitHead": "b09566f5a7d57c8d0109e5f407257729d6b36846",
   "devDependencies": {
     "@types/d3-sankey": "^0.12.4",
     "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

@@ -74,6 +74,8 @@ 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
@@ -179,8 +181,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[]) => {
@@ -344,10 +346,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 +357,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
         width = width - 2.5
       }
 
-      width = width - svgMarginWidth
+      width = width
       dispatch({ type: 'SET_DIMENSIONS', payload: [width, height] })
     }
   })
@@ -565,6 +565,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 +750,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
@@ -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,33 @@
+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 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.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

@@ -11,8 +11,6 @@ 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 +20,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,