From 16654034849505109b638fd2a784dfb377238a0e Mon Sep 17 00:00:00 2001 From: Stephen Liu <750188453@qq.com> Date: Thu, 16 Jun 2022 12:22:09 +0800 Subject: [PATCH] fix(plugin-chart-pivot-table): color weight of Conditional formatting metrics not work (#20396) * fix(plugin-chart-pivot-table): color weight of Conditional formatting metrics not work * fix: test --- .../src/utils/getColorFormatters.ts | 7 +- .../test/utils/getColorFormatters.test.ts | 99 ++++++++----------- 2 files changed, 45 insertions(+), 61 deletions(-) diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts index e15dc22d2b..37729459f8 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts @@ -17,7 +17,7 @@ * under the License. */ import memoizeOne from 'memoize-one'; -import { DataRecord } from '@superset-ui/core'; +import { addAlpha, DataRecord } from '@superset-ui/core'; import { ColorFormatters, COMPARATOR, @@ -28,9 +28,6 @@ import { export const round = (num: number, precision = 0) => Number(`${Math.round(Number(`${num}e+${precision}`))}e-${precision}`); -export const rgbToRgba = (rgb: string, alpha: number) => - rgb.replace(/rgb/i, 'rgba').replace(/\)/i, `,${alpha})`); - const MIN_OPACITY_BOUNDED = 0.05; const MIN_OPACITY_UNBOUNDED = 0; const MAX_OPACITY = 1; @@ -174,7 +171,7 @@ export const getColorFunction = ( const compareResult = comparatorFunction(value, columnValues); if (compareResult === false) return undefined; const { cutoffValue, extremeValue } = compareResult; - return rgbToRgba( + return addAlpha( colorScheme, getOpacity(value, cutoffValue, extremeValue, minOpacity, maxOpacity), ); diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts index bc69533c92..051089f87c 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts @@ -20,7 +20,6 @@ import { configure } from '@superset-ui/core'; import { COMPARATOR, getOpacity, - rgbToRgba, round, getColorFormatters, getColorFunction, @@ -54,25 +53,19 @@ describe('getOpacity', () => { }); }); -describe('rgba', () => { - it('returns correct rgba value', () => { - expect(rgbToRgba('rgb(255,0,0)', 0.5)).toEqual('rgba(255,0,0,0.5)'); - }); -}); - describe('getColorFunction()', () => { it('getColorFunction GREATER_THAN', () => { const colorFunction = getColorFunction( { operator: COMPARATOR.GREATER_THAN, targetValue: 50, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); expect(colorFunction(50)).toBeUndefined(); - expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); + expect(colorFunction(100)).toEqual('#FF0000FF'); }); it('getColorFunction LESS_THAN', () => { @@ -80,13 +73,13 @@ describe('getColorFunction()', () => { { operator: COMPARATOR.LESS_THAN, targetValue: 100, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); expect(colorFunction(100)).toBeUndefined(); - expect(colorFunction(50)).toEqual('rgba(255,0,0,1)'); + expect(colorFunction(50)).toEqual('#FF0000FF'); }); it('getColorFunction GREATER_OR_EQUAL', () => { @@ -94,13 +87,13 @@ describe('getColorFunction()', () => { { operator: COMPARATOR.GREATER_OR_EQUAL, targetValue: 50, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); - expect(colorFunction(50)).toEqual('rgba(255,0,0,0.05)'); - expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); + expect(colorFunction(50)).toEqual('#FF00000D'); + expect(colorFunction(100)).toEqual('#FF0000FF'); expect(colorFunction(0)).toBeUndefined(); }); @@ -109,13 +102,13 @@ describe('getColorFunction()', () => { { operator: COMPARATOR.LESS_OR_EQUAL, targetValue: 100, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); - expect(colorFunction(50)).toEqual('rgba(255,0,0,1)'); - expect(colorFunction(100)).toEqual('rgba(255,0,0,0.05)'); + expect(colorFunction(50)).toEqual('#FF0000FF'); + expect(colorFunction(100)).toEqual('#FF00000D'); expect(colorFunction(150)).toBeUndefined(); }); @@ -124,13 +117,13 @@ describe('getColorFunction()', () => { { operator: COMPARATOR.EQUAL, targetValue: 100, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); expect(colorFunction(50)).toBeUndefined(); - expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); + expect(colorFunction(100)).toEqual('#FF0000FF'); }); it('getColorFunction NOT_EQUAL', () => { @@ -138,27 +131,27 @@ describe('getColorFunction()', () => { { operator: COMPARATOR.NOT_EQUAL, targetValue: 60, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); expect(colorFunction(60)).toBeUndefined(); - expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); - expect(colorFunction(50)).toEqual('rgba(255,0,0,0.29)'); + expect(colorFunction(100)).toEqual('#FF0000FF'); + expect(colorFunction(50)).toEqual('#FF00004A'); colorFunction = getColorFunction( { operator: COMPARATOR.NOT_EQUAL, targetValue: 90, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); expect(colorFunction(90)).toBeUndefined(); - expect(colorFunction(100)).toEqual('rgba(255,0,0,0.29)'); - expect(colorFunction(50)).toEqual('rgba(255,0,0,1)'); + expect(colorFunction(100)).toEqual('#FF00004A'); + expect(colorFunction(50)).toEqual('#FF0000FF'); }); it('getColorFunction BETWEEN', () => { @@ -167,13 +160,13 @@ describe('getColorFunction()', () => { operator: COMPARATOR.BETWEEN, targetValueLeft: 75, targetValueRight: 125, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); expect(colorFunction(50)).toBeUndefined(); - expect(colorFunction(100)).toEqual('rgba(255,0,0,0.53)'); + expect(colorFunction(100)).toEqual('#FF000087'); }); it('getColorFunction BETWEEN_OR_EQUAL', () => { @@ -182,13 +175,13 @@ describe('getColorFunction()', () => { operator: COMPARATOR.BETWEEN_OR_EQUAL, targetValueLeft: 50, targetValueRight: 100, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); - expect(colorFunction(50)).toEqual('rgba(255,0,0,0.05)'); - expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); + expect(colorFunction(50)).toEqual('#FF00000D'); + expect(colorFunction(100)).toEqual('#FF0000FF'); expect(colorFunction(150)).toBeUndefined(); }); @@ -198,12 +191,12 @@ describe('getColorFunction()', () => { operator: COMPARATOR.BETWEEN_OR_LEFT_EQUAL, targetValueLeft: 50, targetValueRight: 100, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); - expect(colorFunction(50)).toEqual('rgba(255,0,0,0.05)'); + expect(colorFunction(50)).toEqual('#FF00000D'); expect(colorFunction(100)).toBeUndefined(); }); @@ -213,13 +206,13 @@ describe('getColorFunction()', () => { operator: COMPARATOR.BETWEEN_OR_RIGHT_EQUAL, targetValueLeft: 50, targetValueRight: 100, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); expect(colorFunction(50)).toBeUndefined(); - expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); + expect(colorFunction(100)).toEqual('#FF0000FF'); }); it('getColorFunction GREATER_THAN with target value undefined', () => { @@ -227,7 +220,7 @@ describe('getColorFunction()', () => { { operator: COMPARATOR.GREATER_THAN, targetValue: undefined, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, @@ -242,7 +235,7 @@ describe('getColorFunction()', () => { operator: COMPARATOR.BETWEEN, targetValueLeft: undefined, targetValueRight: 100, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, @@ -257,7 +250,7 @@ describe('getColorFunction()', () => { operator: COMPARATOR.BETWEEN, targetValueLeft: 50, targetValueRight: undefined, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, @@ -272,7 +265,7 @@ describe('getColorFunction()', () => { // @ts-ignore operator: 'unsupported operator', targetValue: 50, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, @@ -285,15 +278,15 @@ describe('getColorFunction()', () => { const colorFunction = getColorFunction( { operator: COMPARATOR.NONE, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, ); expect(colorFunction(20)).toEqual(undefined); - expect(colorFunction(50)).toEqual('rgba(255,0,0,0)'); - expect(colorFunction(75)).toEqual('rgba(255,0,0,0.5)'); - expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); + expect(colorFunction(50)).toEqual('#FF000000'); + expect(colorFunction(75)).toEqual('#FF000080'); + expect(colorFunction(100)).toEqual('#FF0000FF'); expect(colorFunction(120)).toEqual(undefined); }); @@ -302,7 +295,7 @@ describe('getColorFunction()', () => { { operator: undefined, targetValue: 150, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, countValues, @@ -332,26 +325,26 @@ describe('getColorFormatters()', () => { { operator: COMPARATOR.GREATER_THAN, targetValue: 50, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, { operator: COMPARATOR.LESS_THAN, targetValue: 300, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'sum', }, { operator: COMPARATOR.BETWEEN, targetValueLeft: 75, targetValueRight: 125, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: 'count', }, { operator: COMPARATOR.GREATER_THAN, targetValue: 150, - colorScheme: 'rgb(255,0,0)', + colorScheme: '#FF0000', column: undefined, }, ]; @@ -359,20 +352,14 @@ describe('getColorFormatters()', () => { expect(colorFormatters.length).toEqual(3); expect(colorFormatters[0].column).toEqual('count'); - expect(colorFormatters[0].getColorFromValue(100)).toEqual( - 'rgba(255,0,0,1)', - ); + expect(colorFormatters[0].getColorFromValue(100)).toEqual('#FF0000FF'); expect(colorFormatters[1].column).toEqual('sum'); - expect(colorFormatters[1].getColorFromValue(200)).toEqual( - 'rgba(255,0,0,1)', - ); + expect(colorFormatters[1].getColorFromValue(200)).toEqual('#FF0000FF'); expect(colorFormatters[1].getColorFromValue(400)).toBeUndefined(); expect(colorFormatters[2].column).toEqual('count'); - expect(colorFormatters[2].getColorFromValue(100)).toEqual( - 'rgba(255,0,0,0.53)', - ); + expect(colorFormatters[2].getColorFromValue(100)).toEqual('#FF000087'); }); it('undefined column config', () => {