How to use @hpcc-js/layout - 10 common examples
To help you get started, we’ve selected a few @hpcc-js/layout 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 / demos / quickstart / rollup / src / index.js View on Github 
import { Bar, Line, Pie, Radar } from "@hpcc-js/chart"
import { ChartPanel } from "@hpcc-js/layout"
import { DockPanel } from "@hpcc-js/phosphor"
var examResults = {
columns: ["Subject", "Year 1", "Year 2", "Year 3"],
data: [
["Geography", 75, 68, 65],
["English", 45, 55, 52],
["Math", 98, 92, 90],
["Science", 66, 60, 72]
]
};
// Chart Panel (Bar Chart) ---
const bar = new ChartPanel()
.widget(new Bar())
.title("Bar Chart")
.columns(examResults.columns)
.data(examResults.data)
;
// Pie Chart ---
const pie = new Pie()
.columns(examResults.columns)
.data(examResults.data)
.paletteID("Paired")
;
// Line ---
const line = new Line()
.columns(examResults.columns)context._ddlVisualizations.forEach(function (viz) {
removedMap.remove(viz.id);
if (!context._marshaller.widgetMappings().get(viz.id)) {
// New widget ---
viz.newWidgetSurface = null;
if (viz.widget instanceof Surface || viz.widget.classID() === "composite_MegaChart") {
viz.newWidgetSurface = viz.widget;
} else {
viz.newWidgetSurface = new Surface()
.widget(viz.widget)
;
}
viz.newWidgetSurface.title(viz.title);
viz.widget.size({ width: 0, height: 0 });
}
});
context._ddlPopupVisualizations.forEach(function (viz) {.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
, "Step Chart"
)
.addTab(new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
, "Pie Chart", true), "Nested Example"
)
);
break;
case Surface:
case Toolbar:
break;
case ChartPanel:
render(new ChartPanel()
.widget(new Column())
.title("Hello and Welcome!")
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
);
break;
case Legend:
break;
case HorizontalList:
const hlData: Array<[string, number, number]> = [
["A", 34, 21],
["B", 55, 34],
["C", 54, 90],
["D", 80, 153],
["E", 86, 92],
["F", 144, 233].columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
;
const grid = new Grid()
.setContent(0, 0, pie1, "Updates Step1")
.setContent(0, 1, pie2, "Updates Step1 & Step2")
.setContent(1, 0, step1, "Step1")
.setContent(1, 1, step2, "Step2")
;
grid.content()[0].indicateTheseIds([grid.content()[2].id()]);
grid.content()[1].indicateTheseIds([grid.content()[2].id(), grid.content()[3].id()]);
render(grid);
break;
case Layered:
render(new Layered()
.addLayer(new AbsoluteSurface().widgetX(0).widgetY(0).widgetWidth("100").widgetHeight("100").widget(new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
)
)
.addLayer(new AbsoluteSurface().widgetX(40).widgetY(40).widgetWidth("50").widgetHeight("50").opacity(0.66).widget(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
)
.addLayer(new AbsoluteSurface().widgetX(30).widgetY(10).widgetWidth("40").widgetHeight("60").widget(new Column()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
));
break;
case Modal:describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("layout", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case AbsoluteSurface:
const col = new Bar()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
;
render(new AbsoluteSurface()
.widget(col)
.widgetY(data.AbsoluteSurface.simple.widgetY)
.widgetWidth(data.AbsoluteSurface.simple.widgetWidth)
.widgetHeight(data.AbsoluteSurface.simple.widgetHeight)
.widgetX(data.AbsoluteSurface.simple.widgetX)
);
break;
case Accordion:
render(
new Accordion()
.pushListItem(new Accordion()
.pushListItem(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
).data(data.ND.subjects.data)
)
)
.pushListItem(new Accordion()
.pushListItem(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
)
.pushListItem(new Accordion()
.pushListItem(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
.pushListItem(
new Surface()
.size({ height: 200, width: 200 })
.title("Hello and Welcome!")
.widget(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
)
)
);
break;
case Border:
render(new Border()
.setContent("top", new Pie()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
).columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
));
break;
case Modal:
render(new Modal()
.widget(new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
)
);
break;
case Popup:
render(new Popup()
.widget(new Surface()
.widget(new Icon()
.faChar("\uF007")
)
)
);
break;
case Tabbed:
render(new Tabbed()
.addTab(new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
, "Pie Chart", true)
.addTab(
new Line()
.columns(data.ND.subjects.columns)
.data(data.TwoD.subjects.data)new Column().columns(data.ND.subjects.columns).data(data.ND.subjects.data),
new Step().columns(data.ND.subjects.columns).data(data.ND.subjects.data)
]));
break;
case Cell:
render(new Cell()
.title("Hello and Welcome!")
.widget(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
.buttonAnnotations(data.Surface.simple.buttonAnnotations)
);
break;
case Grid:
render(new Grid()
.setContent(0, 0, new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data), "", 2, 2
)
.setContent(0, 2, new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
.paletteID("Dark2"), "", 2, 2
)
.setContent(2, 0, new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
.paletteID("Paired"), "", 2, 2
)
.setContent(2, 2, new Pie()
.columns(data.TwoD.subjects.columns).data(data.TwoD.subjects.data)
)
)
.addLayer(new AbsoluteSurface().widgetX(40).widgetY(40).widgetWidth("50").widgetHeight("50").opacity(0.66).widget(new Line()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
)
.addLayer(new AbsoluteSurface().widgetX(30).widgetY(10).widgetWidth("40").widgetHeight("60").widget(new Column()
.columns(data.ND.subjects.columns)
.data(data.ND.subjects.data)
)
));
break;
case Modal:
render(new Modal()
.widget(new Pie()
.columns(data.TwoD.subjects.columns)
.data(data.TwoD.subjects.data)
)
);
break;
case Popup:
render(new Popup()
.widget(new Surface()
.widget(new Icon()
.faChar("\uF007")
)
)
);
break;
case Tabbed:["Astrology", 6]
])
.label("Label: ")
.valueColumn("Col Value")
.textColumn("Col Label")
);
break;
case Legend:
const line = new Line()
.columns(data.ND.ampolar.columns)
.data(data.ND.ampolar.data)
;
const legend = new Legend()
.targetWidget(line)
;
render(new Border()
.setContent("center", line)
.setContent("right", legend)
);
break;
default:
it.skip("Missing Test", () => {
expect(false).to.be.true;
});
}
}
});
}
Popular @hpcc-js/layout functions
- @hpcc-js/layout.AbsoluteSurface
- @hpcc-js/layout.Accordion
- @hpcc-js/layout.Border
- @hpcc-js/layout.Border2
- @hpcc-js/layout.Carousel
- @hpcc-js/layout.Cell
- @hpcc-js/layout.ChartPanel
- @hpcc-js/layout.FlexGrid
- @hpcc-js/layout.Grid
- @hpcc-js/layout.Grid.prototype
- @hpcc-js/layout.HorizontalList
- @hpcc-js/layout.Layered
- @hpcc-js/layout.Modal
- @hpcc-js/layout.Popup
- @hpcc-js/layout.Surface
- @hpcc-js/layout.Tabbed
- @hpcc-js/layout.Tabbed.prototype
- @hpcc-js/layout.Toolbar
- @hpcc-js/layout.VerticalList