How to use vega-lite - 10 common examples

setDebugValues(view, spec, vlspec) {
    if (window) {
      if (window.VEGA_DEBUG === undefined && console) {
        console.log('%cWelcome to Kibana Vega Plugin!', 'font-size: 16px; font-weight: bold;');
        console.log('You can access the Vega view with VEGA_DEBUG. ' +
          'Learn more at https://vega.github.io/vega/docs/api/debugging/.');
      }
      const debugObj = {};
      window.VEGA_DEBUG = debugObj;
      window.VEGA_DEBUG.VEGA_VERSION = vega.version;
      window.VEGA_DEBUG.VEGA_LITE_VERSION = vegaLite.version;
      window.VEGA_DEBUG.view = view;
      window.VEGA_DEBUG.vega_spec = spec;
      window.VEGA_DEBUG.vegalite_spec = vlspec;

      // On dispose, clean up, but don't use undefined to prevent repeated debug statements
      this._addDestroyHandler(() => {
        if (debugObj === window.VEGA_DEBUG) {
          window.VEGA_DEBUG = null;
        }
      });
    }
  }

setDebugValues(view, spec, vlspec) {
    if (!this._editorMode) {
      // VEGA_DEBUG should only be enabled in the editor mode
      return;
    }

    if (window) {
      if (window.VEGA_DEBUG === undefined && console) {
        console.log('%cWelcome to Kibana Vega Plugin!', 'font-size: 16px; font-weight: bold;');
        console.log('You can access the Vega view with VEGA_DEBUG. ' +
          'Learn more at https://vega.github.io/vega/docs/api/debugging/.');
      }
      const debugObj = {};
      window.VEGA_DEBUG = debugObj;
      window.VEGA_DEBUG.VEGA_VERSION = vega.version;
      window.VEGA_DEBUG.VEGA_LITE_VERSION = vegaLite.version;
      window.VEGA_DEBUG.view = view;
      window.VEGA_DEBUG.vega_spec = spec;
      window.VEGA_DEBUG.vegalite_spec = vlspec;

      // On dispose, clean up, but don't use undefined to prevent repeated debug statements
      this._addDestroyHandler(() => {
        if (debugObj === window.VEGA_DEBUG) {
          window.VEGA_DEBUG = null;
        }
      });
    }
  }

setDebugValues(view, spec, vlspec) {
    if (window) {
      if (window.VEGA_DEBUG === undefined && console) {
        console.log('%cWelcome to Kibana Vega Plugin!', 'font-size: 16px; font-weight: bold;');
        console.log(
          'You can access the Vega view with VEGA_DEBUG. ' +
            'Learn more at https://vega.github.io/vega/docs/api/debugging/.'
        );
      }
      const debugObj = {};
      window.VEGA_DEBUG = debugObj;
      window.VEGA_DEBUG.VEGA_VERSION = vega.version;
      window.VEGA_DEBUG.VEGA_LITE_VERSION = vegaLite.version;
      window.VEGA_DEBUG.view = view;
      window.VEGA_DEBUG.vega_spec = spec;
      window.VEGA_DEBUG.vegalite_spec = vlspec;

      // On dispose, clean up, but don't use undefined to prevent repeated debug statements
      this._addDestroyHandler(() => {
        if (debugObj === window.VEGA_DEBUG) {
          window.VEGA_DEBUG = null;
        }
      });
    }
  }

