mirror of
https://github.com/apache/superset.git
synced 2024-09-06 13:57:40 -04:00
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
This commit is contained in:
parent
ccba5b2f69
commit
1665403484
@ -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),
|
||||||
);
|
);
|
||||||
|
@ -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', () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user