diff --git a/frontend/src/metabase-shared/color_selector.js b/frontend/src/metabase-shared/color_selector.js index f995d006af6f5893fe48efc321cc0f1fbd2a1cae..ee59ad5f46b3f5117cd170e5d0c2dcea0439b87a 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 dbe8e4ca0f3b17fb69a0dece92ced28bbba731d2..0cec3e6fe126c3670db03007e53384a7bbef3437 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 75a34290904b52dc3d936ee9e58c42120b10f83d..4bd0004ffa41835fd02651512bf42e5de2cf4b34 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;