@cdc/chart 4.25.6 → 4.25.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.25.6",
+  "version": "4.25.8",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -26,6 +26,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@cdc/core": "^4.25.8",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@visx/axis": "3.12.0",
@@ -53,7 +54,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
+  "gitHead": "e369994230b5e3facff224e1d89d5937528ac5a0",
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
     "@types/d3-format": "^3.0.4",

package/src/CdcChart.tsx

@@ -14,9 +14,16 @@ interface CdcChartProps {
   isEditor?: boolean
   isDebug?: boolean
   config?: ChartConfig
+  interactionLabel?: string
 }
 
-const CdcChartWrapper: React.FC<CdcChartProps> = ({ configUrl, isEditor, isDebug, config: editorsConfig }) => {
+const CdcChartWrapper: React.FC<CdcChartProps> = ({
+  configUrl,
+  isEditor,
+  isDebug,
+  config: editorsConfig,
+  interactionLabel = ''
+}) => {
   const editorContext = useContext(EditorContext)
   const [config, _setConfig] = useState<ChartConfig>({} as ChartConfig)
   const setConfig = newConfig => {
@@ -89,7 +96,7 @@ const CdcChartWrapper: React.FC<CdcChartProps> = ({ configUrl, isEditor, isDebug
 
   if (isLoading) return <Loading />
 
-  return <CdcChart config={config} isEditor={isEditor} isDebug={isDebug} />
+  return <CdcChart config={config} isEditor={isEditor} isDebug={isDebug} interactionLabel={interactionLabel} />
 }
 
 export default CdcChartWrapper

package/src/CdcChartComponent.tsx

@@ -65,6 +65,7 @@ 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'
+import { extractCoveData, updateVegaData } from '@cdc/core/helpers/vegaConfig'
 // Local helpers
 import { isConvertLineToBarGraph } from './helpers/isConvertLineToBarGraph'
 import { getBoxPlotConfig } from './helpers/getBoxPlotConfig'
@@ -81,6 +82,7 @@ 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'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 
 interface CdcChartProps {
   config?: ChartConfig
@@ -95,6 +97,7 @@ interface CdcChartProps {
   setSharedFilterValue?: (value: any) => void
   dashboardConfig?: DashboardConfig
   datasets?: Datasets
+  interactionLabel: string
 }
 const CdcChart: React.FC<CdcChartProps> = ({
   config: configObj,
@@ -107,7 +110,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
   setSharedFilter,
   setSharedFilterValue,
   dashboardConfig,
-  datasets
+  datasets,
+  interactionLabel
 }) => {
   const transform = new DataTransform()
   const initialState = getInitialState(configObj)
@@ -124,8 +128,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     coveLoadedEventRan,
     imageId,
     seriesHighlight,
-    colorScale,
-    brushConfig
+    colorScale
   } = state
   const { description, visualizationType } = config
   const svgRef = useRef(null)
@@ -261,6 +264,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       const [plots, categories] = getBoxPlotConfig(newConfig, stateData)
       newConfig.boxplot['categories'] = categories
       newConfig.boxplot.plots = plots
+      newConfig.yAxis.labelPlacement = 'On Date/Category Axis'
     }
     if (newConfig.visualizationType === 'Combo' && newConfig.series) {
       newConfig.runtime = getComboChartConfig(newConfig)
@@ -286,7 +290,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
 
     if (
-      (newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') ||
+      ((newConfig.visualizationType === 'Bar' || newConfig.visualizationType === 'Box Plot') &&
+        newConfig.orientation === 'horizontal') ||
       ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)
     ) {
       newConfig.runtime.xAxis = _.cloneDeep(newConfig.yAxis.yAxis || newConfig.yAxis)
@@ -298,7 +303,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       // remove after  COVE supports categorical axis on horizonatal bars
       newConfig.yAxis.type = newConfig.yAxis.type === 'categorical' ? 'linear' : newConfig.yAxis.type
     } else if (
-      ['Box Plot', 'Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) &&
+      ['Scatter Plot', 'Area Chart', 'Line', 'Forecasting'].includes(newConfig.visualizationType) &&
       !convertLineToBarGraph
     ) {
       newConfig.runtime.xAxis = newConfig.xAxis
@@ -409,6 +414,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
         if (newConfig.dataUrl) newConfig.dataUrl = `${newConfig.dataUrl}`
         let newData = await fetchRemoteData(newConfig.dataUrl)
 
+        if (newConfig.vegaConfig) {
+          newData = extractCoveData(updateVegaData(newConfig.vegaConfig, newData))
+        }
+
         if (newData && newConfig.dataDescription) {
           newData = transform.autoStandardize(newData)
           newData = transform.developerStandardize(newData, newConfig.dataDescription)
@@ -459,6 +468,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (container && !isLoading && !_.isEmpty(config) && !coveLoadedEventRan) {
       publish('cove_loaded', { config: config })
       dispatch({ type: 'SET_LOADED_EVENT', payload: true })
+      publishAnalyticsEvent('chart_loaded', 'load', interactionLabel, 'chart')
     }
   }, [container, config, isLoading]) // eslint-disable-line
 
@@ -548,6 +558,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     } catch (e) {
       console.error('COVE:', e.message)
     }
+    publishAnalyticsEvent('chart_legend_reset', 'click', interactionLabel, 'chart')
     dispatch({ type: 'SET_SERIES_HIGHLIGHT', payload: [] })
   }
 
@@ -840,7 +851,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (legend?.hide) classes.push('legend-hidden')
     if (lineDatapointClass) classes.push(lineDatapointClass)
     if (!config.barHasBorder) classes.push('chart-bar--no-border')
-    if (config.brush?.active && dashboardConfig?.type === 'dashboard' && (!isLegendOnBottom || legend.hide))
+    if (config.xAxis.brushActive && dashboardConfig?.type === 'dashboard' && (!isLegendOnBottom || legend.hide))
       classes.push('dashboard-brush')
     classes.push(...contentClasses)
     return classes
@@ -851,8 +862,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     const isLegendOnBottom = legend?.position === 'bottom' || isLegendWrapViewport(currentViewport)
 
     if (config.isResponsiveTicks) classes.push('subtext--responsive-ticks ')
-    if (config.brush?.active && !isLegendOnBottom) classes.push('subtext--brush-active ')
-    if (config.brush?.active && config.legend.hide) classes.push('subtext--brush-active ')
+    if (config.xAxis.brushActive && !isLegendOnBottom) classes.push('subtext--brush-active ')
+    if (config.xAxis.brushActive && config.legend.hide) classes.push('subtext--brush-active ')
     return classes
   }
 
@@ -862,7 +873,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
         {config.dataKey} (Go to Table)
       </a>
     )
-
     body = (
       <>
         {isEditor && <EditorPanel datasets={datasets} />}
@@ -902,6 +912,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     setFilters={setFilters}
                     excludedData={excludedData}
                     dimensions={dimensions}
+                    interactionLabel={interactionLabel}
                   />
                 )}
                 <SkipTo skipId={handleChartTabbing(config, legendId)} skipMessage='Skip Over Chart Container' />
@@ -980,6 +991,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                           setFilters={setFilters}
                           excludedData={excludedData}
                           dimensions={dimensions}
+                          interactionLabel={interactionLabel}
                         />
                         {config?.introText && (
                           <section className='introText mb-4' style={{ padding: '0px 0 35px' }}>
@@ -1007,7 +1019,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   {!config.legend.hide &&
                     config.visualizationType !== 'Spark Line' &&
                     config.visualizationType !== 'Sankey' && (
-                      <Legend ref={legendRef} skipId={handleChartTabbing(config, legendId)} />
+                      <Legend
+                        ref={legendRef}
+                        skipId={handleChartTabbing(config, legendId)}
+                        interactionLabel={interactionLabel}
+                      />
                     )}
                 </LegendWrapper>
                 {/* Link */}
@@ -1029,6 +1045,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       type='image'
                       state={config}
                       elementToCapture={imageId}
+                      interactionLabel={interactionLabel}
                     />
                   )}
                   {config.table.showDownloadPdfButton && (
@@ -1038,6 +1055,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       type='pdf'
                       state={config}
                       elementToCapture={imageId}
+                      interactionLabel={interactionLabel}
                     />
                   )}
                 </MediaControls.Section>
@@ -1049,7 +1067,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={
@@ -1071,6 +1089,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                     viewport={currentViewport}
                     tabbingId={handleChartTabbing(config, legendId)}
                     colorScale={colorScale}
+                    interactionLabel={interactionLabel}
                   />
                 )}
                 {config?.annotations?.length > 0 && <Annotation.Dropdown />}
