Skip to content
This repository has been archived by the owner. It is now read-only.
A clean & modern SQL data interface.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Add CodeMirror for syntax highlighting. Fixes #20 Mar 6, 2015
example Mention maps in README Apr 22, 2015
lib First. Feb 7, 2015
src Allow client to be function instead of endpoint, add standalone build Apr 25, 2015
.editorconfig
.gitignore Hide chart if vega throws, add site to gitignore Feb 9, 2015
.jshintrc First. Feb 7, 2015
.npmignore First. Feb 7, 2015
CHANGELOG.md
LICENSE add license title, adjust copyright notice Jan 16, 2017
README.md Update README.md Apr 29, 2015
example_server.js Mention maps in README Apr 22, 2015
index.html Adding the site.js to the index file Jun 28, 2015
package.json 1.5.1 Apr 25, 2015
screenshot.png Add screenshot Feb 9, 2015
site.js Mention maps in README Apr 22, 2015
stickshift.js Allow client to be function instead of endpoint, add standalone build Apr 25, 2015

README.md

stickshift

A clean & modern data interface: SQL queries into JSON, CSV, and charts, done simply.

Features

  • Export query results to JSON & CSV
  • Visualize some query results automatically
  • Share and save queries
  • Responsive on lil' screens

Installation

This project is meant to be run as a server. See Stickshift.app for a version that works as a desktop application.

$ npm install
$ npm start

Open up http://localhost:3000/ and play around: the testing server creates three tables:

fake: random time-series data

select * from fake;

cats: random categorical data

select * from cats;

places: points in france

select * from points;

Then you can configure the server by editing configuration in site.js.

The example in example_server.js talks to SQLite, but you can swap in Postgres/RedShift using the pg module, MySQL using the mysql module, and so on. Or you can even just point stickshift at any URL that accepts queries over POST and returns results as JSON.

Configuration

Stickshift exposes a JavaScript API of the form:

var Stickshift = require('stickshift');

Stickshift(element, {
    // the http(s) endpoint to POST queries to and get results back
    endpoint: '',

    // GitHub access_token, used for saving queries
    token: '',
    // GitHub username, repo, and branch for saving queries.
    username: '',
    // Mapbox public token for maps
    mapboxToken: '',
    repo: '',
    branch: ''
});

Calling Stickshift props up the full interface and router within the given element.

Architecture

stickshift is built with React, Flux, and React-Router. It's written in CommonJS & ES6 and cross-compiled with browserify & babelify. Query storage is powered by hubdb.

Structure:

  • src/components: UI components, like the chart, table, and query interface
  • src/stores: Flux stores for saved queries & transient table information
  • src/constants: Constants for actions, like 'received table results'
  • lib/ d3 & vega, for now, until vega builds are sorted

Bring your own auth

There's no user login system built into stickshift: like your choice of database, this is likely to be specific to your purpose, company, usage, and so on. Some common approaches include:

  • Running it locally or behind a firewall
  • Ditching example_server.js and integrating with a server that does authentication, like through passport. This is what we do at Mapbox.

If you run this on anything but a localhost, it's really best practice to create a read-only user, since this is an interface for doing analysis that should not have permissions to modify data.

Charts

Stickshift automatically creates charts for applicable queries: those that

  • Have at least one column that is parseable as numbers.

The supported chart types are:

  • Time series
    • Lines
    • Stacked bars
  • Categorical
    • Grouped bars
  • Geographical
    • Points

These charts are rendered with Vega. They're designed for exploratory data analysis, so are relatively simple.

Maps are rendered by Mapbox.js with Mapbox tiles.

Development

  • Run npm run develop to continously rebuild source and run Stickshift without a node server.

See Also

  • re:dash is a similar open source project
  • airpal is similar but works with Presto instead of SQL servers
You can’t perform that action at this time.