From b20dd4af738a90a17b130f5af0c6d1fc7b7abab9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20B=C3=A4uerle?= <alex.baeuerle@uni-ulm.de>
Date: Thu, 2 Jun 2022 12:30:24 +0200
Subject: [PATCH] feat: add dash variant (#174)

The dashed variant now works with missing data.

fix #167
---
 .../src/coordinates/CoordinateSegment.svelte                | 6 ++++++
 packages/missing-coordinates/src/types.ts                   | 1 +
 packages/storybook/stories/PCDemo.stories.js                | 1 +
 3 files changed, 8 insertions(+)

diff --git a/packages/missing-coordinates/src/coordinates/CoordinateSegment.svelte b/packages/missing-coordinates/src/coordinates/CoordinateSegment.svelte
index fe66bb0..1af361e 100644
--- a/packages/missing-coordinates/src/coordinates/CoordinateSegment.svelte
+++ b/packages/missing-coordinates/src/coordinates/CoordinateSegment.svelte
@@ -23,6 +23,9 @@
   // Check whether the opacity of the line segment should be reduced.
   $: shouldReduceOpacity =
     $drawConfig.variation === Variation.OPACITY && (isAxis1Null || isAxis2Null);
+  // Check whether the line segment should be dashed.
+  $: shouldDashStroke =
+    $drawConfig.variation === Variation.DASHED && (isAxis1Null || isAxis2Null);
   // Set the stroke to the appropriate color/gradient.
   $: stroke = getStroke($drawConfig.variation, isAxis1Null, isAxis2Null);
 
@@ -129,6 +132,9 @@
     opacity={shouldReduceOpacity
       ? $drawConfig.missingValuesConfiguration.missingValueOpacity
       : 1}
+    stroke-dasharray={shouldDashStroke
+      ? $drawConfig.missingValuesConfiguration.strokeDasharray
+      : ""}
   />
   {#if shouldDrawGlyph}
     <circle
diff --git a/packages/missing-coordinates/src/types.ts b/packages/missing-coordinates/src/types.ts
index ce41146..58dcf19 100644
--- a/packages/missing-coordinates/src/types.ts
+++ b/packages/missing-coordinates/src/types.ts
@@ -28,6 +28,7 @@ export class MissingValuesConfiguraion {
   imputationNeighbors = 2;
   glyphRadius = 4;
   missingValueOpacity = 0.1;
+  strokeDasharray = "5 5";
 }
 
 export enum TopBottomPosition {
diff --git a/packages/storybook/stories/PCDemo.stories.js b/packages/storybook/stories/PCDemo.stories.js
index 7101054..5e3130b 100644
--- a/packages/storybook/stories/PCDemo.stories.js
+++ b/packages/storybook/stories/PCDemo.stories.js
@@ -42,6 +42,7 @@ const defaultArgs = {
       imputationNeighbors: 2,
       glyphRadius: 4,
       missingValueOpacity: 0.1,
+      strokeDasharray: "5 5",
     },
   },
 };