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

Refactor sorting and ordering

pull/10616/head
Andrew Watkins 2017-06-28 15:07:26 -07:00
parent f0728264db
commit 617f62da52
2 changed files with 64 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/src/shared/components/Dygraph.js
View File

@ -19,7 +19,7 @@ export default class Dygraph extends Component {
x: null,
series: [],
},
sortType: null,
sortType: '',
legendOrder: 'asc',
filterText: '',
}
@ -44,19 +44,14 @@ export default class Dygraph extends Component {
}
handleSortLegend(sortType) {
const {legend, legendOrder} = this.state
const series = this.sortByType(legend.series, sortType)
if (legendOrder === 'asc') {
if (this.state.legendOrder === 'asc') {
return this.setState({
legend: {...legend, series: series.reverse()},
sortType,
legendOrder: 'desc',
})
}
this.setState({
legend: {...legend, series},
sortType,
legendOrder: 'asc',
})
@ -66,21 +61,6 @@ export default class Dygraph extends Component {
this.setState({filterText: e.target.value})
}
sortByType(list, sortType, order) {
if (!sortType) {
return list
}
const orderFunc = ({y, label}) => (sortType === 'numeric' ? y : label)
const orderedList = _.sortBy(list, orderFunc)
if (order === 'desc') {
return orderedList.reverse()
}
return orderedList
}
componentDidMount() {
const timeSeries = this.getTimeSeries()
// dygraphSeries is a legend label and its corresponding y-axis e.g. {legendLabel1: 'y', legendLabel2: 'y2'};
@ -139,14 +119,11 @@ export default class Dygraph extends Component {
return ''
}
const {state, sortByType} = dygraphComponent
const {legendOrder, sortType} = state
if (legend.x === state.legend.x) {
if (legend.x === dygraphComponent.state.legend.x) {
return ''
}
const orderedSeries = sortByType(legend.series, sortType, legendOrder)
dygraphComponent.setState({legend: {...legend, series: orderedSeries}})
dygraphComponent.setState({legend})
return ''
},
}
@ -208,7 +185,6 @@ export default class Dygraph extends Component {
}
const timeSeries = this.getTimeSeries()
const dygraphComponent = this // eslint-disable-line consistent-this
dygraph.updateOptions({
labels,
@ -226,23 +202,6 @@ export default class Dygraph extends Component {
underlayCallback: options.underlayCallback,
series: dygraphSeries,
plotter: isBarGraph ? multiColumnBarPlotter : null,
legendFormatter: legend => {
if (!legend.x) {
return ''
}
const {state, sortByType} = dygraphComponent
const {sortType, legendOrder} = state
if (legend.x === state.legend.x) {
return ''
}
const orderedSeries = sortByType(legend.series, sortType, legendOrder)
dygraphComponent.setState({
legend: {...legend, series: orderedSeries},
})
return ''
},
})
// part of optional workaround for preventing updateOptions from breaking legend
@ -262,7 +221,7 @@ export default class Dygraph extends Component {
}
render() {
const {legend, filterText} = this.state
const {legend, filterText, legendOrder, sortType} = this.state
return (
<div className="dygraph-child">
@ -271,6 +230,8 @@ export default class Dygraph extends Component {
onSort={this.handleSortLegend}
onInputChange={this.handleLegendInputChange}
filterText={filterText}
sortOrder={legendOrder}
sortType={sortType}
/>
<div
ref={r => {

100
ui/src/shared/components/DygraphLegend.js
View File

@ -1,49 +1,61 @@
import React, {PropTypes} from 'react'
import _ from 'lodash'
const DygraphLegend = ({series, onSort, filterText, onInputChange}) => (
<div style={{userSelect: 'text'}} className="container--dygraph-legend">
<div className="dygraph-legend--header">
<input
className="form-control input-xs"
type="text"
value={filterText}
onChange={onInputChange}
/>
<button
className="btn btn-primary btn-xs"
onClick={() => onSort('alphabetic')}
>
A-Z
</button>
<button
className="btn btn-primary btn-xs"
onClick={() => onSort('numeric')}
>
0-9
</button>
const DygraphLegend = ({
series,
onSort,
filterText,
onInputChange,
sortOrder,
sortType,
}) => {
const sorted = _.sortBy(
series,
({y, label}) => (sortType === 'numeric' ? y : label)
)
const ordered = sortOrder === 'desc' ? sorted.reverse() : sorted
const filtered = ordered.filter(s => s.label.match(filterText))
return (
<div style={{userSelect: 'text'}} className="container--dygraph-legend">
<div className="dygraph-legend--header">
<input
className="form-control input-xs"
type="text"
value={filterText}
onChange={onInputChange}
/>
<button
className="btn btn-primary btn-xs"
onClick={() => onSort('alphabetic')}
>
A-Z
</button>
<button
className="btn btn-primary btn-xs"
onClick={() => onSort('numeric')}
>
0-9
</button>
</div>
<div className="dygraph-legend--contents">
{filtered.map(({label, color, yHTML, isHighlighted}) => {
return (
<span key={label + color}>
<b>
<span
style={{color, fontWeight: isHighlighted ? 'bold' : 'normal'}}
>
{label}: {yHTML || 'no value'}
</span>
</b>
</span>
)
})}
</div>
</div>
<div className="dygraph-legend--contents">
{series.filter(s => s.label.match(filterText)).map(({
label,
color,
yHTML,
isHighlighted,
}) => {
return (
<span key={label + color}>
<b>
<span
style={{color, fontWeight: isHighlighted ? 'bold' : 'normal'}}
>
{label}: {yHTML}
</span>
</b>
</span>
)
})}
</div>
</div>
)
)
}
const {arrayOf, bool, func, number, shape, string} = PropTypes
@ -64,6 +76,8 @@ DygraphLegend.propTypes = {
onSort: func.isRequired,
onInputChange: func.isRequired,
filterText: string.isRequired,
sortOrder: string.isRequired,
sortType: string.isRequired,
}
export default DygraphLegend