Upgrade svelte-vega (#4394)

rilldata · Mar 21, 2024 · 910f990 · 910f990 · github-actions · Mar 21, 2024
1 parent 6f61a15
commit 910f990
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/web-common/package.json b/web-common/package.json
@@ -66,13 +66,14 @@
     "svelte-forms-lib": "^2.0.1",
     "svelte-headless-table": "^0.18.1",
     "svelte-preprocess": "^5.0.4",
-    "svelte-vega": "^2.1.0",
+    "svelte-vega": "^2.2.0",
     "tailwind-merge": "^2.1.0",
     "tailwind-variants": "^0.1.19",
     "tailwindcss": "^3.2.7",
     "tsx": "^4.7.0",
     "ua-parser-js": "^1.0.2",
     "uuid": "^9.0.0",
+    "vega-lite": "^5.17.0",
     "vitest": "^0.31.0",
     "yaml": "^2.1.3",
     "yup": "^0.32.11"

diff --git a/web-common/src/features/charts/render/VegaLiteRenderer.svelte b/web-common/src/features/charts/render/VegaLiteRenderer.svelte
@@ -1,17 +1,11 @@
 <script lang="ts">
   import { getRillTheme } from "@rilldata/web-common/features/charts/render/vega-config";
-  import { VegaLite, View } from "svelte-vega";
+  import { VegaLite, View, type EmbedOptions } from "svelte-vega";
 
   export let data: Record<string, unknown> = {};
   export let spec; // VisualizationSpec;
 
-  // EmbedOptions type missing from svelte-vega
-  interface Options {
-    config: undefined | Record<string, unknown>;
-    renderer: "canvas" | "svg";
-  }
-
-  let options: Options = {
+  let options: EmbedOptions = {
     config: getRillTheme(),
     renderer: "svg",
   };

diff --git a/web-common/src/features/charts/render/vega-config.ts b/web-common/src/features/charts/render/vega-config.ts
@@ -3,16 +3,17 @@ import {
   MainAreaColorGradientLight,
   MainLineColor,
 } from "@rilldata/web-common/features/dashboards/time-series/chart-colors";
+import type { Config } from "vega-lite";
 
 const markColor = MainLineColor;
 const axisColor = "#E5E7EB";
 const axisLabelColor = "#4b5563"; // gray-600
 
-export const getRillTheme = () => ({
+export const getRillTheme: () => Config = () => ({
   arc: { fill: markColor },
   area: {
+    line: { stroke: markColor },
     stroke: null,
-    line: markColor,
     color: {
       x1: 1,
       y1: 1,