Commit 290217d5 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Improved color selector and addressed observations

parent ce27b99f
import d3 from 'd3'; import d3 from 'd3';
import _ from 'underscore'; import _ from 'underscore';
function pickColorFromNameNumber(colorName, colorNumber) { const defaultColorPalette = {
let lineColor = ''; blue: ['#1f78d1', '#8fbce8'],
let areaColor = ''; orange: ['#fc9403', '#feca81'],
const color = colorName != null ? colorName : colorNumber; red: ['#db3b21', '#ed9d90'],
switch (color) { green: ['#1aaa55', '#8dd5aa'],
case 'blue': purple: ['#6666c4', '#d1d1f0'],
case 1: };
lineColor = '#1f78d1';
areaColor = '#8fbce8';
break;
case 'orange':
case 2:
lineColor = '#fc9403';
areaColor = '#feca81';
break;
case 'red':
case 3:
lineColor = '#db3b21';
areaColor = '#ed9d90';
break;
case 'green':
case 4:
lineColor = '#1aaa55';
areaColor = '#8dd5aa';
break;
case 'purple':
case 5:
lineColor = '#6666c4';
areaColor = '#d1d1f0';
break;
default:
lineColor = '#1f78d1';
areaColor = '#8fbce8';
break;
}
return { const defaultColorOrder = ['blue', 'orange', 'red', 'green', 'purple'];
lineColor, let usedColors = [];
areaColor, function pickColor(name) {
}; let pick;
if (name && defaultColorPalette[name]) {
pick = name;
} else {
const unusedColors = _.difference(defaultColorOrder, usedColors);
if (unusedColors.length > 0) {
pick = unusedColors[0];
} else {
usedColors = [];
pick = defaultColorOrder[0];
}
}
usedColors.push(pick);
return defaultColorPalette[pick];
} }
export default function createTimeSeries(queryData, graphWidth, graphHeight, graphHeightOffset) { export default function createTimeSeries(queryData, graphWidth, graphHeight, graphHeightOffset) {
...@@ -56,9 +41,10 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra ...@@ -56,9 +41,10 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra
let timeSeriesNumber = 1; let timeSeriesNumber = 1;
return queryData.result.map((timeSeries, index) => { return queryData.result.map((timeSeries) => {
let metricTag = ''; let metricTag = '';
let pathColors = null; let lineColor = '#1f78d1';
let areaColor = '#8fbce8';
const timeSeriesScaleX = d3.time.scale() const timeSeriesScaleX = d3.time.scale()
.range([0, graphWidth - 70]); .range([0, graphWidth - 70]);
...@@ -70,33 +56,33 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra ...@@ -70,33 +56,33 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra
timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]); timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]);
const lineFunction = d3.svg.line() const lineFunction = d3.svg.line()
.interpolate('step-before') .interpolate('linear')
.x(d => timeSeriesScaleX(d.time)) .x(d => timeSeriesScaleX(d.time))
.y(d => timeSeriesScaleY(d.value)); .y(d => timeSeriesScaleY(d.value));
const areaFunction = d3.svg.area() const areaFunction = d3.svg.area()
.interpolate('step-before') .interpolate('linear')
.x(d => timeSeriesScaleX(d.time)) .x(d => timeSeriesScaleX(d.time))
.y0(graphHeight - graphHeightOffset) .y0(graphHeight - graphHeightOffset)
.y1(d => timeSeriesScaleY(d.value)); .y1(d => timeSeriesScaleY(d.value));
if (queryData.series != null) { if (queryData.series != null) {
const seriesCustomizationData = queryData.series[index];
const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]]; const timeSeriesMetricLabel = timeSeries.metric[Object.keys(timeSeries.metric)[0]];
const seriesCustomizationData = _.findWhere(queryData.series[0].series,
{ value: timeSeriesMetricLabel });
if (seriesCustomizationData != null) { if (seriesCustomizationData != null) {
metricTag = seriesCustomizationData.value || timeSeriesMetricLabel; metricTag = seriesCustomizationData.value || timeSeriesMetricLabel;
if (seriesCustomizationData.color != null) { if (seriesCustomizationData.color != null) {
pathColors = pickColorFromNameNumber(seriesCustomizationData.color.toLowerCase(), null); [lineColor, areaColor] = pickColor(seriesCustomizationData.color);
} else {
[lineColor, areaColor] = pickColor();
} }
} else { } else {
metricTag = timeSeriesMetricLabel || `series ${timeSeriesNumber}`; metricTag = timeSeriesMetricLabel || `series ${timeSeriesNumber}`;
[lineColor, areaColor] = pickColor();
} }
} }
if (pathColors == null) {
pathColors = pickColorFromNameNumber(null, timeSeriesNumber);
}
if (timeSeriesNumber <= 5) { if (timeSeriesNumber <= 5) {
timeSeriesNumber = timeSeriesNumber += 1; timeSeriesNumber = timeSeriesNumber += 1;
} else { } else {
...@@ -108,7 +94,8 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra ...@@ -108,7 +94,8 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra
areaPath: areaFunction(timeSeries.values), areaPath: areaFunction(timeSeries.values),
timeSeriesScaleX, timeSeriesScaleX,
values: timeSeries.values, values: timeSeries.values,
...pathColors, lineColor,
areaColor,
metricTag, metricTag,
}; };
}); });
......
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