remote/datasette-vega
1
0
Fork 0
mirror of https://github.com/simonw/datasette-vega.git synced 2026-09-28 12:54:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

Final improvements to styling before release announcement

Browse source 
I changed the chart type selector to be radio buttons (Bar, Line, Scatter)
which breaks up the UI. I also added a "Charting options" <h3> title and
tweaked the display of the "Swap X and Y" button.

The design is now good enough that I'm happy to announce it. Closes #3
This commit is contained in:
Simon Willison 2018-06-27 13:21:58 -07:00
commit f1b29c0d8e
2 changed files with 39 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/DatasetteVega.css
View file

@ -75,16 +75,20 @@
font-size: 0.8em;
box-shadow: 1px 2px 8px 2px rgba(0,0,0,0.08);
}
.datasette-vega h3 {
margin-top: 0;
}
.datasette-vega .swap-x-y {
color: #fff;
background-color: #007bff;
border-color: #007bff;
text-align: center;
margin-bottom: 0.6em;
}
.datasette-vega .swap-x-y button {
background-color: #fafafa;
border: 1px solid #ccc;
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;
@ -98,3 +102,16 @@ form.datasette-vega label {
width: auto;
padding-right: 0.3em;
}
form.datasette-vega div {
margin-bottom: 0.3em;
}
.datasette-vega .radio-buttons label {
margin-right: 2em;
display: inline-block;
}
.datasette-vega .radio-buttons {
margin-bottom: 1em;
}

25
src/DatasetteVega.js
View file

@ -33,9 +33,9 @@ class DatasetteVega extends Component {
size_column: ""
}
markOptions = [
{"value": "bar", "name": "bar"},
{"value": "line", "name": "line"},
{"value": "circle", "name": "scatter"},
{"value": "bar", "name": "Bar"},
{"value": "line", "name": "Line"},
{"value": "circle", "name": "Scatter"},
]
typeOptions = [
{"value": "quantitative", "name": "Numeric"},
@ -161,10 +161,17 @@ class DatasetteVega extends Component {
const columns = this.state.columns;
return (
(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></div></label>
<h3>Charting options</h3>
<div className="filter-row radio-buttons">
{this.markOptions.map(option => (
<label key={option.value} value={option.value}><input
type="radio"
name="mark"
value={option.value}
checked={option.value === this.state.mark}
onChange={ev => onChangeSelect("mark", ev)}
/> {option.name}</label>
))}
</div>
<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)}>
@ -182,6 +189,9 @@ class DatasetteVega extends Component {
{this.typeOptions.map(option => <option key={option.value} value={option.value}>{option.name}</option>)}
</select></div></label>
</div>
<div className="swap-x-y">
<button onClick={this.toggleAxis.bind(this)}>Swap X and Y</button>
</div>
<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>
@ -192,7 +202,6 @@ class DatasetteVega extends Component {
{columns.map(column => <option key={column} value={column}>{column}</option>)}
</select></div></label>
</div>
<div><button className="swap-x-y" onClick={this.toggleAxis.bind(this)}>Swap X and Y</button></div>
</form> : null
);
}