nesterone / vue-vega Goto Github PK
View Code? Open in Web Editor NEWVega Lite and Vega bridge to Vue.js ecosystem
Home Page: https://nesterone.github.io/vue-vega
License: MIT License
Vega Lite and Vega bridge to Vue.js ecosystem
Home Page: https://nesterone.github.io/vue-vega
License: MIT License
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!
We render viz for graphic but they not centered
Provide an access to Streaming Data
Currently there are some functionalities that are not working, such as:
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?
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)
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!
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
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', [ ... ])
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
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 a selectable images (navigate to example)
Data from signals very pure looks like vega-tooltip has the functionality to get all required data.
If you think this library is ready, could you add it to https://github.com/vega/vega-lite/blob/master/site/usage/applications.md?
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
It's really important part for unit testing with es6
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
The value "container" is not accepted with Width and Height
do you have any idea of roadmap for this project?
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.