ui-speedspacechart: add declivities layer in gev v2

Author: RomainValls

ui-speedspacechart/src/__tests__/utils.spec.ts

@@ -7,6 +7,7 @@ import {
   getAdaptiveHeight,
   positionOnGraphScale,
   getLinearLayerMarginTop,
+  slopesValues,
 } from '../components/utils';
 import type { Store } from '../types/chartTypes';
 import type { ConsolidatedPositionSpeedTime } from '../types/simulationTypes';
@@ -60,7 +61,8 @@ describe('getGraphOffsets', () => {
   it('should return the correct width and height offsets', () => {
     const width = 100;
     const height = 200;
-    const { WIDTH_OFFSET, HEIGHT_OFFSET } = getGraphOffsets(width, height);
+    const declivities = true;
+    const { WIDTH_OFFSET, HEIGHT_OFFSET } = getGraphOffsets(width, height, declivities);
     expect(WIDTH_OFFSET).toBe(40);
     expect(HEIGHT_OFFSET).toBe(120);
   });
@@ -94,6 +96,15 @@ describe('maxPositionValues', () => {
   });
 });
 
+describe('slopesValues', () => {
+  it('should return the correct minGradient and maxGradient', () => {
+    const { minGradient, maxGradient, slopesRange } = slopesValues(store);
+    expect(minGradient).toBe(-10);
+    expect(maxGradient).toBe(50);
+    expect(slopesRange).toBe(60);
+  });
+});
+
 describe('clearCanvas', () => {
   it('should clear the canvas', () => {
     const fn = () => vi.fn();

ui-speedspacechart/src/components/SpeedSpaceChart.tsx

@@ -18,6 +18,9 @@ import PowerRestrictionsLayer from './layers/PowerRestrictionsLayer';
 import SettingsPanel from './common/SettingsPanel';
 import InteractionButtons from './common/InteractionButtons';
 import { LINEAR_LAYERS_HEIGHTS } from './const';
+import TickLayerYRight from './layers/TickLayerYRight';
+import DeclivityLayer from './layers/DeclivityLayer';
+import { MARGINS } from './const';
 
 export type SpeedSpaceChartProps = {
   width: number;
@@ -85,9 +88,17 @@ const SpeedSpaceChart = ({
     isSettingsPanelOpened: false,
   });
 
-  const { WIDTH_OFFSET, HEIGHT_OFFSET } = getGraphOffsets(width, height);
+  const { WIDTH_OFFSET, HEIGHT_OFFSET } = getGraphOffsets(
+    width,
+    height,
+    store.layersDisplay.declivities
+  );
   const dynamicHeight = getAdaptiveHeight(height, store.layersDisplay);
   const dynamicHeightOffset = getAdaptiveHeight(HEIGHT_OFFSET, store.layersDisplay);
+  const { OFFSET_RIGHT_AXIS } = MARGINS;
+  const adjustedWidthRightAxis = store.layersDisplay.declivities
+    ? width - OFFSET_RIGHT_AXIS
+    : width;
 
   const [showDetailsBox, setShowDetailsBox] = useState(false);
 
@@ -136,11 +147,17 @@ const SpeedSpaceChart = ({
       }}
       tabIndex={0}
     >
-      <div className="flex justify-end absolute base-margin-top" style={{ width: width }}>
+      <div
+        className="flex justify-end absolute base-margin-top"
+        style={{ width: adjustedWidthRightAxis }}
+      >
         <InteractionButtons reset={reset} openSettingsPanel={openSettingsPanel} store={store} />
       </div>
       {store.isSettingsPanelOpened && (
-        <div className="flex justify-end absolute ml-2 base-margin-top" style={{ width: width }}>
+        <div
+          className="flex justify-end absolute ml-2 base-margin-top"
+          style={{ width: adjustedWidthRightAxis }}
+        >
           <SettingsPanel
             color={backgroundColor}
             store={store}
@@ -149,10 +166,13 @@ const SpeedSpaceChart = ({
           />
         </div>
       )}
+      {store.layersDisplay.declivities && (
+        <DeclivityLayer width={WIDTH_OFFSET} height={HEIGHT_OFFSET} store={store} />
+      )}
       <CurveLayer width={WIDTH_OFFSET} height={HEIGHT_OFFSET} store={store} />
-      <AxisLayerY width={width} height={height} store={store} />
-      <MajorGridY width={width} height={height} store={store} />
-      <AxisLayerX width={width} height={height} 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} />
@@ -180,14 +200,19 @@ const SpeedSpaceChart = ({
         />
       )}
       <TickLayerX width={width} height={dynamicHeight} store={store} />
+
+      {store.layersDisplay.declivities && (
+        <TickLayerYRight width={width} height={height} store={store} />
+      )}
       <ReticleLayer
-        width={width}
+        width={adjustedWidthRightAxis}
         height={dynamicHeight}
         heightOffset={dynamicHeightOffset}
         store={store}
         showDetailsBox={showDetailsBox}
         setShowDetailsBox={setShowDetailsBox}
       />
+
       <FrontInteractivityLayer
         width={WIDTH_OFFSET}
         height={dynamicHeightOffset}

ui-speedspacechart/src/components/const.ts

@@ -1,5 +1,9 @@
 import { Store } from '../types/chartTypes';
 
+export const SLOPE_FILL_COLOR = '#CFDDCE';
+
+export const RIGHT_TICK_HEIGHT_OFFSET = 2;
+
 export const MARGINS = {
   MARGIN_LEFT: 48,
   MARGIN_RIGHT: 12,
@@ -8,6 +12,8 @@ export const MARGINS = {
   CURVE_MARGIN_TOP: 40,
   CURVE_MARGIN_SIDES: 16,
   ELECTRICAL_PROFILES_MARGIN_TOP: 8,
+  RIGHT_TICK_MARGINS: 60,
+  OFFSET_RIGHT_AXIS: 42,
 };
 
 export const LINEAR_LAYERS_HEIGHTS = {

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

@@ -0,0 +1,59 @@
+import { clearCanvas, slopesValues, maxPositionValues } from '../../utils';
+import type { Store } from '../../../types/chartTypes';
+import { MARGINS } from '../../const';
+import { SLOPE_FILL_COLOR } from '../../../components/const';
+
+const { CURVE_MARGIN_SIDES, MARGIN_TOP, MARGIN_BOTTOM, RIGHT_TICK_MARGINS } = MARGINS;
+
+export const drawDeclivity = (
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  store: Store
+) => {
+  const { slopes, ratioX, leftOffset } = store;
+
+  const { maxGradient, slopesRange } = slopesValues(store);
+  const { maxPosition } = maxPositionValues(store);
+
+  if (!slopes || slopes.length === 0) {
+    console.error('Slopes data is missing or empty.');
+    return;
+  }
+
+  clearCanvas(ctx, width, height);
+
+  ctx.save();
+  ctx.translate(leftOffset, 0);
+
+  // Calculate total height available for drawing, excluding the margins
+  const availableHeight = height - MARGIN_TOP - MARGIN_BOTTOM - RIGHT_TICK_MARGINS / 2;
+
+  // Calculate the vertical center of the chart
+  const centerY = MARGIN_TOP + RIGHT_TICK_MARGINS / 2 + availableHeight / 2;
+
+  ctx.fillStyle = SLOPE_FILL_COLOR;
+
+  try {
+    const coef = ((width - CURVE_MARGIN_SIDES) / maxPosition) * ratioX;
+
+    for (let i = 0; i < slopes.length - 1; i++) {
+      const current = slopes[i];
+      const next = slopes[i + 1];
+
+      const x1 = current.position * coef + CURVE_MARGIN_SIDES / 2;
+      const x2 = next.position * coef + CURVE_MARGIN_SIDES / 2;
+
+      const rectWidth = x2 - x1;
+
+      const rectHeight = (current.gradient / maxGradient) * (availableHeight / 2);
+
+      const rectY = current.gradient >= 0 ? centerY - rectHeight : centerY;
+
+      ctx.fillRect(x1, rectY, rectWidth, Math.abs(rectHeight));
+    }
+  } catch (error) {
+    console.error('Error while drawing declivity:', error);
+  }
+  ctx.restore();
+};

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

@@ -0,0 +1,62 @@
+import { clearCanvas, slopesValues } from '../../utils';
+import type { Store } from '../../../types/chartTypes';
+import { MARGINS, RIGHT_TICK_HEIGHT_OFFSET } from '../../const';
+
+const { MARGIN_LEFT, MARGIN_TOP, MARGIN_BOTTOM, RIGHT_TICK_MARGINS } = MARGINS;
+
+export const drawTickYRight = (
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  store: Store
+) => {
+  clearCanvas(ctx, width, height);
+
+  const { minGradient, maxGradient } = slopesValues(store);
+
+  // Calculate total height available for ticks excluding the margins
+  const availableHeight = height - MARGIN_TOP - MARGIN_BOTTOM - RIGHT_TICK_MARGINS;
+
+  const tickSpacing = availableHeight / 12; // 12 intervals for 13 ticks
+
+  // Calculate the vertical center of the chart
+  const centerY =
+    MARGIN_TOP + RIGHT_TICK_MARGINS / 2 + availableHeight / 2 + RIGHT_TICK_HEIGHT_OFFSET;
+
+  const textOffsetX = width - MARGIN_LEFT + 10;
+  const tickWidth = 6;
+
+  ctx.font = 'normal 12px IBM Plex Sans';
+
+  // Calculate gradient step to avoid decimals
+  const maxAbsGradient = Math.max(maxGradient, minGradient);
+  const roundedMaxAbsGradient = Math.ceil(maxAbsGradient / 6) * 6;
+  const gradientStep = roundedMaxAbsGradient / 6;
+
+  ctx.beginPath();
+  for (let i = -6; i <= 6; i++) {
+    const tickValue = i * gradientStep;
+    const tickY = centerY - i * tickSpacing;
+
+    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();
+    const textPositionYRight = tickY + 4;
+    const opacity = 1;
+
+    ctx.fillStyle = `rgba(182, 179, 175, ${opacity})`;
+    ctx.fillText(text, textOffsetX, textPositionYRight);
+
+    const maxTickY = centerY - 6 * tickSpacing;
+    ctx.fillText('‰', width - MARGIN_LEFT, height / 12); // 12 ticks intervals
+    console.log({ maxTickY, tickSpacing, height }, 'for ticks');
+  }
+  // prevent overlapping with margin top
+  ctx.clearRect(0, 0, width, MARGIN_TOP);
+  ctx.clearRect(width - MARGIN_LEFT, height - MARGIN_BOTTOM, width, MARGIN_BOTTOM);
+  ctx.clearRect(0, height - MARGIN_BOTTOM + 6, width - MARGIN_LEFT, MARGIN_BOTTOM);
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Store } from '../../types/chartTypes';
+import { drawDeclivity } from '../helpers/drawElements/declivity';
+import { useCanvas } from '../hooks';
+
+type DeclivityLayerProps = {
+  width: number;
+  height: number;
+  store: Store;
+};
+
+const DeclivityLayer = ({ width, height, store }: DeclivityLayerProps) => {
+  const canvas = useCanvas(drawDeclivity, width, height, store);
+
+  return (
+    <canvas
+      id="declivity-layer"
+      className="absolute rounded-t-xl"
+      ref={canvas}
+      width={width}
+      height={height}
+    />
+  );
+};
+
+export default DeclivityLayer;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Store } from '../../types/chartTypes';
+
+import { useCanvas } from '../hooks';
+import { drawTickYRight } from '../helpers/drawElements/tickYRight';
+
+type TickLayerYRightProps = {
+  width: number;
+  height: number;
+  store: Store;
+};
+
+const TickLayerYRight = ({ width, height, store }: TickLayerYRightProps) => {
+  const canvas = useCanvas(drawTickYRight, width, height, store);
+
+  return (
+    <canvas
+      id="tick-layer-y-right"
+      className="absolute rounded-t-xl"
+      ref={canvas}
+      width={width}
+      height={height}
+    />
+  );
+};
+
+export default TickLayerYRight;

ui-speedspacechart/src/components/utils.ts

@@ -18,8 +18,15 @@ type MaxPositionValues = {
   intermediateTicksPosition: number;
 };
 
-export const getGraphOffsets = (width: number, height: number) => {
-  const WIDTH_OFFSET = width - 60;
+type SlopesValues = {
+  minGradient: number;
+  maxGradient: number;
+  slopesRange: number;
+  maxPosition: number;
+};
+
+export const getGraphOffsets = (width: number, height: number, declivities?: boolean) => {
+  const WIDTH_OFFSET = declivities ? width - 102 : width - 60; // +2px so that the tick appears on the right of the chart
   const HEIGHT_OFFSET = height - 80;
   return { WIDTH_OFFSET, HEIGHT_OFFSET };
 };
@@ -188,3 +195,15 @@ export const checkLayerData = (store: Store, selection: (typeof LAYERS_SELECTION
     (selection === 'electricalProfiles' || selection === 'powerRestrictions') && !store[selection]
   );
 };
+/**
+ * Given a store including a list of slopes, return the position and value of min and max slopes
+ * @param store
+ */
+export const slopesValues = (store: Store): SlopesValues => {
+  const slopes = store.slopes;
+  const minGradient = Math.min(...slopes.map((data) => data.gradient));
+  const maxGradient = Math.max(...slopes.map((data) => data.gradient));
+  const slopesRange = maxGradient - minGradient;
+  const maxPosition = Math.max(...slopes.map((data) => data.position));
+  return { minGradient, maxGradient, slopesRange, maxPosition };
+};

ui-speedspacechart/src/styles/main.css

@@ -13,18 +13,18 @@
 }
 
 .base-margin-top {
-margin-top: 1.6875rem;
+  margin-top: 1.6875rem;
 }
 
 #curve-layer,
 #step-layer,
-#front-interactivity-layer {
+#declivity-layer {
   margin-left: 3rem;
   margin-top: 1.6875rem;
-}
-
-#curve-layer {
-  background-color: rgb(255, 255, 255);
+  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 {