How to use the @hpcc-js/layout.Layered function in @hpcc-js/layout

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.

github hpcc-systems / Visualization / tests / test-layout / src / layout.spec.ts View on Github external
const step2 = new Step()
                                    .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;
github hpcc-systems / Visualization / demos / gallery / samples / misc / GraphSlider.js View on Github external
.allowRange(true)
    .timePattern("%Y-%m-%d")
    .tickDateFormat("%b,%Y")
    .lowDatetime("1990-07-03")
    .highDatetime("2018-05-24")
    .step(1)
    .columns(["Date/Time"])
    .data([
        ["1990-07-03", "2018-05-24"]
    ]);
slider.change = function (s) {
    graph.data().vertices.forEach(function (vertex) {
        vertex.visible(s.data()[0][0] <= vertex.date && vertex.date <= s.data()[0][1]);
    })
}
new Layered()
    .addLayer(graph)
    .addLayer(slider, "bottom", 1, 0.1)
    .target("target")
    .render()
    ;