• fetch real data from remote resources and render them with vega
• update visualizatoin (fire base etc)
• make accessible from docs
• make jsfiddles and intefrate them in docs
• provide acceptance check for browser samples

• bind $vg with $data (+ unit tests)
• provide example in docs
• add integration test for example

• check ways to configure webpack to reduce the size of the plugin
• make an experiment with vega-webpack plugin which can analize vega spec and pick only js files required for that spec, or even render spec and generate js for dom operations only

• bind specified fields as props to component
• add sample to docs
• add all top level vega-lie spec items to props or create task to cover them

• make sure that it won't affect usage of faceting/layering etc

It's really important part for unit testing with es6

If you think this library is ready, could you add it to https://github.com/vega/vega-lite/blob/master/site/usage/applications.md?

• able to render without template

Looks like if we allow use URL then it's ok to allow vega view re-fetch data on redraw. Decision to not use URL should be done during compositing spec (user, webpack plugin)

• it seems like passing only one spec to component would be the more frequent use case, low-level props could work like nice sugar/override API

It's because specs computed depends from data and view instance recreation listen for spec change

Here few caveats: by excluding data prop from vegaLiteSpec prop we would make it's not clear for devs, especially when they interested in vega/lite spec values, from other side changes in data -(which should be streamed to changeset) would run recompilation and full recreation of vega view

• recreate vega view only if non-data parts of spec were changed
• stream data change to vega view, it shoudn't recompile specs and recreate vega view
• changes in data should be represented in vegaSpec and vegaLiteSpec

@nesterone

Currently there are some functionalities that are not working, such as:

• line with point
• tootip
• datasets

for datasets I could workaround and fix that in my backend before send the spec, but it would be good if it could work without any workaround.

My first guess was update the dependencies #44

But it seems it is not enough.

Could you provide any information to guide me to fix this issue?

We render viz for graphic but they not centered

• if it possible, need to make a small research
• how to use it?

The value "container" is not accepted with Width and Height

• choose version
• move github project from private to public
• provide proper tags for project

• test with Vuex
• provide example in docs

• eslint config
• editor config
• precommit hooks
• unit test
• setup CI (trigger on push/)
• cover mixing with unit tests without adding new functionality
• switch from mixin to plugin
• create a dist with simple standalone html example
• move samples to sepatate folder (docs), src contains only plugin
• create more sexy docs page
• fill with existing functionality, no new fetaures
• publish to gh-pages
• synch readme with docs

• review existing API and tune it, take to account that vega also in a plan to be part of integration
• update/write API reference

Hi,

The "Line Chart with Point Markers" seems broken. The points are not shown.

I even tested with the demo chart with spec below.

<vega-lite :spec="demo_spec"></vega-lite>

where demon_spec is:

 {
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "https://vega.github.io/editor/data/stocks.csv"},
  "mark": {
    "type": "line",
    "point": true
  },
  "encoding": {
    "x": {"timeUnit": "year", "field": "date", "type": "temporal"},
    "y": {"aggregate":"mean", "field": "price", "type": "quantitative"},
    "color": {"field": "symbol", "type": "nominal"}
  }

-thanks

Currently, it is not possible to call vega APIs directly (e.g. vega.scheme) when using the minified version of vue-vega. Simply importing from vega and calling the API has no effect, since it is a different file (from node_modules/vega* instead of the minified file) with a different scope.

This could probably be remedied by something like this (in index.js):

export * from 'vega'

That way we could use the following to access the API in the same scope:

import { scheme } from 'vue-vega'
scheme('my-scheme', [ ... ])

Alternatively, something like this could be used:

import * as vega from 'vega'
export { vega }

import { vega } from 'vue-vega'
vega.scheme('my-scheme', [ ... ])

I was trying to include a pie-chart but the compiler was throwing a vegaSpec error:"Error: Unregistered composite mark arc". I looked up the documentation and it seems that the mark "arc" is not yet supported. Is that correct? Thanks!

I've started a new project using the Vue cli, but when I install vue-vega and add a simple example I get this error:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Is there anything I can do? Maybe some additional Getting started step would be good?

I'd love to combine vue-vega with VuePress where you normally compile as much as possible beforehand.

• Provide all top level vega lite spec props from https://vega.github.io/vega-lite/docs/spec.html#single-view-spec
• basic validaion
• for more deep validation create another task

Can't use Vue.extend because it doesn't mount children, replace with proper scoping, one of the ways is to integrate vue-test-util see vuejs/vue-test-utils#2 is ready

@nesterone

do you have any idea of roadmap for this project?

Hey @nesterone !

very nice lib! thanks!

I am playing with vue-vega and it seems awesome!

