You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2018/11/28 05:34:33 UTC
[incubator-superset] branch master updated: replace missing round
function in d3 to fix MapBox (#6444)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 71a713d replace missing round function in d3 to fix MapBox (#6444)
71a713d is described below
commit 71a713dcece69d11e08dfa9488416655442f441b
Author: aboganas <ab...@users.noreply.github.com>
AuthorDate: Wed Nov 28 08:34:27 2018 +0300
replace missing round function in d3 to fix MapBox (#6444)
* replace missing round function in d3
* added unit test
* fixed linting
---
.../assets/spec/javascripts/modules/utils_spec.jsx | 8 ++++++++
superset/assets/src/modules/geo.js | 4 ++--
superset/assets/src/modules/utils.js | 10 ++++++++++
.../visualizations/MapBox/ScatterPlotGlowOverlay.jsx | 18 +++++++++---------
4 files changed, 29 insertions(+), 11 deletions(-)
diff --git a/superset/assets/spec/javascripts/modules/utils_spec.jsx b/superset/assets/spec/javascripts/modules/utils_spec.jsx
index 0970c8c..ca16d86 100644
--- a/superset/assets/spec/javascripts/modules/utils_spec.jsx
+++ b/superset/assets/spec/javascripts/modules/utils_spec.jsx
@@ -5,6 +5,7 @@ import {
d3TimeFormatPreset,
defaultNumberFormatter,
mainMetric,
+ roundDecimal,
} from '../../../src/modules/utils';
describe('utils', () => {
@@ -99,4 +100,11 @@ describe('utils', () => {
expect(mainMetric(metrics)).toBe('foo');
});
});
+ describe('roundDecimal', () => {
+ it('rounding method to limit the number of decimal digits', () => {
+ expect(roundDecimal(1.139, 2)).toBe(1.14);
+ expect(roundDecimal(1.13929, 3)).toBe(1.139);
+ expect(roundDecimal(1.13929)).toBe(1);
+ });
+ });
});
diff --git a/superset/assets/src/modules/geo.js b/superset/assets/src/modules/geo.js
index 2fc2744..ced7183 100644
--- a/superset/assets/src/modules/geo.js
+++ b/superset/assets/src/modules/geo.js
@@ -1,4 +1,4 @@
-import { round as d3Round } from 'd3-format';
+import { roundDecimal } from '../modules/utils';
export const defaultViewport = {
longitude: 6.85236157047845,
@@ -35,5 +35,5 @@ export function kmToPixels(kilometers, latitude, zoomLevel) {
const latitudeRad = latitude * (Math.PI / 180);
// Seems like the zoomLevel is off by one
const kmPerPixel = (EARTH_CIRCUMFERENCE_KM * Math.cos(latitudeRad)) / Math.pow(2, zoomLevel + 9);
- return d3Round(kilometers / kmPerPixel, 2);
+ return roundDecimal(kilometers / kmPerPixel, 2);
}
diff --git a/superset/assets/src/modules/utils.js b/superset/assets/src/modules/utils.js
index 887804c..9fbd1c8 100644
--- a/superset/assets/src/modules/utils.js
+++ b/superset/assets/src/modules/utils.js
@@ -192,3 +192,13 @@ export function mainMetric(savedMetrics) {
}
return metric;
}
+
+export function roundDecimal(number, precision) {
+ let roundedNumber;
+ if (precision) {
+ roundedNumber = Math.round(number * (precision = Math.pow(10, precision))) / precision;
+ } else {
+ roundedNumber = Math.round(number);
+ }
+ return roundedNumber;
+}
diff --git a/superset/assets/src/visualizations/MapBox/ScatterPlotGlowOverlay.jsx b/superset/assets/src/visualizations/MapBox/ScatterPlotGlowOverlay.jsx
index 5a6ba27..f47d2eb 100644
--- a/superset/assets/src/visualizations/MapBox/ScatterPlotGlowOverlay.jsx
+++ b/superset/assets/src/visualizations/MapBox/ScatterPlotGlowOverlay.jsx
@@ -2,7 +2,7 @@ import Immutable from 'immutable';
import React from 'react';
import PropTypes from 'prop-types';
import ViewportMercator from 'viewport-mercator-project';
-import { round as d3Round } from 'd3-format';
+import { roundDecimal } from '../../modules/utils';
import { kmToPixels, MILES_PER_KM } from '../../modules/geo';
import { rgbLuminance } from '../../utils/common';
@@ -128,7 +128,7 @@ class ScatterPlotGlowOverlay extends React.Component {
if ((props.renderWhileDragging || !props.isDragging) && props.locations) {
props.locations.forEach(function _forEach(location, i) {
const pixel = mercator.project(props.lngLatAccessor(location));
- const pixelRounded = [d3Round(pixel[0], 1), d3Round(pixel[1], 1)];
+ const pixelRounded = [roundDecimal(pixel[0], 1), roundDecimal(pixel[1], 1)];
if (pixelRounded[0] + radius >= 0
&& pixelRounded[0] - radius < props.width
@@ -137,8 +137,8 @@ class ScatterPlotGlowOverlay extends React.Component {
ctx.beginPath();
if (location.get('properties').get('cluster')) {
let clusterLabel = clusterLabelMap[i];
- const scaledRadius = d3Round(Math.pow(clusterLabel / maxLabel, 0.5) * radius, 1);
- const fontHeight = d3Round(scaledRadius * 0.5, 1);
+ const scaledRadius = roundDecimal(Math.pow(clusterLabel / maxLabel, 0.5) * radius, 1);
+ const fontHeight = roundDecimal(scaledRadius * 0.5, 1);
const gradient = ctx.createRadialGradient(
pixelRounded[0], pixelRounded[1], scaledRadius,
pixelRounded[0], pixelRounded[1], 0,
@@ -174,17 +174,17 @@ class ScatterPlotGlowOverlay extends React.Component {
if (radiusProperty !== null) {
const pointLatitude = props.lngLatAccessor(location)[1];
if (props.pointRadiusUnit === 'Kilometers') {
- pointLabel = d3Round(pointRadius, 2) + 'km';
+ pointLabel = roundDecimal(pointRadius, 2) + 'km';
pointRadius = kmToPixels(pointRadius, pointLatitude, props.zoom);
} else if (props.pointRadiusUnit === 'Miles') {
- pointLabel = d3Round(pointRadius, 2) + 'mi';
+ pointLabel = roundDecimal(pointRadius, 2) + 'mi';
pointRadius = kmToPixels(pointRadius * MILES_PER_KM, pointLatitude, props.zoom);
}
}
if (pointMetric !== null) {
pointLabel = Number.isFinite(parseFloat(pointMetric))
- ? d3Round(pointMetric, 2)
+ ? roundDecimal(pointMetric, 2)
: pointMetric;
}
@@ -193,13 +193,13 @@ class ScatterPlotGlowOverlay extends React.Component {
pointRadius = defaultRadius;
}
- ctx.arc(pixelRounded[0], pixelRounded[1], d3Round(pointRadius, 1), 0, Math.PI * 2);
+ ctx.arc(pixelRounded[0], pixelRounded[1], roundDecimal(pointRadius, 1), 0, Math.PI * 2);
ctx.fillStyle = 'rgb(' + rgb[1] + ', ' + rgb[2] + ', ' + rgb[3] + ')';
ctx.fill();
if (pointLabel !== undefined) {
this.drawText(ctx, pixelRounded, {
- fontHeight: d3Round(pointRadius, 1),
+ fontHeight: roundDecimal(pointRadius, 1),
label: pointLabel,
radius: pointRadius,
rgb,