diff --git a/packages/perspective-viewer-d3fc/src/js/charts/candlestick.js b/packages/perspective-viewer-d3fc/src/js/charts/candlestick.js
index a0ed10e741..3034c4ebb6 100644
--- a/packages/perspective-viewer-d3fc/src/js/charts/candlestick.js
+++ b/packages/perspective-viewer-d3fc/src/js/charts/candlestick.js
@@ -16,7 +16,8 @@ candlestick.plugin = {
max_size: 25000,
initial: {
type: "number",
- count: 4
+ count: 4,
+ names: ["Open", "Close", "High", "Low"]
}
};
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/ohlc.js b/packages/perspective-viewer-d3fc/src/js/charts/ohlc.js
index 587f386801..b575b7424b 100644
--- a/packages/perspective-viewer-d3fc/src/js/charts/ohlc.js
+++ b/packages/perspective-viewer-d3fc/src/js/charts/ohlc.js
@@ -16,7 +16,8 @@ ohlc.plugin = {
max_size: 25000,
initial: {
type: "number",
- count: 4
+ count: 4,
+ names: ["Open", "Close", "High", "Low"]
}
};
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js b/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js
index abac2885cf..844a6f599c 100644
--- a/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js
+++ b/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js
@@ -91,7 +91,8 @@ xyScatter.plugin = {
max_size: 25000,
initial: {
type: "number",
- count: 2
+ count: 2,
+ names: ["X Axis", "Y Axis", "Color", "Size"]
}
};
diff --git a/packages/perspective-viewer-d3fc/src/js/plugin/template.js b/packages/perspective-viewer-d3fc/src/js/plugin/template.js
index 441c0770c3..a89a25dd4f 100644
--- a/packages/perspective-viewer-d3fc/src/js/plugin/template.js
+++ b/packages/perspective-viewer-d3fc/src/js/plugin/template.js
@@ -9,7 +9,6 @@
import * as d3 from "d3";
import style from "../../less/chart.less";
-import perspectiveStyle from "../../less/perspective-view.less";
import template from "../../html/d3fc-chart.html";
import {areArraysEqualSimple} from "../utils/utils";
import {initialiseStyles} from "../series/colorStyles";
@@ -25,12 +24,6 @@ class D3FCChartElement extends HTMLElement {
this._chart = null;
this._settings = null;
- // Add the additional styles needed for the perspective-viewer host
- var style = document.createElement("style");
- style.setAttribute("scope", "perspective-viewer");
- style.textContent = perspectiveStyle;
- this.shadowRoot.host.getRootNode().appendChild(style);
-
initialiseStyles(this._container);
}
diff --git a/packages/perspective-viewer-d3fc/src/less/perspective-view.less b/packages/perspective-viewer-d3fc/src/less/perspective-view.less
deleted file mode 100644
index 8689ba908e..0000000000
--- a/packages/perspective-viewer-d3fc/src/less/perspective-view.less
+++ /dev/null
@@ -1,51 +0,0 @@
-:host([view=d3_xy_scatter]), :host([view=d3_candlestick]), :host([view=d3_ohlc]) {
- & #app {
- &.columns_horizontal #side_panel #inactive_columns {
- padding-top:28px
- }
-
- & #side_panel #active_columns perspective-row {
- &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) {
- margin-top:23px;
- }
- }
- }
-}
-
-:host([view=d3_xy_scatter]) #app #side_panel #active_columns perspective-row {
- &:nth-child(1):before {
- content:"X Axis"
- }
-
- &:nth-child(2):before {
- content:"Y Axis"
- }
-
- &:nth-child(3):before {
- content:"Color"
- }
-
- &:nth-child(4):before {
- content:"Size"
- }
-}
-
-:host([view=d3_candlestick]), :host([view=d3_ohlc]) {
- & #app #side_panel #active_columns perspective-row {
- &:nth-child(1):before {
- content:"Open"
- }
-
- &:nth-child(2):before {
- content:"Close"
- }
-
- &:nth-child(3):before {
- content:"High"
- }
-
- &:nth-child(4):before {
- content:"Low"
- }
- }
-}
diff --git a/packages/perspective-viewer-highcharts/src/js/highcharts.js b/packages/perspective-viewer-highcharts/src/js/highcharts.js
index 2d28ebf40f..ccf1f3d322 100644
--- a/packages/perspective-viewer-highcharts/src/js/highcharts.js
+++ b/packages/perspective-viewer-highcharts/src/js/highcharts.js
@@ -109,7 +109,8 @@ global.registerPlugin("xy_line", {
resize: resize,
initial: {
type: "number",
- count: 2
+ count: 2,
+ names: ["X Axis", "Y Axis"]
},
selectMode: "toggle",
delete: delete_chart,
@@ -123,7 +124,8 @@ global.registerPlugin("xy_scatter", {
resize: resize,
initial: {
type: "number",
- count: 2
+ count: 2,
+ names: ["X Axis", "Y Axis", "Color", "Size"]
},
selectMode: "toggle",
delete: delete_chart,
@@ -137,7 +139,8 @@ global.registerPlugin("treemap", {
resize: resize,
initial: {
type: "number",
- count: 2
+ count: 2,
+ names: ["Size", "Color"]
},
selectMode: "toggle",
delete: function() {},
@@ -151,7 +154,8 @@ global.registerPlugin("sunburst", {
resize: resize,
initial: {
type: "number",
- count: 2
+ count: 2,
+ names: ["Size", "Color"]
},
selectMode: "toggle",
delete: function() {},
diff --git a/packages/perspective-viewer/src/js/utils.js b/packages/perspective-viewer/src/js/utils.js
index a30a0855c1..2cf85864a4 100644
--- a/packages/perspective-viewer/src/js/utils.js
+++ b/packages/perspective-viewer/src/js/utils.js
@@ -55,6 +55,7 @@ export function registerElement(templateString, styleString, proto) {
template.innerHTML = `` + template.innerHTML;
}
window.ShadyCSS && window.ShadyCSS.prepareTemplate(template, template.getAttribute("id"));
+ template.innerHTML = `` + template.innerHTML;
const _perspective_element = class extends proto {
attributeChangedCallback(name, old, value) {
diff --git a/packages/perspective-viewer/src/js/viewer.js b/packages/perspective-viewer/src/js/viewer.js
index b9ab199a3a..c8f1823734 100755
--- a/packages/perspective-viewer/src/js/viewer.js
+++ b/packages/perspective-viewer/src/js/viewer.js
@@ -251,6 +251,7 @@ class PerspectiveViewer extends ActionElement {
*/
set view(v) {
this._vis_selector.value = this.getAttribute("view");
+ this._set_row_styles();
this._set_column_defaults();
this.dispatchEvent(new Event("perspective-config-update"));
}
diff --git a/packages/perspective-viewer/src/js/viewer/dom_element.js b/packages/perspective-viewer/src/js/viewer/dom_element.js
index c50760d802..9ca3ece22b 100644
--- a/packages/perspective-viewer/src/js/viewer/dom_element.js
+++ b/packages/perspective-viewer/src/js/viewer/dom_element.js
@@ -7,6 +7,7 @@
*
*/
+import detectIE from "detectie";
import perspective from "@jpmorganchase/perspective";
import {undrag} from "./dragdrop.js";
import {renderers} from "./renderers.js";
@@ -173,6 +174,22 @@ export class DomElement extends PerspectiveElement {
}
}
+ _set_row_styles() {
+ let style = "";
+ if (this._plugin.initial && this._plugin.initial.names) {
+ for (const nidx in this._plugin.initial.names) {
+ const name = this._plugin.initial.names[nidx];
+ style += `#active_columns perspective-row:nth-child(${parseInt(nidx) + 1}){margin-top:23px;}`;
+ style += `#active_columns perspective-row:nth-child(${parseInt(nidx) + 1}):before{content:"${name}";}`;
+ }
+ }
+ this.shadowRoot.querySelector("#psp_styles").innerHTML = style;
+
+ if (detectIE()) {
+ window.ShadyCSS.styleDocument();
+ }
+ }
+
_show_column_selectors() {
this.shadowRoot.querySelector("#columns_container").style.visibility = "visible";
this.shadowRoot.querySelector("#side_panel__actions").style.visibility = "visible";
diff --git a/packages/perspective-viewer/src/less/column_labels.less b/packages/perspective-viewer/src/less/column_labels.less
index a265b85eb7..0c7a07de95 100644
--- a/packages/perspective-viewer/src/less/column_labels.less
+++ b/packages/perspective-viewer/src/less/column_labels.less
@@ -7,10 +7,6 @@
*
*/
-.titled {
- margin-top: 23px;
-}
-
:host {
#app #top_panel {
#row_pivots label:before {
@@ -44,117 +40,3 @@
}
}
}
-
-:host([view="xy_line"]) {
- #app.columns_horizontal #side_panel {
- #inactive_columns {
- padding-top: 28px;
- }
- }
-
- #app #side_panel {
- #active_columns {
- perspective-row:nth-child(1) {
- .titled();
-
- &:before {
- content: "X Axis";
- }
- }
-
- perspective-row:nth-child(2) {
- .titled();
-
- &:before {
- content: "Y Axis";
- }
- }
- }
- }
-}
-
-:host([view="xy_scatter"]),
-:host([view="xy_line"]) {
- #app.columns_horizontal #side_panel {
- #inactive_columns {
- padding-top: 28px;
- }
- }
-
- #app #side_panel {
- #active_columns {
- perspective-row:nth-child(1) {
- .titled();
-
- &:before {
- content: "X Axis";
- }
- }
-
- perspective-row:nth-child(2) {
- .titled();
-
- &:before {
- content: "Y Axis";
- }
- }
- }
- }
-}
-
-:host([view="xy_scatter"]) {
- #app.columns_horizontal #side_panel {
- #inactive_columns {
- padding-top: 28px;
- }
- }
-
- #app #side_panel {
- #active_columns {
- perspective-row:nth-child(3) {
- .titled();
-
- &:before {
- content: "Color";
- }
- }
-
- perspective-row:nth-child(4) {
- .titled();
-
- &:before {
- content: "Size";
- }
- }
- }
- }
-}
-
-:host([view="treemap"]),
-:host([view="sunburst"]) {
- #app.columns_horizontal #side_panel {
- #inactive_columns {
- padding-top: 28px;
- }
- }
-
- #app #side_panel {
- #active_columns {
- perspective-row:nth-child(1) {
- .titled();
-
- &:before {
- content: "Size";
- }
- }
-
- perspective-row:nth-child(2) {
- .titled();
-
- &:before {
- content: "Color";
- }
- }
- }
- }
-}