@cdc/chart 4.25.7 → 4.25.10

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -1,7 +1,9 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import ConfigContext from '../../ConfigContext'
 import { Group } from '@visx/group'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
+import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
+import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
 
 const ScatterPlot = ({ xScale, yScale }) => {
   const {
@@ -10,12 +12,17 @@ const ScatterPlot = ({ xScale, yScale }) => {
     tableData,
     formatNumber,
     seriesHighlight,
-    colorPalettes
+    colorPalettes,
+    colorScale,
+    interactionLabel
   } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
   const circleRadii = 4.5
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
+
+  // Track current hover for analytics
+  const [currentHover, setCurrentHover] = useState({ dataIndex: null, seriesKey: null })
   // tooltips for additional columns
   const additionalColumns = Object.entries(config.columns)
     .filter(([_, value]) => value.tooltips)
@@ -52,14 +59,14 @@ const ScatterPlot = ({ xScale, yScale }) => {
         return config.runtime.seriesKeys.map((s, index) => {
           const transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s) === -1
           const displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s) !== -1
-          const seriesColor = config?.customColors ? config.customColors[index] : config.palette ? colorPalettes[config.palette][index] : '#000'
+          const seriesColor = config?.general?.palette?.customColors ? config.general.palette.customColors[index] : colorScale(config.runtime.seriesLabels?.[s] || s)
 
           let pointStyles = {
             filter: 'unset',
             opacity: 1,
             stroke: displayArea ? 'black' : ''
           }
-          if (item[s]==='') {
+          if (item[s] === '') {
             return <> </>
           }
 
@@ -77,6 +84,27 @@ const ScatterPlot = ({ xScale, yScale }) => {
               data-tooltip-html={handleTooltip(item, s, dataIndex)}
               data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
               tabIndex={-1}
+              onMouseEnter={() => {
+                // Track hover analytics event if this is a new hover
+                if ((currentHover.dataIndex !== dataIndex || currentHover.seriesKey !== s)) {
+                  const seriesName = config.runtime.seriesLabels?.[s] || s
+                  const safeSeriesName = String(seriesName).replace(/[^a-zA-Z0-9]/g, '_')
+                  const xAxisValue = item[config.xAxis.dataKey]
+                  const yAxisValue = item[s]
+
+                  publishAnalyticsEvent({
+                    vizType: config?.type,
+                    vizSubType: getVizSubType(config),
+                    eventType: `chart_hover`,
+                    eventAction: 'hover',
+                    eventLabel: interactionLabel || 'unknown',
+                    vizTitle: getVizTitle(config),
+                    series: seriesName,
+                    specifics: `series: ${String(safeSeriesName).toLowerCase()}, ${config.xAxis.dataKey}: ${xAxisValue}, ${s}: ${yAxisValue}`
+                  })
+                  setCurrentHover({ dataIndex, seriesKey: s })
+                }
+              }}
             />
           )
         })

package/src/data/initial-state.js

@@ -1,311 +1,334 @@
-export default {
-  annotations: [],
-  allowLineToBarGraph: undefined,
-  type: 'chart',
-  debugSvg: false,
-  chartMessage: {
-    noData: 'No Data Available'
-  },
-  title: '',
-  showTitle: true,
-  showDownloadMediaButton: false,
-  theme: 'theme-blue',
-  animate: false,
-  lineDatapointStyle: 'hover',
-  lineDatapointColor: 'Same as Line',
-  barHasBorder: 'true',
-  isLollipopChart: false,
-  lollipopShape: 'circle',
-  lollipopColorStyle: 'two-tone',
-  visualizationSubType: 'regular',
-  barStyle: '',
-  roundingStyle: 'standard',
-  tipRounding: 'top',
-  isResponsiveTicks: false,
-  general: {
-    annotationDropdownText: 'Annotations',
-    showMissingDataLabel: true,
-    showSuppressedSymbol: true,
-    showZeroValueData: true,
-    hideNullValue: true
-  },
-  padding: {
-    left: 5,
-    right: 5
-  },
-  preliminaryData: [],
-  yAxis: {
-    hideAxis: false,
-    displayNumbersOnBar: false,
-    hideLabel: false,
-    hideTicks: false,
-    size: 50,
-    gridLines: false,
-    enablePadding: false,
-    min: '',
-    max: '',
-    labelColor: '#333',
-    tickLabelColor: '#333',
-    tickColor: '#333',
-    rightHideAxis: false,
-    rightAxisSize: 0,
-    rightLabel: '',
-    rightLabelOffsetSize: 0,
-    rightAxisLabelColor: '#333',
-    rightAxisTickLabelColor: '#333',
-    rightAxisTickColor: '#333',
-    numTicks: '',
-    axisPadding: 0,
-    scalePadding: 10,
-    tickRotation: 0,
-    anchors: [],
-    shoMissingDataLabel: true,
-    showMissingDataLine: true,
-    categories: []
-  },
-  boxplot: {
-    plots: [],
-    borders: 'true',
-    plotOutlierValues: false,
-    plotNonOutlierValues: true,
-    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',
-      count: 'Count',
-      outliers: 'Outliers',
-      values: 'Values',
-      lowerBounds: 'Lower Bounds',
-      upperBounds: 'Upper Bounds'
-    }
-  },
-  topAxis: {
-    hasLine: false
-  },
+import { USE_V2_MIGRATION } from '@cdc/core/helpers/constants'
 
-  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: 75,
-    tickRotation: 0,
-    min: '',
-    max: '',
-    labelColor: '#333',
-    tickLabelColor: '#333',
-    tickColor: '#333',
-    numTicks: '',
-    labelOffset: 0,
-    axisPadding: 200,
-    target: 0,
-    maxTickRotation: 0,
-    padding: 5,
-    showYearsOnce: false,
-    sortByRecentDate: false,
-    brushActive: false
-  },
-  table: {
-    label: 'Data Table',
-    expanded: true,
-    limitHeight: false,
-    height: '',
-    caption: '',
-    showDownloadUrl: false,
-    showDataTableLink: true,
-    showDownloadLinkBelow: true,
-    indexLabel: '',
-    download: false,
-    showVertical: true,
-    dateDisplayFormat: '',
-    showMissingDataLabel: true,
-    showSuppressedSymbol: true
-  },
-  orientation: 'vertical',
-  color: 'pinkpurple',
-  columns: {
-    // start with a blank list
-  },
-  legend: {
-    hide: false,
-    behavior: 'isolate',
-    axisAlign: true,
-    singleRow: true,
-    colorCode: '',
-    reverseLabelOrder: false,
-    description: '',
-    dynamicLegend: false,
-    dynamicLegendDefaultText: 'Show All',
-    dynamicLegendItemLimit: 5,
-    dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
-    dynamicLegendChartMessage: 'Select Options from the Legend',
-    label: '',
-    lineMode: false,
-    verticalSorted: false,
-    highlightOnHover: false,
-    hideSuppressedLabels: false,
-    hideSuppressionLink: false,
-    seriesHighlight: [],
-    style: 'circles',
-    subStyle: 'linear blocks',
-    groupBy: '',
-    shape: 'circle',
-    tickRotation: '',
-    order: 'dataColumn',
-    hideBorder: {
-      side: false,
-      topBottom: true
-    },
-    position: 'right',
-    orderedValues: []
-  },
+// Dynamic initial state based on migration flag
+const createInitialState = () => {
+  const paletteDefaults = USE_V2_MIGRATION
+    ? {
+        isReversed: true,
+        version: '2.0',
+        name: 'sequential_bluereverse'
+      }
+    : {
+        isReversed: true,
+        version: '1.0',
+        name: 'qualitative_bold'
+      }
 
-  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
-  },
-  filters: [],
-  confidenceKeys: {},
-  visual: {
-    border: true,
-    accent: true,
-    background: true,
-    verticalHoverLine: false,
-    horizontalHoverLine: false,
-    lineDatapointSymbol: 'none',
-    maximumShapeAmount: 7
-  },
-  useLogScale: false,
-  filterBehavior: 'Filter Change',
-  highlightedBarValues: [],
-  series: [],
-  tooltips: {
-    opacity: 90,
-    singleSeries: false,
-    dateDisplayFormat: ''
-  },
-  forestPlot: {
-    startAt: 0,
-    colors: {
-      line: '',
-      shape: ''
+  return {
+    annotations: [],
+    allowLineToBarGraph: undefined,
+    type: 'chart',
+    debugSvg: false,
+    chartMessage: {
+      noData: 'No Data Available'
+    },
+    title: '',
+    showTitle: true,
+    showDownloadMediaButton: false,
+    theme: 'theme-blue',
+    animate: false,
+    lineDatapointStyle: 'hover',
+    lineDatapointColor: 'Same as Line',
+    barHasBorder: 'true',
+    isLollipopChart: false,
+    lollipopShape: 'circle',
+    lollipopColorStyle: 'two-tone',
+    visualizationSubType: 'regular',
+    barStyle: '',
+    roundingStyle: 'standard',
+    tipRounding: 'top',
+    isResponsiveTicks: false,
+    general: {
+      annotationDropdownText: 'Annotations',
+      showMissingDataLabel: true,
+      showSuppressedSymbol: true,
+      showZeroValueData: true,
+      hideNullValue: true,
+      palette: paletteDefaults
+    },
+    padding: {
+      left: 5,
+      right: 5
+    },
+    preliminaryData: [],
+    yAxis: {
+      hideAxis: false,
+      displayNumbersOnBar: false,
+      hideLabel: false,
+      hideTicks: false,
+      size: 50,
+      gridLines: false,
+      enablePadding: false,
+      min: '',
+      max: '',
+      labelColor: '#1c1d1f',
+      tickLabelColor: '#1c1d1f',
+      tickColor: '#1c1d1f',
+      rightHideAxis: false,
+      rightAxisSize: 0,
+      rightLabel: '',
+      rightLabelOffsetSize: 0,
+      rightAxisLabelColor: '#1c1d1f',
+      rightAxisTickLabelColor: '#1c1d1f',
+      rightAxisTickColor: '#1c1d1f',
+      numTicks: '',
+      axisPadding: 0,
+      scalePadding: 10,
+      tickRotation: 0,
+      anchors: [],
+      shoMissingDataLabel: true,
+      showMissingDataLine: true,
+      categories: []
     },
-    lineOfNoEffect: {
-      show: true
+    boxplot: {
+      plots: [],
+      borders: 'true',
+      plotOutlierValues: false,
+      plotNonOutlierValues: true,
+      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',
+        count: 'Count',
+        outliers: 'Outliers',
+        values: 'Values',
+        lowerBounds: 'Lower Bounds',
+        upperBounds: 'Upper Bounds'
+      }
     },
-    type: '',
-    pooledResult: {
-      diamondHeight: 5,
-      column: ''
+    topAxis: {
+      hasLine: false
     },
-    estimateField: '',
-    estimateRadius: '',
-    shape: 'square',
-    rowHeight: 20,
-    description: {
-      show: true,
-      text: 'description',
-      location: 0
+
+    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: 75,
+      tickRotation: 0,
+      min: '',
+      max: '',
+      labelColor: '#1c1d1f',
+      tickLabelColor: '#1c1d1f',
+      tickColor: '#1c1d1f',
+      numTicks: '',
+      labelOffset: 0,
+      axisPadding: 200,
+      target: 0,
+      maxTickRotation: 0,
+      padding: 5,
+      showYearsOnce: false,
+      sortByRecentDate: false,
+      brushActive: false
     },
-    result: {
-      show: true,
-      text: 'result',
-      location: 100
+    table: {
+      label: 'Data Table',
+      expanded: true,
+      limitHeight: false,
+      height: '',
+      caption: '',
+      showDownloadUrl: false,
+      showDataTableLink: true,
+      showDownloadLinkBelow: true,
+      indexLabel: '',
+      download: false,
+      showVertical: true,
+      dateDisplayFormat: '',
+      showMissingDataLabel: true,
+      showSuppressedSymbol: true,
+      collapsible: true
     },
-    radius: {
-      min: 2,
-      max: 10,
-      scalingColumn: ''
+    orientation: 'vertical',
+    color: 'qualitative-bold',
+    columns: {
+      // start with a blank list
     },
-    regression: {
-      lower: 0,
-      upper: 0,
-      estimateField: 0
+    legend: {
+      hide: false,
+      behavior: 'isolate',
+      axisAlign: true,
+      singleRow: true,
+      colorCode: '',
+      reverseLabelOrder: false,
+      description: '',
+      dynamicLegend: false,
+      dynamicLegendDefaultText: 'Show All',
+      dynamicLegendItemLimit: 5,
+      dynamicLegendItemLimitMessage: 'Dynamic Legend Item Limit Hit.',
+      dynamicLegendChartMessage: 'Select Options from the Legend',
+      label: '',
+      lineMode: false,
+      verticalSorted: false,
+      highlightOnHover: false,
+      hideSuppressedLabels: false,
+      hideSuppressionLink: false,
+      seriesHighlight: [],
+      style: 'circles',
+      subStyle: 'linear blocks',
+      groupBy: '',
+      shape: 'circle',
+      tickRotation: '',
+      order: 'dataColumn',
+      hideBorder: {
+        side: false,
+        topBottom: true
+      },
+      position: 'right',
+      orderedValues: [],
+      patterns: {},
+      patternField: ''
     },
-    leftWidthOffset: 0,
-    rightWidthOffset: 0,
-    showZeroLine: false,
-    leftLabel: '',
-    rightLabel: ''
-  },
-  area: {
-    isStacked: false
-  },
-  sankey: {
-    title: {
-      defaultColor: 'black'
+
+    exclusions: {
+      active: false,
+      keys: []
     },
-    iterations: 1,
-    rxValue: 0.9,
-    overallSize: {
-      width: 900,
-      height: 700
+    twoColor: {
+      palette: 'monochrome-1',
+      isPaletteReversed: false
     },
-    margin: {
-      margin_y: 25,
-      margin_x: 0
+    labels: false,
+    dataFormat: {
+      commas: false,
+      prefix: '',
+      suffix: '',
+      abbreviated: false,
+      bottomSuffix: '',
+      bottomPrefix: '',
+      bottomAbbreviated: false
     },
-    nodeSize: {
-      nodeWidth: 26,
-      nodeHeight: 40
+    filters: [],
+    confidenceKeys: {},
+    visual: {
+      border: true,
+      accent: true,
+      background: true,
+      verticalHoverLine: false,
+      horizontalHoverLine: false,
+      lineDatapointSymbol: 'none',
+      maximumShapeAmount: 7
     },
-    nodePadding: 55,
-    nodeFontColor: 'black',
-    nodeColor: {
-      default: '#ff8500',
-      inactive: '#808080'
+    useLogScale: false,
+    filterBehavior: 'Filter Change',
+    highlightedBarValues: [],
+    series: [],
+    tooltips: {
+      opacity: 90,
+      singleSeries: false,
+      dateDisplayFormat: ''
     },
-    linkColor: {
-      default: '#ffc900',
-      inactive: '#D3D3D3'
+    forestPlot: {
+      startAt: 0,
+      colors: {
+        line: '',
+        shape: ''
+      },
+      lineOfNoEffect: {
+        show: true
+      },
+      type: '',
+      pooledResult: {
+        diamondHeight: 5,
+        column: ''
+      },
+      estimateField: '',
+      estimateRadius: '',
+      shape: 'square',
+      rowHeight: 20,
+      description: {
+        show: true,
+        text: 'description',
+        location: 0
+      },
+      result: {
+        show: true,
+        text: 'result',
+        location: 100
+      },
+      radius: {
+        min: 2,
+        max: 10,
+        scalingColumn: ''
+      },
+      regression: {
+        lower: 0,
+        upper: 0,
+        estimateField: 0
+      },
+      leftWidthOffset: 0,
+      rightWidthOffset: 0,
+      showZeroLine: false,
+      leftLabel: '',
+      rightLabel: ''
     },
-    opacity: {
-      nodeOpacityDefault: 1.0,
-      nodeOpacityInactive: 0.1,
-      LinkOpacityDefault: 1.0,
-      LinkOpacityInactive: 0.1
+    area: {
+      isStacked: false
     },
-    storyNodeFontColor: '#006778',
-    storyNodeText: [],
-    nodeValueStyle: {
-      textBefore: '(',
-      textAfter: ')'
+    sankey: {
+      title: {
+        defaultColor: 'black'
+      },
+      iterations: 1,
+      rxValue: 0.9,
+      overallSize: {
+        width: 900,
+        height: 700
+      },
+      margin: {
+        margin_y: 25,
+        margin_x: 0
+      },
+      nodeSize: {
+        nodeWidth: 26,
+        nodeHeight: 40
+      },
+      nodePadding: 55,
+      nodeFontColor: 'black',
+      nodeColor: {
+        default: '#ff8500',
+        inactive: '#808080'
+      },
+      linkColor: {
+        default: '#ffc900',
+        inactive: '#D3D3D3'
+      },
+      opacity: {
+        nodeOpacityDefault: 1.0,
+        nodeOpacityInactive: 0.1,
+        LinkOpacityDefault: 1.0,
+        LinkOpacityInactive: 0.1
+      },
+      storyNodeFontColor: '#006778',
+      storyNodeText: [],
+      nodeValueStyle: {
+        textBefore: '(',
+        textAfter: ')'
+      },
+      data: []
     },
-    data: []
+    markupVariables: [],
+    enableMarkupVariables: false
   }
 }
+
+export default createInitialState()