@cdc/chart 4.25.11 → 4.26.1

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -13,7 +13,6 @@ import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 // CDC core components and helpers
 import { getColorContrast, getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { getBarConfig, testZeroValue, getLollipopStemColor, getLollipopHeadColor } from '../helpers'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
@@ -36,6 +35,7 @@ const BarChartHorizontal = () => {
     isLabelBelowBar,
     lollipopBarWidth,
     lollipopShapeSize,
+    labelFontSize,
     getHighlightedBarColorByValue,
     getHighlightedBarByValue,
     getAdditionalColumn,
@@ -59,8 +59,6 @@ const BarChartHorizontal = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const LABEL_FONT_SIZE = isMobileFontViewport(vizViewport) ? 13 : 16
-
   const hasConfidenceInterval = [config.confidenceKeys?.upper, config.confidenceKeys?.lower].every(
     v => v != null && String(v).trim() !== ''
   )
@@ -209,7 +207,7 @@ const BarChartHorizontal = () => {
                     isVertical: false,
                     yAxisValue,
                     barWidth: 0,
-                    labelFontSize: LABEL_FONT_SIZE
+                    labelFontSize: labelFontSize
                   })
 
                   const barPosition = !isPositiveBar ? 'below' : 'above'
@@ -217,7 +215,7 @@ const BarChartHorizontal = () => {
                   const barDefaultLabel = !config.yAxis.displayNumbersOnBar || absentDataLabel ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
-                  const textWidth = getTextWidth(barDefaultLabel)
+                  const textWidth = getTextWidth(barDefaultLabel, `normal ${labelFontSize}px sans-serif`)
                   const textFits = Number(textWidth) < defaultBarWidth - 5
 
                   // control text position
@@ -447,7 +445,7 @@ const BarChartHorizontal = () => {
                           return (
                             <Text // prettier-ignore
                               key={index}
-                              fontSize={LABEL_FONT_SIZE}
+                              fontSize={labelFontSize}
                               display={displayBar ? 'block' : 'none'}
                               opacity={transparentBar ? 0.5 : 1}
                               x={barX}
@@ -473,6 +471,7 @@ const BarChartHorizontal = () => {
                             dx={textPadding}
                             verticalAnchor='middle'
                             textAnchor={textAnchor}
+                            fontSize={labelFontSize}
                           >
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
@@ -488,6 +487,7 @@ const BarChartHorizontal = () => {
                             dx={-textPadding}
                             verticalAnchor='middle'
                             textAnchor={bar.value < 0 ? 'end' : 'start'}
+                            fontSize={labelFontSize}
                           >
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
@@ -496,12 +496,17 @@ const BarChartHorizontal = () => {
                           display={displayBar ? 'block' : 'none'}
                           x={bar.y}
                           opacity={transparentBar ? 0.5 : 1}
-                          y={config.barHeight / 2 + config.barHeight * bar.index}
+                          y={
+                            config.isLollipopChart
+                              ? barHeight * bar.index + lollipopBarWidth / 2
+                              : config.barHeight / 2 + config.barHeight * bar.index
+                          }
                           fill={labelColor}
                           dx={absentDataLabel === 'N/A' ? 20 : textPadding}
-                          dy={config.isLollipopChart ? -10 : 0}
+                          dy={0}
                           verticalAnchor='middle'
                           textAnchor={absentDataLabel === 'N/A' ? 'middle' : textAnchor}
+                          fontSize={labelFontSize}
                         >
                           {absentDataLabel}
                         </Text>
@@ -510,31 +515,180 @@ const BarChartHorizontal = () => {
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
-                            y={0}
+                            y={barHeight * bar.index + lollipopBarWidth / 2}
                             fill={APP_FONT_COLOR}
                             dx={textPaddingLollipop}
                             textAnchor={textAnchorLollipop}
                             verticalAnchor='middle'
                             fontWeight={'normal'}
+                            fontSize={labelFontSize}
                           >
                             {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
                         )}
-                        {isLabelBelowBar && !config.yAxis.hideLabel && (
-                          <Text
-                            x={config.yAxis.hideAxis ? 0 : 5}
-                            y={barGroup.height}
-                            dy={4}
-                            verticalAnchor={'start'}
-                            textAnchor={'start'}
-                          >
-                            {config.runtime.yAxis.type === 'date'
-                              ? formatDate(parseDate(dataValue))
-                              : isHorizontal
-                              ? dataValue
-                              : formatNumber(dataValue)}
-                          </Text>
-                        )}
+                        {isLabelBelowBar &&
+                          !config.yAxis.hideLabel &&
+                          (() => {
+                            const label =
+                              config.runtime.yAxis.type === 'date'
+                                ? formatDate(parseDate(dataValue))
+                                : isHorizontal
+                                ? dataValue
+                                : formatNumber(dataValue)
+                            if (typeof label === 'string') {
+                              // 1. Check for HTML <a> tag and extract its text and href
+                              const aTagMatch = label.match(/<a [^>]*href=["']?([^"'>\s]+)["']?[^>]*>(.*?)<\/a>/i)
+                              if (aTagMatch) {
+                                const href = aTagMatch[1].startsWith('http') ? aTagMatch[1] : `https://${aTagMatch[1]}`
+                                const linkText = aTagMatch[2]
+                                return (
+                                  <foreignObject
+                                    x={config.yAxis.hideAxis ? 0 : 5}
+                                    y={barGroup.height}
+                                    width={120}
+                                    height={24}
+                                    style={{ overflow: 'visible' }}
+                                  >
+                                    <a
+                                      href={href}
+                                      target='_blank'
+                                      rel='noopener noreferrer'
+                                      style={
+                                        config.tooltips.singleSeries
+                                          ? {
+                                              color: '#0071bc',
+                                              textDecoration: 'underline',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                          : {
+                                              color: 'inherit',
+                                              textDecoration: 'none',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                      }
+                                    >
+                                      {linkText}
+                                    </a>
+                                  </foreignObject>
+                                )
+                              }
+                              // 2. Check for markdown link
+                              const mdMatch = label.match(/\[([^\]]+)\]\((https?:\/\/[^\s]+|www\.[^\s]+)\)/i)
+                              if (mdMatch) {
+                                const href = mdMatch[2].startsWith('http') ? mdMatch[2] : `https://${mdMatch[2]}`
+                                const linkText = mdMatch[1]
+                                return (
+                                  <foreignObject
+                                    x={config.yAxis.hideAxis ? 0 : 5}
+                                    y={barGroup.height}
+                                    width={120}
+                                    height={24}
+                                    style={{ overflow: 'visible' }}
+                                  >
+                                    <a
+                                      href={href}
+                                      target='_blank'
+                                      rel='noopener noreferrer'
+                                      style={
+                                        config.tooltips.singleSeries
+                                          ? {
+                                              color: '#0071bc',
+                                              textDecoration: 'underline',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                          : {
+                                              color: 'inherit',
+                                              textDecoration: 'none',
+                                              fontSize: 12,
+                                              fontFamily: 'inherit',
+                                              display: 'inline-block',
+                                              width: '100%'
+                                            }
+                                      }
+                                    >
+                                      {linkText}
+                                    </a>
+                                  </foreignObject>
+                                )
+                              }
+                              // 3. Check for plain URL
+                              if (/(https?:\/\/|www\.)/i.test(label)) {
+                                try {
+                                  const urlObj = new URL(label.startsWith('http') ? label : `https://${label}`)
+                                  const linkText = urlObj.hostname.replace(/^www\./, '')
+                                  return (
+                                    <foreignObject
+                                      x={config.yAxis.hideAxis ? 0 : 5}
+                                      y={barGroup.height}
+                                      width={120}
+                                      height={24}
+                                      style={{ overflow: 'visible' }}
+                                    >
+                                      <a
+                                        href={urlObj.href}
+                                        target='_blank'
+                                        rel='noopener noreferrer'
+                                        style={
+                                          config.tooltips.singleSeries
+                                            ? {
+                                                color: '#0071bc',
+                                                textDecoration: 'underline',
+                                                fontSize: 12,
+                                                fontFamily: 'inherit',
+                                                display: 'inline-block',
+                                                width: '100%'
+                                              }
+                                            : {
+                                                color: 'inherit',
+                                                textDecoration: 'none',
+                                                fontSize: 12,
+                                                fontFamily: 'inherit',
+                                                display: 'inline-block',
+                                                width: '100%'
+                                              }
+                                        }
+                                      >
+                                        {linkText}
+                                      </a>
+                                    </foreignObject>
+                                  )
+                                } catch {
+                                  return (
+                                    <Text
+                                      x={config.yAxis.hideAxis ? 0 : 5}
+                                      y={barGroup.height}
+                                      dy={4}
+                                      verticalAnchor={'start'}
+                                      textAnchor={'start'}
+                                    >
+                                      {label}
+                                    </Text>
+                                  )
+                                }
+                              }
+                            }
+                            // Not a link, render as normal
+                            return (
+                              <Text
+                                x={config.yAxis.hideAxis ? 0 : 5}
+                                y={barGroup.height}
+                                dy={4}
+                                verticalAnchor={'start'}
+                                textAnchor={'start'}
+                              >
+                                {label}
+                              </Text>
+                            )
+                          })()}
 
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
                           <circle

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -38,6 +38,7 @@ const BarChartStackedHorizontal = () => {
     hoveredBar,
     isHorizontal,
     isLabelBelowBar,
+    labelFontSize,
     onMouseLeaveBar,
     onMouseOverBar,
     barStackedSeriesKeys
@@ -155,7 +156,7 @@ const BarChartStackedHorizontal = () => {
                 const yAxisTooltip = config.runtime.yAxis.label
                   ? `${config.runtime.yAxis.label}: ${yAxisValue}`
                   : yAxisValue
-                const textWidth = getTextWidth(xAxisValue)
+                const textWidth = getTextWidth(xAxisValue, `normal ${labelFontSize}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>
@@ -286,6 +287,7 @@ const BarChartStackedHorizontal = () => {
                           fill={labelColor}
                           textAnchor='middle'
                           verticalAnchor='middle'
+                          fontSize={labelFontSize}
                         >
                           {xAxisValue}
                         </Text>

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -259,6 +259,7 @@ const BarChartStackedVertical = () => {
           yMax={yMax}
           barWidth={barWidth}
           totalBarsInGroup={1}
+          xMax={xMax}
           handleTooltipMouseOff={() => {}}
           handleTooltipMouseOver={() => {}}
           handleTooltipClick={() => {}}

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -17,7 +17,6 @@ import { isDateScale } from '@cdc/core/helpers/cove/date'
 import isNumber from '@cdc/core/helpers/isNumber'
 import createBarElement from '@cdc/core/components/createBarElement'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
-import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 // Types
 import { type ChartContext } from '../../../types/ChartContext'
 import _ from 'lodash'
@@ -32,6 +31,7 @@ const BarChartVertical = () => {
     getAdditionalColumn,
     getHighlightedBarByValue,
     getHighlightedBarColorByValue,
+    labelFontSize,
     lollipopBarWidth,
     lollipopShapeSize,
     onMouseLeaveBar,
@@ -59,8 +59,6 @@ const BarChartVertical = () => {
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
-  const LABEL_FONT_SIZE = isMobileFontViewport(vizViewport) ? 13 : 16
-
   const root = document.documentElement
 
   let data = transformedData
@@ -242,7 +240,7 @@ const BarChartVertical = () => {
                     barWidth,
                     isVertical: true,
                     yAxisValue,
-                    labelFontSize: LABEL_FONT_SIZE
+                    labelFontSize: labelFontSize
                   })
                   // configure colors
                   let labelColor = APP_FONT_COLOR
@@ -481,7 +479,7 @@ const BarChartVertical = () => {
                               verticalAnchor={verticalAnchor}
                               fill={fillColor}
                               textAnchor='middle'
-                              fontSize={LABEL_FONT_SIZE}
+                              fontSize={labelFontSize}
                             >
                               {pd.iconCode}
                             </Text>
@@ -494,7 +492,7 @@ const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
-                          fontSize={LABEL_FONT_SIZE}
+                          fontSize={labelFontSize}
                         >
                           {testZeroValue(bar.value) ? '' : barDefaultLabel}
                         </Text>
@@ -505,7 +503,7 @@ const BarChartVertical = () => {
                           y={barY - BAR_LABEL_PADDING}
                           fill={labelColor}
                           textAnchor='middle'
-                          fontSize={config.isLollipopChart ? null : LABEL_FONT_SIZE}
+                          fontSize={config.isLollipopChart ? null : labelFontSize}
                         >
                           {absentDataLabel}
                         </Text>
@@ -568,7 +566,7 @@ const BarChartVertical = () => {
           }}
         </BarGroup>
 
-        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} />
+        <Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={totalBarsInGroup} xMax={xMax} />
       </Group>
     )
   )

package/src/components/BarChart/components/context.tsx

@@ -18,6 +18,7 @@ export type BarChartContextValues = {
     getHighlightedBarColorByValue: Function
     lollipopBarWidth: number
     lollipopShapeSize: number
+    labelFontSize: number
     onMouseLeaveBar: Function
     onMouseOverBar: Function
     section: string

package/src/components/BarChart/helpers/useBarChart.ts

@@ -5,10 +5,20 @@ import { APP_FONT_SIZE } from '@cdc/core/helpers/constants'
 import { getPaletteColors } from '@cdc/core/helpers/palettes/utils'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizSubType, getVizTitle } from '@cdc/core/helpers/metrics/utils'
+import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
 export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, configContext) => {
-  const { config, colorPalettes, tableData, updateConfig, parseDate, formatDate, seriesHighlight, interactionLabel } =
-    configContext
+  const {
+    config,
+    colorPalettes,
+    tableData,
+    updateConfig,
+    parseDate,
+    formatDate,
+    seriesHighlight,
+    interactionLabel,
+    vizViewport
+  } = configContext
   const { orientation } = config
   const dispatch = useContext(ChartDispatchContext)
   const [hoveredBar, setHoveredBar] = useState(null)
@@ -20,6 +30,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
   const isLabelBelowBar = config.yAxis.labelPlacement === 'Below Bar'
   const displayNumbersOnBar = config.yAxis.displayNumbersOnBar
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
+  const labelFontSize = isMobileFontViewport(vizViewport) ? 13 : 16
 
   const isRounded = config.barStyle === 'rounded'
   const isStacked = config.visualizationSubType === 'stacked'
@@ -241,6 +252,7 @@ export const useBarChart = (handleTooltipMouseOver, handleTooltipMouseOff, confi
     stackCount,
     barStackedSeriesKeys,
     hasMultipleSeries,
+    labelFontSize,
     applyRadius,
     assignColorsToValues,
     getHighlightedBarColorByValue,