Skip to content

Commit

Permalink
Split foreground and background numeric color modes into separate set…
Browse files Browse the repository at this point in the history 
…tings
  • Loading branch information
@texodus
texodus committed Jul 4, 2022
1 parent ead6b72 commit 284f8fb
Show file tree
Hide file tree
Showing 7 changed files with 639 additions and 322 deletions.
32 changes: 21 additions & 11 deletions packages/perspective-viewer-datagrid/src/js/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,14 @@ import {
createModel,
configureRegularTable,
formatters,
create_color_record,
} from "./regular_table_handlers.js";
import MATERIAL_STYLE from "../less/regular_table.less";
import TOOLBAR_STYLE from "../less/toolbar.less";
import {configureRowSelectable, deselect} from "./row_selection.js";
import {configureClick} from "./click.js";
import {configureEditable} from "./editing.js";
import {configureSortable} from "./sorting.js";
import {PLUGIN_SYMBOL} from "./plugin_menu.js";
import {PLUGIN_SYMBOL, make_color_record} from "./plugin_menu.js";

export class PerspectiveViewerDatagridPluginElement extends HTMLElement {
constructor() {
Expand Down Expand Up @@ -208,9 +207,11 @@ export class PerspectiveViewerDatagridPluginElement extends HTMLElement {

for (const col of Object.keys(datagrid[PLUGIN_SYMBOL] || {})) {
const config = Object.assign({}, datagrid[PLUGIN_SYMBOL][col]);
if (config?.pos_color) {
config.pos_color = config.pos_color[0];
config.neg_color = config.neg_color[0];
if (config?.pos_fg_color || config?.pos_bg_color) {
config.pos_fg_color = config.pos_fg_color?.[0];
config.neg_fg_color = config.neg_fg_color?.[0];
config.pos_bg_color = config.pos_bg_color?.[0];
config.neg_bg_color = config.neg_bg_color?.[0];
}

if (config?.color) {
Expand Down Expand Up @@ -247,17 +248,26 @@ export class PerspectiveViewerDatagridPluginElement extends HTMLElement {
delete col_config["column_size_override"];
}

if (col_config?.pos_color) {
col_config.pos_color = create_color_record(
col_config.pos_color
if (col_config?.pos_fg_color) {
col_config.pos_fg_color = make_color_record(
col_config.pos_fg_color
);
col_config.neg_color = create_color_record(
col_config.neg_color
col_config.neg_fg_color = make_color_record(
col_config.neg_fg_color
);
}

if (col_config?.pos_bg_color) {
col_config.pos_bg_color = make_color_record(
col_config.pos_bg_color
);
col_config.neg_bg_color = make_color_record(
col_config.neg_bg_color
);
}

if (col_config?.color) {
col_config.color = create_color_record(col_config.color);
col_config.color = make_color_record(col_config.color);
}

if (Object.keys(col_config).length === 0) {
Expand Down
63 changes: 40 additions & 23 deletions packages/perspective-viewer-datagrid/src/js/plugin_menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,24 @@ export function make_gradient(chromahex) {
return `linear-gradient(to right top,rgb(${r1},${g1},${b1}),rgb(${r},${g},${b}) 50%,rgb(${r2},${g2},${b2}))`;
}

export function make_color_record(color) {
const chroma_neg = chroma(color);
const _neg_grad = make_gradient(chroma_neg);
const rgb = chroma_neg.rgb();

return [
color,
...rgb,
_neg_grad,
`rgba(${rgb[0]},${rgb[1]},${rgb[2]},1)`,
`rgba(${rgb[0]},${rgb[1]},${rgb[2]},0)`,
];
}

function blend(a, b) {
return chroma.mix(a, `rgb(${b[0]},${b[1]},${b[2]})`, 0.5).hex();
}

export function activate_plugin_menu(regularTable, target, column_max) {
const is_numeric = typeof column_max !== "undefined";
const MENU = document.createElement(
Expand All @@ -34,10 +52,14 @@ export function activate_plugin_menu(regularTable, target, column_max) {
let default_config;
if (is_numeric) {
default_config = {
gradient: column_max,
pos_color: this._pos_color[0],
neg_color: this._neg_color[0],
number_color_mode: "foreground",
fg_gradient: column_max,
pos_fg_color: this._pos_fg_color[0],
neg_fg_color: this._neg_fg_color[0],
number_fg_mode: "color",
bg_gradient: column_max,
pos_bg_color: this._pos_bg_color[0],
neg_bg_color: this._neg_bg_color[0],
number_bg_mode: "disabled",
};
} else {
default_config = {
Expand All @@ -60,25 +82,18 @@ export function activate_plugin_menu(regularTable, target, column_max) {
const scroll_handler = () => MENU.blur();
const update_handler = (event) => {
const config = event.detail;
if (config.pos_color) {
config.pos_color = [
config.pos_color,
...chroma(config.pos_color).rgb(),
make_gradient(chroma(config.pos_color)),
];
config.neg_color = [
config.neg_color,
...chroma(config.neg_color).rgb(),
make_gradient(chroma(config.neg_color)),
];
if (config.pos_fg_color) {
config.pos_fg_color = make_color_record(config.pos_fg_color);
config.neg_fg_color = make_color_record(config.neg_fg_color);
}

if (config.pos_bg_color) {
config.pos_bg_color = make_color_record(config.pos_bg_color);
config.neg_bg_color = make_color_record(config.neg_bg_color);
}

if (config.color) {
config.color = [
config.color,
...chroma(config.color).rgb(),
make_gradient(chroma(config.color)),
];
config.color = make_color_record(config.color);
}

regularTable[PLUGIN_SYMBOL] = regularTable[PLUGIN_SYMBOL] || {};
Expand Down Expand Up @@ -118,9 +133,11 @@ export function activate_plugin_menu(regularTable, target, column_max) {
(pset[column_name] = pset[column_name] || {})
);

if (config.pos_color) {
config.pos_color = config.pos_color[0];
config.neg_color = config.neg_color[0];
if (config.pos_fg_color || config.pos_bg_color) {
config.pos_fg_color = config.pos_fg_color?.[0];
config.neg_fg_color = config.neg_fg_color?.[0];
config.pos_bg_color = config.pos_bg_color?.[0];
config.neg_bg_color = config.neg_bg_color?.[0];
}

if (config.color) {
Expand Down
155 changes: 105 additions & 50 deletions packages/perspective-viewer-datagrid/src/js/regular_table_handlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {get_type_config} from "../../../perspective/src/js/config/index.js";
import {
activate_plugin_menu,
PLUGIN_SYMBOL,
make_gradient,
make_color_record,
} from "./plugin_menu.js";
import {rgbaToRgb, infer_foreground_from_background} from "./color_utils.js";

Expand Down Expand Up @@ -142,47 +142,89 @@ function styleListener(regularTable) {
if (is_numeric) {
const is_positive = metadata.user > 0;
const is_negative = metadata.user < 0;

let pos_bg_color;
if (plugin?.pos_bg_color !== undefined) {
pos_bg_color = plugin.pos_bg_color;
} else {
pos_bg_color = this._pos_bg_color;
}

let neg_bg_color;
if (plugin?.neg_bg_color !== undefined) {
neg_bg_color = plugin.neg_bg_color;
} else {
neg_bg_color = this._neg_bg_color;
}

const bg_tuple = is_positive
? pos_bg_color
: is_negative
? neg_bg_color
: ["", ...this._plugin_background, ""];

{
const [hex, r, g, b, _gradhex] = bg_tuple;

td.style.position = "";
if (plugin?.number_bg_mode === "color") {
td.style.backgroundColor = hex;
} else if (plugin?.number_bg_mode === "gradient") {
const a = Math.max(
0,
Math.min(
1,
Math.abs(metadata.user / plugin.bg_gradient)
)
);
const source = this._plugin_background;
const foreground = infer_foreground_from_background(
rgbaToRgb([r, g, b, a], source)
);

td.style.color = foreground;
td.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
} else if (
plugin?.number_bg_mode === "disabled" ||
!plugin?.number_bg_mode
) {
td.style.backgroundColor = "";
} else {
td.style.backgroundColor = "";
}
}

const [hex, r, g, b, gradhex] = (() => {
if (plugin?.pos_color !== undefined) {
if (plugin?.pos_fg_color !== undefined) {
return is_positive
? plugin.pos_color
? plugin.pos_fg_color
: is_negative
? plugin.neg_color
: ["", 0, 0, 0, ""];
? plugin.neg_fg_color
: ["", ...this._plugin_background, ""];
} else {
return is_positive
? this._pos_color
? this._pos_fg_color
: is_negative
? this._neg_color
: ["", 0, 0, 0, ""];
? this._neg_fg_color
: ["", ...this._plugin_background, ""];
}
})();

td.style.position = "";
if (plugin?.number_color_mode === "background") {
const source = this._plugin_background;
const foreground = infer_foreground_from_background(
rgbaToRgb([r, g, b, 1], source)
);
td.style.color = foreground;
td.style.backgroundColor = hex;
} else if (plugin?.number_color_mode === "gradient") {
const a = Math.max(
0,
Math.min(1, Math.abs(metadata.user / plugin.gradient))
);
const source = this._plugin_background;
const foreground = infer_foreground_from_background(
rgbaToRgb([r, g, b, a], source)
);

td.style.color = foreground;
td.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
} else if (plugin?.number_color_mode === "disabled") {
td.style.backgroundColor = "";
td.style.color = "";
} else if (plugin?.number_color_mode === "bar") {
td.style.backgroundColor = "";
if (plugin?.number_fg_mode === "disabled") {
if (plugin?.number_bg_mode === "color") {
const source = this._plugin_background;
const foreground = infer_foreground_from_background(
rgbaToRgb(
[bg_tuple[1], bg_tuple[2], bg_tuple[3], 1],
source
)
);
td.style.color = foreground;
} else if (plugin?.number_bg_mode === "gradient") {
} else {
td.style.color = "";
}
} else if (plugin?.number_fg_mode === "bar") {
td.style.color = "";
td.style.position = "relative";
if (
Expand All @@ -192,16 +234,18 @@ function styleListener(regularTable) {
) {
td.children[0].style.background = gradhex;
}
} else {
td.style.backgroundColor = "";
} else if (
plugin?.number_fg_mode === "color" ||
!plugin?.number_fg_mode
) {
td.style.color = hex;
}
} else if (type === "boolean") {
const [hex] =
metadata.user === true
? this._pos_color
? this._pos_fg_color
: metadata.user === false
? this._neg_color
? this._neg_fg_color
: ["", 0, 0, 0, ""];

td.style.backgroundColor = "";
Expand Down Expand Up @@ -309,7 +353,7 @@ function styleListener(regularTable) {
td.classList.toggle("psp-align-left", is_th || !is_numeric);
td.classList.toggle(
"psp-color-mode-bar",
plugin?.number_color_mode === "bar" && is_numeric
plugin?.number_fg_mode === "bar" && is_numeric
);
}
}
Expand Down Expand Up @@ -498,10 +542,10 @@ function _format(parts, val, plugins = {}, use_table_schema = false) {
"string";
const plugin = plugins[title];
const is_numeric = type === "integer" || type === "float";
if (is_numeric && plugin?.number_color_mode === "bar") {
if (is_numeric && plugin?.number_fg_mode === "bar") {
const a = Math.max(
0,
Math.min(0.95, Math.abs(val / plugin.gradient) * 0.95)
Math.min(0.95, Math.abs(val / plugin.fg_gradient) * 0.95)
);
const div = this._div_factory.get();
const anchor = val >= 0 ? "left" : "right";
Expand Down Expand Up @@ -662,10 +706,8 @@ class ElemFactory {
}
}

export function create_color_record(color) {
const chroma_neg = chroma(color);
const _neg_grad = make_gradient(chroma_neg);
return [color, ...chroma_neg.rgb(), _neg_grad];
function blend(a, b) {
return chroma.mix(a, `rgb(${b[0]},${b[1]},${b[2]})`, 0.5).hex();
}

export async function createModel(regular, table, view, extend = {}) {
Expand All @@ -675,7 +717,6 @@ export async function createModel(regular, table, view, extend = {}) {
// feed it into `validate_expressions` and get back the data types for
// each column without it being affected by a pivot.
const expressions = config.expressions.map((expr) => expr[1]);

const [
table_schema,
validated_expressions,
Expand All @@ -695,15 +736,27 @@ export async function createModel(regular, table, view, extend = {}) {
const _plugin_background = chroma(
get_rule(regular, "--plugin--background", "#FFFFFF")
).rgb();
const _pos_color = create_color_record(

const _pos_fg_color = make_color_record(
get_rule(regular, "--rt-pos-cell--color", "#338DCD")
);
const _neg_color = create_color_record(

const _neg_fg_color = make_color_record(
get_rule(regular, "--rt-neg-cell--color", "#FF5942")
);
const _color = create_color_record(

const _pos_bg_color = make_color_record(
blend(_pos_fg_color[0], _plugin_background)
);

const _neg_bg_color = make_color_record(
blend(_neg_fg_color[0], _plugin_background)
);

const _color = make_color_record(
get_rule(regular, "--active--color", "#ff0000")
);

const _schema = {...schema, ...expression_schema};
const _table_schema = {
...table_schema,
Expand Down Expand Up @@ -734,8 +787,10 @@ export async function createModel(regular, table, view, extend = {}) {
_open_column_styles_menu: [],
_plugin_background,
_color,
_pos_color,
_neg_color,
_pos_fg_color,
_neg_fg_color,
_pos_bg_color,
_neg_bg_color,
_column_paths,
_column_types,
_is_editable,
Expand Down
Loading

0 comments on commit 284f8fb

Please sign in to comment.