@cdc/chart 4.25.7 → 4.25.8

package/src/components/LineChart/components/LineChart.BumpCircle.tsx

@@ -3,13 +3,14 @@ import { Group } from '@visx/group'
 import { type Column } from '@cdc/core/types/Column'
 import React from 'react'
 import { type ChartConfig } from '../../../types/ChartConfig'
+import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 
 type LineChartBumpCircleProp = {
-    config: ChartConfig, 
-    xScale: any, 
-    yScale: any, 
-    parseDate: any 
-  }
+  config: ChartConfig
+  xScale: any
+  yScale: any
+  parseDate: any
+}
 
 const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
   const { config, xScale, yScale, parseDate } = props
@@ -33,47 +34,47 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
     return xScale.bandwidth ? xScale.bandwidth() / 2 + Number(xValue) : Number(xValue)
   }
 
- 
   const getListItems = dataRow => {
     return Object.values(config.columns)
-    ?.filter(column => column.tooltips).map(column => {
-      const label = column.label || column.name;
-      return `
+      ?.filter(column => column.tooltips)
+      .map(column => {
+        const label = column.label || column.name
+        return `
         <li className='tooltip-body'>
           <strong>${label}</strong>: ${dataRow[column.name]}
-        </li>`; 
-    })
-    .join(' ');
-  }  
+        </li>`
+      })
+      .join(' ')
+  }
 
   const getTooltip = dataRow => `<ul> ${getListItems(dataRow)} </ul>`
 
-  const circles = config.runtime?.series.map((series) => {
+  const circles = config.runtime?.series.map(series => {
     return config.data.map((d, dataIndex) => {
       let series_dataKey = d[series.dataKey]
       let axis_dataKey = d[config.xAxis.dataKey]
       return (
         <React.Fragment key={`bump-circle-${series_dataKey}-${dataIndex}`}>
-          <Group left={Number(config.runtime.yAxis.size)}> 
+          <Group left={Number(config.runtime.yAxis.size)}>
             {series_dataKey && (
               <>
-                <circle 
+                <circle
                   key={`bump-circle-${series_dataKey}-${dataIndex}`}
-                  data-tooltip-html={getTooltip(d)} 
-                  data-tooltip-id={`bump-chart`} 
-                  r={10} 
-                  cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))} 
-                  cy={Number(yScale(series_dataKey))} 
-                  stroke='#CACACA' 
-                  strokeWidth={1} 
-                  fill='#E5E4E2' 
+                  data-tooltip-html={getTooltip(d)}
+                  data-tooltip-id={`bump-chart`}
+                  r={10}
+                  cx={Number(checkBandScale(xScale(handleX(axis_dataKey))))}
+                  cy={Number(yScale(series_dataKey))}
+                  stroke='#CACACA'
+                  strokeWidth={1}
+                  fill='#E5E4E2'
                 />
                 {series_dataKey.toString().length === 2 ? (
                   // prettier-ignore
                   <text
                   x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 7}
                   y={Number(yScale(series_dataKey)) + 4}
-                  fill='#000000'
+                  fill={APP_FONT_COLOR}
                   fontSize={11.5}
                   >
                   {series_dataKey}
@@ -83,7 +84,7 @@ const LineChartBumpCircle = (props: LineChartBumpCircleProp) => {
                   <text
                   x={Number(checkBandScale(xScale(handleX(axis_dataKey)))) - 4}
                   y={Number(yScale(series_dataKey)) + 4}
-                  fill='#000000'
+                  fill={APP_FONT_COLOR}
                   fontSize={11.5}
                   >
                   {series_dataKey}

package/src/components/LinearChart.tsx

@@ -29,7 +29,7 @@ import CategoricalYAxis from './Axis/Categorical.Axis'
 import BrushChart from './Brush/BrushController'
 
 // Helpers
-import { isLegendWrapViewport, isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+import { isLegendWrapViewport, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { calcInitialHeight, handleAutoPaddingRight } from '../helpers/sizeHelpers'
 import { filterAndShiftLinearDateTicks } from '../helpers/filterAndShiftLinearDateTicks'
@@ -97,7 +97,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     tableData,
     transformedData: data,
     seriesHighlight,
-    
+
   } = useContext(ConfigContext)
 
   // CONFIG
@@ -154,8 +154,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const labelsOverflow = inlineLabel && !inlineLabelHasNoSpace
   const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
   const yLabelOffset = isNaN(parseInt(`${runtime.yAxis.labelOffset}`)) ? 0 : parseInt(`${runtime.yAxis.labelOffset}`)
-  const tickLabelFontSize = isMobileHeightViewport(currentViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
-  const axisLabelFontSize = isMobileHeightViewport(currentViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE
+  const tickLabelFontSize = isMobileFontViewport(currentViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
+  const axisLabelFontSize = isMobileFontViewport(currentViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE
   const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
 
   // zero if not forest plot

package/src/data/initial-state.js

@@ -44,16 +44,16 @@ export default {
     enablePadding: false,
     min: '',
     max: '',
-    labelColor: '#333',
-    tickLabelColor: '#333',
-    tickColor: '#333',
+    labelColor: '#1c1d1f',
+    tickLabelColor: '#1c1d1f',
+    tickColor: '#1c1d1f',
     rightHideAxis: false,
     rightAxisSize: 0,
     rightLabel: '',
     rightLabelOffsetSize: 0,
-    rightAxisLabelColor: '#333',
-    rightAxisTickLabelColor: '#333',
-    rightAxisTickColor: '#333',
+    rightAxisLabelColor: '#1c1d1f',
+    rightAxisTickLabelColor: '#1c1d1f',
+    rightAxisTickColor: '#1c1d1f',
     numTicks: '',
     axisPadding: 0,
     scalePadding: 10,
@@ -111,9 +111,9 @@ export default {
     tickRotation: 0,
     min: '',
     max: '',
-    labelColor: '#333',
-    tickLabelColor: '#333',
-    tickColor: '#333',
+    labelColor: '#1c1d1f',
+    tickLabelColor: '#1c1d1f',
+    tickColor: '#1c1d1f',
     numTicks: '',
     labelOffset: 0,
     axisPadding: 200,
@@ -138,7 +138,8 @@ export default {
     showVertical: true,
     dateDisplayFormat: '',
     showMissingDataLabel: true,
-    showSuppressedSymbol: true
+    showSuppressedSymbol: true,
+    collapsible: true
   },
   orientation: 'vertical',
   color: 'pinkpurple',

package/src/hooks/useTooltip.tsx

@@ -594,7 +594,7 @@ export const useTooltip = props => {
 
     return (
       <li style={style} className='tooltip-body mb-1'>
-        {parse(displayText)}
+        {displayText !== undefined ? parse(String(displayText)) : displayText}
       </li>
     )
   }

package/src/index.jsx

@@ -14,6 +14,11 @@ let domContainer = document.getElementsByClassName('react-container')[0]
 
 ReactDOM.createRoot(domContainer).render(
   <React.StrictMode>
-    <CdcChart configUrl={domContainer.attributes['data-config'].value} isEditor={isEditor} isDebug={isDebug} />
+    <CdcChart
+      interactionLabel={domContainer.attributes['data-config']?.value}
+      configUrl={domContainer.attributes['data-config'].value}
+      isEditor={isEditor}
+      isDebug={isDebug}
+    />
   </React.StrictMode>
 )