From 6270de3296f8f897e33076233ac25a783fb71243 Mon Sep 17 00:00:00 2001 From: Simon Willison Date: Mon, 25 Jun 2018 09:12:45 -0700 Subject: [PATCH] First working version --- .gitignore | 24 +++++++ README.md | 3 + package.json | 19 ++++++ public/favicon.ico | Bin 0 -> 3870 bytes public/index.html | 43 ++++++++++++ public/manifest.json | 15 +++++ src/App.css | 68 +++++++++++++++++++ src/App.js | 156 +++++++++++++++++++++++++++++++++++++++++++ src/App.test.js | 9 +++ src/index.css | 5 ++ src/index.js | 23 +++++++ 11 files changed, 365 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 public/manifest.json create mode 100644 src/App.css create mode 100644 src/App.js create mode 100644 src/App.test.js create mode 100644 src/index.css create mode 100644 src/index.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0238662 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +*.pyc +__pycache__ +dist +*.egg-info + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/README.md b/README.md new file mode 100644 index 0000000..3e93a82 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# datasette-vega + +A [Datasette](https://github.com/simonw/datasette) plugin that provides tools for generating charts using [Vega](https://vega.github.io/). diff --git a/package.json b/package.json new file mode 100644 index 0000000..fbdb550 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "datasette-vega", + "version": "0.1.0", + "private": true, + "dependencies": { + "react": "^16.4.1", + "react-dom": "^16.4.1", + "react-scripts": "1.1.4", + "source-map-explorer": "^1.5.0", + "vega-embed": "^3.15.0", + "vega-lib": "^4.0.0-rc.3" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a11777cc471a4344702741ab1c8a588998b1311a GIT binary patch literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..2136c15 --- /dev/null +++ b/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + React App + + + +
+
+
+
+ + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..ef19ec2 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..199ea14 --- /dev/null +++ b/src/App.css @@ -0,0 +1,68 @@ +.vega-embed { + position: relative; + display: inline-block; + padding-right: 38px; +} + +.vega-embed .vega-actions-wrapper { + display: inline-flex; + position: absolute; + top: 0; + right: 0; + padding: 6px; + z-index: 1000; + + opacity: 0.2; + background: white; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); + color: #1b1e23; + border: 1px solid #aaa; + border-radius: 999px; + transition: opacity 0.4s ease-in; +} + +.vega-embed:hover .vega-actions-wrapper { + transition: opacity 0.2s ease; + opacity: 1; +} + +.vega-embed .vega-actions { + position: absolute; + top: 0; + right: 0; + display: none; + flex-direction: column; + + padding-bottom: 8px; + padding-top: 8px; + border-radius: 4px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); + border: 1px solid #d9d9d9; + background: white; +} + +.vega-embed .vega-actions-wrapper:hover { + background: transparent; + color: transparent; + border: none; + box-shadow: none; +} + +.vega-embed .vega-actions-wrapper:hover .vega-actions { + display: flex; +} + +.vega-embed .vega-actions a { + padding: 8px 16px; + font-family: sans-serif; + font-size: 14px; + font-weight: 600; + white-space: nowrap; + color: #434a56; + text-decoration: none; +} + +.vega-embed .vega-actions a:hover { + background-color: #f7f7f9; + color: #1b1e23; +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..1f9dd53 --- /dev/null +++ b/src/App.js @@ -0,0 +1,156 @@ +import React, { Component } from 'react'; +import vegaEmbed from 'vega-embed'; +import './App.css'; + +const serialize = obj => Object.keys(obj).map( + key => obj[key] ? `g.${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}` : '' +).join('&'); + +const unserialize = s => { + if (s && s[0] === '#') { + s = s.slice(1); + } + if (!s) { + return {}; + } + var obj = {}; + s.split('&').forEach(bit => { + let pair = bit.split('='); + obj[decodeURIComponent(pair[0]).replace(/^g\./, '')] = decodeURIComponent(pair[1]); + }); + return obj; +}; + +class App extends Component { + state = { + mark: "bar", + x_column: this.props.columns[0], + x_type: "ordinal", + y_column: this.props.columns[1], + y_type: "quantitative", + color_column: "", + size_column: "" + } + markOptions = [ + {"value": "bar", "name": "bar"}, + {"value": "line", "name": "line"}, + {"value": "circle", "name": "circle"}, + {"value": "square", "name": "square"}, + {"value": "point", "name": "point"}, + ] + typeOptions = [ + {"value": "quantitative", "name": "Numbers (quantitative)"}, + {"value": "quantitative-bin", "name": "Numbers (quantitative), binned"}, + {"value": "temporal", "name": "Dates and times (temporal)"}, + {"value": "temporal-bin", "name": "Dates and times (temporal), binned"}, + {"value": "ordinal", "name": "Labels (ordinal)"}, + {"value": "nominal", "name": "Categories (nominal)"}, + ] + onChangeSelect(name, ev) { + ev.persist(); + window.lastEv = ev; + this.setState({[name]: ev.target.value}, () => { + this.renderGraph(); + }); + } + componentDidMount() { + window.onpopstate = this.onPopStateChange.bind(this); + this.renderGraph(); + } + onPopStateChange(ev) { + window.lastPopEv = ev; + let expected = '#' + serialize(this.state); + if (expected !== document.location.hash) { + this.setState( + unserialize(document.location.hash), this.renderGraph.bind(this) + ); + } + } + renderGraph() { + const x_type = this.state.x_type.split('-bin')[0]; + const y_type = this.state.y_type.split('-bin')[0]; + const x_bin = !!/-bin$/.exec(this.state.x_type); + const y_bin = !!/-bin$/.exec(this.state.y_type); + let encoding = { + x: {field: this.state.x_column, type: x_type, bin: x_bin}, + y: {field: this.state.y_column, type: y_type, bin: y_bin} + } + if (this.state.color_column) { + encoding.color = {field: this.state.color_column, type: "nominal"}; + } + if (this.state.size_column) { + encoding.size = {field: this.state.size_column, type: "quantitative"}; + } + const spec = { + data: { + url: this.props.json_url + }, + mark: this.state.mark, + encoding: encoding + } + if (spec.mark) { + vegaEmbed("#vis", spec, {theme: 'quartz', tooltip: true}); + document.location.hash = '#' + serialize(this.state); + this.setState({spec: spec}); + } + } + toggleAxis(ev) { + ev.preventDefault(); + this.setState(prevState => ({ + x_column: prevState.y_column, + y_column: prevState.x_column, + x_type: prevState.y_type, + y_type: prevState.x_type, + }), this.renderGraph); + } + render() { + const onChangeSelect = this.onChangeSelect.bind(this); + if (!this.state.mark) { + return null; + } + return ( +
+
+ Mark: +
+
+ X column: +
+
+ X type: +
+
+ Y column: +
+
+ Y type: +
+
+ Color column: +
+
+ Size column: +
+
+
+ ); + } +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..a754b20 --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..b4cc725 --- /dev/null +++ b/src/index.css @@ -0,0 +1,5 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..3410be8 --- /dev/null +++ b/src/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; + +ReactDOM.render( + /*, document.getElementById('root') +);