ui-charts: add striped color for blinking signals

Signed-off-by: Theo Macron <[email protected]>

Author: Akctarus

Diff for: storybook/stories/ui-charts/spaceTimeChart/layers.stories.tsx

@@ -76,6 +76,7 @@ const OCCUPANCY_BLOCKS = [
     spaceStart: 10 * KILOMETER,
     spaceEnd: 14 * KILOMETER,
     color: OCCUPANCY_WARNING,
+    blinking: true,
   },
   {
     timeStart: +START_DATE + 44 * MINUTE,

Diff for: ui-charts/src/spaceTimeChart/components/OccupancyBlockLayer.tsx

@@ -9,12 +9,31 @@ export type OccupancyBlock = {
   spaceStart: number;
   spaceEnd: number;
   color: string;
+  blinking?: boolean;
 };
 
 export type OccupancyBlockLayerProps = {
   occupancyBlocks: OccupancyBlock[];
 };
 
+const getFillStyle = (ctx: CanvasRenderingContext2D, color: string, isBlinking?: boolean) => {
+  if (isBlinking) {
+    const patternCanvas = document.createElement('canvas');
+    patternCanvas.width = 8;
+    patternCanvas.height = 8;
+    const pctx = patternCanvas.getContext('2d')!;
+    pctx.clearRect(0, 0, 8, 8);
+    pctx.strokeStyle = color;
+    pctx.lineWidth = 2;
+    pctx.beginPath();
+    pctx.moveTo(0, 8);
+    pctx.lineTo(8, 0);
+    pctx.stroke();
+    return ctx.createPattern(patternCanvas, 'repeat')!;
+  }
+  return color;
+};
+
 export const OccupancyBlockLayer = ({ occupancyBlocks }: OccupancyBlockLayerProps) => {
   const drawOccupancyBlockLayer = useCallback<DrawingFunction>(
     (ctx, { getTimePixel, getSpacePixel }) => {
@@ -24,7 +43,7 @@ export const OccupancyBlockLayer = ({ occupancyBlocks }: OccupancyBlockLayerProp
         const width = getTimePixel(occupancyBlock.timeEnd) - x;
         const height = getSpacePixel(occupancyBlock.spaceEnd) - y;
 
-        ctx.fillStyle = occupancyBlock.color;
+        ctx.fillStyle = getFillStyle(ctx, occupancyBlock.color, occupancyBlock.blinking);
         ctx.fillRect(x, y, width, height);
       }
     },