feat: add dash variant (#174)

The dashed variant now works with missing data. fix #167
Sparkier · Jun 2, 2022 · b20dd4a · b20dd4a
1 parent 389fd9f
commit b20dd4a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -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
@@ -42,6 +42,7 @@ const defaultArgs = {
       imputationNeighbors: 2,
       glyphRadius: 4,
       missingValueOpacity: 0.1,
+      strokeDasharray: "5 5",
     },
   },
 };