This is an automated email from the ASF dual-hosted git repository.
stephenlyz pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 1665403484 fix(plugin-chart-pivot-table): color weight of Conditional
formatting metrics not work (#20396)
1665403484 is described below
commit 16654034849505109b638fd2a784dfb377238a0e
Author: Stephen Liu <[email protected]>
AuthorDate: Thu Jun 16 12:22:09 2022 +0800
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', () => {
