[DEV-8461] Update Horizontal bars (#1343)

* [DEV-8461] Update Horizontal bars * [DEV-8461] Update label * [DEV-8461] Update padding * [DEV-8461] Update variables
CDCgov · Jun 12, 2024 · b1b0972 · b1b0972
1 parent 8ba391b
commit b1b0972
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/packages/chart/src/components/BarChart/components/BarChart.Horizontal.tsx b/packages/chart/src/components/BarChart/components/BarChart.Horizontal.tsx
@@ -94,8 +94,8 @@ export const BarChartHorizontal = () => {
  const barLabel = isSuppressed ? '' : Number(yAxisValue) === 0 ? '' : yAxisValue
 
  // check if bar text/value string fits into each bars.
- let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
- let textFits = Number(textWidth) < defaultBarWidth - 5
+ const textWidth = (getTextWidth as any)(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+ const textFits = Number(textWidth) < defaultBarWidth - 5
 
  // control text position
  let textAnchor = textFits ? 'end' : 'start'
@@ -149,8 +149,6 @@ export const BarChartHorizontal = () => {
  return barColor
  }
 
- const iconPadding = symbol => (symbol === 'Asterisk' ? '3px' : symbol === 'Double Asterisks' ? '4px' : '12px')
-
  return (
  <Group key={`${barGroup.index}--${index}`}>
  <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -196,13 +194,13 @@ export const BarChartHorizontal = () => {
  <Text // prettier-ignore
  key={index}
  fontSize={getIconSize(pd.symbol, barHeight)}
- angle={90}
  display={displayBar ? 'block' : 'none'}
  opacity={transparentBar ? 0.5 : 1}
  x={barX}
  y={config.barHeight / 2 + config.barHeight * bar.index}
  fill={'#000'}
- dx={iconPadding(pd.symbol)}
+ dy={config.barHeight / 5}
+ dx={`${suppressedBarWidth * 5}px`}
  verticalAnchor={getVerticalAnchor(pd.symbol)}
  textAnchor={'middle'}
  >

diff --git a/packages/chart/src/components/BarChart/components/BarChart.StackedHorizontal.tsx b/packages/chart/src/components/BarChart/components/BarChart.StackedHorizontal.tsx
@@ -49,8 +49,7 @@ const BarChartStackedHorizontal = () => {
  const xAxisValue = formatNumber(data[bar.index][bar.key], 'left')
  const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
  const yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
- const textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
-
+ const textWidth = (getTextWidth as any)(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
  const additionalColTooltip = getAdditionalColumn(hoveredBar)
  const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
  const tooltip = `<ul>

diff --git a/packages/chart/src/components/EditorPanel/components/Panels/Panel.General.tsx b/packages/chart/src/components/EditorPanel/components/Panels/Panel.General.tsx
@@ -137,7 +137,7 @@ const PanelGeneral: FC<PanelProps> = props => {
  value={config.general.showSuppressedSymbol}
  section='general'
  fieldName='showSuppressedSymbol'
- label='Display "suppressed data" symbol'
+ label='Display "suppressed data" label'
  updateField={updateField}
  />
  </>