Skip to content
Data Preview 🈸 extension for importing πŸ“€ viewing πŸ”Ž slicing πŸ”ͺ dicing 🎲 charting πŸ“Š & exporting πŸ“₯ large JSON array/config, YAML, Apache Arrow, Avro & Excel data files
HTML TypeScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github #118 created funding.yml and added link to support via ko-fi for now Aug 30, 2019
.vscode changed default proj. workspace data.preview.theme setting to light f… Aug 25, 2019
data added data/json/cars-filter-by-name.config example Aug 31, 2019
images contribs pic update with latest v. & 100K downloads stats Sep 17, 2019
scripts updated data viewer scripts/styles and tslint to latest Aug 27, 2019
src moved remote data url checks to fileUtils.ts Sep 17, 2019
styles/perspective-viewer #130 updated viewer lib, scripts, styles and code to v0.3.7 Aug 20, 2019
templates #145 renamed dataUrl data.preview .config setting to dataUri for remo… Sep 15, 2019
.gitattributes initial data.preview ext. code scaffold May 22, 2019
.gitignore #13 added parquetjs lib for parquet data file loading Jun 2, 2019
.travis.yml #80 run vscode:prepublish script for travis builds Jul 1, 2019
.vscodeignore
CHANGELOG.md #29 redirect changelog to releases for version details Jun 17, 2019
LICENSE
README.md #149 added data.preview.remote command shortcut Sep 17, 2019
package-lock.json #125 updated data viewer libs to latest in package.json Sep 17, 2019
package.json #125 updated data viewer libs to latest in package.json Sep 17, 2019
tsconfig.json tsconfig.json cleanup Sep 7, 2019
tslint.json initial data.preview ext. code scaffold May 22, 2019
vsc-extension-quickstart.md initial data.preview ext. code scaffold May 22, 2019

README.md

vscode-data-preview

Build Status Apache-2.0 License https://ko-fi.com/dataPixy

Version Installs Downloads

Data Preview 🈸 extension for importing πŸ“€ viewing πŸ”Ž slicing πŸ”ͺ dicing 🎲 charting πŸ“Š & exporting πŸ“₯ large .json array .arrow .avro data files, .config .env .properties .ini .yml configurations files, .csv/.tsv & .xlsx/.xlsb Excel files and .md markdown tables with Perspective - streaming data analytics WebAssembly library.

Data Preview

🈸 Features

  • Preview .json .arrow .avro .yml .csv/.tsv & .xlsx/.xlsb data files in a Data Grid w/Sorting & Filtering
  • Grid Data Summary display w/Aggregate Functions, Row & Column Pivots (a.k.a. Group By & Split By)
  • Basic Charts πŸ“Š creation w/Aggregate Functions, Row & Column Pivots
  • Pluggable Charting πŸ“Š libraries for bult-in Charts: d3fc || highcharts
  • Persistent Data Preview Settings (View, Sort, Filter, Pivots, etc.) for restore of open Data View panels on VSCode Reload
  • Mulptiple Spreadsheets Data Preview for Excel data files
  • Markdown tables data preview for .md documentation files
  • Data .schema.json generation for Arrow & Avro Data Schema Text Previews in JSON format
  • Binary Data files .json generation for Arrow, Avro & Excel formats for Text Data Preview
  • Property Grid display for .json .config .env .properties .ini & .yml configuration files
  • Open Data Preview on Side option for slim data || config files
  • Quick Launch new Data Preview input box for data files in open workspace
  • Save Filtered Data Grid || Chart πŸ“Š Data in .arrow .csv .json(s) .yml & .properties formats
  • Save & Load Data View .config options
  • Dark & Light Data Preview 🈸 Panel Themes

Next V.

  • Will include .parquet data format support, large text & binary data files loading & Apache Arrow data streaming

Note: Data Preview 🈸 is already capable of loading a few 10+MB's large data files with 100+K records & extensive list of supported Data Formats you'll be hard pressed to find on VSCode marketplace in one extension.

See data/large/... data folder for sample large data files and Data View .configs you can try in Data Preview 🈸.

Installation

