remote/datasette-vega
1
0
Fork 0
mirror of https://github.com/simonw/datasette-vega.git synced 2026-09-27 20:34:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Much improved styling, refs #3

Browse source 
Also reduced chart options to just line, bar, scatter
This commit is contained in:
Simon Willison 2018-06-26 22:27:32 -07:00
commit 8e313ef7bd
3 changed files with 60 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/index.html
View file

@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://latest.datasette.io/-/static/app.css">
<title>Datasette Vega</title>
</head>
<body>

32
src/DatasetteVega.css
View file

@ -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;
}

56
src/DatasetteVega.js
View file

@ -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) ? <form action="" method="GET" id="graphForm">
<div>
<label>Type of chart: <select name="mark" value={this.state.mark} onChange={ev => onChangeSelect("mark", ev)}>
(columns.length > 1) ? <form action="" method="GET" id="graphForm" className="datasette-vega">
<div className="filter-row">
<label>Chart type <div className="select-wrapper"><select name="mark" value={this.state.mark} onChange={ev => onChangeSelect("mark", ev)}>
{this.markOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
</select></label>
</select></div></label>
</div>
<div>
<label>X <select name="x_column" value={this.state.x_column || ''} onChange={ev => onChangeSelect("x_column", ev)}>
<div className="filter-row">
<label>X column <div className="select-wrapper"><select name="x_column" value={this.state.x_column || ''} onChange={ev => onChangeSelect("x_column", ev)}>
{columns.map(column => <option key={column} value={column}>{column}</option>)}
</select></label>
<label>X type: <select name="x_type" value={this.state.x_type} onChange={ev => onChangeSelect("x_type", ev)}>
</select></div></label>
<label>Type <div className="select-wrapper"><select name="x_type" value={this.state.x_type} onChange={ev => onChangeSelect("x_type", ev)}>
{this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
</select></label>
</select></div></label>
</div>
<div>
<label>Y <select name="y_column" value={this.state.y_column || ''} onChange={ev => onChangeSelect("y_column", ev)}>
<div className="filter-row">
<label>Y column <div className="select-wrapper"><select name="y_column" value={this.state.y_column || ''} onChange={ev => onChangeSelect("y_column", ev)}>
{columns.map(column => <option key={column} value={column}>{column}</option>)}
</select></label>
Y type: <select name="y_type" value={this.state.y_type} onChange={ev => onChangeSelect("y_type", ev)}>
</select></div></label>
<label>Type <div className="select-wrapper"><select name="y_type" value={this.state.y_type} onChange={ev => onChangeSelect("y_type", ev)}>
{this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
</select>
</select></div></label>
</div>
<div>
<label>Color <select name="color_column" value={this.state.color_column} onChange={ev => onChangeSelect("color_column", ev)}>
<div className="filter-row">
<label>Color <div className="select-wrapper"><select name="color_column" value={this.state.color_column} onChange={ev => onChangeSelect("color_column", ev)}>
<option value="">-- none --</option>
{columns.map(column => <option key={column} value={column}>{column}</option>)}
</select></label>
<label>Size <select name="size_column" value={this.state.size_column} onChange={ev => onChangeSelect("size_column", ev)}>
</select></div></label>
<label>Size <div className="select-wrapper"><select name="size_column" value={this.state.size_column} onChange={ev => onChangeSelect("size_column", ev)}>
<option value="">-- none --</option>
{columns.map(column => <option key={column} value={column}>{column}</option>)}
</select></label>
</select></div></label>
</div>
<div><button onClick={this.toggleAxis.bind(this)}>Swap X and Y</button></div>
<div><button className="swap-x-y" onClick={this.toggleAxis.bind(this)}>Swap X and Y</button></div>
</form> : null
);
}