From 8e313ef7bddd6c23a597e95d49712feeaf21169c Mon Sep 17 00:00:00 2001 From: Simon Willison Date: Tue, 26 Jun 2018 22:27:32 -0700 Subject: [PATCH] Much improved styling, refs #3 Also reduced chart options to just line, bar, scatter --- public/index.html | 1 + src/DatasetteVega.css | 32 +++++++++++++++++++++++++ src/DatasetteVega.js | 56 +++++++++++++++++++++---------------------- 3 files changed, 60 insertions(+), 29 deletions(-) diff --git a/public/index.html b/public/index.html index 386993c..0b14e70 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,7 @@ + Datasette Vega diff --git a/src/DatasetteVega.css b/src/DatasetteVega.css index 199ea14..72e246d 100644 --- a/src/DatasetteVega.css +++ b/src/DatasetteVega.css @@ -66,3 +66,35 @@ background-color: #f7f7f9; color: #1b1e23; } + +.datasette-vega { + margin: 1em 0; + padding: 1em; + width: auto; + display: inline-block; + font-size: 0.8em; + box-shadow: 1px 2px 8px 2px rgba(0,0,0,0.08); +} + +.datasette-vega .swap-x-y { + color: #fff; + background-color: #007bff; + border-color: #007bff; + font-weight: 400; + cursor: pointer; + text-align: center; + vertical-align: middle; + border: 1px solid blue; + padding: .5em 0.8em; + line-height: 1; + border-radius: .25rem; + -webkit-appearance: button; + font-size: 0.7em; +} + +form.datasette-vega label { + font-weight: bold; + display: inline; + width: auto; + padding-right: 0.3em; +} diff --git a/src/DatasetteVega.js b/src/DatasetteVega.js index 64ff774..1708921 100644 --- a/src/DatasetteVega.js +++ b/src/DatasetteVega.js @@ -35,17 +35,15 @@ class DatasetteVega extends Component { markOptions = [ {"value": "bar", "name": "bar"}, {"value": "line", "name": "line"}, - {"value": "circle", "name": "circle"}, - {"value": "square", "name": "square"}, - {"value": "point", "name": "point"}, + {"value": "circle", "name": "scatter"}, ] 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)"}, + {"value": "quantitative", "name": "Numeric"}, + {"value": "quantitative-bin", "name": "Numeric, binned"}, + {"value": "temporal", "name": "Date/time"}, + {"value": "temporal-bin", "name": "Date/time, binned"}, + {"value": "ordinal", "name": "Label"}, + {"value": "nominal", "name": "Category"}, ] onChangeSelect(name, ev) { ev.persist(); @@ -157,39 +155,39 @@ class DatasetteVega extends Component { const onChangeSelect = this.onChangeSelect.bind(this); const columns = this.state.columns; return ( - (columns.length > 1) ?
-
- +
-
- -
+ -
- - Y type:
+ -
- -
+ -
+
: null ); }