DEV Community

Cover image for VSCode Data Preview 🈸 πŸ’Ž for devs around the 🌐
dataPixy πŸ§šβ€β™‚οΈ
dataPixy πŸ§šβ€β™‚οΈ

Posted on

VSCode Data Preview 🈸 πŸ’Ž for devs around the 🌐

#showdev #vscode #data #preview

My vscode Data Preview 🈸 extension just hit 24K installs & closing in on 140K downloads in VS marketplace, beating Azure data crew tools & taking that #1 spot :)

Data Preview Info

Share it with your devs & take it for a spin!

πŸ‘€ this intro post:

tarasnovak image

πŸ“’ #1 Visual Studio Code Data Preview 🈸

dataPixy πŸ§šβ€β™‚οΈ ・ Nov 8 '19 ・ 2 min read

#showdev #vscode #data #preview

& most recent update on that versatile data tool for vscode devs:

tarasnovak image

πŸ“’ VSCode Data Preview 🈸 November 2019 Update

dataPixy πŸ§šβ€β™‚οΈ ・ Nov 14 '19 ・ 1 min read

#showdev #vscode #data #preview

Supported Text & Binary Data Formats ;)

Data File Extension(s) File Type Data Parsing Library/Method Used Data Format Specification
.json .config .jsonl .ndjson 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

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.

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
NDJSON Colorizer Colorizes NDJSON (Newline Delimited JSON) 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.

P.S.: more such tools here :)

tarasnovak image

vsCode dataPixy πŸ§šβ€β™‚οΈ dataViz πŸ“ˆ πŸ“‰ πŸ“Š devTools πŸ”¬

dataPixy πŸ§šβ€β™‚οΈ ・ Nov 11 '19 ・ 1 min read

#showdev #vscode #dataviz #devtools

Top comments (1)

Collapse
 
tarasnovak profile image
dataPixy πŸ§šβ€β™‚οΈ •

dev discuss it here || on twitter :)

...

Read next

dphenomenal profile image

How not to do code reviews

Ibrahim Salami -

viktorle1294 profile image

VS Code saves my life with File Open Timeline feature

Viktor Le -

developpeurtaf profile image

CodeSnap : prendre des captures d'Γ©cran de code dans VS Code

Fabrice -

anis_mer_ profile image

I Built DeployFast – Because I Got Tired of Using Vercel (deployfast.cloud)

Anis Mer_ -