[dev-9289] Remove region top border (#1533)

* Remove region top border * Format with prettier
CDCgov · Sep 23, 2024 · a354434 · a354434
1 parent 2b453d8
commit a354434
Showing 1 changed file with 33 additions and 19 deletions.
diff --git a/packages/chart/src/components/Regions/components/Regions.tsx b/packages/chart/src/components/Regions/components/Regions.tsx
@@ -19,7 +19,18 @@ type RegionsProps = {
 }
 
 // TODO: should regions be removed on categorical axis?
-const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, handleTooltipMouseOff, handleTooltipMouseOver, handleTooltipClick, tooltipData, showTooltip, hideTooltip }) => {
+const Regions: React.FC<RegionsProps> = ({
+ xScale,
+ barWidth = 0,
+ totalBarsInGroup = 1,
+ yMax,
+ handleTooltipMouseOff,
+ handleTooltipMouseOver,
+ handleTooltipClick,
+ tooltipData,
+ showTooltip,
+ hideTooltip
+}) => {
  const { parseDate, config } = useContext<ChartContext>(ConfigContext)
 
  const { runtime, regions, visualizationType, orientation, xAxis } = config
@@ -44,7 +55,10 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
  const previousDays = Number(region.from) || 0
  const categoricalDomain = domain.map(d => formatDate(config.xAxis.dateParseFormat, new Date(d)))
  const d = region.toType === 'Last Date' ? new Date(domain[domain.length - 1]).getTime() : new Date(region.to) // on categorical charts force leading zero 03/15/2016 vs 3/15/2016 for valid date format
- const to = config.xAxis.type === 'categorical' ? formatDate(config.xAxis.dateParseFormat, d) : formatDate(config.xAxis.dateParseFormat, d)
+ const to =
+ config.xAxis.type === 'categorical'
+ ? formatDate(config.xAxis.dateParseFormat, d)
+ : formatDate(config.xAxis.dateParseFormat, d)
  const toDate = new Date(to)
  from = new Date(toDate.setDate(toDate.getDate() - Number(previousDays)))
 
@@ -120,7 +134,12 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
  }
  if (region.toType === 'Last Date') {
  const lastDate = domain[domain.length - 1]
- to = Number(xScale(lastDate) + ((visualizationType === 'Bar' || visualizationType === 'Combo') && config.xAxis.type === 'date' ? barWidth * totalBarsInGroup : 0))
+ to = Number(
+ xScale(lastDate) +
+ ((visualizationType === 'Bar' || visualizationType === 'Combo') && config.xAxis.type === 'date'
+ ? barWidth * totalBarsInGroup
+ : 0)
+ )
  }
 
  if (visualizationType === 'Line' || visualizationType === 'Area Chart') {
@@ -152,27 +171,22 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
  if (!from) return null
  if (!to) return null
 
- const TopRegionBorderShape = () => {
- return (
- <path
- stroke='#333'
- d={`M${from} -5
- L${from} 5
- M${from} 0
- L${to} 0
- M${to} -5
- L${to} 5`}
- />
- )
- }
-
  const HighlightedArea = () => {
  return <rect x={from} y={0} width={width} height={yMax} fill={region.background} opacity={0.3} />
  }
 
  return (
- <Group height={100} fill='red' className='regions regions-group--line zzz' key={region.label} onMouseMove={handleTooltipMouseOver} onMouseLeave={handleTooltipMouseOff} handleTooltipClick={handleTooltipClick} tooltipData={JSON.stringify(tooltipData)} showTooltip={showTooltip}>
- <TopRegionBorderShape />
+ <Group
+ height={100}
+ fill='red'
+ className='regions regions-group--line zzz'
+ key={region.label}
+ onMouseMove={handleTooltipMouseOver}
+ onMouseLeave={handleTooltipMouseOff}
+ handleTooltipClick={handleTooltipClick}
+ tooltipData={JSON.stringify(tooltipData)}
+ showTooltip={showTooltip}
+ >
  <HighlightedArea />
  <Text x={from + width / 2} y={5} fill={region.color} verticalAnchor='start' textAnchor='middle'>
  {region.label}