Restore line rendering in point series vis using percentile agg (#35649)
Restores the visualization's line rendering when using a multi metric aggregation like percentile. Before this fix only dots were rendered fixes #34858
This commit is contained in:
Matthias Wilhelm
GitHub
parent
fc40156ed1
commit
efe91c3be0
|
|
@ -21,6 +21,8 @@ import ngMock from 'ng_mock';
|
|||
import expect from '@kbn/expect';
|
||||
import stackedSeries from 'fixtures/vislib/mock_data/date_histogram/_stacked_series';
|
||||
import { VislibTypesPointSeries } from '../../../lib/types/point_series';
|
||||
import percentileTestdata from './testdata_linechart_percentile.json';
|
||||
import percentileTestdataResult from './testdata_linechart_percentile_result.json';
|
||||
|
||||
describe('Point Series Config Type Class Test Suite', function () {
|
||||
let pointSeriesConfig;
|
||||
|
|
@ -123,6 +125,20 @@ describe('Point Series Config Type Class Test Suite', function () {
|
|||
});
|
||||
});
|
||||
|
||||
describe('line chart', function () {
|
||||
beforeEach(function () {
|
||||
const percentileDataObj = {
|
||||
get: (prop) => { return data[prop] || data.data[prop] || null; },
|
||||
getLabels: () => [],
|
||||
data: percentileTestdata.data
|
||||
};
|
||||
parsedConfig = pointSeriesConfig.line(percentileTestdata.cfg, percentileDataObj);
|
||||
});
|
||||
it('should render a percentile line chart', function () {
|
||||
expect(JSON.stringify(parsedConfig)).to.eql(JSON.stringify(percentileTestdataResult));
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('heatmap chart', function () {
|
||||
beforeEach(function () {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,464 @@
|
|||
{
|
||||
"cfg": {
|
||||
"addLegend": true,
|
||||
"addTimeMarker": false,
|
||||
"addTooltip": true,
|
||||
"categoryAxes": [
|
||||
{
|
||||
"id": "CategoryAxis-1",
|
||||
"labels": {
|
||||
"show": true,
|
||||
"truncate": 100
|
||||
},
|
||||
"position": "bottom",
|
||||
"scale": {
|
||||
"type": "linear"
|
||||
},
|
||||
"show": true,
|
||||
"style": {},
|
||||
"title": {},
|
||||
"type": "category"
|
||||
}
|
||||
],
|
||||
"dimensions": {
|
||||
"x": {
|
||||
"accessor": 0,
|
||||
"format": {
|
||||
"id": "date",
|
||||
"params": {
|
||||
"pattern": "YYYY-MM-DD"
|
||||
}
|
||||
},
|
||||
"params": {
|
||||
"date": true,
|
||||
"interval": "P1D",
|
||||
"format": "YYYY-MM-DD",
|
||||
"bounds": {
|
||||
"min": "2019-05-10T04:00:00.000Z",
|
||||
"max": "2019-05-12T10:18:57.342Z"
|
||||
}
|
||||
},
|
||||
"aggType": "date_histogram"
|
||||
},
|
||||
"y": [
|
||||
{
|
||||
"accessor": 1,
|
||||
"format": {
|
||||
"id": "number",
|
||||
"params": {
|
||||
"pattern": "$0,0.[00]"
|
||||
}
|
||||
},
|
||||
"params": {},
|
||||
"aggType": "percentiles"
|
||||
},
|
||||
{
|
||||
"accessor": 2,
|
||||
"format": {
|
||||
"id": "number",
|
||||
"params": {
|
||||
"pattern": "$0,0.[00]"
|
||||
}
|
||||
},
|
||||
"params": {},
|
||||
"aggType": "percentiles"
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"categoryLines": false,
|
||||
"style": {
|
||||
"color": "#eee"
|
||||
}
|
||||
},
|
||||
"legendPosition": "right",
|
||||
"seriesParams": [
|
||||
{
|
||||
"data": {
|
||||
"id": "1",
|
||||
"label": "Percentiles of AvgTicketPrice"
|
||||
},
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "cardinal",
|
||||
"mode": "normal",
|
||||
"show": "true",
|
||||
"showCircles": true,
|
||||
"type": "line",
|
||||
"valueAxis": "ValueAxis-1"
|
||||
}
|
||||
],
|
||||
"times": [],
|
||||
"type": "area",
|
||||
"valueAxes": [
|
||||
{
|
||||
"id": "ValueAxis-1",
|
||||
"labels": {
|
||||
"filter": false,
|
||||
"rotate": 0,
|
||||
"show": true,
|
||||
"truncate": 100
|
||||
},
|
||||
"name": "LeftAxis-1",
|
||||
"position": "left",
|
||||
"scale": {
|
||||
"mode": "normal",
|
||||
"type": "linear"
|
||||
},
|
||||
"show": true,
|
||||
"style": {},
|
||||
"title": {
|
||||
"text": "Percentiles of AvgTicketPrice"
|
||||
},
|
||||
"type": "value"
|
||||
}
|
||||
]
|
||||
},
|
||||
"data": {
|
||||
"uiState": {},
|
||||
"data": {
|
||||
"xAxisOrderedValues": [
|
||||
1557460800000,
|
||||
1557547200000
|
||||
],
|
||||
"xAxisFormat": {
|
||||
"id": "date",
|
||||
"params": {
|
||||
"pattern": "YYYY-MM-DD"
|
||||
}
|
||||
},
|
||||
"xAxisLabel": "timestamp per day",
|
||||
"ordered": {
|
||||
"interval": "P1D",
|
||||
"date": true,
|
||||
"min": 1557460800000,
|
||||
"max": 1557656337342
|
||||
},
|
||||
"yAxisFormat": {
|
||||
"id": "number",
|
||||
"params": {
|
||||
"pattern": "$0,0.[00]"
|
||||
}
|
||||
},
|
||||
"yAxisLabel": "",
|
||||
"series": [
|
||||
{
|
||||
"id": "1.1",
|
||||
"rawId": "col-1-1.1",
|
||||
"label": "1st percentile of AvgTicketPrice",
|
||||
"values": [
|
||||
{
|
||||
"x": 1557460800000,
|
||||
"y": 116.33676605224609,
|
||||
"extraMetrics": [],
|
||||
"xRaw": {
|
||||
"table": {
|
||||
"columns": [
|
||||
{
|
||||
"id": "col-0-2",
|
||||
"name": "timestamp per day"
|
||||
},
|
||||
{
|
||||
"id": "col-1-1.1",
|
||||
"name": "1st percentile of AvgTicketPrice"
|
||||
},
|
||||
{
|
||||
"id": "col-2-1.50",
|
||||
"name": "50th percentile of AvgTicketPrice"
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"col-0-2": 1557460800000,
|
||||
"col-1-1.1": 116,
|
||||
"col-2-1.50": 658
|
||||
},
|
||||
{
|
||||
"col-0-2": 1557547200000,
|
||||
"col-1-1.1": 223,
|
||||
"col-2-1.50": 756
|
||||
}
|
||||
]
|
||||
},
|
||||
"column": 0,
|
||||
"row": 0,
|
||||
"value": 1557460800000
|
||||
},
|
||||
"yRaw": {
|
||||
"table": {
|
||||
"columns": [
|
||||
{
|
||||
"id": "col-0-2",
|
||||
"name": "timestamp per day"
|
||||
},
|
||||
{
|
||||
"id": "col-1-1.1",
|
||||
"name": "1st percentile of AvgTicketPrice"
|
||||
},
|
||||
{
|
||||
"id": "col-2-1.50",
|
||||
"name": "50th percentile of AvgTicketPrice"
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"col-0-2": 1557460800000,
|
||||
"col-1-1.1": 116,
|
||||
"col-2-1.50": 658
|
||||
},
|
||||
{
|
||||
"col-0-2": 1557547200000,
|
||||
"col-1-1.1": 223,
|
||||
"col-2-1.50": 756
|
||||
}
|
||||
]
|
||||
},
|
||||
"column": 1,
|
||||
"row": 0,
|
||||
"value": 116.33676605224609
|
||||
},
|
||||
"parent": null,
|
||||
"series": "1st percentile of AvgTicketPrice",
|
||||
"seriesId": "col-1-1.1"
|
||||
},
|
||||
{
|
||||
"x": 1557547200000,
|
||||
"y": 223,
|
||||
"extraMetrics": [],
|
||||
"xRaw": {
|
||||
"table": {
|
||||
"columns": [
|
||||
{
|
||||
"id": "col-0-2",
|
||||
"name": "timestamp per day"
|
||||
},
|
||||
{
|
||||
"id": "col-1-1.1",
|
||||
"name": "1st percentile of AvgTicketPrice"
|
||||
},
|
||||
{
|
||||
"id": "col-2-1.50",
|
||||
"name": "50th percentile of AvgTicketPrice"
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"col-0-2": 1557460800000,
|
||||
"col-1-1.1": 116,
|
||||
"col-2-1.50": 658
|
||||
},
|
||||
{
|
||||
"col-0-2": 1557547200000,
|
||||
"col-1-1.1": 223,
|
||||
"col-2-1.50": 756
|
||||
}
|
||||
]
|
||||
},
|
||||
"column": 0,
|
||||
"row": 1,
|
||||
"value": 1557547200000
|
||||
},
|
||||
"yRaw": {
|
||||
"table": {
|
||||
"columns": [
|
||||
{
|
||||
"id": "col-0-2",
|
||||
"name": "timestamp per day"
|
||||
},
|
||||
{
|
||||
"id": "col-1-1.1",
|
||||
"name": "1st percentile of AvgTicketPrice"
|
||||
},
|
||||
{
|
||||
"id": "col-2-1.50",
|
||||
"name": "50th percentile of AvgTicketPrice"
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"col-0-2": 1557460800000,
|
||||
"col-1-1.1": 116,
|
||||
"col-2-1.50": 658
|
||||
},
|
||||
{
|
||||
"col-0-2": 1557547200000,
|
||||
"col-1-1.1": 223,
|
||||
"col-2-1.50": 756
|
||||
}
|
||||
]
|
||||
},
|
||||
"column": 1,
|
||||
"row": 1,
|
||||
"value": 223
|
||||
},
|
||||
"parent": null,
|
||||
"series": "1st percentile of AvgTicketPrice",
|
||||
"seriesId": "col-1-1.1"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "1.50",
|
||||
"rawId": "col-2-1.50",
|
||||
"label": "50th percentile of AvgTicketPrice",
|
||||
"values": [
|
||||
{
|
||||
"x": 1557460800000,
|
||||
"y": 658.8453063964844,
|
||||
"extraMetrics": [],
|
||||
"xRaw": {
|
||||
"table": {
|
||||
"columns": [
|
||||
{
|
||||
"id": "col-0-2",
|
||||
"name": "timestamp per day"
|
||||
},
|
||||
{
|
||||
"id": "col-1-1.1",
|
||||
"name": "1st percentile of AvgTicketPrice"
|
||||
},
|
||||
{
|
||||
"id": "col-2-1.50",
|
||||
"name": "50th percentile of AvgTicketPrice"
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"col-0-2": 1557460800000,
|
||||
"col-1-1.1": 116,
|
||||
"col-2-1.50": 658
|
||||
},
|
||||
{
|
||||
"col-0-2": 1557547200000,
|
||||
"col-1-1.1": 223,
|
||||
"col-2-1.50": 756
|
||||
}
|
||||
]
|
||||
},
|
||||
"column": 0,
|
||||
"row": 0,
|
||||
"value": 1557460800000
|
||||
},
|
||||
"yRaw": {
|
||||
"table": {
|
||||
"columns": [
|
||||
{
|
||||
"id": "col-0-2",
|
||||
"name": "timestamp per day"
|
||||
},
|
||||
{
|
||||
"id": "col-1-1.1",
|
||||
"name": "1st percentile of AvgTicketPrice"
|
||||
},
|
||||
{
|
||||
"id": "col-2-1.50",
|
||||
"name": "50th percentile of AvgTicketPrice"
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"col-0-2": 1557460800000,
|
||||
"col-1-1.1": 116,
|
||||
"col-2-1.50": 658
|
||||
},
|
||||
{
|
||||
"col-0-2": 1557547200000,
|
||||
"col-1-1.1": 223,
|
||||
"col-2-1.50": 756
|
||||
}
|
||||
]
|
||||
},
|
||||
"column": 2,
|
||||
"row": 0,
|
||||
"value": 658
|
||||
},
|
||||
"parent": null,
|
||||
"series": "50th percentile of AvgTicketPrice",
|
||||
"seriesId": "col-2-1.50"
|
||||
},
|
||||
{
|
||||
"x": 1557547200000,
|
||||
"y": 756,
|
||||
"extraMetrics": [],
|
||||
"xRaw": {
|
||||
"table": {
|
||||
"columns": [
|
||||
{
|
||||
"id": "col-0-2",
|
||||
"name": "timestamp per day"
|
||||
},
|
||||
{
|
||||
"id": "col-1-1.1",
|
||||
"name": "1st percentile of AvgTicketPrice"
|
||||
},
|
||||
{
|
||||
"id": "col-2-1.50",
|
||||
"name": "50th percentile of AvgTicketPrice"
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"col-0-2": 1557460800000,
|
||||
"col-1-1.1": 116,
|
||||
"col-2-1.50": 658
|
||||
},
|
||||
{
|
||||
"col-0-2": 1557547200000,
|
||||
"col-1-1.1": 223,
|
||||
"col-2-1.50": 756
|
||||
}
|
||||
]
|
||||
},
|
||||
"column": 0,
|
||||
"row": 1,
|
||||
"value": 1557547200000
|
||||
},
|
||||
"yRaw": {
|
||||
"table": {
|
||||
"columns": [
|
||||
{
|
||||
"id": "col-0-2",
|
||||
"name": "timestamp per day"
|
||||
},
|
||||
{
|
||||
"id": "col-1-1.1",
|
||||
"name": "1st percentile of AvgTicketPrice"
|
||||
},
|
||||
{
|
||||
"id": "col-2-1.50",
|
||||
"name": "50th percentile of AvgTicketPrice"
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"col-0-2": 1557460800000,
|
||||
"col-1-1.1": 116,
|
||||
"col-2-1.50": 658
|
||||
},
|
||||
{
|
||||
"col-0-2": 1557547200000,
|
||||
"col-1-1.1": 223,
|
||||
"col-2-1.50": 756
|
||||
}
|
||||
]
|
||||
},
|
||||
"column": 2,
|
||||
"row": 1,
|
||||
"value": 756.2283554077148
|
||||
},
|
||||
"parent": null,
|
||||
"series": "50th percentile of AvgTicketPrice",
|
||||
"seriesId": "col-2-1.50"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"hits": 2
|
||||
},
|
||||
"type": "series",
|
||||
"labels": [
|
||||
"1st percentile of AvgTicketPrice",
|
||||
"50th percentile of AvgTicketPrice"
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
{
|
||||
"addLegend": true,
|
||||
"addTimeMarker": false,
|
||||
"addTooltip": true,
|
||||
"categoryAxes": [
|
||||
{
|
||||
"id": "CategoryAxis-1",
|
||||
"labels": {
|
||||
"show": true,
|
||||
"truncate": 100
|
||||
},
|
||||
"position": "bottom",
|
||||
"scale": {
|
||||
"type": "linear"
|
||||
},
|
||||
"show": true,
|
||||
"style": {},
|
||||
"title": {
|
||||
"text": "Date Histogram"
|
||||
},
|
||||
"type": "category"
|
||||
}
|
||||
],
|
||||
"dimensions": {
|
||||
"x": {
|
||||
"accessor": 0,
|
||||
"format": {
|
||||
"id": "date",
|
||||
"params": {
|
||||
"pattern": "YYYY-MM-DD"
|
||||
}
|
||||
},
|
||||
"params": {
|
||||
"date": true,
|
||||
"interval": "P1D",
|
||||
"format": "YYYY-MM-DD",
|
||||
"bounds": {
|
||||
"min": "2019-05-10T04:00:00.000Z",
|
||||
"max": "2019-05-12T10:18:57.342Z"
|
||||
}
|
||||
},
|
||||
"aggType": "date_histogram"
|
||||
},
|
||||
"y": [
|
||||
{
|
||||
"accessor": 1,
|
||||
"format": {
|
||||
"id": "number",
|
||||
"params": {
|
||||
"pattern": "$0,0.[00]"
|
||||
}
|
||||
},
|
||||
"params": {},
|
||||
"aggType": "percentiles"
|
||||
},
|
||||
{
|
||||
"accessor": 2,
|
||||
"format": {
|
||||
"id": "number",
|
||||
"params": {
|
||||
"pattern": "$0,0.[00]"
|
||||
}
|
||||
},
|
||||
"params": {},
|
||||
"aggType": "percentiles"
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"categoryLines": false,
|
||||
"style": {
|
||||
"color": "#eee"
|
||||
}
|
||||
},
|
||||
"legendPosition": "right",
|
||||
"seriesParams": [
|
||||
{
|
||||
"data": {
|
||||
"id": "1",
|
||||
"label": "Percentiles of AvgTicketPrice"
|
||||
},
|
||||
"drawLinesBetweenPoints": true,
|
||||
"interpolate": "cardinal",
|
||||
"mode": "normal",
|
||||
"show": "true",
|
||||
"showCircles": true,
|
||||
"type": "line",
|
||||
"valueAxis": "ValueAxis-1"
|
||||
}
|
||||
],
|
||||
"times": [],
|
||||
"type": "point_series",
|
||||
"valueAxes": [
|
||||
{
|
||||
"id": "ValueAxis-1",
|
||||
"labels": {
|
||||
"filter": false,
|
||||
"rotate": 0,
|
||||
"show": true,
|
||||
"truncate": 100
|
||||
},
|
||||
"name": "LeftAxis-1",
|
||||
"position": "left",
|
||||
"scale": {
|
||||
"mode": "normal",
|
||||
"type": "linear"
|
||||
},
|
||||
"show": true,
|
||||
"style": {},
|
||||
"title": {
|
||||
"text": "Percentiles of AvgTicketPrice"
|
||||
},
|
||||
"type": "value"
|
||||
}
|
||||
],
|
||||
"chartTitle": {},
|
||||
"mode": "normal",
|
||||
"tooltip": {
|
||||
"show": true
|
||||
},
|
||||
"charts": [
|
||||
{
|
||||
"type": "point_series",
|
||||
"addTimeMarker": false,
|
||||
"series": []
|
||||
}
|
||||
],
|
||||
"enableHover": true
|
||||
}
|
||||
|
|
@ -22,22 +22,29 @@ import _ from 'lodash';
|
|||
export function VislibTypesPointSeries() {
|
||||
|
||||
const createSeriesFromParams = (cfg, seri) => {
|
||||
//percentile data id format is {mainId}.{percentileValue}, this has to be cleaned
|
||||
//up to match with ids in cfg.seriesParams entry that contain only {mainId}
|
||||
const seriId = seri.id && seri.id.indexOf('.') !== -1
|
||||
? seri.id.split('.')[0]
|
||||
: seri.id;
|
||||
const matchingSeriesParams = cfg.seriesParams ? cfg.seriesParams.find(seriConfig => {
|
||||
return seri.id === seriConfig.data.id;
|
||||
return seriId === seriConfig.data.id;
|
||||
}) : null;
|
||||
|
||||
|
||||
const interpolate = cfg.smoothLines ? 'cardinal' : cfg.interpolate;
|
||||
|
||||
if (!matchingSeriesParams) {
|
||||
const seriesParams0 = Array.isArray(cfg.seriesParams) && cfg.seriesParams[0]
|
||||
? cfg.seriesParams[0]
|
||||
: cfg;
|
||||
const stacked = ['stacked', 'percentage', 'wiggle', 'silhouette'].includes(cfg.mode);
|
||||
return {
|
||||
show: true,
|
||||
type: cfg.type || 'line',
|
||||
mode: stacked ? 'stacked' : 'normal',
|
||||
interpolate: interpolate,
|
||||
drawLinesBetweenPoints: cfg.drawLinesBetweenPoints,
|
||||
showCircles: cfg.showCircles,
|
||||
drawLinesBetweenPoints: seriesParams0.drawLinesBetweenPoints,
|
||||
showCircles: seriesParams0.showCircles,
|
||||
radiusRatio: cfg.radiusRatio,
|
||||
data: seri
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue