@cdc/chart 4.25.3 → 4.25.6

package/src/CdcChartComponent.tsx

@@ -64,17 +64,23 @@ 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'
 import { getComboChartConfig } from './helpers/getComboChartConfig'
 import { getExcludedData } from './helpers/getExcludedData'
 import { getColorScale } from './helpers/getColorScale'
+import { getTransformedData } from './helpers/getTransformedData'
+import { getPiePercent } from './helpers/getPiePercent'
+
 // styles
 import './scss/main.scss'
 import { getInitialState, reducer } from './store/chart.reducer'
-
-export const EDITOR_WIDTH = 350
+import { VizFilter } from '@cdc/core/types/VizFilter'
+import { getNewRuntime } from './helpers/getNewRuntime'
+import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
+import { Datasets } from '@cdc/core/types/DataSet'
 
 interface CdcChartProps {
   config?: ChartConfig
@@ -88,6 +94,7 @@ interface CdcChartProps {
   setSharedFilter?: (filter: any) => void
   setSharedFilterValue?: (value: any) => void
   dashboardConfig?: DashboardConfig
+  datasets?: Datasets
 }
 const CdcChart: React.FC<CdcChartProps> = ({
   config: configObj,
@@ -99,7 +106,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
   link,
   setSharedFilter,
   setSharedFilterValue,
-  dashboardConfig
+  dashboardConfig,
+  datasets
 }) => {
   const transform = new DataTransform()
   const initialState = getInitialState(configObj)
@@ -131,10 +139,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
   }
 
-  const setFiltersData = (filteredData: object[]): void => {
-    dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
-  }
-
   const legendRef = useRef(null)
   const parentRef = useRef(null)
 
@@ -142,8 +146,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
 
@@ -163,7 +165,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
 
-  const prepareConfig = async (loadedConfig: ChartConfig) => {
+  const prepareConfig = (loadedConfig: ChartConfig) => {
     let newConfig = _.defaultsDeep(loadedConfig, defaults)
     _.defaultsDeep(newConfig, {
       table: { showVertical: false }
@@ -280,14 +282,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
@@ -342,6 +345,30 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
   }
 
+  const setFilters = (newFilters: VizFilter[]) => {
+    if (!config.dynamicSeries) {
+      const _newFilters = addValuesToFilters(newFilters, excludedData)
+      setConfig({
+        ...config,
+        filters: _newFilters
+      })
+    }
+
+    if (config.filterBehavior === 'Filter Change' || config.filterBehavior === 'Apply Button') {
+      const newFilteredData = filterVizData(newFilters, excludedData)
+
+      dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+      if (config.dynamicSeries) {
+        const runtime = getNewRuntime(config, newFilteredData)
+        setConfig({
+          ...config,
+          filters: newFilters,
+          runtime
+        })
+      }
+    }
+  }
+
   // Observes changes to outermost container and changes viewport size in state
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
@@ -380,7 +407,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       if (newConfig.dataUrl && !urlFilters) {
         // handle urls with spaces in the name.
         if (newConfig.dataUrl) newConfig.dataUrl = `${newConfig.dataUrl}`
-        let newData = await fetchRemoteData(newConfig.dataUrl, 'Chart')
+        let newData = await fetchRemoteData(newConfig.dataUrl)
 
         if (newData && newConfig.dataDescription) {
           newData = transform.autoStandardize(newData)
@@ -397,7 +424,7 @@ 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
   }
@@ -407,7 +434,12 @@ const CdcChart: React.FC<CdcChartProps> = ({
       try {
         if (configObj) {
           const preparedConfig = await prepareConfig(configObj)
-          let preppedData = await prepareData(preparedConfig)
+          const preppedData = await prepareData(preparedConfig)
+
+          if (preparedConfig?.formattedData?.length) {
+            preppedData.data = preparedConfig.formattedData
+          }
+
           dispatch({ type: 'SET_STATE_DATA', payload: preppedData.data })
           dispatch({ type: 'SET_EXCLUDED_DATA', payload: preppedData.data })
           updateConfig(preparedConfig, preppedData.data)
@@ -494,7 +526,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   // Called on legend click, highlights/unhighlights the data series with the given label
   const highlight = (label: Label): void => {
-    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && config.visualizationType !== 'Forecasting') {
+    if (
+      seriesHighlight.length + 1 === config.runtime.seriesKeys.length &&
+      config.visualizationType !== 'Forecasting' &&
+      !seriesHighlight.includes(label.datum)
+    ) {
       return handleShowAll()
     }
 
@@ -592,8 +628,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
         rightSuffix,
         bottomPrefix,
         bottomSuffix,
-        bottomAbbreviated,
-        onlyShowTopPrefixSuffix
+        bottomAbbreviated
       }
     } = config
 
@@ -686,9 +721,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (addColPrefix && axis === 'left') {
       result = addColPrefix + result
     } else {
-      // if onlyShowTopPrefixSuffix only show top prefix
-      const suppressAllButLast = onlyShowTopPrefixSuffix && length - 1 !== index
-      if (prefix && axis === 'left' && !suppressAllButLast) {
+      if (prefix && axis === 'left') {
         result += prefix
       }
     }
@@ -707,7 +740,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (addColSuffix && axis === 'left') {
       result += addColSuffix
     } else {
-      if (suffix && axis === 'left' && !onlyShowTopPrefixSuffix) {
+      if (suffix && axis === 'left') {
         result += suffix
       }
     }
@@ -762,6 +795,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const getTableRuntimeData = () => {
     if (visualizationType === 'Sankey') return config?.data?.[0]?.tableData
     const data = filteredData || excludedData
+    if (config.visualizationType === 'Pie' && !config.dataFormat?.showPiePercent) {
+      return getPiePercent(data, config?.yAxis?.dataKey)
+    }
+
     const dynamicSeries = config.series.find(series => !!series.dynamicCategory)
     if (!dynamicSeries) return data
     const usedColumns = Object.values(config.columns)
@@ -828,7 +865,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
     body = (
       <>
-        {isEditor && <EditorPanel />}
+        {isEditor && <EditorPanel datasets={datasets} />}
         <Layout.Responsive isEditor={isEditor}>
           {config.newViz && <Confirm updateConfig={updateConfig} config={config} />}
           {undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && (
@@ -862,11 +899,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && (
                   <Filters
                     config={config}
-                    setConfig={setConfig}
-                    setFilteredData={setFiltersData}
-                    filteredData={filteredData}
+                    setFilters={setFilters}
                     excludedData={excludedData}
-                    filterData={filterVizData}
                     dimensions={dimensions}
                   />
                 )}
@@ -883,7 +917,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'
                     }
@@ -940,11 +977,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       <>
                         <Filters
                           config={config}
-                          setConfig={setConfig}
-                          setFilteredData={setFiltersData}
-                          filteredData={filteredData}
+                          setFilters={setFilters}
                           excludedData={excludedData}
-                          filterData={filterVizData}
                           dimensions={dimensions}
                         />
                         {config?.introText && (
@@ -1015,7 +1049,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   (config.visualizationType === 'Sankey' && config.table.show)) && (
                   <DataTable
                     /* changing the "key" will force the table to re-render
-                    when the default sort changes while editing */
+                      when the default sort changes while editing */
                     key={dataTableDefaultSortBy}
                     config={pivotDynamicSeries(config)}
                     rawData={
@@ -1041,8 +1075,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 )}
                 {config?.annotations?.length > 0 && <Annotation.Dropdown />}
                 {/* show pdf or image button */}
-                {config?.footnotes && <section className='footnotes pt-2 mt-4'>{parse(config.footnotes)}</section>}
+                {config?.legacyFootnotes && (
+                  <section className='footnotes pt-2 mt-4'>{parse(config.legacyFootnotes)}</section>
+                )}
               </div>
+              <FootnotesStandAlone
+                config={configObj.footnotes}
+                filters={config.filters?.filter(f => f.filterFootnotes)}
+              />
             </div>
           )}
         </Layout.Responsive>
@@ -1100,7 +1140,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     setSharedFilterValue,
     svgRef,
     tableData: filteredData || excludedData,
-    transformedData: clean(filteredData || excludedData),
+    transformedData: getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
     twoColorPalette,
     unfilteredData: _.cloneDeep(stateData),
     updateConfig

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

@@ -1,86 +1,99 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import Chart from '../CdcChart'
-import lineChartTwoPointsRegressionTest from './_mock/line_chart_two_points_regression_test.json'
-import lineChartTwoPointsNewChart from './_mock/line_chart_two_points_new_chart.json'
-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 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 { editConfigKeys } from '../helpers/configHelpers'
-
-const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Chart',
-  component: Chart
-}
-
-type Story = StoryObj<typeof Chart>
-
-export const line_Chart_Two_Points_Regression_Test: Story = {
-  args: {
-    config: lineChartTwoPointsRegressionTest,
-    isEditor: false
-  }
-}
-export const line_Chart_Two_Points_New_Chart: Story = {
-  args: {
-    config: lineChartTwoPointsNewChart,
-    isEditor: false
-  }
-}
-
-export const multiple_lines: Story = {
-  args: {
-    config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
-  }
-}
-
-export const Lollipop: Story = {
-  args: {
-    config: lollipop,
-    isEditor: false
-  }
-}
-
-export const Forest_Plot: Story = {
-  args: {
-    config: forestPlot
-  }
-}
-
-export const Horizontal_Bar: Story = {
-  args: {
-    config: horizontalBarConfig
-  }
-}
-
-export const Pie: Story = {
-  args: {
-    config: pieConfig
-  }
-}
-
-export const Paired_Bar: Story = {
-  args: {
-    config: pairedBar
-  }
-}
-export const BoxPlot_Multiseries: Story = {
-  args: {
-    config: boxPlotConfig,
-    isEditor: false
-  }
-}
-
-export const Area_Chart_stacked: Story = {
-  args: {
-    config: areaChartStacked,
-    isEditor: false
-  }
-}
-
-export default meta
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Chart from '../CdcChart'
+import lineChartTwoPointsRegressionTest from './_mock/line_chart_two_points_regression_test.json'
+import lineChartTwoPointsNewChart from './_mock/line_chart_two_points_new_chart.json'
+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 pieCalculatedArea from './_mock/pie_calculated_area.json'
+import boxPlotConfig from './_mock/boxplot_multiseries.json'
+import areaChartStacked from './_mock/area_chart_stacked.json'
+import multipleLines from './_mock/short_dates.json'
+import { editConfigKeys } from '../helpers/configHelpers'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const line_Chart_Two_Points_Regression_Test: Story = {
+  args: {
+    config: lineChartTwoPointsRegressionTest,
+    isEditor: false
+  }
+}
+export const line_Chart_Two_Points_New_Chart: Story = {
+  args: {
+    config: lineChartTwoPointsNewChart,
+    isEditor: false
+  }
+}
+
+export const multiple_lines: Story = {
+  args: {
+    config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
+  }
+}
+
+export const Lollipop: Story = {
+  args: {
+    config: lollipop,
+    isEditor: false
+  }
+}
+
+export const Forest_Plot: Story = {
+  args: {
+    config: forestPlot
+  }
+}
+
+export const Horizontal_Bar: Story = {
+  args: {
+    config: horizontalBarConfig
+  }
+}
+
+export const BarChart_Labels: Story = {
+  args: {
+    config: barChartLabels
+  }
+}
+
+export const Pie: Story = {
+  args: {
+    config: pieConfig
+  }
+}
+export const Pie_Calculated_Area: Story = {
+  args: {
+    config: pieCalculatedArea
+  }
+}
+
+export const Paired_Bar: Story = {
+  args: {
+    config: pairedBar
+  }
+}
+export const BoxPlot_Multiseries: Story = {
+  args: {
+    config: boxPlotConfig,
+    isEditor: false
+  }
+}
+
+export const Area_Chart_stacked: Story = {
+  args: {
+    config: areaChartStacked,
+    isEditor: false
+  }
+}
+
+export default meta