@hpcc-js/layout
TypeScript icon, indicating that this package has built-in type declarations

2.49.20 • Public • Published

@hpcc-js/layout

This package is part of the mono repository "@hpcc-js" (aka Visualization Framework), for more information including Quick Start, Gallery and Tutorials, please visit the main page on GitHub: hpcc-systems/Visualization.

Exported Widgets

Stand-alone HTML Example

<html>
    <head>
        <title>Simple Carousel</title>
        <script src="https://unpkg.com/@hpcc-js/util"></script>
        <script src="https://unpkg.com/@hpcc-js/common"></script>
        <script src="https://unpkg.com/@hpcc-js/api"></script>
        <script src="https://unpkg.com/@hpcc-js/chart"></script>
        <script src="https://unpkg.com/@hpcc-js/layout"></script>
    </head>
    <body>
        <div id="placeholder" style="width:800px;height:600px;"></div>
        <script>
            const columns = ["Subject", "Year 1", "Year 2", "Year 3"];
            const data = [
                ["Geography", 75, 68, 65],
                ["English", 45, 55, -52],
                ["Math", 98, 92, 90],
                ["Science", 66, 60, 72]
            ];
            
            const carousel = new window["@hpcc-js/layout"].Carousel()
                .widgets([
                    new window["@hpcc-js/chart"].Pie().columns(columns).data(data),
                    new window["@hpcc-js/chart"].Line().columns(columns).data(data),
                    new window["@hpcc-js/chart"].Column().columns(columns).data(data),
                    new window["@hpcc-js/chart"].Step().columns(columns).data(data)
                ]);
            var active = 0;
            setInterval(function () {
                carousel.active(++active % 4).render();
            }, 3000);
        </script>
    </body>
</html>
<script type="module"> import { Column, Pie, Line, Step } from "@hpcc-js/chart"; import { Carousel } from "@hpcc-js/layout"; // Has dependency on "dgrid" so can't be used in a module...
    const columns = ["Subject", "Year 1", "Year 2", "Year 3"];
    const data = [
        ["Geography", 75, 68, 65],
        ["English", 45, 55, -52],
        ["Math", 98, 92, 90],
        ["Science", 66, 60, 72]
    ];

    const carousel = new Carousel()
        .widgets([
            new Pie().columns(columns).data(data),
            new Line().columns(columns).data(data),
            new Column().columns(columns).data(data),
            new Step().columns(columns).data(data)
        ])
        .target("target")
        .render()
        ;

    var active = 0;
    setInterval(function () {
        carousel.active(++active % 4).render();
    }, 3000);
</script>

Readme

Keywords

none

Package Sidebar

Install

npm i @hpcc-js/layout

Weekly Downloads

1,468

Version

2.49.20

License

Apache-2.0

Unpacked Size

2.17 MB

Total Files

103

Last publish

Collaborators

  • hpcc-js