@cdc/chart 4.25.5-1 → 4.25.6-1

package/src/components/EditorPanel/components/Panels/Panel.General.tsx

@@ -435,9 +435,9 @@ const PanelGeneral: FC<PanelProps> = props => {
         {visSupportsFootnotes() && (
           <TextField
             type='textarea'
-            value={config.footnotes}
+            value={config.legacyFootnotes}
             updateField={updateField}
-            fieldName='footnotes'
+            fieldName='legacyFootnotes'
             label='Footnotes'
             tooltip={
               <Tooltip style={{ textTransform: 'none' }}>

package/src/components/EditorPanel/components/Panels/Panel.Series.tsx

@@ -627,6 +627,7 @@ const SeriesItem = props => {
     ['Bar', 'Line'].includes(config.visualizationType) &&
     config.visualizationSubType !== 'Stacked' &&
     !config.series.find(s => s.dynamicCategory && s.dataKey !== series.dataKey)
+  const SELECT = '- Select -'
   return (
     <Draggable key={series.dataKey} draggableId={`draggableFilter-${series.dataKey}`} index={i}>
       {(provided, snapshot) => (
@@ -661,9 +662,9 @@ const SeriesItem = props => {
                       <Select
                         label='Dynamic Category'
                         value={series.dynamicCategory}
-                        options={['- Select - ', ...getColumns().filter(col => series.dataKey !== col)]}
+                        options={[SELECT, ...getColumns().filter(col => series.dataKey !== col)]}
                         updateField={(_section, _subsection, _fieldName, value) => {
-                          if (value === '- Select -') value = ''
+                          if (value === SELECT) value = ''
                           updateSeries(i, value, 'dynamicCategory')
                         }}
                         tooltip={

package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx

@@ -23,6 +23,7 @@ import { useEditorPanelContext } from '../../EditorPanelContext.js'
 import ConfigContext from '../../../../ConfigContext.js'
 import { PanelProps } from '../PanelProps'
 import { LineChartConfig } from '../../../../types/ChartConfig'
+import './panelVisual.styles.css'
 
 const PanelVisual: FC<PanelProps> = props => {
   const { config, updateConfig, colorPalettes, twoColorPalette } = useContext<ChartContext>(ConfigContext)
@@ -45,7 +46,7 @@ const PanelVisual: FC<PanelProps> = props => {
   const { twoColorPalettes, sequential, nonSequential, accessibleColors } = useColorPalette(config, updateConfig)
 
   const updateColor = (property, _value) => {
-    console.log('value', _value)
+    console.error('value', _value)
     if (property === 'storyNodeFontColor') {
       updateConfig({
         ...config,

package/src/components/EditorPanel/components/Panels/panelVisual.styles.css

@@ -0,0 +1,8 @@
+.type-chart .sidebar .color-palette button:not(.selected) {
+  border:  var(--cool-gray-30) 2px solid !important;
+
+}
+
+.type-chart .sidebar .color-palette button.selected {
+  border:  black 2px solid !important;
+}

package/src/components/EditorPanel/useEditorPermissions.ts

@@ -197,7 +197,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsTooltipLines = () => {
-    const enabledCharts = ['Combo', 'Forecasting', 'Area Chart', 'Line', 'Bar']
+    const enabledCharts = ['Combo', 'Forecasting', 'Area Chart', 'Line', 'Bar', 'Scatter Plot']
     if (enabledCharts.includes(visualizationType)) return true
     return false
   }
@@ -357,8 +357,11 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsReactTooltip = () => {
-    if (config.yAxis.type === 'categorical') return true
-    if (['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar'].includes(visualizationType)) {
+    if (config.yAxis.type === 'categorical' && config.tooltips.singleSeries) return true
+    if (
+      ['Deviation Bar', 'Box Plot', 'Scatter Plot', 'Paired Bar', 'Bar'].includes(visualizationType) &&
+      config.tooltips.singleSeries
+    ) {
       return true
     }
   }
@@ -381,7 +384,7 @@ export const useEditorPermissions = () => {
   }
 
   const visSupportsYPadding = () => {
-    return !config.dataFormat.onlyShowTopPrefixSuffix || !config.dataFormat.suffix?.includes(' ')
+    return !config.yAxis.inlineLabel || !config.yAxis.inlineLabel?.includes(' ')
   }
 
   const visHasSingleSeriesTooltip = () => {

package/src/components/HoverLine/HoverLine.tsx

@@ -0,0 +1,74 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../../ConfigContext'
+import { Group } from '@visx/group'
+import { Line } from '@visx/shape'
+
+type HoverLineProps = {
+  tooltipData?: any // same as @visx/tooltip TooltipData
+  xMax?: number
+  yMax?: number
+  point: { x: number; y: number }
+  orientation: 'horizontal' | 'vertical'
+}
+
+const HoverLine: React.FC<HoverLineProps> = ({ tooltipData, xMax, yMax, point, orientation }) => {
+  const { config } = useContext(ConfigContext)
+  const { verticalHoverLine, horizontalHoverLine } = config.visual
+  const { visualizationType } = config
+  const isScatterPlot = visualizationType === 'Scatter Plot'
+
+  const isVertical = orientation === 'vertical'
+  const isHorizontal = orientation === 'horizontal'
+  const showVerticalHoverLine = verticalHoverLine || (verticalHoverLine && isScatterPlot)
+  const showHorizontalHoverLine = horizontalHoverLine || (horizontalHoverLine && isScatterPlot)
+
+  const getX = () => {
+    if (point.x > xMax + Number(config.yAxis.size)) return xMax
+    if (point.x < config.yAxis.size) return config.yAxis.size
+    return point.x
+  }
+
+  const getY = () => {
+    if (point.y > yMax) return yMax
+    return point.y
+  }
+  if (isVertical) {
+    return (
+      showVerticalHoverLine && (
+        <Group key={`tooltipLine-vertical${point.y}${point.x}`} className='vertical-tooltip-line'>
+          <Line
+            from={{ x: getX(), y: 0 }}
+            to={{ x: getX(), y: yMax }}
+            stroke={'black'}
+            strokeWidth={1}
+            pointerEvents='none'
+            strokeDasharray='5,5'
+            className='vertical-tooltip-line'
+          />
+        </Group>
+      )
+    )
+  }
+  if (isHorizontal) {
+    return (
+      showHorizontalHoverLine && (
+        <Group
+          key={`tooltipLine-horizontal${point.y}${point.x}`}
+          className='horizontal-tooltip-line'
+          left={config.yAxis.size ? config.yAxis.size : 0}
+        >
+          <Line
+            from={{ x: 0, y: getY() }}
+            to={{ x: xMax, y: getY() }}
+            stroke={'black'}
+            strokeWidth={1}
+            pointerEvents='none'
+            strokeDasharray='5,5'
+            className='horizontal-tooltip-line'
+          />
+        </Group>
+      )
+    )
+  }
+}
+export default HoverLine

package/src/components/Legend/Legend.Suppression.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { ChartConfig } from '../../types/ChartConfig'
 import RichTooltip from '@cdc/core/components/RichTooltip/RichTooltip'
 interface LegendProps {
@@ -7,8 +7,8 @@ interface LegendProps {
 }
 
 const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) => {
-  const { preliminaryData, visualizationType, visualizationSubType, legend } = config
-
+  const { preliminaryData, visualizationType, visualizationSubType, legend, data } = config
+  const showPiePercent = config.dataFormat.showPiePercent && config.visualizationType === 'Pie'
   const hasOpenCircleEffects = () =>
     preliminaryData?.some(pd => pd.label && pd.type === 'effect' && pd.style !== 'Filled Circles') &&
     ['Line', 'Combo'].includes(visualizationType)
@@ -95,10 +95,31 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
   const getLegendContainerClass = () =>
     legend.singleRow && isLegendBottom ? 'legend-container__inner bottom single-row' : ''
 
+  const sumSeries = (data, seriesKey) => {
+    if (!Array.isArray(data)) return 0
+
+    return data.reduce((total, row) => {
+      const raw = row[seriesKey]
+      const num = parseFloat(raw)
+      return total + (Number.isFinite(num) ? num : 0)
+    }, 0)
+  }
+  const total = sumSeries(data, config.runtime.yAxis.dataKey)
+
   const shouldShowSuppressedInfo = () =>
     !config.legend.hideSuppressionLink &&
     config.visualizationSubType !== 'stacked' &&
     preliminaryData?.some(pd => pd.label && pd.type === 'suppression' && pd.value && (pd?.style || pd.symbol))
+  // controls Pie chart Legend  for calculated Area
+
+  const renderCalculatedAreaItems = () => {
+    return (
+      <div key={'pie-asterisk'} className='legend-preliminary'>
+        <span className={'Asterisk'}>{'**'}</span>
+        <p>{'Calculated Area'}</p>
+      </div>
+    )
+  }
 
   return (
     <React.Fragment>
@@ -108,6 +129,12 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
           <div className={getLegendContainerClass()}>{renderEffectItems()}</div>
         </React.Fragment>
       )}
+      {showPiePercent && total < 100 && (
+        <React.Fragment>
+          <hr />
+          <div className={getLegendContainerClass()}>{renderCalculatedAreaItems()}</div>
+        </React.Fragment>
+      )}
 
       {shouldShowSuppressedLabels() && (
         <React.Fragment>
@@ -132,6 +159,23 @@ const LegendSuppression: React.FC<LegendProps> = ({ config, isLegendBottom }) =>
           </p>
         </div>
       )}
+      {showPiePercent && (total < 100 || total > 100) && (
+        <div className='legend-container__outer link-container'>
+          <p>
+            {total < 100 ? '** This graph contains a' : 'The sum of percentages in this graph is larger than 100 '}
+            <RichTooltip
+              tooltipContent={
+                total < 100
+                  ? 'Calculated Areas are used to supplement the pie chart when the sum of the values in the data is less than 100%.'
+                  : 'Calculated Areas are disabled when the total exceeds 100%.'
+              }
+              linkText={total < 100 ? 'calculated area' : ''}
+              href={null}
+              tooltipOpacity={config.tooltips.opacity}
+            />
+          </p>
+        </div>
+      )}
     </React.Fragment>
   )
 }

package/src/components/Legend/helpers/index.ts

@@ -36,7 +36,7 @@ export const getMarginBottom = (isLegendBottom, config) => {
 
   if (isLegendTop) marginBottom = 27
 
-  if (isLegendTop && config.dataFormat?.onlyShowTopPrefixSuffix) marginBottom += 9
+  if (isLegendTop && config.yAxis?.inlineLabel) marginBottom += 9
 
   if (isLegendBottom) marginBottom += 9
 

package/src/components/LineChart/helpers.ts

@@ -17,19 +17,19 @@ export const createStyles = (props: StyleProps): Style[] => {
 
   const dynamicSeriesKey = dynamicCategory ? originalSeriesKey : seriesKey
   const validPreliminaryData: PreliminaryDataItem[] = preliminaryData.filter(
-    pd => pd.seriesKey && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect'
+    pd => pd.seriesKeys?.length && pd.column && pd.value && pd.type && pd.style && pd.type === 'effect'
   )
   const isEffectLine = (pd, dataPoint) => {
     if (dynamicCategory) {
       return (
         pd.type === 'effect' &&
         pd.style !== 'Open Circles' &&
-        pd.seriesKey === seriesKey &&
+        pd.seriesKeys.includes(seriesKey) &&
         String(dataPoint[dynamicSeriesKey]) === String(pd.value)
       )
     } else {
       return (
-        pd.seriesKey === seriesKey &&
+        pd.seriesKeys.includes(seriesKey) &&
         dataPoint[pd.column] === pd.value &&
         pd.type === 'effect' &&
         pd.style !== 'Open Circles'
@@ -71,11 +71,11 @@ export const filterCircles = (
 ): DataItem[] => {
   // Filter and map preliminaryData to get circlesFiltered
   const circlesFiltered = preliminaryData
-    ?.filter(item => item.style.includes('Circles') && item.type === 'effect')
+    ?.filter(item => item.style.includes('Circles') && item.type === 'effect' && item.seriesKeys?.length)
     .map(item => ({
       column: item.column,
       value: item.value,
-      seriesKey: item.seriesKey,
+      seriesKeys: item.seriesKeys,
       circleSize: item.circleSize,
       style: item.style
     }))
@@ -85,7 +85,7 @@ export const filterCircles = (
     circlesFiltered.forEach(fc => {
       if (
         item[fc.column] === fc.value &&
-        fc.seriesKey === seriesKey &&
+        fc.seriesKeys.includes(seriesKey) &&
         item[seriesKey] &&
         fc.style === 'Open Circles'
       ) {
@@ -98,7 +98,7 @@ export const filterCircles = (
       }
       if (
         (!fc.value || item[fc.column] === fc.value) &&
-        fc.seriesKey === seriesKey &&
+        fc.seriesKeys.includes(seriesKey) &&
         item[seriesKey] &&
         fc.style === 'Filled Circles'
       ) {

package/src/components/LineChart/index.tsx

@@ -38,16 +38,13 @@ const LineChart = (props: LineChartProps) => {
     } = props
 
   // prettier-ignore
-  const { colorScale, config, formatNumber, handleLineType, parseDate, seriesHighlight, tableData, transformedData, updateConfig, brushConfig,clean  } = useContext<ChartContext>(ConfigContext)
-  const { yScaleRight } = useRightAxis({ config, yMax, data: transformedData, updateConfig })
+  const { colorScale, config, formatNumber, handleLineType, parseDate, seriesHighlight, tableData, transformedData:data, updateConfig,   } = useContext<ChartContext>(ConfigContext)
+  const { yScaleRight } = useRightAxis({ config, yMax, data, updateConfig })
   const showSingleSeries = config.tooltips.singleSeries
+  if (!handleTooltipMouseOver) return
 
   const DEBUG = false
   const { lineDatapointStyle, showLineSeriesLabels, legend } = config
-  const isBrushOn = brushConfig.data.length > 0 && config.brush?.active
-  // if brush on use brush data and clean
-  const data = isBrushOn ? clean(brushConfig.data) : transformedData
-  const _tableData = isBrushOn ? clean(brushConfig.data) : tableData
 
   const xPos = d => {
     return xScale(getXAxisData(d)) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)