Install Data Preview 🈸 via vscode Extensions tab (Ctrl+Shift+X) by searching for data preview || via VSCode marketplace search results.

List of Data Preview 🈸 extension config Settings, data.preview command(s), keyboard shortcut(s), augmented vscode UI context menus, added Data Language mappings, supported Data Files list & configurable Theme & Charts πŸ“Š Settings:

Data Preview Contributions

Configuration

Create User or Workspace Settings in vscode to change default Data Preview 🈸 extension Settings:

Setting Type Default Value Description
data.preview.theme string dark Data Preview UI Theme: dark or light
data.preview.charts.plugin string d3fc Data Preview Charts πŸ“Š library to use for built-in charts: d3fc or highcharts
data.preview.create.json.files boolean false Creates .json data files for Arrow, Avro & Excel binary data formats
data.preview.create.json.schema boolean true Creates .schema.json files for Arrow & Avro metadata binary data formats
data.preview.openSavedFileEditor boolean true Opens created data file Content Editor on Data Save
data.preview.log.level string info Data Preview run log level: info or debug for issues troubleshooting

Data Preview 🈸 example using dark UI theme with d3fc Charts πŸ“Š Data View config, viewing superstore.arrow data file :)

Data Preview Dark

Usage Tips

Data Preview 🈸 Launch Tips

  1. Run View -> Command Palette...>Data: Preview Data command or Ctrl+Shift+D in an open .json .config .env .properties .ini .yml or .csv/.tsv text data file document to launch Data Preview panel.
  2. File -> Save (Ctrl+S) your text data file for immediate updates in an open Data Preview 🈸 panel.
  3. Right-click on a Binary .xlsx/.xlsb, .arrow or .avro data file in VSCode File Explorer to launch Data Preview panel.
  4. Use exposed explorer/context, editor/title or editor/title/context Preview Data 🈸 or Preview Data on Side context menu options to preview your data files.
  5. Click on the Data View Filename toolbar link to Load saved Data View Grid || Chart πŸ“Š .config.
  6. Click on the Data View 🈸 icon to Launch new Data Preview Panel for new view config changes.
  7. Use Open Data File or URL πŸ“€ option from Data View toolbar to launch new Data Preview 🈸.
  8. Run View -> Command Palette...>Data: Preview Remote Data command or Ctrl+Shift+R to launch Data Preview for remote http(s) data files.

Data Preview Open Data File

Data Grid/Filter/Columns UX Tips

  1. Double click on the Grid Column header to Sort data by that column.
  2. Drag and drop a column from the left-side Columns control panel into Filter fields for data filtering (Group By, Split By, Sort, Filter).
  3. Drag columns up and down in the left-side Columns control panel to reorder displayed columns in the Data Grid.
  4. Uncheck a column in the Columns control panel to remove it from a Chart πŸ“Š or Data Grid display.

Usage Scenarios

Use Data Preview 🈸 to:

  • Load large data files for sorting, filtering & charting πŸ“Š
  • Export displayed data in a compact binary .arrow data format, .ods .xlsb || .xlsx spreadsheet format, or .csv .json .yml .md or .properties text formats
  • Preview .properites and other key-value pairs configuration files to reformat them or find set config option values
  • Generate Arrow & Avro .shema.json for metadata text preview of those binary data files
  • Generate .json files for text data preview of binary Excel files
  • Preview Excel files and workbooks with multiple workseets without opening Excel
  • Convert .csv or .tsv data to .json or .yml format
  • Extract, sort, filter and save markdown tables from .md documentation files
  • Use built-in Charts πŸ“Š for Exploratory Data Analysis

Supported JSON, Config, Binary & Excel Data File Formats

Tip: try sample data and Data View .config files from this repository data/... folders: data/arrow data/avro data/config data/excel data/json data/yaml data/large

Vega datasets repository also has a broad collection of sample .csv & .json array data files you can try in Data Preview 🈸

Data Preview 🈸 Files Matching Rules

