mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
Adding option to visualize negative values in Table view (#4570)
* Adding option to visualize negative values in Table view * Adding option for highlighting and right aligning * Fixed typo * Fixed case and condition * Formatting * Aligning left and default changes * Changing default
This commit is contained in:
parent
9edbd64c5d
commit
b512da8002
@ -2214,6 +2214,20 @@
|
|||||||
"default": false,
|
"default": false,
|
||||||
"description": "Whether to apply filter when table cell is clicked"
|
"description": "Whether to apply filter when table cell is clicked"
|
||||||
},
|
},
|
||||||
|
"align_pn": {
|
||||||
|
"type": "CheckboxControl",
|
||||||
|
"label": "Align +/-",
|
||||||
|
"renderTrigger": true,
|
||||||
|
"default": false,
|
||||||
|
"description": "Whether to align the background chart for +/- values"
|
||||||
|
},
|
||||||
|
"color_pn": {
|
||||||
|
"type": "CheckboxControl",
|
||||||
|
"label": "Color +/-",
|
||||||
|
"renderTrigger": true,
|
||||||
|
"default": true,
|
||||||
|
"description": "Whether to color +/- values"
|
||||||
|
},
|
||||||
"show_bubbles": {
|
"show_bubbles": {
|
||||||
"type": "CheckboxControl",
|
"type": "CheckboxControl",
|
||||||
"label": "Show Bubbles",
|
"label": "Show Bubbles",
|
||||||
|
@ -1325,6 +1325,22 @@ export const controls = {
|
|||||||
description: t('Whether to apply filter when table cell is clicked'),
|
description: t('Whether to apply filter when table cell is clicked'),
|
||||||
},
|
},
|
||||||
|
|
||||||
|
align_pn: {
|
||||||
|
type: 'CheckboxControl',
|
||||||
|
label: t('Align +/-'),
|
||||||
|
renderTrigger: true,
|
||||||
|
default: false,
|
||||||
|
description: t('Whether to align the background chart for +/- values'),
|
||||||
|
},
|
||||||
|
|
||||||
|
color_pn: {
|
||||||
|
type: 'CheckboxControl',
|
||||||
|
label: t('Color +/-'),
|
||||||
|
renderTrigger: true,
|
||||||
|
default: true,
|
||||||
|
description: t('Whether to color +/- values'),
|
||||||
|
},
|
||||||
|
|
||||||
show_bubbles: {
|
show_bubbles: {
|
||||||
type: 'CheckboxControl',
|
type: 'CheckboxControl',
|
||||||
label: t('Show Bubbles'),
|
label: t('Show Bubbles'),
|
||||||
|
@ -770,6 +770,7 @@ export const visTypes = {
|
|||||||
['table_timestamp_format'],
|
['table_timestamp_format'],
|
||||||
['row_limit', 'page_length'],
|
['row_limit', 'page_length'],
|
||||||
['include_search', 'table_filter'],
|
['include_search', 'table_filter'],
|
||||||
|
['align_pn', 'color_pn'],
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -30,8 +30,14 @@ function tableVis(slice, payload) {
|
|||||||
return arr;
|
return arr;
|
||||||
}
|
}
|
||||||
const maxes = {};
|
const maxes = {};
|
||||||
|
const mins = {};
|
||||||
for (let i = 0; i < metrics.length; i += 1) {
|
for (let i = 0; i < metrics.length; i += 1) {
|
||||||
maxes[metrics[i]] = d3.max(col(metrics[i]));
|
if (fd.align_pn) {
|
||||||
|
maxes[metrics[i]] = d3.max(col(metrics[i]).map(Math.abs));
|
||||||
|
} else {
|
||||||
|
maxes[metrics[i]] = d3.max(col(metrics[i]));
|
||||||
|
mins[metrics[i]] = d3.min(col(metrics[i]));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const tsFormatter = d3TimeFormatPreset(fd.table_timestamp_format);
|
const tsFormatter = d3TimeFormatPreset(fd.table_timestamp_format);
|
||||||
@ -100,12 +106,27 @@ function tableVis(slice, payload) {
|
|||||||
.append('td')
|
.append('td')
|
||||||
.style('background-image', function (d) {
|
.style('background-image', function (d) {
|
||||||
if (d.isMetric) {
|
if (d.isMetric) {
|
||||||
const perc = Math.round((d.val / maxes[d.col]) * 100);
|
const r = (fd.color_pn && d.val < 0) ? 150 : 0;
|
||||||
|
if (fd.align_pn) {
|
||||||
|
const perc = Math.abs(Math.round((d.val / maxes[d.col]) * 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(maxes[d.col], 0));
|
||||||
|
const negExtent = Math.abs(Math.min(mins[d.col], 0));
|
||||||
|
const tot = posExtent + negExtent;
|
||||||
|
const perc1 = Math.round((Math.min(negExtent + d.val, negExtent) / tot) * 100);
|
||||||
|
const perc2 = Math.round((Math.abs(d.val) / tot) * 100);
|
||||||
// The 0.01 to 0.001 is a workaround for what appears to be a
|
// The 0.01 to 0.001 is a workaround for what appears to be a
|
||||||
// CSS rendering bug on flat, transparent colors
|
// CSS rendering bug on flat, transparent colors
|
||||||
return (
|
return (
|
||||||
`linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.2) ${perc}%, ` +
|
`linear-gradient(to right, rgba(0,0,0,0.01), rgba(0,0,0,0.001) ${perc1}%, ` +
|
||||||
`rgba(0,0,0,0.01) ${perc}%, rgba(0,0,0,0.001) 100%)`
|
`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%)`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
|
Loading…
Reference in New Issue
Block a user