parent
1ac2d037c2
commit
5a90cdb810
|
@ -1,38 +0,0 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import {THRESHOLD_TYPE_BG, THRESHOLD_TYPE_TEXT} from 'shared/constants/thresholds'
|
||||
|
||||
// TODO: Needs major refactoring to make thresholds a much more general component to be shared between single stat, gauge, and table.
|
||||
const GraphOptionsThresholdColoring = ({
|
||||
onToggleThresholdsListType,
|
||||
thresholdsListType,
|
||||
}) => {
|
||||
return (
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label>Threshold Coloring</label>
|
||||
<ul className="nav nav-tablist nav-tablist-sm">
|
||||
<li
|
||||
className={`${thresholdsListType === THRESHOLD_TYPE_BG ? 'active' : ''}`}
|
||||
onClick={onToggleThresholdsListType(THRESHOLD_TYPE_BG)}
|
||||
>
|
||||
Background
|
||||
</li>
|
||||
<li
|
||||
className={`${thresholdsListType === THRESHOLD_TYPE_TEXT ? 'active' : ''}`}
|
||||
onClick={onToggleThresholdsListType(THRESHOLD_TYPE_TEXT)}
|
||||
>
|
||||
Text
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const {func, string} = PropTypes
|
||||
|
||||
GraphOptionsThresholdColoring.propTypes = {
|
||||
thresholdsListType: string,
|
||||
onToggleThresholdsListType: func,
|
||||
}
|
||||
|
||||
export default GraphOptionsThresholdColoring
|
|
@ -1,75 +0,0 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Threshold from 'src/dashboards/components/Threshold'
|
||||
import ColorDropdown from 'shared/components/ColorDropdown'
|
||||
|
||||
import {GAUGE_COLORS, THRESHOLD_TYPE_BASE} from 'shared/constants/thresholds'
|
||||
|
||||
// TODO: Needs major refactoring to make thresholds a much more general component to be shared between single stat, gauge, and table.
|
||||
const GraphOptionsThresholds = ({
|
||||
onAddThreshold,
|
||||
disableAddThreshold,
|
||||
sortedColors,
|
||||
formatColor,
|
||||
onChooseColor,
|
||||
onValidateColorValue,
|
||||
onUpdateColorValue,
|
||||
onDeleteThreshold,
|
||||
}) => {
|
||||
return (
|
||||
<div className="gauge-controls graph-options-group">
|
||||
<label className="form-label">Thresholds</label>
|
||||
<button
|
||||
className="btn btn-sm btn-primary gauge-controls--add-threshold"
|
||||
onClick={onAddThreshold}
|
||||
disabled={disableAddThreshold}
|
||||
>
|
||||
<span className="icon plus" /> Add Threshold
|
||||
</button>
|
||||
{sortedColors.map(
|
||||
color =>
|
||||
color.id === THRESHOLD_TYPE_BASE
|
||||
? <div className="gauge-controls--section" key={color.id}>
|
||||
<div className="gauge-controls--label">Base Color</div>
|
||||
<ColorDropdown
|
||||
colors={GAUGE_COLORS}
|
||||
selected={formatColor(color)}
|
||||
onChoose={onChooseColor(color)}
|
||||
stretchToFit={true}
|
||||
/>
|
||||
</div>
|
||||
: <Threshold
|
||||
visualizationType="single-stat"
|
||||
threshold={color}
|
||||
key={color.id}
|
||||
onChooseColor={onChooseColor}
|
||||
onValidateColorValue={onValidateColorValue}
|
||||
onUpdateColorValue={onUpdateColorValue}
|
||||
onDeleteThreshold={onDeleteThreshold}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const {arrayOf, bool, func, shape, string, number} = PropTypes
|
||||
|
||||
GraphOptionsThresholds.propTypes = {
|
||||
onAddThreshold: func,
|
||||
disableAddThreshold: bool,
|
||||
sortedColors: arrayOf(
|
||||
shape({
|
||||
hex: string,
|
||||
id: string,
|
||||
name: string,
|
||||
type: string,
|
||||
value: number,
|
||||
})
|
||||
),
|
||||
formatColor: func,
|
||||
onChooseColor: func,
|
||||
onValidateColorValue: func,
|
||||
onUpdateColorValue: func,
|
||||
onDeleteThreshold: func,
|
||||
}
|
||||
|
||||
export default GraphOptionsThresholds
|
Loading…
Reference in New Issue