ui-charts: adds top and bottom borders to gov

Details:
- Adds top and bottom borders to TrackOccupancyCanvas
- Adds top and bottom borders to TrackOccupancyManchette
- Removes these borders when using TrackOccupancyStandalone

Signed-off-by: Alexis Jacomy <[email protected]>

Author: jacomyal

ui-charts/src/trackOccupancyDiagram/components/TrackOccupancyCanvas.tsx

@@ -32,16 +32,23 @@ const TrackOccupancyCanvas = ({
   selectedTrainId,
   onClose,
   topPadding = 0,
+  hideBorders = false,
 }: {
   position: number;
   tracks: Track[];
   occupancyZones: OccupancyZone[];
   selectedTrainId?: string;
   onClose?: () => void;
   topPadding?: number;
+  hideBorders?: boolean;
 }) => (
   <>
-    <TracksLayer position={position} tracks={tracks} topPadding={topPadding} />
+    <TracksLayer
+      position={position}
+      tracks={tracks}
+      topPadding={topPadding}
+      drawBorders={!hideBorders}
+    />
     <OccupancyZonesLayer
       tracks={tracks}
       position={position}

ui-charts/src/trackOccupancyDiagram/components/TrackOccupancyStandalone.tsx

@@ -53,6 +53,7 @@ const TrackOccupancyStandalone = ({
             tracks={tracks}
             occupancyZones={occupancyZones}
             selectedTrainId={selectedTrainId}
+            hideBorders
           />
         ),
         manchetteNode: <TrackOccupancyManchette tracks={tracks} />,

ui-charts/src/trackOccupancyDiagram/components/helpers/drawElements/drawTracks.ts

@@ -1,6 +1,6 @@
 import { drawTrack } from './drawTrack';
 import type { SpaceTimeChartContextType } from '../../../../spaceTimeChart';
-import { HOUR, MINUTE } from '../../../../spaceTimeChart/lib/consts';
+import { GREY_50, HOUR, MINUTE } from '../../../../spaceTimeChart/lib/consts';
 import { TRACK_HEIGHT_CONTAINER, CANVAS_PADDING, COLORS, TICKS_PRIORITIES } from '../../consts';
 import { type Track } from '../../types';
 import { getLabelLevels, getLabelMarks } from '../../utils';
@@ -13,10 +13,12 @@ export const drawTracks = (
   {
     position,
     tracks,
+    drawBorders,
     topPadding = 0,
   }: {
     position: number;
     tracks: Track[];
+    drawBorders: boolean;
     topPadding: number;
   }
 ) => {
@@ -38,6 +40,7 @@ export const drawTracks = (
   const labelLevels = getLabelLevels(breakpoints, pixelsPerMinute, TICKS_PRIORITIES);
   const labelMarks = getLabelMarks(timeRanges, timeStart, timeEnd, labelLevels);
 
+  // Draw backgrounds:
   let hours = Math.floor(timeStart / HOUR);
   const hourEnd = timeEnd / HOUR;
   while (hours < hourEnd) {
@@ -48,6 +51,7 @@ export const drawTracks = (
     hours++;
   }
 
+  // Draw actual tracks:
   ctx.save();
   ctx.translate(0, yStart + topPadding);
   tracks?.forEach((_, index) => {
@@ -61,4 +65,22 @@ export const drawTracks = (
     });
   });
   ctx.restore();
+
+  // Draw borders:
+  if (drawBorders) {
+    const externalBorderWidth = 1;
+    const internalBorderWidth = 2;
+    const fullBorderWidth = externalBorderWidth + internalBorderWidth;
+    const yStartCrisp = Math.round(yStart);
+    const yEndCrisp = Math.round(yEnd);
+    ctx.fillStyle = GREY_50;
+    ctx.fillRect(0, yStartCrisp, width, externalBorderWidth);
+    ctx.fillRect(0, yEndCrisp - externalBorderWidth, width, externalBorderWidth);
+
+    ctx.fillStyle = GREY_50;
+    ctx.globalAlpha = 0.15;
+    ctx.fillRect(0, yStartCrisp + externalBorderWidth, width, internalBorderWidth);
+    ctx.fillRect(0, yEndCrisp - fullBorderWidth, width, internalBorderWidth);
+    ctx.globalAlpha = 1;
+  }
 };

ui-charts/src/trackOccupancyDiagram/components/layers/TracksLayer.tsx

@@ -8,14 +8,16 @@ const TracksLayer = ({
   tracks,
   position,
   topPadding,
+  drawBorders,
 }: {
   tracks: Track[];
   position: number;
   topPadding: number;
+  drawBorders: boolean;
 }) => {
   const drawingFunction = useCallback<DrawingFunction>(
     (ctx, stcContext) => {
-      drawTracks(ctx, stcContext, { position, topPadding, tracks });
+      drawTracks(ctx, stcContext, { position, topPadding, tracks, drawBorders });
     },
     [position, topPadding, tracks]
   );

ui-charts/src/trackOccupancyDiagram/styles/main.css

@@ -8,6 +8,28 @@
   border-radius: inherit;
   padding-top: 10px;
 
+  position: relative;
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    left: 0;
+    height: 3px;
+    box-sizing: border-box;
+    background-color: color-mix(in oklab, theme('colors.grey.50') 15%, transparent);
+    border-color: theme('colors.grey.50');
+    border-style: solid;
+  }
+  &::before {
+    top: 0;
+    border-top-width: 1px;
+  }
+  &::after {
+    bottom: 0;
+    border-bottom-width: 1px;
+  }
+
   > canvas {
     border-radius: inherit;
   }
@@ -81,6 +103,11 @@
     inset 0 1px 0 0 rgb(255, 255, 255);
   border-radius: 10px;
 
+  .track-occupancy-manchette::before,
+  .track-occupancy-manchette::after {
+    display: none;
+  }
+
   .manchette-space-time-chart-wrapper {
     overflow: auto;
     flex: 1;