Skip to content

Commit

Permalink
fix(chart-controls): lower minOpacity in conditional formatting (#1284)
Browse files Browse the repository at this point in the history 
* fix(chart-controls): lower minOpacity in conditional formatting

* Fix

* Change hardcoded value to a constant
  • Loading branch information
@kgabryje @zhaoyongjie
kgabryje authored and zhaoyongjie committed Nov 26, 2021
1 parent 90fa912 commit 128ec7e
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 23 deletions.
32 changes: 22 additions & 10 deletions ...perset_ui/superset-ui/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,19 +30,24 @@ export const round = (num: number, precision = 0) =>
export const rgbToRgba = (rgb: string, alpha: number) =>
rgb.replace(/rgb/i, 'rgba').replace(/\)/i, `,${alpha})`);

export const getOpacity = (value: number, cutoffPoint: number, extremeValue: number) => {
const MIN_OPACITY = 0.3;
const MAX_OPACITY = 1;

return extremeValue === cutoffPoint
? MAX_OPACITY
const MIN_OPACITY_BOUNDED = 0.05;
const MIN_OPACITY_UNBOUNDED = 0;
const MAX_OPACITY = 1;
export const getOpacity = (
value: number,
cutoffPoint: number,
extremeValue: number,
minOpacity = MIN_OPACITY_BOUNDED,
maxOpacity = MAX_OPACITY,
) =>
extremeValue === cutoffPoint
? maxOpacity
: round(
Math.abs(
((MAX_OPACITY - MIN_OPACITY) / (extremeValue - cutoffPoint)) * (value - cutoffPoint),
) + MIN_OPACITY,
((maxOpacity - minOpacity) / (extremeValue - cutoffPoint)) * (value - cutoffPoint),
) + minOpacity,
2,
);
};

export const getColorFunction = (
{
Expand All @@ -54,6 +59,9 @@ export const getColorFunction = (
}: ConditionalFormattingConfig,
columnValues: number[],
) => {
let minOpacity = MIN_OPACITY_BOUNDED;
const maxOpacity = MAX_OPACITY;

let comparatorFunction: (
value: number,
allValues: number[],
Expand All @@ -76,6 +84,7 @@ export const getColorFunction = (
}
switch (operator) {
case COMPARATOR.NONE:
minOpacity = MIN_OPACITY_UNBOUNDED;
comparatorFunction = (value: number, allValues: number[]) => {
const cutoffValue = Math.min(...allValues);
const extremeValue = Math.max(...allValues);
Expand Down Expand Up @@ -158,7 +167,10 @@ export const getColorFunction = (
const compareResult = comparatorFunction(value, columnValues);
if (compareResult === false) return undefined;
const { cutoffValue, extremeValue } = compareResult;
return rgbToRgba(colorScheme, getOpacity(value, cutoffValue, extremeValue));
return rgbToRgba(
colorScheme,
getOpacity(value, cutoffValue, extremeValue, minOpacity, maxOpacity),
);
};
};

Expand Down
28 changes: 15 additions & 13 deletions ..._ui/superset-ui/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,11 @@ describe('round', () => {
describe('getOpacity', () => {
it('getOpacity', () => {
expect(getOpacity(100, 100, 100)).toEqual(1);
expect(getOpacity(75, 50, 100)).toEqual(0.65);
expect(getOpacity(75, 100, 50)).toEqual(0.65);
expect(getOpacity(100, 100, 50)).toEqual(0.3);
expect(getOpacity(75, 50, 100)).toEqual(0.53);
expect(getOpacity(75, 100, 50)).toEqual(0.53);
expect(getOpacity(100, 100, 50)).toEqual(0.05);
expect(getOpacity(100, 100, 100, 0, 0.8)).toEqual(0.8);
expect(getOpacity(100, 100, 50, 0, 1)).toEqual(0);
});
});

Expand Down Expand Up @@ -97,7 +99,7 @@ describe('getColorFunction()', () => {
},
countValues,
);
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.3)');
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.05)');
expect(colorFunction(100)).toEqual('rgba(255,0,0,1)');
expect(colorFunction(0)).toBeUndefined();
});
Expand All @@ -113,7 +115,7 @@ describe('getColorFunction()', () => {
countValues,
);
expect(colorFunction(50)).toEqual('rgba(255,0,0,1)');
expect(colorFunction(100)).toEqual('rgba(255,0,0,0.3)');
expect(colorFunction(100)).toEqual('rgba(255,0,0,0.05)');
expect(colorFunction(150)).toBeUndefined();
});

Expand Down Expand Up @@ -143,7 +145,7 @@ describe('getColorFunction()', () => {
);
expect(colorFunction(60)).toBeUndefined();
expect(colorFunction(100)).toEqual('rgba(255,0,0,1)');
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.48)');
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.29)');

colorFunction = getColorFunction(
{
Expand All @@ -155,7 +157,7 @@ describe('getColorFunction()', () => {
countValues,
);
expect(colorFunction(90)).toBeUndefined();
expect(colorFunction(100)).toEqual('rgba(255,0,0,0.48)');
expect(colorFunction(100)).toEqual('rgba(255,0,0,0.29)');
expect(colorFunction(50)).toEqual('rgba(255,0,0,1)');
});

Expand All @@ -171,7 +173,7 @@ describe('getColorFunction()', () => {
countValues,
);
expect(colorFunction(50)).toBeUndefined();
expect(colorFunction(100)).toEqual('rgba(255,0,0,0.65)');
expect(colorFunction(100)).toEqual('rgba(255,0,0,0.53)');
});

it('getColorFunction BETWEEN_OR_EQUAL', () => {
Expand All @@ -185,7 +187,7 @@ describe('getColorFunction()', () => {
},
countValues,
);
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.3)');
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.05)');
expect(colorFunction(100)).toEqual('rgba(255,0,0,1)');
expect(colorFunction(150)).toBeUndefined();
});
Expand All @@ -201,7 +203,7 @@ describe('getColorFunction()', () => {
},
countValues,
);
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.3)');
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.05)');
expect(colorFunction(100)).toBeUndefined();
});

Expand Down Expand Up @@ -289,8 +291,8 @@ describe('getColorFunction()', () => {
countValues,
);
expect(colorFunction(20)).toEqual(undefined);
expect(colorFunction(50)).toEqual('rgba(255,0,0,0.3)');
expect(colorFunction(75)).toEqual('rgba(255,0,0,0.65)');
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(120)).toEqual(undefined);
});
Expand Down Expand Up @@ -364,7 +366,7 @@ describe('getColorFormatters()', () => {
expect(colorFormatters[1].getColorFromValue(400)).toBeUndefined();

expect(colorFormatters[2].column).toEqual('count');
expect(colorFormatters[2].getColorFromValue(100)).toEqual('rgba(255,0,0,0.65)');
expect(colorFormatters[2].getColorFromValue(100)).toEqual('rgba(255,0,0,0.53)');
});

it('undefined column config', () => {
Expand Down

0 comments on commit 128ec7e

Please sign in to comment.