From 9b59d10677717796c0ee91bd2420e9fe5b083270 Mon Sep 17 00:00:00 2001 From: Levko Kravets Date: Thu, 11 Oct 2018 12:27:28 +0300 Subject: [PATCH] Use Plotly's function to clean y-values (x may be category or date/time) (#2872) --- .../app/visualizations/chart/plotly/utils.js | 26 ++++++++++++++----- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/client/app/visualizations/chart/plotly/utils.js b/client/app/visualizations/chart/plotly/utils.js index 3cb9aad6e8..1b6c40cc4d 100644 --- a/client/app/visualizations/chart/plotly/utils.js +++ b/client/app/visualizations/chart/plotly/utils.js @@ -4,6 +4,7 @@ import { } from 'lodash'; import moment from 'moment'; import d3 from 'd3'; +import plotlyCleanNumber from 'plotly.js/src/lib/clean_number'; import { createFormatter, formatSimpleTemplate } from '@/lib/value-format'; // The following colors will be used if you pick "Automatic" color. @@ -36,6 +37,10 @@ export const ColorPalette = Object.assign({}, BaseColors, { const ColorPaletteArray = values(BaseColors); +function cleanNumber(value) { + return isUndefined(value) ? value : (plotlyCleanNumber(value) || 0.0); +} + function defaultFormatSeriesText(item) { let result = item['@@y']; if (item['@@yError'] !== undefined) { @@ -243,12 +248,12 @@ function preparePieData(seriesList, options) { const sourceData = new Map(); const seriesTotal = reduce(serie.data, (result, row) => { - const y = normalizeValue(row.y); + const y = cleanNumber(row.y); return result + Math.abs(y); }, 0); each(serie.data, (row) => { const x = normalizeValue(row.x); - const y = normalizeValue(row.y); + const y = cleanNumber(row.y); sourceData.set(x, { x, y, @@ -312,15 +317,19 @@ function prepareChartData(seriesList, options) { // Sort by x - `Map` preserves order of items const data = sortX ? sortBy(series.data, d => normalizeValue(d.x)) : series.data; + // For bubble charts `y` may be any (similar to `x`) - numeric is only bubble size; + // for other types `y` is always number + const cleanYValue = seriesOptions.type === 'bubble' ? normalizeValue : cleanNumber; + const sourceData = new Map(); const xValues = []; const yValues = []; const yErrorValues = []; each(data, (row) => { - const x = normalizeValue(row.x); - const y = normalizeValue(row.y); - const yError = normalizeValue(row.yError); - const size = normalizeValue(row.size); + const x = normalizeValue(row.x); // number/datetime/category + const y = cleanYValue(row.y); // depends on series type! + const yError = cleanNumber(row.yError); // always number + const size = cleanNumber(row.size); // always number sourceData.set(x, { x, y, @@ -496,6 +505,9 @@ export function prepareLayout(element, seriesList, options, data) { function updateSeriesText(seriesList, options) { each(seriesList, (series) => { + const seriesOptions = options.seriesOptions[series.name] || + { type: options.globalSeriesType }; + series.text = []; series.hover = []; const xValues = (options.globalSeriesType === 'pie') ? series.labels : series.x; @@ -506,7 +518,7 @@ function updateSeriesText(seriesList, options) { }; const item = series.sourceData.get(x); if (item) { - text['@@y'] = series.formatNumber(item.y); + text['@@y'] = seriesOptions.type === 'bubble' ? item.y : series.formatNumber(item.y); if (item.yError !== undefined) { text['@@yError'] = series.formatNumber(item.yError); }