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"
|
||||
:margin="margin"
|
||||
:measurements="measurements"
|
||||
:area-color-rgb="areaColorRgb"
|
||||
:legend-title="legendTitle"
|
||||
:y-axis-label="yAxisLabel"
|
||||
:time-series="timeSeries"
|
||||
|
@ -249,17 +248,9 @@
|
|||
:key="index"
|
||||
:generated-line-path="path.linePath"
|
||||
:generated-area-path="path.areaPath"
|
||||
:line-color="lineColorRgb"
|
||||
:area-color="areaColorRgb"
|
||||
:line-color="path.lineColor"
|
||||
: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
|
||||
:show-deploy-info="showDeployInfo"
|
||||
:deployment-data="reducedDeploymentData"
|
||||
|
|
|
@ -19,10 +19,6 @@
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
areaColorRgb: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
legendTitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
|
@ -156,7 +152,7 @@
|
|||
:key="index"
|
||||
:transform="translateLegendGroup(index)">
|
||||
<rect
|
||||
:fill="areaColorRgb"
|
||||
:fill="series.areaColor"
|
||||
:width="measurements.legends.width"
|
||||
:height="measurements.legends.height"
|
||||
x="20"
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
:d="generatedLinePath"
|
||||
:stroke="lineColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
stroke-width="1"
|
||||
transform="translate(-5, 20)">
|
||||
</path>
|
||||
</g>
|
||||
|
|
|
@ -12,6 +12,9 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
|
|||
|
||||
const maxValueFromSeries = _.max(maxValues, val => val.maxValue);
|
||||
|
||||
let timeSeriesNumber = 1;
|
||||
let lineColor = '#1f78d1';
|
||||
let areaColor = '#8fbce8';
|
||||
return seriesData.map((timeSeries) => {
|
||||
const timeSeriesScaleX = d3.time.scale()
|
||||
.range([0, graphWidth - 70]);
|
||||
|
@ -32,11 +35,46 @@ export default function createTimeSeries(seriesData, graphWidth, graphHeight, gr
|
|||
.y1(d => timeSeriesScaleY(d.value))
|
||||
.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 {
|
||||
linePath: lineFunction(timeSeries.values),
|
||||
areaPath: areaFunction(timeSeries.values),
|
||||
timeSeriesScaleX,
|
||||
values: timeSeries.values,
|
||||
lineColor,
|
||||
areaColor,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
|
@ -167,7 +167,7 @@
|
|||
}
|
||||
|
||||
.metric-area {
|
||||
opacity: 0.8;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.prometheus-graph-overlay {
|
||||
|
|
|
@ -9,6 +9,8 @@ describe('Multiple time series', () => {
|
|||
expect(typeof timeSeries[0].linePath).toEqual('string');
|
||||
expect(typeof timeSeries[0].areaPath).toEqual('string');
|
||||
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);
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue