Stronger types. Use vega-lib (fixes #58).

vega · Mar 6, 2018 · fe4c0d8 · fe4c0d8
1 parent ed4f5a2
commit fe4c0d8
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 26 deletions.
diff --git a/src/embed.ts b/src/embed.ts
@@ -4,33 +4,27 @@ import * as vegaImport from 'vega-lib';
 import * as VegaLite from 'vega-lite';
 import schemaParser from 'vega-schema-url-parser';
 
-import { Spec, View } from 'vega-lib';
-import { TopLevelExtendedSpec } from 'vega-lite/build/src/spec';
+import { Config as VgConfig, Loader, Spec as VgSpec, View } from 'vega-lib';
+import { Config as VlConfig } from 'vega-lite/build/src/config';
+import { TopLevelExtendedSpec as VlSpec } from 'vega-lite/build/src/spec';
 import { post } from './post';
 
 export const vega = vegaImport;
 export const vl = VegaLite;
 
 export type Mode = 'vega' | 'vega-lite';
 
-export interface Loader {
-  load: (uri: string, options?: any) => Promise<string>;
-  sanitize: (uri: string, options: any) => Promise<{href: string}>;
-  http: (uri: string, options: any) => Promise<string>;
-  file: (filename: string) => Promise<string>;
-}
-
 export interface EmbedOptions {
   actions?: boolean | {export?: boolean, source?: boolean, editor?: boolean};
   mode?: Mode;
   logLevel?: number;
   loader?: Loader;
   renderer?: 'canvas' | 'svg';
-  onBeforeParse?: (spec: any) => void;
+  onBeforeParse?: (spec: VisualizationSpec) => VisualizationSpec;
   width?: number;
   height?: number;
   padding?: number | {left?: number, right?: number, top?: number, bottom?: number};
-  config?: string | any;
+  config?: string | VlConfig | VgConfig;
   sourceHeader?: string;
   sourceFooter?: string;
   editorUrl?: string;
@@ -47,11 +41,11 @@ const VERSION = {
 };
 
 const PREPROCESSOR = {
-  'vega':      vgjson => vgjson,
-  'vega-lite': vljson => vl.compile(vljson).spec,
+  'vega':      (vgjson, _) => vgjson,
+  'vega-lite': (vljson, config) => vl.compile(vljson, config).spec,
 };
 
-export type VisualizationSpec = TopLevelExtendedSpec | Spec;
+export type VisualizationSpec = VlSpec | VgSpec;
 
 /**
  * Embed a Vega visualization component in a web page. This function returns a promise.
@@ -105,7 +99,7 @@ export default function embed(el: HTMLBaseElement | string, spec: string | Visua
       mode = opt.mode || 'vega';
     }
 
-    let vgSpec = PREPROCESSOR[mode](spec);
+    let vgSpec: VgSpec = PREPROCESSOR[mode](spec, config);
 
     if (mode === 'vega-lite') {
       if (vgSpec.$schema) {

diff --git a/test-vg.html b/test-vg.html
@@ -11,7 +11,7 @@
 <body>
 
 <div id="vis"></div>
-<script src="node_modules/vega/build/vega.js" charset="utf-8"></script>
+<script src="node_modules/vega-lib/build/vega.js" charset="utf-8"></script>
 <script type="text/javascript" src="build/vega-embed.js"></script>
 <script type="text/javascript">
   vegaEmbed('#vis', 'https://vega.github.io/vega/examples/bar-chart.vg.json', {actions: true}).then(function(result) {

diff --git a/test-vl.html b/test-vl.html
@@ -11,14 +11,20 @@
 <body>
 
 <div id="vis"></div>
-<script src="node_modules/vega/build/vega.js" charset="utf-8"></script>
+<script src="node_modules/vega-lib/build/vega.js" charset="utf-8"></script>
 <script src="node_modules/vega-lite/build/vega-lite.js" charset="utf-8"></script>
 <script type="text/javascript" src="build/vega-embed.js"></script>
 <script type="text/javascript">
   var config = {
     // default view background color
     // covers the entire view component
     background: "#efefef",
+    axis: {
+      labelFont: "serif",
+      labelFontSize: 16,
+      tickWidth: 3,
+      tickColor: "red"
+    }
   };
 
   var spec = {
@@ -35,14 +41,6 @@
     "encoding": {
       "x": {"field": "a", "type": "ordinal"},
       "y": {"field": "b", "type": "quantitative"}
-    },
-    "config": {
-      "axis": {
-        "labelFont": "serif",
-        "labelFontSize": 16,
-        "tickWidth": 3,
-        "tickColor": "red"
-      }
     }
   }
 

diff --git a/tslint.json b/tslint.json
@@ -5,7 +5,7 @@
   },
   "defaultSeverity": "error",
   "extends": [
-      "tslint:recommended"
+    "tslint:recommended"
   ],
   "rules": {
     "quotemark": [true, "single"],