Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add UI scaffolding for more axis controls

pull/1714/head
Alex P 2017-08-01 11:31:56 -07:00
parent e36108bfd3
commit e19817e330
2 changed files with 54 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
ui/src/dashboards/components/Ranger.js
View File

@ -8,7 +8,34 @@ const Ranger = ({onSetRange, axes}) => {
return (
<div className="display-options--cell">
<h5 className="display-options--header">Y Axis Controls</h5>
<form autoComplete="off">
<form autoComplete="off" style={{margin: '0 -6px'}}>
<div className="form-group col-sm-3">
<label htmlFor="prefix">Prefix</label>
<input
className="form-control input-sm"
type="text"
name="prefix"
id="prefix"
/>
</div>
<div className="form-group col-sm-6">
<label htmlFor="prefix">Label</label>
<input
className="form-control input-sm"
type="text"
name="label"
id="label"
/>
</div>
<div className="form-group col-sm-3">
<label htmlFor="prefix">Suffix</label>
<input
className="form-control input-sm"
type="text"
name="suffix"
id="suffix"
/>
</div>
<div className="form-group col-sm-6">
<label htmlFor="min">Min</label>
<input
@ -33,6 +60,20 @@ const Ranger = ({onSetRange, axes}) => {
placeholder="auto"
/>
</div>
<div className="form-group col-sm-6">
<label>Units</label>
<ul className="nav nav-tablist nav-tablist-sm">
<li className="active">Base 10</li>
<li>Base 2</li>
</ul>
</div>
<div className="form-group col-sm-6">
<label>Scale</label>
<ul className="nav nav-tablist nav-tablist-sm">
<li className="active">Linear</li>
<li>Logarithmic</li>
</ul>
</div>
</form>
</div>
)

21
ui/src/style/components/ceo-display-options.scss
View File

@ -30,15 +30,6 @@
color: $g11-sidewalk;
@include no-user-select();
}
.display-options--row {
display: flex;
align-items: center;
flex-wrap: nowrap;
margin-bottom: 8px;
label { margin: 0; }
input { flex: 1 0 0; }
}
.viz-type-selector {
@ -138,3 +129,15 @@
.viz-type-selector--graphic-fill.graphic-fill-b,
.viz-type-selector--graphic-fill.graphic-fill-c {opacity: 0.18;}
}
.display-options--cell .form-group .nav.nav-tablist {
display: flex;
width: 100%;
> li {
flex: 1 0 0;
justify-content: center;
}
}