You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2022/09/15 04:37:51 UTC
[superset] branch revising-table-bar-chart-css updated: conditional div, optimized styling, useful class names
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 8c3024919b conditional div, optimized styling, useful class names
8c3024919b is described below
commit 8c3024919b88c551667c3eb460b34119941cf6f1
Author: Evan Rusackas <ev...@preset.io>
AuthorDate: Wed Sep 14 22:37:32 2022 -0600
conditional div, optimized styling, useful class names
---
.../plugins/plugin-chart-table/src/TableChart.tsx | 65 +++++++++++++---------
1 file changed, 39 insertions(+), 26 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 92a614ec30..0cffa1fdbc 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -32,6 +32,7 @@ import { extent as d3Extent, max as d3Max } from 'd3-array';
import { FaSort } from '@react-icons/all-files/fa/FaSort';
import { FaSortDown as FaSortDesc } from '@react-icons/all-files/fa/FaSortDown';
import { FaSortUp as FaSortAsc } from '@react-icons/all-files/fa/FaSortUp';
+import cx from 'classnames';
import {
DataRecord,
DataRecordValue,
@@ -41,6 +42,7 @@ import {
getTimeFormatterForGranularity,
QueryObjectFilterClause,
styled,
+ css,
t,
tn,
} from '@superset-ui/core';
@@ -431,32 +433,35 @@ export default function TableChart<D extends DataRecord = DataRecord>(
text-align: ${sharedStyle.textAlign};
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 cellBarStyles = css`
+ position: absolute;
+ height: 100%;
+ display: block;
+ top: 0;
+ ${
+ valueRange && `
+ width: ${
+ cellWidth({
+ value: value as number,
+ valueRange,
+ alignPositiveNegative,
+ }) + '%'};
+ left: ${
+ cellOffset({
+ value: value as number,
+ valueRange,
+ alignPositiveNegative,
+ }) + '%'
+ };
+ background-color: ${
+ cellBackground({
+ value: value as number,
+ colorPositiveNegative,
+ })
+ };
+ `
}
`;
@@ -503,6 +508,14 @@ export default function TableChart<D extends DataRecord = DataRecord>(
) : (
text
)}
+ {valueRange && (
+ <div className={
+ cx(
+ 'cell-bar',
+ value && value < 0 ? 'negative' : 'positive',
+ )
+ } css={cellBarStyles} />
+ )}
</StyledCell>
);
},