speedspacechart: group gridY with tickY as axisY layer

Signed-off-by: Florian Amsallem <[email protected]>

ui-speedspacechart/src/components/SpeedSpaceChart.tsx

@@ -2,25 +2,23 @@ import React, { useEffect, useState } from 'react';
 
 import InteractionButtons from './common/InteractionButtons';
 import SettingsPanel from './common/SettingsPanel';
-import { MARGINS, LINEAR_LAYERS_HEIGHTS } from './const';
+import { LINEAR_LAYERS_HEIGHTS, MARGINS } from './const';
 import { resetZoom } from './helpers/layersManager';
 import {
   AxisLayerX,
-  AxisLayerY,
   CurveLayer,
   DeclivityLayer,
   ElectricalProfileLayer,
   FrontInteractivityLayer,
-  MajorGridY,
   PowerRestrictionsLayer,
   ReticleLayer,
   SpeedLimitTagsLayer,
   StepLayer,
   TickLayerX,
-  TickLayerY,
+  AxisLayerY,
   TickLayerYRight,
 } from './layers/index';
-import { getGraphOffsets, getAdaptiveHeight, getLinearLayerMarginTop } from './utils';
+import { getAdaptiveHeight, getGraphOffsets, getLinearLayerMarginTop } from './utils';
 import type { Data, Store } from '../types/chartTypes';
 
 export type SpeedSpaceChartProps = {
@@ -184,13 +182,11 @@ const SpeedSpaceChart = ({
         <DeclivityLayer width={WIDTH_OFFSET} height={HEIGHT_OFFSET} store={store} />
       )}
       <CurveLayer width={WIDTH_OFFSET} height={HEIGHT_OFFSET} store={store} />
-      <AxisLayerY width={adjustedWidthRightAxis} height={height} store={store} />
-      <MajorGridY width={adjustedWidthRightAxis} height={height} store={store} />
       <AxisLayerX width={adjustedWidthRightAxis} height={height} store={store} />
       {store.layersDisplay.steps && (
         <StepLayer width={WIDTH_OFFSET} height={HEIGHT_OFFSET} store={store} />
       )}
-      <TickLayerY width={width} height={height} store={store} />
+      <AxisLayerY width={width} height={height} store={store} />
       {store.layersDisplay.electricalProfiles && (
         <ElectricalProfileLayer
           width={adjustedWidthRightAxis}

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

@@ -0,0 +1,90 @@
+import type { DrawFunctionParams } from '../../../types/chartTypes';
+import { MARGINS, TICK_TITLE_MARGINS } from '../../const';
+import { clearCanvas, speedRangeValues } from '../../utils';
+
+const { MARGIN_LEFT, MARGIN_TOP, MARGIN_BOTTOM, CURVE_MARGIN_TOP, MARGIN_RIGHT } = MARGINS;
+const { Y_LEFT_VERTICAL, Y_LEFT_HORIZONTAL } = TICK_TITLE_MARGINS;
+const TICK_WIDTH = 6;
+const TEXT_POSITION_X = 36;
+
+export const drawAxisY = ({ ctx, width, height, store }: DrawFunctionParams) => {
+  const { maxSpeed } = speedRangeValues(store);
+
+  clearCanvas(ctx, width, height);
+
+  ctx.strokeStyle = 'rgb(121, 118, 113)';
+  ctx.lineWidth = 0.5;
+  ctx.font = 'normal 12px IBM Plex Sans';
+  ctx.fillStyle = 'rgb(182, 178, 175)';
+
+  // Define the tick scale depending on the max speed
+  let tickScale = 5;
+  if (maxSpeed > 250) {
+    tickScale = 30;
+  } else if (maxSpeed > 130) {
+    tickScale = 20;
+  } else if (maxSpeed > 60) {
+    tickScale = 10;
+  }
+
+  const nbTicks = Math.ceil(maxSpeed / tickScale);
+  const maxTickSpeed = nbTicks * tickScale;
+  const ratioRoundPositions = maxTickSpeed / maxSpeed;
+  const ticksOffset =
+    ((height - MARGIN_BOTTOM - MARGIN_TOP - CURVE_MARGIN_TOP) * ratioRoundPositions) / nbTicks;
+
+  // Draw ticks with text
+  ctx.beginPath();
+  for (let i = 0; i <= nbTicks; i++) {
+    const positionY = height - MARGIN_BOTTOM - ticksOffset * i;
+    ctx.moveTo(MARGIN_LEFT - TICK_WIDTH, positionY);
+    ctx.lineTo(MARGIN_LEFT, positionY);
+    ctx.textAlign = 'right';
+    const text = (i * tickScale).toString();
+    const textPositionY = positionY + 4;
+
+    ctx.fillStyle = `rgb(182, 178, 175 )`;
+    ctx.fillText(text, TEXT_POSITION_X, textPositionY);
+  }
+  ctx.stroke();
+
+  // Draw major lines
+  ctx.strokeStyle = 'rgba(33, 112, 185, 0.6)';
+  ctx.beginPath();
+  ctx.lineWidth = 0.5;
+  for (let i = 3; i <= nbTicks; i += 3) {
+    const positionY = height - MARGIN_BOTTOM - ticksOffset * i;
+    ctx.moveTo(MARGIN_LEFT, positionY);
+    ctx.lineTo(width - MARGIN_RIGHT, positionY);
+  }
+  ctx.stroke();
+
+  // Draw minor lines
+  ctx.strokeStyle = 'rgba(33, 112, 185, 0.25)';
+  ctx.beginPath();
+  for (let i = 1; i <= nbTicks; i++) {
+    if (i % 3 === 0) {
+      continue;
+    }
+    const positionY = height - MARGIN_BOTTOM - ticksOffset * i;
+    ctx.moveTo(MARGIN_LEFT, positionY);
+    ctx.lineTo(width - MARGIN_RIGHT, positionY);
+  }
+  ctx.stroke();
+
+  // Prevent overlapping with margin top
+  ctx.clearRect(0, 0, width, MARGIN_TOP);
+  ctx.clearRect(MARGIN_LEFT - 6, height - MARGIN_BOTTOM, width, MARGIN_BOTTOM);
+  ctx.clearRect(0, height - MARGIN_BOTTOM + 6, MARGIN_LEFT, MARGIN_BOTTOM);
+
+  ctx.fillStyle = 'rgb(182, 179, 175)';
+  ctx.textAlign = 'center';
+  ctx.shadowOffsetY = 0;
+  ctx.shadowBlur = 0;
+
+  // Draw km/h axis title
+  ctx.beginPath();
+  ctx.fillText('km/h', Y_LEFT_VERTICAL, Y_LEFT_HORIZONTAL);
+  ctx.closePath();
+  ctx.stroke();
+};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { Store } from '../../types/chartTypes';
-import { drawTickY } from '../helpers/drawElements/tickY';
+import { drawAxisY } from '../helpers/drawElements/axisY';
 import { useCanvas } from '../hooks';
 
 type TickLayerYProps = {
@@ -10,8 +10,8 @@ type TickLayerYProps = {
   store: Store;
 };
 
-const TickLayerY = ({ width, height, store }: TickLayerYProps) => {
-  const canvas = useCanvas(drawTickY, { width, height, store });
+const AxisLayerY = ({ width, height, store }: TickLayerYProps) => {
+  const canvas = useCanvas(drawAxisY, { width, height, store });
 
   return (
     <canvas
@@ -24,4 +24,4 @@ const TickLayerY = ({ width, height, store }: TickLayerYProps) => {
   );
 };
 
-export default TickLayerY;
+export default AxisLayerY;

ui-speedspacechart/src/components/layers/index.ts

@@ -1,14 +1,12 @@
 export { default as AxisLayerX } from './AxisLayerX';
-export { default as AxisLayerY } from './AxisLayerY';
 export { default as CurveLayer } from './CurveLayer';
 export { default as DeclivityLayer } from './DeclivityLayer';
 export { default as ElectricalProfileLayer } from './ElectricalProfileLayer';
 export { default as FrontInteractivityLayer } from './FrontInteractivityLayer';
-export { default as MajorGridY } from './MajorGridY';
 export { default as PowerRestrictionsLayer } from './PowerRestrictionsLayer';
 export { default as ReticleLayer } from './ReticleLayer';
 export { default as SpeedLimitTagsLayer } from './SpeedLimitTagsLayer';
 export { default as StepLayer } from './StepLayer';
 export { default as TickLayerX } from './TickLayerX';
-export { default as TickLayerY } from './TickLayerY';
+export { default as AxisLayerY } from './TickLayerY';
 export { default as TickLayerYRight } from './TickLayerYRight';