@cdc/chart 4.26.6 → 4.26.10

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -8,6 +8,7 @@ import { hasVisibleVizFilters } from '@cdc/core/helpers/filterVisibility'
 export const useEditorPermissions = () => {
   const { config, isDashboard } = useContext(ConfigContext)
   const { visualizationType, series, orientation, visualizationSubType } = config
+  const isBarRace = visualizationType === 'Bar' && visualizationSubType === 'racing'
 
   // Overall support for the chart types
   // prettier-ignore
@@ -29,11 +30,13 @@ export const useEditorPermissions = () => {
     'Scatter Plot',
     'Spark Line',
     'Sankey',
+    'Network',
+    'Dendrogram',
     'Warming Stripes'
   ]
 
   const visSupportsDateCategoryAxis = () => {
-    const disabledCharts = ['Forest Plot', 'Radar', 'Sankey']
+    const disabledCharts = ['Forest Plot', 'Radar', 'Sankey', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -82,9 +85,10 @@ export const useEditorPermissions = () => {
       'Forest Plot',
       'HeatMap',
       'Horizon Chart',
-      'Pie',
       'Radar',
       'Sankey',
+      'Network',
+      'Dendrogram',
       'Scatter Plot',
       'Spark Line',
       'Warming Stripes'
@@ -102,6 +106,8 @@ export const useEditorPermissions = () => {
       'HeatMap',
       'Radar',
       'Sankey',
+      'Network',
+      'Dendrogram',
       'Scatter Plot',
       'Spark Line',
       'Warming Stripes'
@@ -111,6 +117,7 @@ export const useEditorPermissions = () => {
   }
 
   const visHasLegend = () => {
+    if (isBarRace) return false
     switch (visualizationType) {
       case 'Box Plot':
         return true
@@ -121,7 +128,10 @@ export const useEditorPermissions = () => {
       case 'Spark Line':
         return false
       case 'Sankey':
+      case 'Dendrogram':
         return false
+      case 'Network':
+        return true
       case 'Warming Stripes':
         return true
       default:
@@ -131,10 +141,13 @@ export const useEditorPermissions = () => {
 
   const visHasNumbersOnBars = () => {
     if (visualizationType === 'Forest Plot') return false
+    const barRaceUsesDefaultLabelPlacement =
+      visualizationType === 'Bar' && config.visualizationSubType === 'racing' && !config.yAxis.labelPlacement
     if (
       config.orientation === 'horizontal' &&
       (config.yAxis.labelPlacement === 'Below Bar' ||
         config.yAxis.labelPlacement === 'On Date/Category Axis' ||
+        barRaceUsesDefaultLabelPlacement ||
         config.visualizationType === 'Paired Bar' ||
         config.visualizationType === 'Deviation Bar')
     )
@@ -148,6 +161,7 @@ export const useEditorPermissions = () => {
   }
 
   const visHasAnchors = () => {
+    if (isBarRace) return false
     switch (visualizationType) {
       case 'Area Chart':
         return true
@@ -180,6 +194,7 @@ export const useEditorPermissions = () => {
   }
 
   const visHasBarBorders = () => {
+    if (isBarRace) return false
     const disabledCharts = ['Box Plot', 'Scatter Plot', 'Pie', 'Line']
     if (disabledCharts.includes(visualizationType)) return false
     return series?.some(
@@ -192,6 +207,8 @@ export const useEditorPermissions = () => {
       case 'Warming Stripes':
         return false
       case 'Sankey':
+      case 'Network':
+      case 'Dendrogram':
         return false
       case 'Forest Plot':
         return false
@@ -211,7 +228,9 @@ export const useEditorPermissions = () => {
     'Forest Plot',
     'HeatMap',
     'Spark Line',
-    'Warming Stripes'
+    'Warming Stripes',
+    'Network',
+    'Dendrogram'
   ].includes(visualizationType)
   const visHasLegendAxisAlign = () => {
     return visualizationType === 'Bar' && visualizationSubType === 'stacked' && config.legend.behavior === 'isolate'
@@ -221,7 +240,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsTooltipOpacity = () => {
-    const disabledCharts = ['HeatMap', 'Spark Line', 'Sankey', 'Warming Stripes']
+    const disabledCharts = ['HeatMap', 'Spark Line', 'Sankey', 'Network', 'Dendrogram', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -233,60 +252,84 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsSequentialPallete = () => {
-    const disabledCharts = ['Line', 'Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting', 'Sankey']
+    const disabledCharts = ['Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsNonSequentialPallete = () => {
-    const disabledCharts = ['HeatMap', 'Paired Bar', 'Deviation Bar', 'Forest Plot', 'Forecasting', 'Sankey']
+    const disabledCharts = [
+      'HeatMap',
+      'Paired Bar',
+      'Deviation Bar',
+      'Forest Plot',
+      'Forecasting',
+      'Sankey',
+      'Network',
+      'Dendrogram'
+    ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsReverseColorPalette = () => {
-    const disabledCharts = ['Forest Plot', 'Paired Bar', 'Deviation Bar', 'Sankey']
+    const disabledCharts = ['Forest Plot', 'Paired Bar', 'Deviation Bar', 'Sankey', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisLabel = () => {
-    const disabledCharts = ['Forest Plot', 'HeatMap', 'Spark Line', 'Bump Chart', 'Warming Stripes']
+    if (isBarRace) return false
+    const disabledCharts = [
+      'Forest Plot',
+      'HeatMap',
+      'Spark Line',
+      'Bump Chart',
+      'Network',
+      'Dendrogram',
+      'Warming Stripes'
+    ]
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisLine = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line', 'Warming Stripes']
+    if (isBarRace) return false
+    const disabledCharts = ['Forest Plot', 'Spark Line', 'Network', 'Dendrogram', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryAxisTicks = () => {
-    const disabledCharts = ['Forest Plot', 'Spark Line', 'Warming Stripes']
+    if (isBarRace) return false
+    const disabledCharts = ['Forest Plot', 'Spark Line', 'Network', 'Dendrogram', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryTickRotation = () => {
-    const disabledCharts = ['Spark Line']
+    if (isBarRace) return false
+    const disabledCharts = ['Spark Line', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryNumTicks = () => {
-    const disabledCharts = ['HeatMap', 'Spark Line']
+    if (isBarRace) return false
+    const disabledCharts = ['Spark Line', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsResponsiveTicks = () => {
-    const disabledCharts = ['HeatMap', 'Spark Line']
+    if (isBarRace) return false
+    const disabledCharts = ['HeatMap', 'Spark Line', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsRegions = () => {
+    if (isBarRace) return false
     const disabledCharts = [
       'Forest Plot',
       'Horizon Chart',
@@ -296,6 +339,8 @@ export const useEditorPermissions = () => {
       'Radar',
       'Spark Line',
       'Sankey',
+      'Network',
+      'Dendrogram',
       'Warming Stripes'
     ]
     if (disabledCharts.includes(visualizationType)) return false
@@ -303,13 +348,13 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsValueAxisMax = () => {
-    const disabledCharts = ['Forest Plot', 'HeatMap']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsValueAxisMin = () => {
-    const disabledCharts = ['Forest Plot', 'HeatMap']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -342,47 +387,47 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsValueAxisGridLines = () => {
-    const disabledCharts = ['Forest Plot', 'HeatMap']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   // implement later
   const visSupportsValueAxisTicks = () => {
-    const disabledCharts = ['Forest Plot', 'HeatMap']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   // implement later
   const visSupportsValueAxisLine = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   // implement later
   const visSupportsValueAxisLabels = () => {
-    const disabledCharts = ['Forest Plot', 'HeatMap', 'Bump Chart']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Bump Chart', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsBarSpace = () => {
-    const disabledCharts = ['Forest Plot']
+    const disabledCharts = ['Forest Plot', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     if (orientation === 'horizontal' || visualizationType === 'Paired Bar') return true
     return false
   }
 
   const visSupportsBarThickness = () => {
-    const disabledCharts = ['Forest Plot', 'HeatMap', 'Warming Stripes']
+    const disabledCharts = ['Forest Plot', 'HeatMap', 'Network', 'Dendrogram', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsChartHeight = () => {
-    const disabledCharts = ['Spark Line', 'Warming Stripes']
+    const disabledCharts = ['Spark Line', 'Network', 'Dendrogram', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
@@ -394,19 +439,23 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsLeftValueAxis = () => {
-    const disabledCharts = ['Radar', 'Spark Line', 'Sankey', 'Warming Stripes']
+    const disabledCharts = ['Radar', 'Spark Line', 'Sankey', 'Network', 'Dendrogram', 'Warming Stripes']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
+  const visSupportsRightValueAxis = () => {
+    return visualizationType === 'Combo' && orientation === 'vertical'
+  }
+
   const visSupportsRankByValue = () => {
-    const disabledCharts = ['HeatMap', 'Spark Line']
+    const disabledCharts = ['HeatMap', 'Spark Line', 'Network', 'Dendrogram']
     if (disabledCharts.includes(visualizationType)) return false
     return true
   }
 
   const visSupportsDateCategoryHeight = () => {
-    const disabledCharts = ['HeatMap', 'Spark Line', 'Sankey', 'Bump Chart']
+    const disabledCharts = ['HeatMap', 'Spark Line', 'Sankey', 'Network', 'Dendrogram', 'Bump Chart']
     if (disabledCharts.includes(visualizationType)) return false
     if (config.orientation !== 'horizontal') return false
     if (config.orientation === 'horizontal' && visualizationType === 'Bar' && !config.isLollipopChart) return false
@@ -530,6 +579,7 @@ export const useEditorPermissions = () => {
     visSupportsReactTooltip,
     visSupportsRegions,
     visSupportsResponsiveTicks,
+    visSupportsRightValueAxis,
     visSupportsReverseColorPalette,
     visSupportsSequentialPallete,
     visSupportsSeriesColorAssignments,

package/src/components/Forecasting/Forecasting.tsx

@@ -1,13 +1,18 @@
 import React, { useContext, useMemo } from 'react'
-import { replace } from 'lodash'
+import replace from 'lodash/replace'
 // cdc
 import ConfigContext from '../../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { colorPalettesChartV2, sequentialPalettes } from '@cdc/core/data/colorPalettes'
 import { updatePaletteNames } from '@cdc/core/helpers/updatePaletteNames'
-import { getColorPaletteVersion } from '@cdc/core/helpers/getColorPaletteVersion'
+import { getColorPaletteMajorVersion } from '@cdc/core/helpers/getColorPaletteMajorVersion'
 import { getBridgedData } from '../../helpers/getBridgedData'
 import { buildForecastPaletteMappings } from '../../helpers/buildForecastPaletteMappings'
+import {
+  getForecastConfidenceIntervalKey,
+  getForecastLegendKey,
+  isForecastLegendSelectionActive
+} from '../../helpers/forecastLegend'
 
 // visx & d3
 import { curveMonotoneX } from '@visx/curve'
@@ -119,7 +124,7 @@ const Forecasting = ({ xScale, yScale, height, width, yAxisWidth, handleTooltipM
   const forecastingPalettes = useMemo(() => {
     // Determine palette version from config
     // Forecasting charts use sequentialPalettes for v1, sequential-only palettes for v2
-    const paletteVersion = getColorPaletteVersion(config)
+    const paletteVersion = getColorPaletteMajorVersion(config)
 
     let forecastPalettes
     if (paletteVersion === 1) {
@@ -148,10 +153,6 @@ const Forecasting = ({ xScale, yScale, height, width, yAxisWidth, handleTooltipM
             if (!group || !group.stages) return false
             return group.stages.map((stage, stageIndex) => {
               const { behavior } = legend
-              let transparentArea =
-                behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(stage.key) === -1
-              let displayArea =
-                behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(stage.key) !== -1
               const bridgedData = getBridgedData(stage.key, group.stageColumn, rawData)
 
               return (
@@ -162,6 +163,10 @@ const Forecasting = ({ xScale, yScale, height, width, yAxisWidth, handleTooltipM
                   {group.confidenceIntervals?.map((ciGroup, ciGroupIndex) => {
                     const palette = forecastingPalettes[stage.color] || false
                     const isReversed = stage.color?.toLowerCase().includes('reverse')
+                    const intervalKey = getForecastConfidenceIntervalKey(group.confidenceIntervals, ciGroupIndex)
+                    const isActive = isForecastLegendSelectionActive(seriesHighlight, stage.key, intervalKey)
+                    const transparentArea = behavior === 'highlight' && seriesHighlight.length > 0 && !isActive
+                    const displayArea = behavior === 'highlight' || isActive
 
                     const getFill = () => {
                       if (displayArea) return palette?.[2] || 'transparent'
@@ -186,6 +191,10 @@ const Forecasting = ({ xScale, yScale, height, width, yAxisWidth, handleTooltipM
                           / /g,
                           '—'
                         )}--group-${stageIndex}-${ciGroupIndex}`}
+                        data-forecast-legend-key={
+                          intervalKey ? getForecastLegendKey(stage.key, intervalKey) : stage.key
+                        }
+                        data-forecast-active={isActive ? 'true' : 'false'}
                       >
                         {dataSegments.map((segment, segmentIndex) => (
                           <Group key={`segment-${segmentIndex}`}>