front: migrate chartHelpers files to ts

front/src/applications/operationalStudies/consts.ts

@@ -14,6 +14,7 @@ import {
   PowerRestrictionRangeItem,
 } from 'common/api/osrdEditoastApi';
 import { LinearMetadataItem } from 'common/IntervalsDataViz/types';
+import { HeightPosition } from 'reducers/osrdsimulation/types';
 
 export const BLOCKTYPES = [
   {
@@ -217,7 +218,12 @@ interface Profile {
   isStriped: boolean;
 }
 
-interface ElectricalConditionSegment {
+/** Those keys are used to index objects of type HeightPosition but also to access properties ending by
+ * "_start" / "_middle" / "_end" in objects of type PowerRestrictionSegment in order to draw the linear graph. */
+export const DRAWING_KEYS: (keyof HeightPosition)[] = ['position', 'height'];
+export type DrawingKeys = typeof DRAWING_KEYS;
+
+export interface ElectricalConditionSegment {
   position_start: number;
   position_end: number;
   position_middle: number;
@@ -376,7 +382,7 @@ export const createProfileSegment = (
   return segment;
 };
 
-interface PowerRestrictionSegment {
+export interface PowerRestrictionSegment {
   position_start: number;
   position_end: number;
   position_middle: number;

front/src/modules/simulationResult/components/ChartHelpers/drawCurve.ts

@@ -0,0 +1,47 @@
+import * as d3 from 'd3';
+import { Chart, ConsolidatedPosition } from 'reducers/osrdsimulation/types';
+import { ArrayElement, ArrayElementKeys } from 'utils/types';
+import { GevPreparedata } from '../SpeedSpaceChart/prepareData';
+
+const drawCurve = <
+  T extends ArrayElement<GevPreparedata[keyof GevPreparedata]> | ConsolidatedPosition
+>(
+  chart: Chart,
+  classes: string,
+  dataSimulation: T[],
+  groupID: string,
+  interpolation: string,
+  keyValues: ArrayElementKeys<T[]>[],
+  name: string,
+  rotate: boolean,
+  isSelected = true
+) => {
+  const drawZone = chart.drawZone.select(`#${groupID}`);
+
+  drawZone
+    .append('path')
+    .attr('class', `line zoomable ${classes}`)
+    .datum(dataSimulation)
+    .attr('fill', 'none')
+    .attr('stroke-width', 1)
+    .attr(
+      'd',
+      d3
+        .line<T>()
+        .x((d) => chart.x((rotate ? d[keyValues[1]] : d[keyValues[0]]) as number))
+        .y((d) => chart.y((rotate ? d[keyValues[0]] : d[keyValues[1]]) as number))
+        .curve(d3[interpolation as keyof d3.CurveFactory])
+    );
+
+  if (isSelected) {
+    drawZone
+      .append('circle')
+      .attr('class', `pointer ${classes}`)
+      .attr('id', `pointer-${name}`)
+      .attr('transform', 'translate(-0.5,0)')
+      .attr('r', 3)
+      .style('opacity', 0);
+  }
+};
+
+export default drawCurve;