Example UX improvements (#9)

mcnuttandrew · Jan 19, 2024 · b06f9f1 · b06f9f1
1 parent f900ee2
commit b06f9f1
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 20 deletions.
diff --git a/public/examples/line-chart.json b/public/examples/line-chart.json
@@ -0,0 +1,26 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "description": "Stock prices of 5 Tech Companies over Time.",
+    "data": {
+        "url": "data/stocks.csv"
+    },
+    "mark": {
+        "type": "line",
+        "point": true
+    },
+    "encoding": {
+        "x": {
+            "timeUnit": "year",
+            "field": "date"
+        },
+        "y": {
+            "aggregate": "mean",
+            "field": "price",
+            "type": "quantitative"
+        },
+        "color": {
+            "field": "symbol",
+            "type": "nominal"
+        }
+    }
+}
diff --git a/src/content-modules/Examples.svelte b/src/content-modules/Examples.svelte
@@ -111,7 +111,7 @@
       modalState = "input-svg";
     }}
   >
-    Add Example
+    Use Example
   </button>
   <button
     class={buttonStyle}
@@ -268,26 +268,48 @@
             We detect the following colors, remove any that you do NOT want to
             be replaced in the editor
           </h3>
-          <div class="flex flex-col">
-            {#each detectedColors as color}
-              <div class="flex">
-                <div
-                  class="w-24 h-8"
-                  class:text-white={chroma(color).luminance() < 0.5}
-                  style="background-color: {color};"
-                >
-                  {color}
+          <div class="flex">
+            <div class="flex flex-col">
+              {#each detectedColors as color, idx}
+                <div class="flex">
+                  <div
+                    class="w-24 h-8"
+                    class:text-white={chroma(color).luminance() < 0.5}
+                    style="background-color: {color};"
+                  >
+                    {color}
+                  </div>
+                  <button
+                    class={buttonStyle}
+                    on:click={() => {
+                      detectedColors = detectedColors.filter(
+                        (x) => x !== color
+                      );
+                    }}
+                  >
+                    Remove
+                  </button>
+                  {#if idx}
+                    <button
+                      class={buttonStyle}
+                      on:click={() => {
+                        detectedColors = [
+                          ...detectedColors.slice(0, idx - 1),
+                          detectedColors[idx],
+                          detectedColors[idx - 1],
+                          ...detectedColors.slice(idx + 1),
+                        ];
+                      }}
+                    >
+                      Move up
+                    </button>
+                  {/if}
                 </div>
-                <button
-                  class={buttonStyle}
-                  on:click={() => {
-                    detectedColors = detectedColors.filter((x) => x !== color);
-                  }}
-                >
-                  Remove
-                </button>
-              </div>
-            {/each}
+              {/each}
+            </div>
+            <div>
+              {@html value}
+            </div>
           </div>
         </div>
       {/if}

diff --git a/src/stores/example-store.ts b/src/stores/example-store.ts
@@ -52,6 +52,11 @@ export const DEMOS = [
     title: "Stacked Area Chart",
     filename: "./examples/stacked-area-chart.json",
   },
+  {
+    type: "vega",
+    title: "Line Chart",
+    filename: "./examples/line-chart.json",
+  },
 ];
 
 export function modifySVGForExampleStore(