// handle corner case: if T is present in vlSpec, then we keep both T and (TIMEUNIT)T
    var fieldDefs = vl.spec.fieldDefs(vlSpec);
    for (var i = 0; i < fieldDefs.length; i++) {
      if (fieldDefs[i].field === originalTemporalField && !fieldDefs[i].timeUnit) {
        supplementedFieldOption.removeOriginalTemporalField = undefined;
        break;
      }
    }

  }

  // supplement title
  if (!config.countTitle) config.countTitle = vl.config.defaultConfig.countTitle; // use vl default countTitle
  supplementedFieldOption.title = fieldOption.title ?
    fieldOption.title : vl.fieldDef.title(fieldDef, config);

  // supplement formatType
  supplementedFieldOption.formatType = fieldOption.formatType ?
    fieldOption.formatType : formatTypeMap[fieldDef.type];

  // supplement format
  if (fieldOption.format) {
    supplementedFieldOption.format = fieldOption.format;
  }
  // when user doesn't provide format, supplement format using timeUnit, timeFormat, and numberFormat
  else {
    switch (supplementedFieldOption.formatType) {
      case "time":
        supplementedFieldOption.format = fieldDef.timeUnit ?
          // TODO(zening): use template for all time fields, to be consistent with Vega-Lite
          vl.timeUnit.template(fieldDef.timeUnit, "", false).match(/time:'[%-a-z]*'/i)[0].split("'")[1]

// backing dataset should actually be (source, aggregate, etc.).
  (spec.data as InlineData).values = dsUtils.output(dsId);

  // Supply custom cell width/heights to be able to differentiate hardcoded
  // scale ranges generated by Vega-Lite.
  spec.config.view = {
    width: CELLW,
    height: CELLH
  };

  // Force marks to be filled, if we're binding to the fill color property.
  spec.config.mark = {filled: property === 'fill'};

  return {
    input: spec,
    output: vlCompile(spec).spec
  } as CompiledBinding;
}

//       {"a": "F", "b": 53},
    //       {"a": "G", "b": 19},
    //       {"a": "H", "b": 87},
    //       {"a": "I", "b": 52}
    //     ]
    //   },
    //   "mark": "bar",
    //   "encoding": {
    //     "x": {"field": "a", "type": "quantitative"},
    //     "y": {"field": "b", "type": "quantitative"}
    //   }
    // };
    const {logger} = this.props;
    const vlSpec = this.props.spec;
    try {
      const spec = vl.compile(vlSpec, logger).spec;
      const runtime = vega.parse(spec, vlSpec.config);
      this.view = new vega.View(runtime)
        .logLevel(vega.Warn)
        .initialize(this.refs[CHART_REF] as any)
        .renderer(this.props.renderer || 'canvas')
        .hover();
      vegaTooltip.vega(this.view);
      this.bindData();
    } catch (err) {
      logger.error(err);
    }
  }

update() {
    const {spec, format, filePath, renderer} = this.props;
    if (spec) {
      let vegaSpec;

      if (format === FORMAT.VEGA_LITE) {
        try {
          vegaSpec = vl.compile(spec).spec;
        } catch (error) {
          this.showError(`Invalid vega-lite spec: ${error.message}`);
          return;
        }
      } else if (format === FORMAT.UNKNOWN) {
        try {
          vegaSpec = vl.compile(spec).spec;
        } catch (error) {
          vegaSpec = spec;
        }
      } else {
        vegaSpec = spec;
      }

      // Clear existing view
      if (this.view) {

update() {
    const {spec, format, filePath, renderer} = this.props;
    if (spec) {
      let vegaSpec;

      if (format === FORMAT.VEGA_LITE) {
        try {
          vegaSpec = vl.compile(spec).spec;
        } catch (error) {
          this.showError(`Invalid vega-lite spec: ${error.message}`);
          return;
        }
      } else if (format === FORMAT.UNKNOWN) {
        try {
          vegaSpec = vl.compile(spec).spec;
        } catch (error) {
          vegaSpec = spec;
        }
      } else {
        vegaSpec = spec;
      }

      // Clear existing view
      if (this.view) {
        this.view.finalize();
      }

      this.container.innerHTML = '';

      try {
        const runtime = vg.parse(vegaSpec);

if (spec.datasets) {
      throw new Error('Datasets should not be passed as part of the spec')
    }

    const datasets = getDataSets(el)

    if (datasets) {
      if (!spec.data) {
        throw new Error(
          'Must specify "data" field when using "dataset"')
      }
      spec.datasets = datasets
    }

    const vgSpec = vl.compile(spec).spec

    // Heuristic to determine the default dataset name.
    const datasetNames = datasets ? Object.keys(datasets) : []
    if (datasetNames.length === 1) {
      this.defaultDataName = datasetNames[0]
    } else if (datasetNames.length === 0 && vgSpec.data) {
      this.defaultDataName = vgSpec.data[0].name
    }

    const runtime = vega.parse(vgSpec)
    const view = new vega.View(runtime, {
      logLevel:  vega.Warn,
      render: 'canvas',
      container: this.element,
    })

addSpec(spec){
        this.bubbleOpts = {
            showAllFields: true,
        };

        if (typeof(spec) === 'string') {
            spec = JSON.parse(spec);
        }
        // If size is not specified, default to our default window size, 720x550
        if (!spec.width && !spec.height) {
            spec.width = 720;
            spec.height = 550;
        }
        if (spec['$schema'].startsWith('https://vega.github.io/schema/vega-lite/')) {
            spec = vl.compile(spec).spec;
        }

        this.vega_json = spec;
        this.vega_json.autosize = {"type": "fit", "resize": true, "contains": "padding"};

        if(this.vega_json["metadata"] != null){
            if(this.vega_json["metadata"]["bubbleOpts"] != null){
                this.bubbleOpts = this.vega_json["metadata"]["bubbleOpts"];
            }
        }

        this.vegaLoading = true;
        this.vegaView = new vega.View(vega.parse(this.vega_json), {'renderer': 'svg'})
                                .initialize(this.vega_container)
                                .hover()
                                .run();