Added simple support for multiple colors on the different time series
This commit is contained in:
parent
dd7d691f50
commit
05a77e79b8
|
@ -233,7 +233,6 @@
|
||||||
:graph-height="graphHeight"
|
:graph-height="graphHeight"
|
||||||
:margin="margin"
|
:margin="margin"
|
||||||
:measurements="measurements"
|
:measurements="measurements"
|
||||||
:area-color-rgb="areaColorRgb"
|
|
||||||
:legend-title="legendTitle"
|
:legend-title="legendTitle"
|
||||||
:y-axis-label="yAxisLabel"
|
:y-axis-label="yAxisLabel"
|
||||||
:time-series="timeSeries"
|
:time-series="timeSeries"
|
||||||
|
@ -249,17 +248,9 @@
|
||||||
:key="index"
|
:key="index"
|
||||||
:generated-line-path="path.linePath"
|
:generated-line-path="path.linePath"
|
||||||
:generated-area-path="path.areaPath"
|
:generated-area-path="path.areaPath"
|
||||||
:line-color="lineColorRgb"
|
:line-color="path.lineColor"
|
||||||
:area-color="areaColorRgb"
|
:area-color="path.areaColor"
|
||||||
/>
|
/>
|
||||||
<rect
|
|
||||||
class="prometheus-graph-overlay"
|
|
||||||
:width="(graphWidth - 70)"
|
|
||||||
:height="(graphHeight - 100)"
|
|
||||||
transform="translate(-5, 20)"
|
|
||||||
ref="graphOverlay"
|
|
||||||
@mousemove="handleMouseOverGraph($event)">
|
|
||||||
</rect>
|
|
||||||
<monitoring-deployment
|
<monitoring-deployment
|
||||||
:show-deploy-info="showDeployInfo"
|
:show-deploy-info="showDeployInfo"
|
||||||
:deployment-data="reducedDeploymentData"
|
:deployment-data="reducedDeploymentData"
|
||||||
|
|
|
@ -19,10 +19,6 @@
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
areaColorRgb: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
legendTitle: {
|
legendTitle: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
|
@ -156,7 +152,7 @@
|
||||||
:key="index"
|
:key="index"
|
||||||
:transform="translateLegendGroup(index)">
|
:transform="translateLegendGroup(index)">
|
||||||
<rect
|
<rect
|
||||||
:fill="areaColorRgb"
|
:fill="series.areaColor"
|
||||||
:width="measurements.legends.width"
|
:width="measurements.legends.width"
|
||||||
:height="measurements.legends.height"
|
:height="measurements.legends.height"
|
||||||
x="20"
|
x="20"
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
:d="generatedLinePath"
|
:d="generatedLinePath"
|
||||||
:stroke="lineColor"
|
:stroke="lineColor"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke-width="2"
|
stroke-width="1"
|
||||||
transform="translate(-5, 20)">
|
transform="translate(-5, 20)">
|
||||||
</path>
|
</path>
|
||||||
</g>
|
</g>
|
||||||
|
|
|
@ -12,6 +12,9 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
|
||||||
|
|
||||||
const maxValueFromSeries = _.max(maxValues, val => val.maxValue);
|
const maxValueFromSeries = _.max(maxValues, val => val.maxValue);
|
||||||
|
|
||||||
|
let timeSeriesNumber = 1;
|
||||||
|
let lineColor = '#1f78d1';
|
||||||
|
let areaColor = '#8fbce8';
|
||||||
return seriesData.map((timeSeries) => {
|
return seriesData.map((timeSeries) => {
|
||||||
const timeSeriesScaleX = d3.time.scale()
|
const timeSeriesScaleX = d3.time.scale()
|
||||||
.range([0, graphWidth - 70]);
|
.range([0, graphWidth - 70]);
|
||||||
|
@ -32,11 +35,46 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
|
||||||
.y1(d => timeSeriesScaleY(d.value))
|
.y1(d => timeSeriesScaleY(d.value))
|
||||||
.interpolate('linear');
|
.interpolate('linear');
|
||||||
|
|
||||||
|
switch (timeSeriesNumber) {
|
||||||
|
case 1:
|
||||||
|
lineColor = '#1f78d1';
|
||||||
|
areaColor = '#8fbce8';
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
lineColor = '#fc9403';
|
||||||
|
areaColor = '#feca81';
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
lineColor = '#db3b21';
|
||||||
|
areaColor = '#ed9d90';
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
lineColor = '#1aaa55';
|
||||||
|
areaColor = '#8dd5aa';
|
||||||
|
break;
|
||||||
|
case 5:
|
||||||
|
lineColor = '#6666c4';
|
||||||
|
areaColor = '#d1d1f0';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
lineColor = '#1f78d1';
|
||||||
|
areaColor = '#8fbce8';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (timeSeriesNumber <= 5) {
|
||||||
|
timeSeriesNumber = timeSeriesNumber += 1;
|
||||||
|
} else {
|
||||||
|
timeSeriesNumber = 1;
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
linePath: lineFunction(timeSeries.values),
|
linePath: lineFunction(timeSeries.values),
|
||||||
areaPath: areaFunction(timeSeries.values),
|
areaPath: areaFunction(timeSeries.values),
|
||||||
timeSeriesScaleX,
|
timeSeriesScaleX,
|
||||||
values: timeSeries.values,
|
values: timeSeries.values,
|
||||||
|
lineColor,
|
||||||
|
areaColor,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -167,7 +167,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-area {
|
.metric-area {
|
||||||
opacity: 0.8;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prometheus-graph-overlay {
|
.prometheus-graph-overlay {
|
||||||
|
|
|
@ -9,6 +9,8 @@ describe('Multiple time series', () => {
|
||||||
expect(typeof timeSeries[0].linePath).toEqual('string');
|
expect(typeof timeSeries[0].linePath).toEqual('string');
|
||||||
expect(typeof timeSeries[0].areaPath).toEqual('string');
|
expect(typeof timeSeries[0].areaPath).toEqual('string');
|
||||||
expect(typeof timeSeries[0].timeSeriesScaleX).toEqual('function');
|
expect(typeof timeSeries[0].timeSeriesScaleX).toEqual('function');
|
||||||
|
expect(typeof timeSeries[0].areaColor).toEqual('string');
|
||||||
|
expect(typeof timeSeries[0].lineColor).toEqual('string');
|
||||||
expect(timeSeries[0].values instanceof Array).toEqual(true);
|
expect(timeSeries[0].values instanceof Array).toEqual(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue