[superset] branch revising-table-bar-chart-css updated: Look, ma, no gradient!!

[ru...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch revising-table-bar-chart-css
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/revising-table-bar-chart-css by this push:
     new d25715f3b9 Look, ma, no gradient!!
d25715f3b9 is described below

commit d25715f3b9db507704033c34d0305e24f8ef474f
Author: Evan Rusackas <ev...@preset.io>
AuthorDate: Wed Sep 14 21:32:57 2022 -0600

    Look, ma, no gradient!!
---
 .../plugins/plugin-chart-table/src/TableChart.tsx  | 55 +---------------------
 1 file changed, 1 insertion(+), 54 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 5206acf8d3..92a614ec30 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -99,11 +99,8 @@ function cellWidth({
   const posExtent = Math.abs(Math.max(maxValue, 0));
   const negExtent = Math.abs(Math.min(minValue, 0));
   const tot = posExtent + negExtent;
-  const perc1 = Math.round(
-    (Math.min(negExtent + value, negExtent) / tot) * 100,
-  );
   const perc2 = Math.round((Math.abs(value) / tot) * 100);
-  return perc2 - perc1;
+  return perc2;
 }
 
 /**
@@ -148,47 +145,6 @@ function cellBackground({
   );
 }
 
-/**
- * Cell background to render columns as horizontal bar chart
- */
-function cellBar({
-  value,
-  valueRange,
-  colorPositiveNegative = false,
-  alignPositiveNegative,
-}: {
-  value: number;
-  valueRange: ValueRange;
-  colorPositiveNegative: boolean;
-  alignPositiveNegative: boolean;
-}) {
-  const [minValue, maxValue] = valueRange;
-  const r = colorPositiveNegative && value < 0 ? 150 : 0;
-  if (alignPositiveNegative) {
-    const perc = Math.abs(Math.round((value / maxValue) * 100));
-    // The 0.01 to 0.001 is a workaround for what appears to be a
-    // CSS rendering bug on flat, transparent colors
-    return (
-      `linear-gradient(to right, rgba(${r},0,0,0.2), rgba(${r},0,0,0.2) ${perc}%, ` +
-      `rgba(0,0,0,0.01) ${perc}%, rgba(0,0,0,0.001) 100%)`
-    );
-  }
-  const posExtent = Math.abs(Math.max(maxValue, 0));
-  const negExtent = Math.abs(Math.min(minValue, 0));
-  const tot = posExtent + negExtent;
-  const perc1 = Math.round(
-    (Math.min(negExtent + value, negExtent) / tot) * 100,
-  );
-  const perc2 = Math.round((Math.abs(value) / tot) * 100);
-  // The 0.01 to 0.001 is a workaround for what appears to be a
-  // CSS rendering bug on flat, transparent colors
-  return (
-    `linear-gradient(to right, rgba(0,0,0,0.01), rgba(0,0,0,0.001) ${perc1}%, ` +
-    `rgba(${r},0,0,0.2) ${perc1}%, rgba(${r},0,0,0.2) ${perc1 + perc2}%, ` +
-    `rgba(0,0,0,0.01) ${perc1 + perc2}%, rgba(0,0,0,0.001) 100%)`
-  );
-}
-
 function SortIcon<D extends object>({ column }: { column: ColumnInstance<D> }) {
   const { isSorted, isSortedDesc } = column;
   let sortIcon = <FaSort />;
@@ -473,15 +429,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
           const StyledCell = styled.td`
             text-align: ${sharedStyle.textAlign};
-            background: ${backgroundColor ||
-            (valueRange
-              ? cellBar({
-                  value: value as number,
-                  valueRange,
-                  alignPositiveNegative,
-                  colorPositiveNegative,
-                })
-              : undefined)};
             white-space: ${value instanceof Date ? 'nowrap' : undefined};
             position: relative;
             &::after {