randomfractals / vscode-vega-viewer Goto Github PK

gonna wait for some feedback from vega charts devs before I add vega-lite examples.

Originally posted by @RandomFractals in #4 (comment)

for exploring more refined Vega examples in vscode via famous FT data viz guide:

https://gramener.github.io/visual-vocabulary-vega/

Currently, vega Preview option is displayed in explorer and editor menus for all .json files.

Desired:

Restrict this to .vega, .vg.json, .vl.json, .vg, and .vl files only to avoid polluting vscode menus for other json files with invalid vega Preview command menu option.

Solution:

Use the following when clause for those menu items:

resourceFilename =~ /.*\\.(vega|vg.json|vl.json|vg|vl)/

or

resourceExtname =~ /.(vega|vg.json|vl.json|vg|vl)/

The text in the dropdown is slightly offset on macOS. The dropdown also jump when something is selected.

currently this extension provides vg.json and vl.json Previews using embedded Vega v4 and Vega-Lite v3 libraries.

Vega dev team, @jheer and @domoritz have been busy with new Vega v5 updates recently.

I'd like to support latest Vega library updates to Preview vega json files created with new features and changes in v5.x. See Vega repo for more info:

https://github.com/vega/vega/releases

Ultimately and ideally as part of this viewer update, load correct vega, vega-lite or vega-embed version for Preview based on the Vega $schema reference provided in vg.json || vl.json spec for backward compatibility and previews of older vega specs.

to let devs remap it to vscode.open or other extension for viewing raw csv & json data files referenced in vega specs.

see RandomFractals/vscode-data-preview#1 fro the full laundry list, ex charts.

there will be no data preview view charts in this vega viewer ext. get data preview ext. if you want auto-gen charts :)

I just don't want to confuse devs with perspectiveJS lib charts on top of all the vega charts and examples this ext. packs

since that vscode data.preview extension supersedes slimmed down version of vega.preview.data grid and supports arrow data display and export.

see https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview

see release notes: https://github.com/vega/vega-lite/releases/tag/v3.4.0

for devs not using vscode to preview and share vega specs online

The header moves when I side-scroll a large chart. I think the header should stay in place.

in order to preview vega spec renders with different themes.

see: https://github.com/vega/vega-themes

and live demos at: https://observablehq.com/@vega/vega-themes-demo

Somewhat related: I tried to start a local http server and included
"url": "http://127.0.0.1:8000/myfile.csv"
This also doesn't work, but it doesn't say "myfile.csv not found"

Originally posted by @Corvince in #15 (comment)

currently data preview panel is restored as vega chart preview on vscode restart.

need to change preview serializer to restore data previews with data grid display web view instead.

@CompuIves hopefully, it's as easy as adding recommended extensions suggestion to your @codesandbox proj. config via standard vscode extensions.json...

https://code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions

see release notes: https://github.com/vega/vega-lite/releases/tag/v3.2.0

and updated examples:

vega/vega-lite@v3.1.0...v3.2.0

see https://vega.github.io/vega-lite/docs/concat.html

Vega Viewer alpha v. requires absolute urls via https for data refs in spec.

In order to preview Vega examples, you need to change all example data references

  "data": [
    {
      "name": "source",
      "url": "data/cars.json",
      ...
    }
  ]

to published Vega data sets

  "data": [
    {
      "name": "source",
      "url": "https://vega.github.io/vega-datasets/data/cars.json",
      ...
    }
  ]

Same applies to custom Vega/Lite specs you create.

Solution:

Scan Vega spec for relative data url refs, read them from fs and pass that data along with spec json to the webview and vega embed to load and render with custom vega loader that grabs local data injections from vega viewer webview post message for preview refresh

If I load local data on the top-level of a spec it works fine, but if "data" appears somewhere else it doesn't work.
For example this works

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "data": {
    "url": "myfile.csv"
    },
    "Rest of specification"
}

While this doesn't

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "layer": [
    {
      "data": {
      "url": "myfile.csv"
      },
      "Rest of specification"
}

Vega viewer template manager already loads base templates for vg/vl specs from:

https://github.com/RandomFractals/vscode-vega-viewer/tree/master/templates

Need to add a shortcut command to read and paste them into new json files for quick vega spec starters

see webview api doc for implementation details:

https://code.visualstudio.com/api/extension-guides/webview

this is already set up in extension.ts workspace.onDidChangeTextDocument event handler, but I disabled it for alpha.

If updating preview on json spec save is not sufficient I can enable this feature in the next viewer release by adding some 1 min or so timer (configurable to your liking) for that whole json parser and render process not to fire on every char change (why I disabled it for now)

see: https://code.visualstudio.com/docs/editor/userdefinedsnippets

for testing older vega specs with this extension

The css probably needs to be adjusted

see #34

for a quick preview of published vega examples, copy and paste to start new vega spec json dev

• map new data preview command to [vega.]data.preview & ctrl+alt+d command shortcut
• use this Observable js notebook & https://github.com/fin-hypergrid/core || better yet https://github.com/finos/perspective for that data grid display:

https://observablehq.com/@randomfractals/vega-datasets

arrow data enhancement for #30 and #27

and view spec. compositions (facets, repeats, etc.)

see docs on composing layered & multi-view plots:

https://vega.github.io/vega-lite/docs/composition.html

and geo_choropleth.vl.json transform usage example in Vega Viewer ext. or online:

https://vega.github.io/editor/#/examples/vega-lite/geo_choropleth

just another edge case related to #15

Based on https://github.com/vega/logos maybe?

it's too short with the latest vscode release update and default fonts

see updated:

https://github.com/vega/vega/tree/master/docs/examples

https://github.com/vega/vega-lite/tree/master/examples/specs

& prior #18 changes for this code update

literally, the only supported data formats type missing in this ext. for prototying vega charts offline and in code.

I'll add it if devs using Vega Viewer vote on it. I doubt there are many or any using both tech stacks, even tho I like arrow data format a lot!

see this repo for more info: https://github.com/vega/vega-loader-arrow

I am trying to use the data viewer but nothing happens when I select a dataset in the dropdown.

Maybe I'm also misunderstanding this feature.

After save:

But when I close preview and open it again, it updates:

this extension already provides jsonSchema validation and intelli-sense code hints for vega json files.

Adding online help docs loading in another preview panel could be next good step to make it even more appealing for devs using vega viz libs or altair for charting and data viz prototyping.

i.e. something as simple as just loading vega examples site in another vscode preview panel to alleviate the need to load vega docs in chrome or other browser window:

https://vega.github.io/vega/examples/contour-plot/

cc @domoritz @kanitw & @jheer: your thoughts on this?

see vega/vega-lite-api#9

since it's unorthodox for vscode commands & a bit distracting