Commit 3662f1c0 by Peter Holmberg

getting closer with no thresholds

parent 234095e6
......@@ -29,8 +29,10 @@ export default class Thresholds extends PureComponent<OptionModuleProps, State>
return threshold;
});
// Setting value to a value between the new threshold.
// Setting value to a value between the previous thresholds
const value = newThresholds[index].value - (newThresholds[index].value - newThresholds[index - 1].value) / 2;
// Set a color that lies between the previous thresholds
const color = tinycolor.mix(thresholds[index - 1].color, thresholds[index].color, 50).toRgbString();
this.setState(
......
......@@ -48,10 +48,7 @@ export const defaultProps = {
stat: '',
unit: '',
mappings: [],
thresholds: [
{ index: 0, value: 0, color: BasicGaugeColor.Green, label: 'Min', canRemove: false },
{ index: 1, value: 100, color: BasicGaugeColor.Red, label: 'Max', canRemove: false },
],
thresholds: [],
},
};
......
......@@ -43,9 +43,8 @@ export enum MappingType {
}
export enum BasicGaugeColor {
Green = 'rgba(50, 172, 45, 0.97)',
Orange = 'rgba(237, 129, 40, 0.89)',
Red = 'rgb(212, 74, 58)',
Green = 'lightgreen',
Red = 'red',
}
interface BaseMap {
......
......@@ -34,7 +34,7 @@ export class Gauge extends PureComponent<Props> {
showThresholdMarkers: true,
showThresholdLabels: false,
suffix: '',
thresholds: [{ value: 0, color: BasicGaugeColor.Green }, { value: 100, color: BasicGaugeColor.Red }],
thresholds: [],
unit: 'none',
stat: 'avg',
};
......@@ -136,13 +136,20 @@ export class Gauge extends PureComponent<Props> {
const thresholdMarkersWidth = gaugeWidth / 5;
const thresholdLabelFontSize = fontSize / 2.5;
const formattedThresholds = thresholds.map((threshold, index) => {
const formattedThresholds = [
{ value: minValue, color: BasicGaugeColor.Green },
...thresholds.map((threshold, index) => {
return {
value: threshold.value,
// Hacky way to get correct color for threshold.
color: index === 0 ? threshold.color : thresholds[index - 1].color,
};
});
}),
{
value: maxValue,
color: BasicGaugeColor.Red,
},
];
console.log(formattedThresholds);
......@@ -174,11 +181,7 @@ export class Gauge extends PureComponent<Props> {
value: {
color: this.getFontColor(value),
formatter: () => {
if (timeSeries[0]) {
return this.formatValue(value);
}
return '';
},
font: {
size: fontSize,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment