feat(plugin-chart-pivot-table): add automatic conditional formatter (a…

…pache#1264)
zhaoyongjie · Nov 26, 2021 · a109dc2 · a109dc2
1 parent 35f061a
commit a109dc2
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 9 deletions.
diff --git a/...ontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/types.ts b/...ontend/temporary_superset_ui/superset-ui/packages/superset-ui-chart-controls/src/types.ts
@@ -325,6 +325,7 @@ export type SectionOverrides = {
 // Ref:
 //  - superset-frontend/src/explore/components/ConditionalFormattingControl.tsx
 export enum COMPARATOR {
+  NONE = 'None',
   GREATER_THAN = '>',
   LESS_THAN = '<',
   GREATER_OR_EQUAL = '≥',

diff --git a/...perset_ui/superset-ui/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts b/...perset_ui/superset-ui/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
@@ -67,10 +67,23 @@ export const getColorFunction = (
   ) {
     return () => undefined;
   }
-  if (!MULTIPLE_VALUE_COMPARATORS.includes(operator) && targetValue === undefined) {
+  if (
+    operator !== COMPARATOR.NONE &&
+    !MULTIPLE_VALUE_COMPARATORS.includes(operator) &&
+    targetValue === undefined
+  ) {
     return () => undefined;
   }
   switch (operator) {
+    case COMPARATOR.NONE:
+      comparatorFunction = (value: number, allValues: number[]) => {
+        const cutoffValue = Math.min(...allValues);
+        const extremeValue = Math.max(...allValues);
+        return value >= cutoffValue && value <= extremeValue
+          ? { cutoffValue, extremeValue }
+          : false;
+      };
+      break;
     case COMPARATOR.GREATER_THAN:
       comparatorFunction = (value: number, allValues: number[]) =>
         value > targetValue!
@@ -156,10 +169,11 @@ export const getColorFormatters = (
   columnConfig?.reduce((acc: ColorFormatters, config: ConditionalFormattingConfig) => {
     if (
       config?.column !== undefined &&
-      config?.operator !== undefined &&
-      (MULTIPLE_VALUE_COMPARATORS.includes(config?.operator)
-        ? config?.targetValueLeft !== undefined && config?.targetValueRight !== undefined
-        : config?.targetValue !== undefined)
+      (config?.operator === COMPARATOR.NONE ||
+        (config?.operator !== undefined &&
+          (MULTIPLE_VALUE_COMPARATORS.includes(config?.operator)
+            ? config?.targetValueLeft !== undefined && config?.targetValueRight !== undefined
+            : config?.targetValue !== undefined)))
     ) {
       acc.push({
         column: config?.column,

diff --git a/..._ui/superset-ui/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts b/..._ui/superset-ui/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
@@ -279,6 +279,22 @@ describe('getColorFunction()', () => {
     expect(colorFunction(100)).toBeUndefined();
   });
 
+  it('getColorFunction with operator None', () => {
+    const colorFunction = getColorFunction(
+      {
+        operator: COMPARATOR.NONE,
+        colorScheme: 'rgb(255,0,0)',
+        column: 'count',
+      },
+      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(100)).toEqual('rgba(255,0,0,1)');
+    expect(colorFunction(120)).toEqual(undefined);
+  });
+
   it('getColorFunction with operator undefined', () => {
     const colorFunction = getColorFunction(
       {

diff --git a/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock b/superset-frontend/temporary_superset_ui/superset-ui/yarn.lock
@@ -4396,10 +4396,10 @@
     d3-cloud "^1.2.1"
     prop-types "^15.6.2"
 
-"@superset-ui/react-pivottable@^0.12.9":
-  version "0.12.9"
-  resolved "https://registry.yarnpkg.com/@superset-ui/react-pivottable/-/react-pivottable-0.12.9.tgz#f46ceef940c2f99c197db4acd7487efc48be05bf"
-  integrity sha512-wztcGEGg4Fc/zxHTDSP2ANyE9aZYiDPHf01FSx6rBapxtXP04NvyLPJl3RKNN/D5l98o5bj5xO/5KSailM9LjQ==
+"@superset-ui/react-pivottable@^0.12.10":
+  version "0.12.10"
+  resolved "https://registry.yarnpkg.com/@superset-ui/react-pivottable/-/react-pivottable-0.12.10.tgz#cd1e06a965ac1fed45b5157f04e5c786f556f5ae"
+  integrity sha512-+/DgVlfiJgXrswtnf7NOHpobgJFqF4h61kPn/cUeWdC6tDRjfnDc3xDqQMSqvbBjjaSnUD3880eBIxmrJD9ZGA==
   dependencies:
     immutability-helper "^3.1.1"
     prop-types "^15.7.2"