Skip to content

Commit

Permalink
Make row titles configurable via plugin API
Browse files Browse the repository at this point in the history
  • Loading branch information
@texodus
texodus committed Apr 2, 2019
1 parent c6381c9 commit f035b8e
Show file tree
Hide file tree
Showing 10 changed files with 33 additions and 183 deletions.
3 changes: 2 additions & 1 deletion packages/perspective-viewer-d3fc/src/js/charts/candlestick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ candlestick.plugin = {
max_size: 25000,
initial: {
type: "number",
count: 4
count: 4,
names: ["Open", "Close", "High", "Low"]
}
};

Expand Down
3 changes: 2 additions & 1 deletion packages/perspective-viewer-d3fc/src/js/charts/ohlc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ ohlc.plugin = {
max_size: 25000,
initial: {
type: "number",
count: 4
count: 4,
names: ["Open", "Close", "High", "Low"]
}
};

Expand Down
3 changes: 2 additions & 1 deletion packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ xyScatter.plugin = {
max_size: 25000,
initial: {
type: "number",
count: 2
count: 2,
names: ["X Axis", "Y Axis", "Color", "Size"]
}
};

Expand Down
7 changes: 0 additions & 7 deletions packages/perspective-viewer-d3fc/src/js/plugin/template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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);
}

Expand Down
51 changes: 0 additions & 51 deletions packages/perspective-viewer-d3fc/src/less/perspective-view.less
View file

This file was deleted.

12 changes: 8 additions & 4 deletions packages/perspective-viewer-highcharts/src/js/highcharts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -137,7 +139,8 @@ global.registerPlugin("treemap", {
resize: resize,
initial: {
type: "number",
count: 2
count: 2,
names: ["Size", "Color"]
},
selectMode: "toggle",
delete: function() {},
Expand All @@ -151,7 +154,8 @@ global.registerPlugin("sunburst", {
resize: resize,
initial: {
type: "number",
count: 2
count: 2,
names: ["Size", "Color"]
},
selectMode: "toggle",
delete: function() {},
Expand Down
1 change: 1 addition & 0 deletions packages/perspective-viewer/src/js/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export function registerElement(templateString, styleString, proto) {
template.innerHTML = `<style>${styleString.toString()}</style>` + template.innerHTML;
}
window.ShadyCSS && window.ShadyCSS.prepareTemplate(template, template.getAttribute("id"));
template.innerHTML = `<style id="psp_styles" scope="${template.getAttribute("id")}">test{}</style>` + template.innerHTML;

const _perspective_element = class extends proto {
attributeChangedCallback(name, old, value) {
Expand Down
1 change: 1 addition & 0 deletions packages/perspective-viewer/src/js/viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"));
}
Expand Down
17 changes: 17 additions & 0 deletions packages/perspective-viewer/src/js/viewer/dom_element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
*
*/

import detectIE from "detectie";
import perspective from "@jpmorganchase/perspective";
import {undrag} from "./dragdrop.js";
import {renderers} from "./renderers.js";
Expand Down Expand Up @@ -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";
Expand Down
118 changes: 0 additions & 118 deletions packages/perspective-viewer/src/less/column_labels.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@
*
*/

.titled {
margin-top: 23px;
}

:host {
#app #top_panel {
#row_pivots label:before {
Expand Down Expand Up @@ -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";
}
}
}
}
}

0 comments on commit f035b8e

Please sign in to comment.