@@ -1102,7 +1121,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   const contextValues = {
     ...state,
-    brushConfig,
     capitalize,
     convertLineToBarGraph,
     clean,

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import boxPlotConfig from './_mock/boxplot_multiseries.json'
+import Chart from '../CdcChartComponent'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Box Plot',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const BoxPlot_Vertical: Story = {
+  args: {
+    config: {
+      ...boxPlotConfig,
+      orientation: 'vertical',
+      title: 'Vertical Multiseries Box Plot',
+      isEditor: false
+    }
+  }
+}
+
+export const BoxPlot_Horizontal: Story = {
+  args: {
+    config: {
+      ...boxPlotConfig,
+      orientation: 'horizontal',
+      title: 'Horizontal Multiseries Box Plot',
+      yAxis: { ...boxPlotConfig.yAxis, labelPlacement: 'Above Bar' }
+    },
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/Chart.stories.tsx

@@ -10,7 +10,6 @@ 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'
@@ -82,12 +81,6 @@ export const Paired_Bar: Story = {
     config: pairedBar
   }
 }
-export const BoxPlot_Multiseries: Story = {
-  args: {
-    config: boxPlotConfig,
-    isEditor: false
-  }
-}
 
 export const Area_Chart_stacked: Story = {
   args: {

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import Chart from '../CdcChartComponent'
-
+import barChartStacked from './_mock/barchart_labels.mock.json'
+import barChartSuppressed from './_mock/bar-chart-suppressed.json'
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Tooltip',
   component: Chart
@@ -9,294 +10,53 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
+export const Increased_Tooltip_Range: Story = {
+  args: {
+    config: {
+      ...barChartSuppressed,
+      title: 'Increased Tooltip hovers range for missing and suppressed bars',
+      tooltips: {
+        ...barChartSuppressed.tooltips,
+        singleSeries: true
+      }
+    }
+  }
+}
+
 export const Additional_Tooltip: Story = {
   args: {
     config: {
-      type: 'chart',
-      debugSvg: false,
-      chartMessage: {
-        noData: 'No Data Available'
-      },
-      title: 'Example Stacked Bar Chart with Additional tolltip column',
+      ...barChartStacked,
+      title: 'Stacked Bar Chart with Additional Tooltip Column',
       showTitle: true,
-      showDownloadMediaButton: false,
-      theme: 'theme-orange',
-      animate: false,
-      lineDatapointStyle: 'hover',
-      barHasBorder: 'false',
-      isLollipopChart: false,
-      lollipopShape: 'circle',
-      lollipopColorStyle: 'two-tone',
       visualizationSubType: 'stacked',
-      barStyle: '',
-      roundingStyle: 'standard',
-      tipRounding: 'top',
-      isResponsiveTicks: false,
-      general: {
-        showDownloadButton: false
-      },
-      padding: {
-        left: 5,
-        right: 5
-      },
-      yAxis: {
-        hideAxis: false,
-        displayNumbersOnBar: false,
-        hideLabel: false,
-        hideTicks: false,
-        size: '64',
-        gridLines: false,
-        enablePadding: false,
-        min: '',
-        max: '',
-        labelColor: '#333',
-        tickLabelColor: '#333',
-        tickColor: '#333',
-        rightHideAxis: true,
-        rightAxisSize: 0,
-        rightLabel: '',
-        rightLabelOffsetSize: 0,
-        rightAxisLabelColor: '#333',
-        rightAxisTickLabelColor: '#333',
-        rightAxisTickColor: '#333',
-        numTicks: '',
-        axisPadding: 0,
-        tickRotation: 0,
-        anchors: [],
-        label: 'Y-Axis Label Example'
-      },
-      boxplot: {
-        plots: [],
-        borders: 'true',
-        firstQuartilePercentage: 25,
-        thirdQuartilePercentage: 75,
-        boxWidthPercentage: 40,
-        plotOutlierValues: false,
-        plotNonOutlierValues: true,
-        legend: {
-          showHowToReadText: false,
-          howToReadText: ''
-        },
-        labels: {
-          q1: 'Lower Quartile',
-          q2: 'q2',
-          q3: 'Upper Quartile',
-          q4: 'q4',
-          minimum: 'Minimum',
-          maximum: 'Maximum',
-          mean: 'Mean',
-          median: 'Median',
-          sd: 'Standard Deviation',
-          iqr: 'Interquartile Range',
-          total: 'Total',
-          outliers: 'Outliers',
-          values: 'Values',
-          lowerBounds: 'Lower Bounds',
-          upperBounds: 'Upper Bounds'
+      series: [
+        ...barChartStacked.series,
+        {
+          dataKey: 'White, non-Hispanic',
+          type: 'Bar',
+          axis: 'Left',
+          tooltip: true
         }
-      },
-      topAxis: {
-        hasLine: false
-      },
-      isLegendValue: false,
-      barThickness: 0.35,
-      barHeight: 25,
-      barSpace: 15,
-      heights: {
-        vertical: 300,
-        horizontal: 750
-      },
-      xAxis: {
-        sortDates: false,
-        anchors: [],
-        type: 'categorical',
-        showTargetLabel: true,
-        targetLabel: 'Target',
-        hideAxis: false,
-        hideLabel: false,
-        hideTicks: false,
-        size: '67',
-        tickRotation: '25',
-        min: '',
-        max: '',
-        labelColor: '#333',
-        tickLabelColor: '#333',
-        tickColor: '#333',
-        numTicks: '',
-        labelOffset: 65,
-        axisPadding: 0,
-        target: 0,
-        maxTickRotation: 0,
-        dataKey: 'Year',
-        label: 'X-Axis Label Example',
-        tickWidthMax: 41
-      },
-      table: {
-        label: 'Data Table',
-        expanded: true,
-        limitHeight: false,
-        height: '',
-        caption: '',
-        showDownloadUrl: false,
-        showDataTableLink: true,
-        indexLabel: '',
-        download: true,
-        showVertical: false,
-        show: true
-      },
-      orientation: 'vertical',
-      color: 'pinkpurple',
+      ],
       columns: {
-        additionalColumn1: {
-          label: 'New Column',
-          dataTable: false,
+        'American Indian/Alaska Native': {
+          label: 'Additional Tooltip',
+          dataTable: true,
           tooltips: true,
           prefix: '',
           suffix: '',
           forestPlot: false,
           startingPoint: '0',
           forestPlotAlignRight: false,
-          name: 'Data 1'
+          roundToPlace: 0,
+          commas: true,
+          showInViz: false,
+          forestPlotStartingPoint: 0,
+          name: 'American Indian/Alaska Native',
+          series: 'Hispanic'
         }
-      },
-      legend: {
-        hide: false,
-        behavior: 'isolate',
-        singleRow: false,
-        colorCode: '',
-        reverseLabelOrder: false,
-        description: '',
-        dynamicLegend: false,
-        dynamicLegendDefaultText: 'Show All',
-        dynamicLegendItemLimit: 5,
-        dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
-        dynamicLegendChartMessage: 'Select Options from the Legend',
-        lineMode: false,
-        verticalSorted: false,
-        position: 'right',
-        label: 'Data Type'
-      },
-      brush: {
-        height: 25,
-        data: [],
-        active: false
-      },
-      exclusions: {
-        active: false,
-        keys: []
-      },
-      palette: 'qualitative-bold',
-      isPaletteReversed: false,
-      twoColor: {
-        palette: 'monochrome-1',
-        isPaletteReversed: false
-      },
-      labels: false,
-      dataFormat: {
-        commas: false,
-        prefix: '',
-        suffix: '%',
-        abbreviated: false,
-        bottomSuffix: '',
-        bottomPrefix: '',
-        bottomAbbreviated: false
-      },
-      confidenceKeys: {},
-      visual: {
-        border: true,
-        accent: true,
-        background: true,
-        verticalHoverLine: false,
-        horizontalHoverLine: false
-      },
-      useLogScale: false,
-      filterBehavior: 'Filter Change',
-      highlightedBarValues: [],
-      series: [
-        {
-          dataKey: 'Data 2',
-          type: 'Bar',
-          tooltip: true
-        },
-        {
-          dataKey: 'Data 3',
-          type: 'Bar',
-          tooltip: true
-        }
-      ],
-      tooltips: {
-        opacity: 90
-      },
-      forestPlot: {
-        startAt: 0,
-        width: 'auto',
-        colors: {
-          line: '',
-          shape: ''
-        },
-        estimateField: '',
-        estimateRadius: '',
-        lowerCiField: '',
-        upperCiField: '',
-        shape: '',
-        rowHeight: 20,
-        showZeroLine: false,
-        description: {
-          show: true,
-          text: 'description',
-          location: 0
-        },
-        result: {
-          show: true,
-          text: 'result',
-          location: 100
-        },
-        radius: {
-          min: 1,
-          max: 8,
-          scalingColumn: ''
-        },
-        regression: {
-          lower: 0,
-          upper: 0,
-          estimateField: 0
-        },
-        leftWidthOffset: 0,
-        rightWidthOffset: 0
-      },
-      area: {
-        isStacked: false
-      },
-      height: '375',
-      data: [
-        {
-          Year: '2015',
-          'Data 1': '25',
-          'Data 2': '20',
-          'Data 3': '55'
-        },
-        {
-          Year: '2016',
-          'Data 1': '35',
-          'Data 2': '30',
-          'Data 3': '35'
-        },
-        {
-          Year: '2017',
-          'Data 1': '22',
-          'Data 2': '38',
-          'Data 3': '40'
-        },
-        {
-          Year: '2018',
-          'Data 1': '40',
-          'Data 2': '40',
-          'Data 3': '20'
-        }
-      ],
-      visualizationType: 'Bar',
-      validated: 4.23,
-      dynamicMarginTop: 0
+      }
     }
   }
 }