pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-06 13:57:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(plugin-chart-pivot-table): color weight of Conditional formatting metrics not work (#20396)

Browse Source 
* fix(plugin-chart-pivot-table): color weight of Conditional formatting metrics not work

* fix: test
This commit is contained in:
Stephen Liu 2022-06-16 12:22:09 +08:00 committed by GitHub
parent ccba5b2f69
commit 1665403484
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
View File

@ -17,7 +17,7 @@
* under the License. * under the License.
*/ */
import memoizeOne from 'memoize-one'; import memoizeOne from 'memoize-one';
import { DataRecord } from '@superset-ui/core'; import { addAlpha, DataRecord } from '@superset-ui/core';
import { import {
ColorFormatters, ColorFormatters,
COMPARATOR, COMPARATOR,
@ -28,9 +28,6 @@ import {
export const round = (num: number, precision = 0) => export const round = (num: number, precision = 0) =>
Number(`${Math.round(Number(`${num}e+${precision}`))}e-${precision}`); 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_BOUNDED = 0.05;
const MIN_OPACITY_UNBOUNDED = 0; const MIN_OPACITY_UNBOUNDED = 0;
const MAX_OPACITY = 1; const MAX_OPACITY = 1;
@ -174,7 +171,7 @@ export const getColorFunction = (
const compareResult = comparatorFunction(value, columnValues); const compareResult = comparatorFunction(value, columnValues);
if (compareResult === false) return undefined; if (compareResult === false) return undefined;
const { cutoffValue, extremeValue } = compareResult; const { cutoffValue, extremeValue } = compareResult;
return rgbToRgba( return addAlpha(
colorScheme, colorScheme,
getOpacity(value, cutoffValue, extremeValue, minOpacity, maxOpacity), getOpacity(value, cutoffValue, extremeValue, minOpacity, maxOpacity),
); );

99
superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
View File

@ -20,7 +20,6 @@ import { configure } from '@superset-ui/core';
import { import {
COMPARATOR, COMPARATOR,
getOpacity, getOpacity,
rgbToRgba,
round, round,
getColorFormatters, getColorFormatters,
getColorFunction, 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()', () => { describe('getColorFunction()', () => {
it('getColorFunction GREATER_THAN', () => { it('getColorFunction GREATER_THAN', () => {
const colorFunction = getColorFunction( const colorFunction = getColorFunction(
{ {
operator: COMPARATOR.GREATER_THAN, operator: COMPARATOR.GREATER_THAN,
targetValue: 50, targetValue: 50,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(50)).toBeUndefined(); expect(colorFunction(50)).toBeUndefined();
expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); expect(colorFunction(100)).toEqual('#FF0000FF');
}); });
it('getColorFunction LESS_THAN', () => { it('getColorFunction LESS_THAN', () => {
@ -80,13 +73,13 @@ describe('getColorFunction()', () => {
{ {
operator: COMPARATOR.LESS_THAN, operator: COMPARATOR.LESS_THAN,
targetValue: 100, targetValue: 100,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(100)).toBeUndefined(); expect(colorFunction(100)).toBeUndefined();
expect(colorFunction(50)).toEqual('rgba(255,0,0,1)'); expect(colorFunction(50)).toEqual('#FF0000FF');
}); });
it('getColorFunction GREATER_OR_EQUAL', () => { it('getColorFunction GREATER_OR_EQUAL', () => {
@ -94,13 +87,13 @@ describe('getColorFunction()', () => {
{ {
operator: COMPARATOR.GREATER_OR_EQUAL, operator: COMPARATOR.GREATER_OR_EQUAL,
targetValue: 50, targetValue: 50,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.05)'); expect(colorFunction(50)).toEqual('#FF00000D');
expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); expect(colorFunction(100)).toEqual('#FF0000FF');
expect(colorFunction(0)).toBeUndefined(); expect(colorFunction(0)).toBeUndefined();
}); });
@ -109,13 +102,13 @@ describe('getColorFunction()', () => {
{ {
operator: COMPARATOR.LESS_OR_EQUAL, operator: COMPARATOR.LESS_OR_EQUAL,
targetValue: 100, targetValue: 100,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(50)).toEqual('rgba(255,0,0,1)'); expect(colorFunction(50)).toEqual('#FF0000FF');
expect(colorFunction(100)).toEqual('rgba(255,0,0,0.05)'); expect(colorFunction(100)).toEqual('#FF00000D');
expect(colorFunction(150)).toBeUndefined(); expect(colorFunction(150)).toBeUndefined();
}); });
@ -124,13 +117,13 @@ describe('getColorFunction()', () => {
{ {
operator: COMPARATOR.EQUAL, operator: COMPARATOR.EQUAL,
targetValue: 100, targetValue: 100,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(50)).toBeUndefined(); expect(colorFunction(50)).toBeUndefined();
expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); expect(colorFunction(100)).toEqual('#FF0000FF');
}); });
it('getColorFunction NOT_EQUAL', () => { it('getColorFunction NOT_EQUAL', () => {
@ -138,27 +131,27 @@ describe('getColorFunction()', () => {
{ {
operator: COMPARATOR.NOT_EQUAL, operator: COMPARATOR.NOT_EQUAL,
targetValue: 60, targetValue: 60,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(60)).toBeUndefined(); expect(colorFunction(60)).toBeUndefined();
expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); expect(colorFunction(100)).toEqual('#FF0000FF');
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.29)'); expect(colorFunction(50)).toEqual('#FF00004A');
colorFunction = getColorFunction( colorFunction = getColorFunction(
{ {
operator: COMPARATOR.NOT_EQUAL, operator: COMPARATOR.NOT_EQUAL,
targetValue: 90, targetValue: 90,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(90)).toBeUndefined(); expect(colorFunction(90)).toBeUndefined();
expect(colorFunction(100)).toEqual('rgba(255,0,0,0.29)'); expect(colorFunction(100)).toEqual('#FF00004A');
expect(colorFunction(50)).toEqual('rgba(255,0,0,1)'); expect(colorFunction(50)).toEqual('#FF0000FF');
}); });
it('getColorFunction BETWEEN', () => { it('getColorFunction BETWEEN', () => {
@ -167,13 +160,13 @@ describe('getColorFunction()', () => {
operator: COMPARATOR.BETWEEN, operator: COMPARATOR.BETWEEN,
targetValueLeft: 75, targetValueLeft: 75,
targetValueRight: 125, targetValueRight: 125,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(50)).toBeUndefined(); expect(colorFunction(50)).toBeUndefined();
expect(colorFunction(100)).toEqual('rgba(255,0,0,0.53)'); expect(colorFunction(100)).toEqual('#FF000087');
}); });
it('getColorFunction BETWEEN_OR_EQUAL', () => { it('getColorFunction BETWEEN_OR_EQUAL', () => {
@ -182,13 +175,13 @@ describe('getColorFunction()', () => {
operator: COMPARATOR.BETWEEN_OR_EQUAL, operator: COMPARATOR.BETWEEN_OR_EQUAL,
targetValueLeft: 50, targetValueLeft: 50,
targetValueRight: 100, targetValueRight: 100,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.05)'); expect(colorFunction(50)).toEqual('#FF00000D');
expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); expect(colorFunction(100)).toEqual('#FF0000FF');
expect(colorFunction(150)).toBeUndefined(); expect(colorFunction(150)).toBeUndefined();
}); });
@ -198,12 +191,12 @@ describe('getColorFunction()', () => {
operator: COMPARATOR.BETWEEN_OR_LEFT_EQUAL, operator: COMPARATOR.BETWEEN_OR_LEFT_EQUAL,
targetValueLeft: 50, targetValueLeft: 50,
targetValueRight: 100, targetValueRight: 100,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.05)'); expect(colorFunction(50)).toEqual('#FF00000D');
expect(colorFunction(100)).toBeUndefined(); expect(colorFunction(100)).toBeUndefined();
}); });
@ -213,13 +206,13 @@ describe('getColorFunction()', () => {
operator: COMPARATOR.BETWEEN_OR_RIGHT_EQUAL, operator: COMPARATOR.BETWEEN_OR_RIGHT_EQUAL,
targetValueLeft: 50, targetValueLeft: 50,
targetValueRight: 100, targetValueRight: 100,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(50)).toBeUndefined(); 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', () => { it('getColorFunction GREATER_THAN with target value undefined', () => {
@ -227,7 +220,7 @@ describe('getColorFunction()', () => {
{ {
operator: COMPARATOR.GREATER_THAN, operator: COMPARATOR.GREATER_THAN,
targetValue: undefined, targetValue: undefined,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
@ -242,7 +235,7 @@ describe('getColorFunction()', () => {
operator: COMPARATOR.BETWEEN, operator: COMPARATOR.BETWEEN,
targetValueLeft: undefined, targetValueLeft: undefined,
targetValueRight: 100, targetValueRight: 100,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
@ -257,7 +250,7 @@ describe('getColorFunction()', () => {
operator: COMPARATOR.BETWEEN, operator: COMPARATOR.BETWEEN,
targetValueLeft: 50, targetValueLeft: 50,
targetValueRight: undefined, targetValueRight: undefined,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
@ -272,7 +265,7 @@ describe('getColorFunction()', () => {
// @ts-ignore // @ts-ignore
operator: 'unsupported operator', operator: 'unsupported operator',
targetValue: 50, targetValue: 50,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
@ -285,15 +278,15 @@ describe('getColorFunction()', () => {
const colorFunction = getColorFunction( const colorFunction = getColorFunction(
{ {
operator: COMPARATOR.NONE, operator: COMPARATOR.NONE,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
); );
expect(colorFunction(20)).toEqual(undefined); expect(colorFunction(20)).toEqual(undefined);
expect(colorFunction(50)).toEqual('rgba(255,0,0,0)'); expect(colorFunction(50)).toEqual('#FF000000');
expect(colorFunction(75)).toEqual('rgba(255,0,0,0.5)'); expect(colorFunction(75)).toEqual('#FF000080');
expect(colorFunction(100)).toEqual('rgba(255,0,0,1)'); expect(colorFunction(100)).toEqual('#FF0000FF');
expect(colorFunction(120)).toEqual(undefined); expect(colorFunction(120)).toEqual(undefined);
}); });
@ -302,7 +295,7 @@ describe('getColorFunction()', () => {
{ {
operator: undefined, operator: undefined,
targetValue: 150, targetValue: 150,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
countValues, countValues,
@ -332,26 +325,26 @@ describe('getColorFormatters()', () => {
{ {
operator: COMPARATOR.GREATER_THAN, operator: COMPARATOR.GREATER_THAN,
targetValue: 50, targetValue: 50,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
{ {
operator: COMPARATOR.LESS_THAN, operator: COMPARATOR.LESS_THAN,
targetValue: 300, targetValue: 300,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'sum', column: 'sum',
}, },
{ {
operator: COMPARATOR.BETWEEN, operator: COMPARATOR.BETWEEN,
targetValueLeft: 75, targetValueLeft: 75,
targetValueRight: 125, targetValueRight: 125,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: 'count', column: 'count',
}, },
{ {
operator: COMPARATOR.GREATER_THAN, operator: COMPARATOR.GREATER_THAN,
targetValue: 150, targetValue: 150,
colorScheme: 'rgb(255,0,0)', colorScheme: '#FF0000',
column: undefined, column: undefined,
}, },
]; ];
@ -359,20 +352,14 @@ describe('getColorFormatters()', () => {
expect(colorFormatters.length).toEqual(3); expect(colorFormatters.length).toEqual(3);
expect(colorFormatters[0].column).toEqual('count'); expect(colorFormatters[0].column).toEqual('count');
expect(colorFormatters[0].getColorFromValue(100)).toEqual( expect(colorFormatters[0].getColorFromValue(100)).toEqual('#FF0000FF');
'rgba(255,0,0,1)',
);
expect(colorFormatters[1].column).toEqual('sum'); expect(colorFormatters[1].column).toEqual('sum');
expect(colorFormatters[1].getColorFromValue(200)).toEqual( expect(colorFormatters[1].getColorFromValue(200)).toEqual('#FF0000FF');
'rgba(255,0,0,1)',
);
expect(colorFormatters[1].getColorFromValue(400)).toBeUndefined(); expect(colorFormatters[1].getColorFromValue(400)).toBeUndefined();
expect(colorFormatters[2].column).toEqual('count'); expect(colorFormatters[2].column).toEqual('count');
expect(colorFormatters[2].getColorFromValue(100)).toEqual( expect(colorFormatters[2].getColorFromValue(100)).toEqual('#FF000087');
'rgba(255,0,0,0.53)',
);
}); });
it('undefined column config', () => { it('undefined column config', () => {