vega modifier: refactored typescript interfaces; added isVisible to i…

…nterface (but not implemented); refactor of functions signatures for populate and createView private functions

addon/modifiers/vega.ts

@@ -8,69 +8,21 @@ import * as VegaLite from 'vega-lite';
 import * as VegaTooltip from 'vega-tooltip';
 
 
-const DEFAULT_CONFIG: Vega.Config = {
-  background: '#fff',
-  arc: { fill: '#3e5c69' },
-  area: { fill: '#3e5c69' },
-  line: { stroke: '#3e5c69' },
-  path: { stroke: '#3e5c69' },
-  rect: { fill: '#3e5c69' },
-  shape: { stroke: '#3e5c69' },
-  symbol: { fill: '#3e5c69' },
-  axis: {
-    domainWidth: 0.5,
-    grid: true,
-    labelPadding: 2,
-    tickSize: 5,
-    tickWidth: 0.5,
-    titleFontWeight: 'normal',
-  },
-  axisBand: { grid: false },
-  axisX: { gridWidth: 0.2 },
-  axisY: { gridDash: [3], gridWidth: 0.4 },
-  legend: { labelFontSize: 11, padding: 1, symbolType: 'square' },
-  range: {
-    category: [
-      '#3e5c69',
-      '#6793a6',
-      '#182429',
-      '#0570b0',
-      '#3690c0',
-      '#74a9cf',
-      '#a6bddb',
-      '#e2ddf2',
-    ],
-  },
-};
-
-
-interface VegaLiteArgs {
-  Args: {
-    Named: {
-      specType: 'vega-lite';
-      spec: VegaLite.TopLevelSpec;
-      data: Record<string, Record<string, number | null>>;
-      config: Vega.Config;
-    };
-    Positional: never;
-  }
-}
+import { DEFAULT_CONFIG } from '../utils/default-config';
 
-interface VegaArgs {
+interface VegaModifierArgs {
   Args: {
     Named: {
-      specType: 'vega';
-      spec: Vega.Spec;
+      specType: 'vega' | 'vega-lite';
+      spec: Vega.Spec | VegaLite.TopLevelSpec;
       data: Record<string, Record<string, number | null>>;
       config: Vega.Config;
+      isVisible: boolean;
     };
-    Positional: never;
+    Positional: [];
   }
 }
 
-type VegaModifierArgs = VegaArgs | VegaLiteArgs;
-
-
 export default class VegaModifier extends Modifier<VegaModifierArgs> {
   private _vegaView!: Vega.View;
 
@@ -90,48 +42,50 @@ export default class VegaModifier extends Modifier<VegaModifierArgs> {
 
   async modify(
     element: Element,
-    positionalArgs: PositionalArgs<VegaModifierArgs>,
-    args: NamedArgs<VegaModifierArgs>
+    []: PositionalArgs<VegaModifierArgs>,
+    { specType, spec, data, config, isVisible }: NamedArgs<VegaModifierArgs>
   ) {
     if (!element) {
       throw new Error('Vega has no element');
     }
 
     if (!this._vegaView) {
       // Create new Vega.View instance
-      await this._createView(element, args);
+      await this._createView(element, specType, spec, config);
 
-      await this._populateData(args);
+      await this._populateData(data);
     } else {
       // Update data only
       // TODO: Handle changes to config
-      await this._populateData(args);
+      await this._populateData(data);
     }
   }
 
   private async _createView(
     element: Element,
-    args: NamedArgs<VegaModifierArgs>
+    specType: 'vega' | 'vega-lite',
+    spec: Vega.Spec | VegaLite.TopLevelSpec,
+    config: Vega.Config,
   ): Promise<void> {
     element.classList.add('vega-modifier');
 
     let tooltipHandler = new VegaTooltip.Handler();
 
-    let config = {};
-    if (isEmpty(args.config)) {
-      config = DEFAULT_CONFIG;
+    let _config = {};
+    if (isEmpty(config)) {
+      _config = DEFAULT_CONFIG;
       } else {
-      config = args.config;
+      _config = config;
     }
 
-    let viewSpec = null;
-    if (args.specType === 'vega-lite') {
-      viewSpec = VegaLite.compile(args.spec).spec;
+    let _viewSpec: Vega.Spec;
+    if (specType === 'vega-lite') {
+      _viewSpec = VegaLite.compile(spec as VegaLite.TopLevelSpec).spec;
     } else {
-      viewSpec = args.spec
+      _viewSpec = spec as Vega.Spec; 
     }
 
-    this._vegaView = new Vega.View(Vega.parse(viewSpec, config), {
+    this._vegaView = new Vega.View(Vega.parse(_viewSpec, _config), {
       renderer: 'svg',
       container: element,
       hover: true,
@@ -147,10 +101,10 @@ export default class VegaModifier extends Modifier<VegaModifierArgs> {
   }
 
   private async _populateData(
-    args: NamedArgs<VegaModifierArgs>
+    data: Record<string, Record<string, number | null>>,
   ): Promise<void> {
-    for (const name of Object.keys(args.data)) {
-      this._vegaView.data(name, args.data[name]);
+    for (const name of Object.keys(data)) {
+      this._vegaView.data(name, data[name]);
     }
 
     await this._vegaView.runAsync();