Skip to content

Commit

Permalink
Merge pull request #553 from jpmorganchase/restyle_element
Browse files Browse the repository at this point in the history 
Add 'styleElement' method to tell perspective-viewer to restyle picking up css changes
  • Loading branch information
@texodus
texodus authored Apr 26, 2019
2 parents 2fbf1ba + 8fdb104 commit 5b9703c
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 33 deletions.
8 changes: 4 additions & 4 deletions packages/perspective-viewer-highcharts/src/js/color_axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ function _get_gradient(type) {

const _get_gradients = (() => {
let gradients;
return function() {
if (gradients === undefined) {
return function(restyle) {
if (restyle || gradients === undefined) {
gradients = {};
for (let type of ["positive", "negative", "full"]) {
gradients[type] = _get_gradient.bind(this)(type);
Expand All @@ -41,9 +41,9 @@ const _get_gradients = (() => {
};
})();

export function color_axis(config, colorRange) {
export function color_axis(config, colorRange, restyle) {
let gradient,
{positive, negative, full} = _get_gradients.bind(this)();
{positive, negative, full} = _get_gradients.bind(this)(restyle);
if (colorRange[0] >= 0) {
gradient = positive;
} else if (colorRange[1] <= 0) {
Expand Down
10 changes: 5 additions & 5 deletions packages/perspective-viewer-highcharts/src/js/draw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function get_or_create_element(div) {
return perspective_highcharts_element;
}

export const draw = (mode, set_config) =>
export const draw = (mode, set_config, restyle) =>
async function(el, view, task) {
if (set_config) {
this._config = await view.get_config();
Expand Down Expand Up @@ -86,7 +86,7 @@ export const draw = (mode, set_config) =>
} else {
config.chart.type = "coloredBubble";
}
color_axis.call(this, config, colorRange);
color_axis.call(this, config, colorRange, restyle);
}
if (num_aggregates < 3) {
set_boost(config, xaxis_type, yaxis_type);
Expand All @@ -108,7 +108,7 @@ export const draw = (mode, set_config) =>
config.legend.enabled = true;
config.legend.floating = false;

color_axis.call(this, config, colorRange);
color_axis.call(this, config, colorRange, restyle);
set_boost(config, xaxis_type, yaxis_type);
set_category_axis(config, "xAxis", xtree_type, top);
set_category_axis(config, "yAxis", ytree_type, ytop);
Expand All @@ -124,7 +124,7 @@ export const draw = (mode, set_config) =>
config.plotOptions.series.borderWidth = 1;
config.legend.floating = false;
if (colorRange) {
color_axis.call(this, config, colorRange);
color_axis.call(this, config, colorRange, restyle);
}
configs.push(config);
}
Expand Down Expand Up @@ -185,7 +185,7 @@ export const draw = (mode, set_config) =>
}
} finally {
element = get_or_create_element.call(this, el);
if (this.hasAttribute("updating")) {
if (restyle || this.hasAttribute("updating")) {
element.delete();
}
}
Expand Down
3 changes: 3 additions & 0 deletions packages/perspective-viewer-highcharts/src/js/highcharts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ global.registerPlugin("xy_scatter", {
name: "X/Y Scatter Chart",
create: draw("scatter", true),
update: draw("scatter", false),
styleElement: draw("scatter", false, true),
resize: resize,
initial: {
type: "number",
Expand All @@ -137,6 +138,7 @@ global.registerPlugin("treemap", {
create: draw("treemap", true),
update: draw("treemap", false),
resize: resize,
styleElement: draw("treemap", false, true),
initial: {
type: "number",
count: 2,
Expand All @@ -151,6 +153,7 @@ global.registerPlugin("sunburst", {
name: "Sunburst",
create: draw("sunburst", true),
update: draw("sunburst", false),
styleElement: draw("sunburst", false, true),
resize: resize,
initial: {
type: "number",
Expand Down
69 changes: 45 additions & 24 deletions packages/perspective-viewer-hypergrid/src/js/hypergrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,44 @@ bindTemplate(TEMPLATE, style)(
}
}

apply_styles() {
const font = `${this.get_style("--hypergrid--font-size")} ${this.get_style("--hypergrid--font-family")}`;
const headerfont = `${this.get_style("--hypergrid-header--font-size")} ${this.get_style("--hypergrid-header--font-family")}`;
const hoverRowHighlight = {
enabled: true,
backgroundColor: this.get_style("--hypergrid-row-hover--background"),
color: this.get_style("--hypergrid-row-hover--color")
};

const hoverCellHighlight = {
enabled: true,
backgroundColor: this.get_style("--hypergrid-cell-hover--background"),
color: this.get_style("--hypergrid-cell-hover--color")
};

const grid_properties = {
treeHeaderBackgroundColor: this.get_style("--hypergrid-tree-header--background"),
backgroundColor: this.get_style("--hypergrid-tree-header--background"),
treeHeaderColor: this.get_style("--hypergrid-tree-header--color"),
color: this.get_style("--hypergrid-tree-header--color"),
columnHeaderBackgroundColor: this.get_style("--hypergrid-header--background"),
columnHeaderSeparatorColor: this.get_style("--hypergrid-separator--color"),
columnHeaderColor: this.get_style("--hypergrid-header--color"),
columnColorNumberPositive: this.get_style("--hypergrid-positive--color"),
columnColorNumberNegative: this.get_style("--hypergrid-negative--color"),
columnBackgroundColorNumberPositive: this.get_style("--hypergrid-positive--background"),
columnBackgroundColorNumberNegative: this.get_style("--hypergrid-negative--background"),
columnHeaderFont: headerfont,
font,
rowHeaderFont: font,
treeHeaderFont: font,
hoverRowHighlight,
hoverCellHighlight
};

this.grid && this.grid.addProperties(grid_properties);
}

connectedCallback() {
if (!this.grid) {
const host = this.shadowRoot.querySelector("#mainGrid");
Expand Down Expand Up @@ -197,30 +235,7 @@ bindTemplate(TEMPLATE, style)(
const grid_properties = generateGridProperties(light_theme_overrides);

grid_properties["showRowNumbers"] = grid_properties["showCheckboxes"] || grid_properties["showRowNumbers"];
grid_properties["treeHeaderBackgroundColor"] = grid_properties["backgroundColor"] = this.get_style("--hypergrid-tree-header--background");
grid_properties["treeHeaderColor"] = grid_properties["color"] = this.get_style("--hypergrid-tree-header--color");
grid_properties["columnHeaderBackgroundColor"] = this.get_style("--hypergrid-header--background");
grid_properties["columnHeaderSeparatorColor"] = this.get_style("--hypergrid-separator--color");
grid_properties["columnHeaderColor"] = this.get_style("--hypergrid-header--color");

grid_properties["columnColorNumberPositive"] = this.get_style("--hypergrid-positive--color");
grid_properties["columnColorNumberNegative"] = this.get_style("--hypergrid-negative--color");
grid_properties["columnBackgroundColorNumberPositive"] = this.get_style("--hypergrid-positive--background");
grid_properties["columnBackgroundColorNumberNegative"] = this.get_style("--hypergrid-negative--background");

const font = `${this.get_style("--hypergrid--font-size")} ${this.get_style("--hypergrid--font-family")}`;
const headerfont = `${this.get_style("--hypergrid-header--font-size")} ${this.get_style("--hypergrid-header--font-family")}`;

grid_properties["columnHeaderFont"] = headerfont;
grid_properties["font"] = font;
grid_properties["rowHeaderFont"] = font;
grid_properties["treeHeaderFont"] = font;

grid_properties["hoverRowHighlight"]["backgroundColor"] = this.get_style("--hypergrid-row-hover--background");
grid_properties["hoverRowHighlight"]["color"] = this.get_style("--hypergrid-row-hover--color");
grid_properties["hoverCellHighlight"]["backgroundColor"] = this.get_style("--hypergrid-cell-hover--background");
grid_properties["hoverCellHighlight"]["color"] = this.get_style("--hypergrid-cell-hover--color");

this.apply_styles();
this.grid.addProperties(grid_properties);

this.grid.localization.header = {
Expand Down Expand Up @@ -306,6 +321,11 @@ async function grid_update(div, view, task) {
this.hypergrid.canvas.paintNow();
}

function style_element() {
const element = this[PRIVATE].grid;
element.apply_styles();
element.grid.canvas.paintNow();
}
/**
* Create a new <perspective-hypergrid> web component, and attach it to the DOM.
*
Expand Down Expand Up @@ -397,6 +417,7 @@ global.registerPlugin("hypergrid", {
selectMode: "toggle",
update: grid_update,
deselectMode: "pivots",
styleElement: style_element,
resize: async function() {
if (this.hypergrid) {
this.hypergrid.canvas.checksize();
Expand Down
7 changes: 7 additions & 0 deletions packages/perspective-viewer/src/js/viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,13 @@ class PerspectiveViewer extends ActionElement {
return x;
}

/**
* Restyles the elements and to pick up any style changes
*/
restyleElement() {
this._restyle_plugin();
}

/**
* Serialize this element's attribute/interaction state.
*
Expand Down
7 changes: 7 additions & 0 deletions packages/perspective-viewer/src/js/viewer/perspective_element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,13 @@ export class PerspectiveElement extends StateElement {
return () => this.setAttribute("render_time", performance.now() - t);
}

_restyle_plugin() {
if (this._plugin.styleElement) {
const task = (this._task = new CancelTask());
this._plugin.styleElement.call(this, this._datavis, this._view, task);
}
}

_clear_state(clear_table = true) {
if (this._task) {
this._task.cancel();
Expand Down

0 comments on commit 5b9703c

Please sign in to comment.