Commit af871639 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Componetize the legend component

parent 6ed3580b
<script> <script>
import { scaleLinear, scaleTime } from 'd3-scale'; import { scaleLinear, scaleTime } from 'd3-scale';
import { axisLeft, axisBottom } from 'd3-axis'; import { axisLeft, axisBottom } from 'd3-axis';
import _ from 'underscore';
import { max, extent } from 'd3-array'; import { max, extent } from 'd3-array';
import { select } from 'd3-selection'; import { select } from 'd3-selection';
import GraphAxis from './graph/axis.vue'; import GraphAxis from './graph/axis.vue';
...@@ -179,10 +180,12 @@ export default { ...@@ -179,10 +180,12 @@ export default {
this.graphHeightOffset, this.graphHeightOffset,
); );
const axisXScale = d3.scaleTime() if (_.findWhere(this.timeSeries, { renderCanary: true })) {
.range([0, this.graphWidth - 70]); this.timeSeries = this.timeSeries.map(series => ({ ...series, renderCanary: true }));
const axisYScale = d3.scaleLinear() }
.range([this.graphHeight - this.graphHeightOffset, 0]);
const axisXScale = d3.scaleTime().range([0, this.graphWidth - 70]);
const axisYScale = d3.scaleLinear().range([this.graphHeight - this.graphHeightOffset, 0]);
const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []); const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []);
axisXScale.domain(d3.extent(allValues, d => d.time)); axisXScale.domain(d3.extent(allValues, d => d.time));
...@@ -304,7 +307,6 @@ export default { ...@@ -304,7 +307,6 @@ export default {
v-if="showLegend" v-if="showLegend"
:legend-title="legendTitle" :legend-title="legendTitle"
:time-series="timeSeries" :time-series="timeSeries"
:current-data-index="currentDataIndex"
/> />
</div> </div>
</template> </template>
<script> <script>
import { dateFormat, timeFormat } from '../../utils/date_time_formatters'; import { dateFormat, timeFormat } from '../../utils/date_time_formatters';
import { formatRelevantDigits } from '../../../lib/utils/number_utils'; import { formatRelevantDigits } from '../../../lib/utils/number_utils';
import icon from '../../../vue_shared/components/icon.vue'; import Icon from '../../../vue_shared/components/icon.vue';
import TrackLine from './track_line.vue';
export default { export default {
components: { components: {
icon, Icon,
TrackLine,
}, },
props: { props: {
currentXCoordinate: { currentXCoordinate: {
...@@ -107,11 +109,6 @@ export default { ...@@ -107,11 +109,6 @@ export default {
} }
return `series ${index + 1}`; return `series ${index + 1}`;
}, },
strokeDashArray(type) {
if (type === 'dashed') return '6, 3';
if (type === 'dotted') return '3, 3';
return null;
},
}, },
}; };
</script> </script>
...@@ -165,22 +162,7 @@ export default { ...@@ -165,22 +162,7 @@ export default {
v-for="(series, index) in timeSeries" v-for="(series, index) in timeSeries"
:key="index" :key="index"
> >
<td> <track-line :track="series"/>
<svg
width="15"
height="6"
>
<line
:stroke="series.lineColor"
:stroke-dasharray="strokeDashArray(series.lineStyle)"
stroke-width="4"
x1="0"
x2="15"
y1="2"
y2="2"
/>
</svg>
</td>
<td>{{ series.track }} {{ seriesMetricLabel(index, series) }}</td> <td>{{ series.track }} {{ seriesMetricLabel(index, series) }}</td>
<td> <td>
<strong>{{ seriesMetricValue(series) }}</strong> <strong>{{ seriesMetricValue(series) }}</strong>
......
<script> <script>
import { formatRelevantDigits } from '~/lib/utils/number_utils'; import TrackLine from './track_line.vue';
import TrackInfo from './track_info.vue';
export default { export default {
components: {
TrackLine,
TrackInfo,
},
props: { props: {
legendTitle: { legendTitle: {
type: String, type: String,
...@@ -11,21 +16,6 @@ export default { ...@@ -11,21 +16,6 @@ export default {
type: Array, type: Array,
required: true, required: true,
}, },
currentDataIndex: {
type: Number,
required: true,
},
},
methods: {
summaryMetrics(series) {
return `Avg: ${formatRelevantDigits(series.average)} · Max: ${formatRelevantDigits(series.max)}`;
},
strokeDashArray(type) {
if (type === 'dashed') return '6, 3';
if (type === 'dotted') return '3, 3';
return null;
},
}, },
}; };
</script> </script>
...@@ -35,41 +25,37 @@ export default { ...@@ -35,41 +25,37 @@ export default {
<tr <tr
v-for="(series, index) in timeSeries" v-for="(series, index) in timeSeries"
:key="index" :key="index"
v-if="series.shouldRenderLegend"
> >
<td> <td>
<strong>{{ series.track }}</strong> <strong v-if="series.renderCanary">{{ series.trackName }}</strong>
</td>
<td>
<svg
width="15"
height="6"
>
<line
:stroke-dasharray="strokeDashArray(series.lineStyle)"
:stroke="series.lineColor"
stroke-width="4"
:x1="0"
:x2="15"
:y1="2"
:y2="2"
/>
</svg>
</td> </td>
<track-line :track="series" />
<td <td
class="legend-metric-title" class="legend-metric-title"
v-if="timeSeries.length > 1" v-if="timeSeries.length > 1">
> <track-info
<template v-if="series.metricTag"> :track="series"
<strong>{{ series.metricTag }}</strong> {{ summaryMetrics(series) }} v-if="series.metricTag" />
</template> <track-info
<template v-else> v-else
<strong>{{ legendTitle }}</strong> :track="series">
series {{ index + 1 }} {{ summaryMetrics(series) }} <strong>{{ legendTitle }}</strong> series {{ index + 1 }}
</template> </track-info>
</td> </td>
<td v-else> <td v-else>
<strong>{{ legendTitle }}</strong> {{ summaryMetrics(series) }} <track-info :track="series">
<strong>{{ legendTitle }}</strong>
</track-info>
</td> </td>
<template v-for="(track, trackIndex) in series.tracksLegend">
<track-line
:track="track"
:key="`track-line-${trackIndex}`"/>
<td :key="`track-info-${trackIndex}`">
<track-info :track="track" />
</td>
</template>
</tr> </tr>
</table> </table>
</div> </div>
......
<script>
import { formatRelevantDigits } from '~/lib/utils/number_utils';
export default {
name: 'TrackInfo',
props: {
track: {
type: Object,
required: true,
},
},
computed: {
summaryMetrics() {
return `Avg: ${formatRelevantDigits(this.track.average)} · Max: ${formatRelevantDigits(
this.track.max,
)}`;
},
},
};
</script>
<template>
<span>
<slot>
<strong> {{ track.metricTag }} </strong>
</slot>
{{ summaryMetrics }}
</span>
</template>
<script>
export default {
name: 'TrackLine',
props: {
track: {
type: Object,
required: true,
},
},
methods: {
strokeDashArray(type) {
if (type === 'dashed') return '6, 3';
if (type === 'dotted') return '3, 3';
return null;
},
},
};
</script>
<template>
<td>
<svg
width="15"
height="6">
<line
:stroke-dasharray="strokeDashArray(track.lineStyle)"
:stroke="track.lineColor"
stroke-width="4"
:x1="0"
:x2="15"
:y1="2"
:y2="2"
/>
</svg>
</td>
</template>
...@@ -31,6 +31,8 @@ const defaultStyleOrder = ['solid', 'dashed', 'dotted']; ...@@ -31,6 +31,8 @@ const defaultStyleOrder = ['solid', 'dashed', 'dotted'];
function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle) { function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom, yDom, lineStyle) {
let usedColors = []; let usedColors = [];
let renderCanary = false;
const timeSeriesParsed = [];
function pickColor(name) { function pickColor(name) {
let pick; let pick;
...@@ -49,14 +51,19 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom ...@@ -49,14 +51,19 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
return defaultColorPalette[pick]; return defaultColorPalette[pick];
} }
return query.result.map((timeSeries, timeSeriesNumber) => { query.result.forEach((timeSeries, timeSeriesNumber) => {
let metricTag = ''; let metricTag = '';
let lineColor = ''; let lineColor = '';
let areaColor = ''; let areaColor = '';
let shouldRenderLegend = true;
const timeSeriesValues = timeSeries.values.map(d => d.value); const timeSeriesValues = timeSeries.values.map(d => d.value);
const maximumValue = d3.max(timeSeriesValues); const maximumValue = d3.max(timeSeriesValues);
const accum = d3.sum(timeSeriesValues); const accum = d3.sum(timeSeriesValues);
const track = capitalizeFirstCharacter(query.track ? query.track : 'Stable'); const trackName = capitalizeFirstCharacter(query.track ? query.track : 'Stable');
if (trackName === 'Canary') {
renderCanary = true;
}
const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth - 70]); const timeSeriesScaleX = d3.scaleTime().range([0, graphWidth - 70]);
...@@ -90,12 +97,29 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom ...@@ -90,12 +97,29 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
if (seriesCustomizationData) { if (seriesCustomizationData) {
metricTag = seriesCustomizationData.value || timeSeriesMetricLabel; metricTag = seriesCustomizationData.value || timeSeriesMetricLabel;
[lineColor, areaColor] = pickColor(seriesCustomizationData.color); [lineColor, areaColor] = pickColor(seriesCustomizationData.color);
shouldRenderLegend = false;
} else { } else {
metricTag = timeSeriesMetricLabel || query.label || `series ${timeSeriesNumber + 1}`; metricTag = timeSeriesMetricLabel || query.label || `series ${timeSeriesNumber + 1}`;
[lineColor, areaColor] = pickColor(); [lineColor, areaColor] = pickColor();
if (timeSeriesParsed.length > 1) {
shouldRenderLegend = false;
}
} }
return { if (!shouldRenderLegend) {
if (!timeSeriesParsed[0].tracksLegend) {
timeSeriesParsed[0].tracksLegend = [];
}
timeSeriesParsed[0].tracksLegend.push({
max: maximumValue,
average: accum / timeSeries.values.length,
lineStyle,
lineColor,
metricTag,
});
}
timeSeriesParsed.push({
linePath: lineFunction(timeSeries.values), linePath: lineFunction(timeSeries.values),
areaPath: areaFunction(timeSeries.values), areaPath: areaFunction(timeSeries.values),
timeSeriesScaleX, timeSeriesScaleX,
...@@ -106,9 +130,13 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom ...@@ -106,9 +130,13 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
lineColor, lineColor,
areaColor, areaColor,
metricTag, metricTag,
track, trackName,
}; shouldRenderLegend,
renderCanary,
});
}); });
return timeSeriesParsed;
} }
export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) { export default function createTimeSeries(queries, graphWidth, graphHeight, graphHeightOffset) {
......
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