[superset] branch revising-table-bar-chart-css created (now 8b145cc8ef)

[ru...@apache.org]

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

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


      at 8b145cc8ef Switching to pseudo element with dynamic attributes

This branch includes the following new commits:

     new 8b145cc8ef Switching to pseudo element with dynamic attributes

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

[superset] 01/01: Switching to pseudo element with dynamic attributes

[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

commit 8b145cc8eff53fb0b870ce5ed32ba5643d960201
Author: Evan Rusackas <ev...@preset.io>
AuthorDate: Wed Sep 14 20:04:16 2022 -0600

    Switching to pseudo element with dynamic attributes
---
 .../plugins/plugin-chart-table/src/TableChart.tsx  | 97 ++++++++++++++++++++++
 1 file changed, 97 insertions(+)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 98c19f20ba..5206acf8d3 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -79,6 +79,75 @@ function getSortTypeByDataType(dataType: GenericDataType): DefaultSortTypes {
   return 'basic';
 }
 
+/**
+ * Cell background width calculation for horizontal bar chart
+ */
+function cellWidth({
+  value,
+  valueRange,
+  alignPositiveNegative,
+}: {
+  value: number;
+  valueRange: ValueRange;
+  alignPositiveNegative: boolean;
+}) {
+  const [minValue, maxValue] = valueRange;
+  if (alignPositiveNegative) {
+    const perc = Math.abs(Math.round((value / maxValue) * 100));
+    return perc;
+  }
+  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;
+}
+
+/**
+ * Cell left margin (offset) calculation for horizontal bar chart elements
+ * when alignPositiveNegative is not set
+ */
+function cellOffset({
+  value,
+  valueRange,
+  alignPositiveNegative,
+}: {
+  value: number;
+  valueRange: ValueRange;
+  alignPositiveNegative: boolean;
+}) {
+  if (alignPositiveNegative) {
+    return 0;
+  }
+  const [minValue, maxValue] = valueRange;
+  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,
+  );
+  return perc1;
+}
+
+/**
+ * Cell background color calculation for horizontal bar chart
+ */
+function cellBackground({
+  value,
+  colorPositiveNegative = false,
+}: {
+  value: number;
+  colorPositiveNegative: boolean;
+}) {
+  const r = colorPositiveNegative && value < 0 ? 150 : 0;
+  return (
+    `rgba(${r},0,0,0.2)`
+  );
+}
+
 /**
  * Cell background to render columns as horizontal bar chart
  */
@@ -414,6 +483,34 @@ export default function TableChart<D extends DataRecord = DataRecord>(
                 })
               : undefined)};
             white-space: ${value instanceof Date ? 'nowrap' : undefined};
+            position: relative;
+            &::after {
+              content: '';
+              position: absolute;
+              width: ${valueRange
+                ? cellWidth({
+                    value: value as number,
+                    valueRange,
+                    alignPositiveNegative,
+                  }) + '%'
+                : undefined};
+              height: 100%;
+              display: ${valueRange ? 'block' : 'none'};
+              top: 0;
+              left: ${valueRange
+                ? cellOffset({
+                    value: value as number,
+                    valueRange,
+                    alignPositiveNegative,
+                  }) + '%'
+                : undefined};
+              background-color: ${valueRange
+                ? cellBackground({
+                    value: value as number,
+                    colorPositiveNegative,
+                  })
+                : undefined};
+            }
           `;
 
           const cellProps = {