From b9ecf4d80317d3f76502d6a6268580adc8e36661 Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Thu, 4 Oct 2018 17:33:35 -0700
Subject: [PATCH] Fix gradients for Safari. Resolves #8578
---
frontend/src/metabase-shared/color_selector.js | 18 +-----------------
frontend/src/metabase/lib/colors.js | 10 ++++++++++
.../visualizations/lib/table_format.js | 9 +++++----
3 files changed, 16 insertions(+), 21 deletions(-)
diff --git a/frontend/src/metabase-shared/color_selector.js b/frontend/src/metabase-shared/color_selector.js
index f995d006af6..ee59ad5f46b 100644
--- a/frontend/src/metabase-shared/color_selector.js
+++ b/frontend/src/metabase-shared/color_selector.js
@@ -21,25 +21,9 @@ global.makeCellBackgroundGetter = function(
const cols = JSON.parse(colsJSON);
const settings = JSON.parse(settingsJSON);
try {
- const getter = makeCellBackgroundGetter(rows, cols, settings);
- return (value, rowIndex, colName) => {
- const color = getter(value, rowIndex, colName);
- if (color) {
- return roundColor(color);
- }
- return null;
- };
+ return makeCellBackgroundGetter(rows, cols, settings);
} catch (e) {
print("ERROR", e);
return () => null;
}
};
-
-// HACK: d3 may return rgb values with decimals but the rendering engine used for pulses doesn't support that
-function roundColor(color) {
- return color.replace(
- /rgba\((\d+(?:\.\d+)),\s*(\d+(?:\.\d+)),\s*(\d+(?:\.\d+)),\s*(\d+\.\d+)\)/,
- (_, r, g, b, a) =>
- `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a})`,
- );
-}
diff --git a/frontend/src/metabase/lib/colors.js b/frontend/src/metabase/lib/colors.js
index dbe8e4ca0f3..0cec3e6fe12 100644
--- a/frontend/src/metabase/lib/colors.js
+++ b/frontend/src/metabase/lib/colors.js
@@ -132,6 +132,16 @@ export const getColorScale = (
.range(colors);
};
+// HACK: d3 may return rgb values with decimals but certain rendering engines
+// don't support that (e.x. Safari and CSSBox)
+export function roundColor(color) {
+ return color.replace(
+ /rgba\((\d+(?:\.\d+)),\s*(\d+(?:\.\d+)),\s*(\d+(?:\.\d+)),\s*(\d+\.\d+)\)/,
+ (_, r, g, b, a) =>
+ `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a})`,
+ );
+}
+
export const alpha = (color: ColorString, alpha: number): ColorString =>
Color(color)
.alpha(alpha)
diff --git a/frontend/src/metabase/visualizations/lib/table_format.js b/frontend/src/metabase/visualizations/lib/table_format.js
index 75a34290904..4bd0004ffa4 100644
--- a/frontend/src/metabase/visualizations/lib/table_format.js
+++ b/frontend/src/metabase/visualizations/lib/table_format.js
@@ -3,7 +3,7 @@
// NOTE: this file is used on the frontend and backend and there are some
// limitations. See frontend/src/metabase-shared/color_selector for details
-import { alpha, getColorScale } from "metabase/lib/colors";
+import { alpha, getColorScale, roundColor } from "metabase/lib/colors";
const CELL_ALPHA = 0.65;
const ROW_ALPHA = 0.2;
@@ -149,14 +149,14 @@ function compileFormatter(
const min =
format.min_type === "custom"
- ? format.min_value
+ ? parseFloat(format.min_value)
: format.min_type === "all"
? // $FlowFixMe
Math.min(...format.columns.map(columnMin))
: columnMin(columnName);
const max =
format.max_type === "custom"
- ? format.max_value
+ ? parseFloat(format.max_value)
: format.max_type === "all"
? // $FlowFixMe
Math.max(...format.columns.map(columnMax))
@@ -167,10 +167,11 @@ function compileFormatter(
return () => null;
}
- return getColorScale(
+ const scale = getColorScale(
[min, max],
format.colors.map(c => alpha(c, GRADIENT_ALPHA)),
).clamp(true);
+ return value => roundColor(scale(value));
} else {
console.warn("Unknown format type", format.type);
return () => null;
--
GitLab