do you plan to keep maintenance of this library?

it seems each time I use the library it shows (console.log) the spec used. is there a way to silence that?

thanks!

Provide a selectable images (navigate to example)

• navigate to example
• automatic image generation from sample
• random move, like in https://vega.github.io/vega/
• responsive

• Is there are any use cases to use that?

• Is it useful in building dynamic visualizations?

• if yes then provide example with showcase, if not provide an explanation why

Provide an access to Streaming Data

• make our data watcher smarter to separate replace/add/remove operations
• evolve sample with data update to streaming updates
• link from our docs to vega-lite streaming feature docs

Data from signals very pure looks like vega-tooltip has the functionality to get all required data.

• make sure that it could be reused with other signals

documentation says that there is an autoResize option (link below)... however when using it, it doesn't seem to resize automatically. Adding autosize options along with it does not seem to work either. Is there something I am doing wrong?

<vega-lite :data="data" :mark="mark" :encoding="encoding" :autosize="{type:'pad', contains:'padding', resize:true}" autoResize/>

https://nesterone.github.io/vue-vega/#sub-vega-lite-component

Yep, it's not obvious even from docs, it should be public utility function, so 'vue-vega-weppack' plugin would be using it to generate vue vega components directly from specs and/or js files

• Create docs within markdown, instead of pub
• research vue.org docs, a11 calendar (How they do samples ?)
• need separation between Guide, API (not sure about interactive samples)

• write a medium post about my project
• generate short links to track who would follow my links from notifications
• send the notification to Vue, Vega, Hacker News community
• make sure that GA is enabled on docs
• make PR to vue awesome
• make PR to vega tools

• Read Start Open Source Project
• Read Code of Conduct
• prepare contributor.md
• README: What does this project do?
• README: How do I get started?
• README: Why is this project useful?
• README: Where can I get more help, if I need it?
• Making READMEs readable
• README Template
• CONTRIBUTOR: Issue and Pull Request templates
• Review CONTRIBUTOR Template
• Read Mozila Web Contributor
• Go thorough checklist

• tune webpack
• update docs and browser samples

For example

<template>
  <vega-lite
    :data="values"
    mark="bar"
    :encoding="{
        x: {field: 'a', type: 'ordinal'},
        y: {field: 'b', type: 'quantitative'}
    }"/>
</template>

gives

Template execution failed: Error: Module build failed: Error: /projects/vue-vega/node_modules/vue-loader/lib/selector.js?type=template!/projects/vue-vega/_docs/partials/examples/VegaLiteComponentExample.vue:5:13
    3|   :data="values"
    4|   mark="bar"
  > 5|   :encoding="{
-------------------^
    6|       x: {field: 'a', type: 'ordinal'},
    7|       y: {field: 'b', type: 'quantitative'} }"/>
    8| 

Syntax Error: Unterminated string constant
    at makeError (/projects/vue-vega/node_modules/pug-error/index.js:32:13)
    at Lexer.error (/projects/vue-vega/node_modules/pug-lexer/index.js:58:15)
    at Lexer.assertExpression (/projects/vue-vega/node_modules/pug-lexer/index.js:86:12)
    at Lexer.code (/projects/vue-vega/node_modules/pug-lexer/index.js:971:28)
    at Lexer.callLexerFunction (/projects/vue-vega/node_modules/pug-lexer/index.js:1319:23)
    at Lexer.advance (/projects/vue-vega/node_modules/pug-lexer/index.js:1352:15)
    at Lexer.callLexerFunction (/projects/vue-vega/node_modules/pug-lexer/index.js:1319:23)
    at Lexer.getTokens (/projects/vue-vega/node_modules/pug-lexer/index.js:1375:12)
    at lex (/projects/vue-vega/node_modules/pug-lexer/index.js:12:42)
    at Object.lex (/projects/vue-vega/node_modules/pug/lib/index.js:99:27)
    at Function.loadString [as string] (/projects/vue-vega/node_modules/pug-load/index.js:44:24)
    at compileBody (/projects/vue-vega/node_modules/pug/lib/index.js:86:18)
    at Object.exports.compileClientWithDependenciesTracked (/projects/vue-vega/node_modules/pug/lib/index.js:291:16)
    at Object.exports.compileClient (/projects/vue-vega/node_modules/pug/lib/index.js:337:18)
    at run (/projects/vue-vega/node_modules/pug-loader/index.js:136:23)
    at Object.module.exports (/projects/vue-vega/node_modules/pug-loader/index.js:133:2)

When template is written in one line all works fine
Looks like problem with pug parser

idea like in https://github.com/nesterone/vue-vega#install--basic-usage

• option to show/hide tooltip
• slots to customize it's content