fixup! ui-speedspacechart: add declivities layer in gev v2

Author: RomainValls

ui-speedspacechart/src/components/SpeedSpaceChart.tsx

@@ -199,7 +199,7 @@ const SpeedSpaceChart = ({
           store={store}
         />
       )}
-      <TickLayerX width={width} height={dynamicHeight} store={store} />
+      <TickLayerX width={adjustedWidthRightAxis} height={dynamicHeight} store={store} />
 
       {store.layersDisplay.declivities && (
         <TickLayerYRight width={width} height={height} store={store} />

ui-speedspacechart/src/components/helpers/drawElements/declivity.ts

@@ -13,7 +13,7 @@ export const drawDeclivity = (
 ) => {
   const { slopes, ratioX, leftOffset } = store;
 
-  const { maxGradient, slopesRange } = slopesValues(store);
+  const { maxGradient } = slopesValues(store);
   const { maxPosition } = maxPositionValues(store);
 
   if (!slopes || slopes.length === 0) {

ui-speedspacechart/src/components/helpers/drawElements/tickYRight.ts

@@ -27,6 +27,7 @@ export const drawTickYRight = (
   const tickWidth = 6;
 
   ctx.font = 'normal 12px IBM Plex Sans';
+  ctx.lineWidth = 0.5;
 
   // Calculate gradient step to avoid decimals
   const maxAbsGradient = Math.max(maxGradient, minGradient);
@@ -41,7 +42,6 @@ export const drawTickYRight = (
     ctx.moveTo(width - MARGIN_LEFT - tickWidth, tickY);
     ctx.lineTo(width - MARGIN_LEFT, tickY);
     ctx.strokeStyle = 'rgb(121, 118, 113)';
-    ctx.stroke();
 
     ctx.textAlign = 'left';
     const text = tickValue.toString();
@@ -55,6 +55,8 @@ export const drawTickYRight = (
     ctx.fillText('‰', width - MARGIN_LEFT, height / 12); // 12 ticks intervals
     console.log({ maxTickY, tickSpacing, height }, 'for ticks');
   }
+  ctx.stroke();
+
   // prevent overlapping with margin top
   ctx.clearRect(0, 0, width, MARGIN_TOP);
   ctx.clearRect(width - MARGIN_LEFT, height - MARGIN_BOTTOM, width, MARGIN_BOTTOM);

ui-speedspacechart/src/components/layers/CurveLayer.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Store } from '../../types/chartTypes';
 import { drawCurve } from '../helpers/drawElements/curve';
 import { useCanvas } from '../hooks';
+import cx from 'classnames';
 
 type CurveLayerProps = {
   width: number;
@@ -13,7 +14,13 @@ const CurveLayer = ({ width, height, store }: CurveLayerProps) => {
   const canvas = useCanvas(drawCurve, width, height, store);
 
   return (
-    <canvas id="curve-layer" className="absolute" ref={canvas} width={width} height={height} />
+    <canvas
+      id="curve-layer"
+      className={cx('absolute rounded-t-xl', { 'bg-white-25': !store.layersDisplay.declivities })}
+      ref={canvas}
+      width={width}
+      height={height}
+    />
   );
 };
 

ui-speedspacechart/src/components/layers/DeclivityLayer.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Store } from '../../types/chartTypes';
 import { drawDeclivity } from '../helpers/drawElements/declivity';
 import { useCanvas } from '../hooks';
+import cx from 'classnames';
 
 type DeclivityLayerProps = {
   width: number;
@@ -15,7 +16,7 @@ const DeclivityLayer = ({ width, height, store }: DeclivityLayerProps) => {
   return (
     <canvas
       id="declivity-layer"
-      className="absolute rounded-t-xl"
+      className={cx('absolute rounded-t-xl', { 'bg-white-25': store.layersDisplay.declivities })}
       ref={canvas}
       width={width}
       height={height}

ui-speedspacechart/src/styles/main.css

@@ -18,18 +18,13 @@
 
 #curve-layer,
 #step-layer,
-#declivity-layer {
+#declivity-layer,
+#front-interactivity-layer {
   margin-left: 3rem;
   margin-top: 1.6875rem;
-  box-shadow:
-    0 0.0625rem 0,
-    125rem 0 rgba(0, 0, 0, 0.19);
-  box-shadow: 0 0.25rem 0.5625rem 0 rgba(0, 0, 0, 0.06);
 }
 
 #front-interactivity-layer {
-  margin-left: 3rem;
-  margin-top: 1.6875rem;
   box-shadow:
     0 0.0625rem 0,
     125rem 0 rgba(0, 0, 0, 0.19);