How to use @hpcc-js/phosphor - 8 common examples
To help you get started, we’ve selected a few @hpcc-js/phosphor examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hpcc-systems / Visualization / packages / marshaller / src / dashy.ts View on Github 
initMenu() {
const commands = new CommandRegistry();
// Dashboard Commands ---
commands.addCommand("dash_add", {
label: "Add Element",
execute: () => {
const viz = new Element(this._elementContainer);
this._elementContainer.append(viz);
this.loadDashboard().then(() => {
viz.refresh().then(() => {
this.selectionChanged(viz);
});
});
}
});
commands.addCommand("dash_clear", {initMenu() {
const commands = new CommandRegistry();
// Dashboard Commands ---
commands.addCommand("add_wu_result", {
label: "Workunit Result",
execute: () => {
this.add(new WUResult(this._ec));
}
});
commands.addCommand("add_logicalfile", {
label: "Logical File",
execute: () => {
this.add(new LogicalFile(this._ec));
}
});commands.addCommand("dash_load", {
label: "Open",
execute: () => {
this._fileOpen.property("accept", ".json");
this._fileOpen.node().click();
}
});
// Model Commands ---
const palette = new CommandPalette({ commands });
palette.addItem({ command: "addWUResult", category: "Notebook" });
palette.addItem({ command: "addView", category: "Notebook" });
palette.addItem({ command: "remove", category: "Notebook" });
palette.id = "palette";
const contextMenu = new ContextMenu({ commands });
contextMenu.addItem({ command: "dash_add", selector: `#${this._dashboard.id()}` });
contextMenu.addItem({ command: "dash_clear", selector: `#${this._dashboard.id()}` });
contextMenu.addItem({ type: "separator", selector: `#${this._dashboard.id()}` });
contextMenu.addItem({ command: "dash_load", selector: `#${this.id()}` });
contextMenu.addItem({ command: "dash_save", selector: `#${this.id()}` });
document.addEventListener("contextmenu", (event: MouseEvent) => {
if (contextMenu.open(event)) {
event.preventDefault();
}
});
};
// Line ---
const line = new Line()
.columns(examResults.columns)
.data(examResults.data)
;
// Hex Bin ---
const radar = new Radar()
.columns(examResults.columns)
.data(examResults.data)
;
// Dock Panel ---
var app = new DockPanel()
.target("placeholder")
.addWidget(bar, "Bar")
.addWidget(line, "Line", "split-right", bar)
.addWidget(pie, "Pie", "split-bottom", bar)
.addWidget(radar, "Radar", "tab-after", line)
.render()
;
export function doResize() {
if (app) {
app
.resize()
.render()
;
}
}execute: () => {
const text = JSON.stringify(this._dashboard.save(), null, " ");
Utility.downloadBlob("JSON", text, "dashy", "json");
}
});
commands.addCommand("dash_load", {
label: "Open",
execute: () => {
this._fileOpen.property("accept", ".json");
this._fileOpen.node().click();
}
});
// Model Commands ---
const palette = new CommandPalette({ commands });
palette.addItem({ command: "addWUResult", category: "Notebook" });
palette.addItem({ command: "addView", category: "Notebook" });
palette.addItem({ command: "remove", category: "Notebook" });
palette.id = "palette";
const contextMenu = new ContextMenu({ commands });
contextMenu.addItem({ command: "dash_add", selector: `#${this._dashboard.id()}` });
contextMenu.addItem({ command: "dash_clear", selector: `#${this._dashboard.id()}` });
contextMenu.addItem({ type: "separator", selector: `#${this._dashboard.id()}` });
contextMenu.addItem({ command: "dash_load", selector: `#${this.id()}` });
contextMenu.addItem({ command: "dash_save", selector: `#${this.id()}` });
document.addEventListener("contextmenu", (event: MouseEvent) => {
if (contextMenu.open(event)) {commands.addCommand("add_databomb", {
label: "Databomb",
execute: () => {
this.add(new Databomb());
}
});
commands.addCommand("add_form", {
label: "Form",
execute: () => {
this.add(new Form());
}
});
this._contextMenu = new ContextMenu({ commands });
this._contextMenu.addItem({ command: "add_wu_result", selector: ".common_Button" });
this._contextMenu.addItem({ command: "add_logicalfile", selector: ".common_Button" });
this._contextMenu.addItem({ command: "add_roxie", selector: ".common_Button" });
this._contextMenu.addItem({ command: "add_databomb", selector: ".common_Button" });
this._contextMenu.addItem({ command: "add_form", selector: ".common_Button" });
}import { Column } from "@hpcc-js/chart";
var chart1 = new ChartPanel()
.widget(new Column().tooltipValueFormat(",.0f"))
.columns(["StackOverflow Tag", "Today", "This Week"])
.data(get_data().map(n=>[n[0],n[2],n[3]]))
.title("Usage Today & This Week")
.legendVisible(true)
;
var chart2 = new ChartPanel()
.widget(new Column().tooltipValueFormat(",.0f"))
.columns(["StackOverflow Tag", "All Time Tag Usage"])
.data(get_data().map(n=>[n[0],n[1]]))
.title("All-Time Usage")
;
new DockPanel()
.addWidget(chart1, "")
.addWidget(chart2, "")
.hideSingleTabs(true)
.target("target")
.render()
;
function get_data(){
return [
["javascript",1690160,834,4978],
["java",1463277,594,3687],
["c#",1247492,420,2661],
["php",1230920,413,2508],
["android",1138896,475,2947],
["python",1030566,784,5102],
["jquery",929172,199,1234],const area = new Area()
.columns(twoD.columns)
.data(twoD.data);
const line = new Line()
.columns(twoD.columns)
.data(twoD.data);
const bubble = new Bubble()
.columns(twoD.columns)
.data(twoD.data)
.paletteID("Dark2");
const pie = new Pie()
.columns(twoD.columns)
.data(twoD.data)
.paletteID("Dark2");
new DockPanel()
.addWidget(area, "")
.addWidget(line, "", "split-bottom")
.addWidget(bubble, "", "split-right", area)
.addWidget(pie, "", "split-right", bubble)
.target("target")
.hideSingleTabs(true)
.render()
;
