Fix coloring bug of the coordinate segments by making it reactive (#230)

* fix: fixing a bug of coloring segements by making it reactive * fix: reenable drawing order option in the storybook * style: fix style bug for creating coords in the store
Sparkier · Jun 15, 2022 · 10a3e76 · 10a3e76
1 parent 5345b7a
commit 10a3e76
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/packages/missing-coordinates/src/coordinates/CoordinateSegment.svelte b/packages/missing-coordinates/src/coordinates/CoordinateSegment.svelte
@@ -32,7 +32,7 @@
   $: shouldDashStroke =
     $drawConfig.variation === Variation.DASHED && (isAxis1Null || isAxis2Null);
   // Set the stroke to the appropriate color/gradient.
-  $: stroke = getStroke($drawConfig.variation, isAxis1Null, isAxis2Null);
+  $: stroke = getStroke(color, $drawConfig.variation, isAxis1Null, isAxis2Null);
   // Horizontal gradient lines are invisible in SVG.
   // (https://stackoverflow.com/questions/13223636/svg-gradient-for-perfectly-horizontal-path)
   // Therefore, we replace the line with a rect if that is the case.
@@ -43,6 +43,7 @@
     (isAxis1Null || isAxis2Null);
 
   function getStroke(
+    color: string,
     variation: Variation,
     axis1Null: boolean,
     axis2Null: boolean

diff --git a/packages/missing-coordinates/src/stores.ts b/packages/missing-coordinates/src/stores.ts
@@ -128,7 +128,7 @@ export const coordinates = derived(data, ($data) => {
     $data.axes.forEach(
       (axis) => (values[axis.name] = axis.data.length > i ? axis.data[i] : null)
     );
-    coords.push({ values: values });
+    coords.push({ values });
   }
   return coords;
 });
diff --git a/packages/storybook/stories/PCDemo.stories.js b/packages/storybook/stories/PCDemo.stories.js
@@ -58,8 +58,10 @@ export default {
       control: { type: "inline-radio" },
     },
     "drawConfiguration > drawingOrder": {
-      table: {
-        disable: true,
+      options: [0, 1],
+      control: {
+        type: "radio",
+        labels: ["Random", "Ordered"],
       },
     },
     data: {
@@ -113,7 +115,7 @@ const defaultArgs = {
     },
     lineOpacity: 0.5,
     fontSize: 12,
-    drawingOrder: DrawingOrder.ORDERED,
+    drawingOrder: DrawingOrder.RANDOM,
     missingValuesConfiguration: {
       missingValuesAxisSpacing: 35,
       imputationNeighbors: 2,