{
  "when": "resourceFilename =~ /.*\\.(json|json5|hjson|arrow|arr|avro|env|config|properties|ini|yml|md|csv|tsv|txt|tab|dif|ods|xls|xlsb|xlsx|xlsm|xml|html)/",
  "command": "data.preview",
  "group": "navigation"
}

Data Preview 🈸 Files Loading Details

Note: .json .config & .yml configuration files that don't contain array data are converted to flat properties key/value pairs Object and displayed in a Property Grid Data View mode. See json.utils.ts for more info.

Data File Extension(s) File Type Data Parsing Library/Method Used Data Format Specification
.json .config text JSON.parse() https://json.org/
.json5 text json5/JSON5.parse() https://json5.org/
.hjson text hjson-js/Hjson.parse() https://hjson.org/
.arrow .arr binary apache-arrow/Table.from() https://arrow.apache.org/
.avro binary avsc/avro.createFileDecoder() https://avro.apache.org/docs/current/
.properties .env text node-properties/properties.parse() https://en.wikipedia.org/wiki/.properties
.ini text node-properties/properties.parse() https://en.wikipedia.org/wiki/INI_file
.md text RegExp/markdownToCsv() https://en.wikipedia.org/wiki/Markdown
.yml .yaml text js-yaml/yaml.load() https://yaml.org/
.csv .tsv .txt .tab text perspective/perspectiveViewer.load(text) https://en.wikipedia.org/wiki/Comma-separated_values https://en.wikipedia.org/wiki/Tab-separated_values
.dif .ods .xls .xlsb .xlsx .xlsm .xml .html binary/text js-xlsx/XLSX.read() See https://github.com/SheetJS/js-xlsx#file-formats for more info on Excel file formats

See Data Manager API & src/data.providers folder for data loading and saving imlementation details.

Provided Chart πŸ“Š Types

  • Area Chart
  • Bar Chart
  • Candlesick Chart (d3fc only))
  • Heatmap
  • Line Chart
  • OHLC Chart (d3fc only)
  • Scatter Chart
  • Sunburst
  • Tree Map

Data Preview Chart Types

Supported Filter Functions

  • <, <=, ==, !=, >, >= for dates and number columns/fields
  • ==, !=, contains, in, not in, begins with, ends with for string fields and dictionaries
  • &, |, and, or, ==, != for bolean fields

Supported Aggregate Functions

  • any
  • avg
  • count
  • distinct count
  • dominant
  • first by index
  • last by index
  • last
  • high
  • low
  • mean
  • mean by count
  • median
  • pct sum parent
  • pct sum grand total
  • sum
  • sum abs
  • sum not null
  • unique

Recommended VSCode Extensions

Other extensions Data Preview 🈸 replaces, enhances or supplements for working with supported data file formats in VSCode:

Extension Description
Excel Viewer View Excel spreadsheets and CSV files
Avro Viewer .avro file viewer
avro-idl Avro IDL Syntax Highlighter
DotENV .env Syntax Highlighter
Ini for VSCode Provides outline view and section folding for INI files
Hjson Hjson language syntax support
JSON5 syntax Adds syntax highlighting of JSON5 files
YAML YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support
docs-yaml YAML schema validation and auto-completion for docs.microsoft.com authoring
YAML to JSON Convert YAML from clipboard or current document/selection to JSON and vice versa
Properties To Yaml Convert properties to yaml
Markdown Table Prettifier Transforms markdown tables to be more readable

Dev Log

See #DataPreview 🈸 tag on Twitter for the latest and greatest updates on this vscode extension and what's in store next.

Dev Build

$ git clone https://github.com/RandomFractals/vscode-data-preview
$ cd vscode-data-preview
$ npm install
$ code .

F5 to launch Data Preview extension VSCode debug session.

||

vscode-data-preview>vsce package

to generate VSIX Data Preview extension package from our latest for local dev install in VSCode.

Note: Use Help -> Toggle Developer Tools vscode menu option to view Data Preview console log.

Contributions

Any and all test, code or feedback contributions are welcome.

Open an issue or create a pull request to make this Data Preview 🈸 extension work better for all.

Backers

SheetJS Aman Mittal
support me on ko-fi.com
You can’t perform that action at this time.