From a354434e2a7e2e0ab40b4a237efc1329f6ac4f45 Mon Sep 17 00:00:00 2001
From: Jay Boice <jboice@gmail.com>
Date: Mon, 23 Sep 2024 12:16:25 -0400
Subject: [PATCH] [dev-9289] Remove region top border (#1533)

* Remove region top border

* Format with prettier
---
 .../components/Regions/components/Regions.tsx | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/packages/chart/src/components/Regions/components/Regions.tsx b/packages/chart/src/components/Regions/components/Regions.tsx
index ef4ab19e4..d9b8f12d5 100644
--- 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}