mirror of
https://github.com/apache/superset.git
synced 2024-09-12 16:49:40 -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,
|
||||
"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": {
|
||||
"type": "CheckboxControl",
|
||||
"label": "Show Bubbles",
|
||||
|
@ -1325,6 +1325,22 @@ export const controls = {
|
||||
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: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Show Bubbles'),
|
||||
|
@ -770,6 +770,7 @@ export const visTypes = {
|
||||
['table_timestamp_format'],
|
||||
['row_limit', 'page_length'],
|
||||
['include_search', 'table_filter'],
|
||||
['align_pn', 'color_pn'],
|
||||
],
|
||||
},
|
||||
],
|
||||
|
@ -30,8 +30,14 @@ function tableVis(slice, payload) {
|
||||
return arr;
|
||||
}
|
||||
const maxes = {};
|
||||
const mins = {};
|
||||
for (let i = 0; i < metrics.length; i += 1) {
|
||||
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);
|
||||
@ -100,14 +106,29 @@ function tableVis(slice, payload) {
|
||||
.append('td')
|
||||
.style('background-image', function (d) {
|
||||
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 left, rgba(0,0,0,0.2), rgba(0,0,0,0.2) ${perc}%, ` +
|
||||
`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
|
||||
// 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%)`
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.classed('text-right', d => d.isMetric)
|
||||
|
Loading…
Reference in New Issue
Block a user