Update chart styles

pshenmic · Oct 16, 2024 · 29d598c · 29d598c
1 parent ff0748f
commit 29d598c
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 32 deletions.
diff --git a/packages/frontend/src/app/validator/[hash]/Validator.js b/packages/frontend/src/app/validator/[hash]/Validator.js
@@ -374,7 +374,7 @@ function Validator ({ hash }) {
         </div>
 
         <div className={'ValidatorPage__Column'}>
-          <InfoContainer styles={['tabs']}>
+          <InfoContainer styles={['tabs']} className={'ValidatorPage__ChartsContainer'}>
             <Tabs onChange={(index) => setActiveChartTab(index)} index={activeChartTab}>
               <TabList>
                 <Tab>Proposed Blocks</Tab>

diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss
@@ -51,6 +51,15 @@
     flex-grow: 1;
   }
 
+  &__ChartsContainer {
+    padding-bottom: 0;
+    overflow-x: hidden;
+
+    .Chart {
+      overflow: visible !important;
+    }
+  }
+
   &__ListPagination {
     margin-top: 20px;
 

diff --git a/packages/frontend/src/components/charts/charts.scss b/packages/frontend/src/components/charts/charts.scss
@@ -11,6 +11,9 @@
   visibility: hidden;
   opacity: 0;
   transition: all 1s;
+  margin: 0 -10px !important;
+  padding: 0 10px !important;
+  overflow: hidden;
 
   &.loaded {
       visibility: visible;

diff --git a/packages/frontend/src/components/charts/index.js b/packages/frontend/src/components/charts/index.js
@@ -68,16 +68,18 @@ const LineChart = ({
 
   useEffect(() => render, [data, render])
 
-  return <Container
-            ref={chartContainer}
-            width={'100%'}
-            height={'100%'}
-            maxW={'none'}
-            p={0} m={0}
-            className={`ChartContainer ${skeleton ? 'loading' : ''}`}
-        >
-            {chartElement || <></>}
-        </Container>
+  return (
+    <Container
+      ref={chartContainer}
+      width={'100%'}
+      height={'100%'}
+      maxW={'none'}
+      p={0} m={0}
+      className={`ChartContainer ${skeleton ? 'loading' : ''}`}
+    >
+      {chartElement || <></>}
+    </Container>
+  )
 }
 
 const LineGraph = ({
@@ -94,6 +96,8 @@ const LineGraph = ({
   const marginBottom = xAxis.title ? 45 : 20
   const marginLeft = 40
   const xAxisFormatCode = typeof xAxis.type === 'string' ? xAxis.type : xAxis.type.axis
+  const [chartWidth, setChartWidth] = useState(0)
+  const svgRef = useRef(null)
 
   const getFormatByCode = (code) => {
     if (code === 'number') return d3.format(',.0f')
@@ -114,17 +118,28 @@ const LineGraph = ({
   })
 
   const xTicksCount = (() => {
-    if (xAxisFormatCode === 'number') return 6
-    if (xAxisFormatCode === 'time') return 6
+    const isSmallScreen = chartWidth < 500
+
+    if (xAxisFormatCode === 'number') return isSmallScreen ? 4 : 6
+    if (xAxisFormatCode === 'time') return isSmallScreen ? 4 : 6
     if (xAxisFormatCode === 'date' || xAxisFormatCode === 'datetime') {
-      if (typeof timespan === 'undefined') return 6
-      if (timespan === '1w') return 6
-      if (timespan === '3d') return 4
-      if (timespan === '24h') return 6
-      if (timespan === '1h') return 6
+      if (typeof timespan === 'undefined') return isSmallScreen ? 4 : 6
+      if (timespan === '1w') return isSmallScreen ? 4 : 6
+      if (timespan === '3d') return isSmallScreen ? 3 : 4
+      if (timespan === '24h') return isSmallScreen ? 4 : 6
+      if (timespan === '1h') return isSmallScreen ? 4 : 6
     }
+
+    return 6
   })()
 
+  useEffect(() => {
+    if (svgRef.current) {
+      const currentWidth = svgRef.current.getBoundingClientRect().width
+      setChartWidth(currentWidth)
+    }
+  }, [svgRef.current])
+
   const gx = useRef()
   const gy = useRef()
   const tooltip = useRef()
@@ -134,10 +149,10 @@ const LineGraph = ({
   const [line, setLine] = useState(() => d3.line()
     .x(d => x(d.x))
     .y(d => y(d.y))
-    .curve(d3.curveCardinal))
+    .curve(d3.curveLinear))
 
   const [area, setArea] = useState(() => d3.area()
-    .curve(d3.curveCardinal)
+    .curve(d3.curveLinear)
     .x((d) => x(d.x))
     .y0(y(0))
     .y1((d) => y(d.y)))
@@ -163,10 +178,10 @@ const LineGraph = ({
     setLine((d) => d3.line()
       .x(d => x(d.x))
       .y(d => y(d.y))
-      .curve(d3.curveBumpX))
+      .curve(d3.curveLinear))
 
     setArea((d) => d3.area()
-      .curve(d3.curveBumpX)
+      .curve(d3.curveLinear)
       .x((d) => x(d.x))
       .y0(y(0))
       .y1((d) => y(d.y)))
@@ -196,7 +211,7 @@ const LineGraph = ({
 
     const yGrid = d3.axisLeft(y)
       .ticks(5)
-      .tickSize(-width + marginLeft + marginRight - 20)
+      .tickSize(-width)
       .tickFormat('')
 
     d3.select(gy.current).select('.grid-y').remove()
@@ -207,7 +222,7 @@ const LineGraph = ({
 
     const xGrid = d3.axisBottom(x)
       .tickValues(getDatesTicks(data.map((d) => d.x), xTicksCount - 2))
-      .tickSize(-height + marginTop + marginBottom)
+      .tickSize(-height + marginTop)
       .tickFormat('')
 
     d3.select(gx.current).select('.grid-x').remove()
@@ -346,6 +361,7 @@ const LineGraph = ({
   return (
     <div className={`Chart ${!loading ? 'loaded' : ''}`}>
         <svg
+            ref={svgRef}
             onMouseEnter = {pointermoved}
             onMouseMove = {pointermoved}
             onMouseLeave = {pointerleft}
@@ -357,10 +373,10 @@ const LineGraph = ({
             </filter>
 
             <svg x='15' y='-15' overflow={'visible'}>
-              <g className={'Axis Axis--X'} ref={gx} transform={`translate(0,${height - marginBottom + 15})`} >
+              <g className={'Axis Axis--X'} ref={gx} transform={`translate(0,${height - marginBottom + 15})`}>
                 <line
                   x1={marginLeft - 20}
-                  x2={width - marginRight + 10}
+                  x2={width - marginRight + 50}
                   y1={0}
                   y2={0}
                   className={'Axis__Line'}
@@ -370,7 +386,7 @@ const LineGraph = ({
               </g>
             </svg>
 
-            <svg x='0' y='-15'>
+            <svg x='0' y='-15' overflow={'visible'}>
               <g className={'Axis Axis--Y'} ref={gy} >
                 <line
                   x1={0}
@@ -392,9 +408,9 @@ const LineGraph = ({
                     </linearGradient>
                     <clipPath id="clipPath">
                         <rect
-                            x={marginLeft - 10}
+                            x={marginLeft - 20}
                             y={marginTop}
-                            width={width - (marginLeft - 10 + marginRight)}
+                            width={width - (marginLeft - 20 + marginRight)}
                             height={height - (marginTop + marginBottom)}
                         ></rect>
                     </clipPath>
@@ -403,15 +419,15 @@ const LineGraph = ({
                 <path d={area(data)} fill="url(#AreaFill)" clipPath={'url(#clipPath)'}/>
 
                 <g filter='url(#shadow)'>
-                    <path ref={graphicLine} d={line(data)} stroke="#008DE4" strokeWidth="3" fill="none"/>
+                    <path ref={graphicLine} d={line(data)} stroke={'#008DE4'} strokeWidth={3} fill={'none'} strokeLinejoin={'round'}/>
 
                     <g fill='#008DE4'>
-                        {data.map((d, i) => (<circle key={i} cx={x(d.x)} cy={y(d.y)} r='4' className={'Chart__Point'}/>))}
+                        {data.map((d, i) => (<circle key={i} cx={x(d.x)} cy={y(d.y)} r={4} className={'Chart__Point'}/>))}
                     </g>
                 </g>
 
                 <g ref={focusPoint} className={'Chart__FocusPoint'}>
-                    <circle r="3"/>
+                    <circle r={3}/>
                 </g>
 
                 <g ref={tooltip} className={'Chart__Tooltip ChartTooltip'} filter='url(#shadow)'></g>