How to use the @hpcc-js/layout.Carousel 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
).right(new Line()
                                        .columns(data.ND.subjects.columns)
                                        .data(data.ND.subjects.data)
                                    ).bottom(new Column()
                                        .columns(data.ND.subjects.columns)
                                        .data(data.ND.subjects.data)
                                    ).left(new Step()
                                        .columns(data.ND.subjects.columns)
                                        .data(data.ND.subjects.data)
                                    ).center(new Pie()
                                        .columns(data.ND.subjects.columns)
                                        .data(data.ND.subjects.data)
                                    ));
                                break;
                            case Carousel:
                                render(new Carousel()
                                    .widgets([
                                        new Pie().columns(data.ND.subjects.columns).data(data.ND.subjects.data),
                                        new Line().columns(data.ND.subjects.columns).data(data.ND.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)
                                );
github hpcc-systems / Visualization / packages / eclwatch / src / WUGraph.ts View on Github external
.on("click", kind => {
            this.render();
        })
        .on("mouseover", kind => {
            const verticesMap: { [id: string]: boolean } = {};
            for (const vertex of this._gc.vertices(kind)) {
                verticesMap[vertex.id()] = true;
            }
            this._graph.highlightVerticies(verticesMap);
        })
        .on("mouseout", kind => {
            this._graph.highlightVerticies();
        })
        ;

    protected _view = new Carousel().widgets([this._graph, this._activities, this._edges, this._subgraphs]);

    protected _gc = new WUScopeController();

    constructor() {
        super();
        this.topOverlay(false);
        this.widget(this._view);
        const buttons: Widget[] = [
            this._toggleGraph,
            this._toggleActivities,
            this._toggleEdges,
            this._toggleSubgraphs,
            new Spacer(),
            this._partialAll,
            this._maxAll,
            new Spacer(),