remove chart cursor

KyberNetwork · Dec 25, 2024 · bb72347 · bb72347
1 parent 7a6c4ee
commit bb72347
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 49 deletions.
diff --git a/src/pages/Earns/PositionDetail/LiquidityChart/LiquidityChartRangeInput.tsx b/src/pages/Earns/PositionDetail/LiquidityChart/LiquidityChartRangeInput.tsx
@@ -141,17 +141,6 @@ export default function LiquidityChartRangeInput({
             data={{ series: formattedData, current: price }}
             dimensions={{ width: 400, height: 200 }}
             margins={{ top: 10, right: 2, bottom: 20, left: 0 }}
-            styles={{
-              area: {
-                selection: theme.text,
-              },
-              brush: {
-                handle: {
-                  west: 'transparent',
-                  east: 'transparent',
-                },
-              },
-            }}
             brushLabels={brushLabelValue}
             brushDomain={brushDomain}
             onBrushDomainChange={onBrushDomainChangeEnded}

diff --git a/src/pages/Earns/PositionDetail/LiquidityChart/components/Brush.tsx b/src/pages/Earns/PositionDetail/LiquidityChart/components/Brush.tsx
@@ -40,8 +40,6 @@ export const Brush = ({
   setBrushExtent,
   innerWidth,
   innerHeight,
-  westHandleColor,
-  eastHandleColor,
 }: {
   id: string
   xScale: ScaleLinear<number, number>
@@ -51,8 +49,6 @@ export const Brush = ({
   setBrushExtent: (extent: [number, number], mode: string | undefined) => void
   innerWidth: number
   innerHeight: number
-  westHandleColor: string
-  eastHandleColor: string
 }) => {
   const theme = useTheme()
   const brushRef = useRef<SVGGElement | null>(null)
@@ -119,6 +115,10 @@ export const Brush = ({
       .attr('stroke', 'none')
       .attr('fill-opacity', '0.1')
       .attr('fill', `url(#${id}-gradient-selection)`)
+      .attr('cursor', 'default')
+
+    select(brushRef.current).selectAll('.overlay').attr('cursor', 'default')
+    select(brushRef.current).selectAll('.handle').attr('cursor', 'default')
   }, [brushExtent, brushed, id, innerHeight, innerWidth, interactive, previousBrushExtent, xScale])
 
   // respond to xScale changes only
@@ -151,30 +151,15 @@ export const Brush = ({
   return useMemo(
     () => (
       <>
-        <defs>
-          <linearGradient id={`${id}-gradient-selection`} x1="0%" y1="100%" x2="100%" y2="100%">
-            <stop stopColor={westHandleColor} />
-            <stop stopColor={eastHandleColor} offset="1" />
-          </linearGradient>
-
-          {/* clips at exactly the svg area */}
-          <clipPath id={`${id}-brush-clip`}>
-            <rect x="0" y="0" width={innerWidth} height={innerHeight} />
-          </clipPath>
-        </defs>
-
-        {/* will host the d3 brush */}
         <g
           ref={brushRef}
           clipPath={`url(#${id}-brush-clip)`}
           onMouseEnter={() => setHovering(true)}
           onMouseLeave={() => setHovering(false)}
         />
 
-        {/* custom brush handles */}
         {localBrushExtent && (
           <>
-            {/* west handle */}
             {westHandleInView ? (
               <g
                 transform={`translate(${Math.max(0, xScale(localBrushExtent[0]))}, 0), scale(${
@@ -249,8 +234,6 @@ export const Brush = ({
     ),
     [
       id,
-      westHandleColor,
-      eastHandleColor,
       innerWidth,
       innerHeight,
       localBrushExtent,

diff --git a/src/pages/Earns/PositionDetail/LiquidityChart/components/Chart.tsx b/src/pages/Earns/PositionDetail/LiquidityChart/components/Chart.tsx
@@ -18,7 +18,6 @@ export function Chart({
   id = 'liquidityChartRangeInput',
   data: { series, current },
   ticksAtLimit,
-  styles,
   dimensions: { width, height },
   margins,
   brushDomain,
@@ -188,8 +187,6 @@ export function Chart({
             innerWidth={innerWidth}
             innerHeight={innerHeight}
             setBrushExtent={onBrushDomainChange}
-            westHandleColor={styles.brush.handle.west}
-            eastHandleColor={styles.brush.handle.east}
           />
         </g>
       </svg>

diff --git a/src/pages/Earns/PositionDetail/LiquidityChart/types.ts b/src/pages/Earns/PositionDetail/LiquidityChart/types.ts
@@ -72,20 +72,6 @@ export interface LiquidityChartRangeInputProps {
   }
   ticksAtLimit: { [bound in Bound]?: boolean | undefined }
 
-  styles: {
-    area: {
-      // color of the ticks in range
-      selection: string
-    }
-
-    brush: {
-      handle: {
-        west: string
-        east: string
-      }
-    }
-  }
-
   dimensions: Dimensions
   margins: Margins