<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "Streamline";
    include('partials/app-meta-title.php') ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "Streamline"; $pageSubTitle1 = "Data Visualization"; $pageSubTitle2 = "Data Bites"; $pageSubText = "A lightweight, dependency-free JavaScript library for generating sparkline charts."; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">
                        <div class="info-container">
                            Streamline is a lightweight, dependency-free JavaScript library for generating mini graphs. This in-house plugin is designed to be flexible and customizable to your needs. If you'd like to request additional features, please don’t hesitate to <a href="https://wrapbootstrap.com/user/MyOrange/message" target="_blank">contact us</a>.
                        </div>
                        <div class="row">
                            <div class="col-xl-6">
                                <!-- Line Chart -->
                                <div id="panel-1" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>Line <span class="fw-300"><i>Chart</i></span></h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Line charts display data points connected by straight line segments. You can customize the line color and width using <code>data-line-color</code> and <code>data-line-width</code> attributes.
                                            </div>
                                            <div class="demo d-flex justify-content-center flex-wrap d-sm-block">
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="line" data-line-color="var(--success-500)" data-fill-color="transparent" data-height="40" data-width="110" data-line-width="2">5,3,9,6,5,9,7,3,5,2</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="line" data-line-color="var(--danger-500)" data-fill-color="transparent" data-height="40" data-width="110" data-line-width="2">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="line" data-line-color="var(--warning-500)" data-fill-color="transparent" data-height="40" data-width="110" data-line-width="3">0,1,7,6,4,2,3,5,3,4</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="line" data-line-color="var(--info-500)" data-fill-color="transparent" data-height="40" data-width="110" data-line-width="4">5,3,9,6,5,3,1,7,6,4</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Bar Chart -->
                                <div id="panel-2" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>Bar <span class="fw-300"><i>Chart</i></span></h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Bar charts display data as vertical bars. You can customize bar colors, width, and spacing using data attributes.
                                            </div>
                                            <div class="demo d-flex justify-content-center flex-wrap d-sm-block">
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="bar" data-bar-color="var(--primary-500)" data-height="40" data-width="110" data-bar-width="4" data-bar-spacing="1">5,3,9,6,5,9,7,3,5,2</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="bar" data-bar-color="var(--success-500)" data-neg-bar-color="var(--danger-500)" data-height="40" data-width="110" data-bar-width="4" data-bar-spacing="1">4,-3,-6,-4,-5,-4,7,-3,-5,2</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="bar" data-bar-color="var(--info-500)" data-height="40" data-width="110" data-bar-width="8" data-bar-spacing="2">0,1,7,6,4,2,3,5,3,4</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="bar" data-bar-color="var(--warning-500)" data-neg-bar-color="var(--danger-500)" data-height="40" data-width="110" data-bar-width="8" data-bar-spacing="2">0,-1,-7,-6,-4,-2,-3,-5,-3,-4</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Tristate Chart -->
                                <div id="panel-3" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>Tristate <span class="fw-300"><i>Chart</i></span></h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Tristate charts represent data in three states: positive (1), neutral (0), and negative (-1). Each state can be represented with different colors.
                                            </div>
                                            <div class="demo d-flex justify-content-center flex-wrap d-sm-block">
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="tristate" data-height="80" data-width="110" data-bar-width="8" data-bar-spacing="2" data-pos-bar-color="var(--success-500)" data-neg-bar-color="var(--danger-500)" data-zero-bar-color="var(--secondary)">1,1,0,1,-1,-1,1,-1,0,0,1,1</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="tristate" data-height="80" data-width="110" data-bar-width="8" data-bar-spacing="2" data-pos-bar-color="var(--primary-500)" data-neg-bar-color="var(--info-500)" data-zero-bar-color="var(--warning-500)">1,-1,0,1,-1,0,1,0,-1,1,0,-1</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-xl-6">
                                <!-- Area Chart -->
                                <div id="panel-4" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>Area <span class="fw-300"><i>Chart</i></span></h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Area charts are line charts with the area below the line filled with a color. Customize both line and fill colors using data attributes.
                                            </div>
                                            <div class="demo d-flex justify-content-center flex-wrap d-sm-block">
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="line" data-fill-color="var(--success-200)" data-line-color="var(--success-500)" data-height="40" data-width="110">5,3,2,-1,-3,-2,2,3,5,2</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="line" data-fill-color="var(--danger-200)" data-line-color="var(--danger-500)" data-height="40" data-width="110">1,4,4,7,5,9,10,4,4,7,5,9,10</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="line" data-fill-color="var(--warning-200)" data-line-color="var(--warning-500)" data-height="40" data-width="110">5,3,9,6,5,3,1,7,6,4,4,1,5</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="line" data-fill-color="var(--info-200)" data-line-color="var(--info-500)" data-height="40" data-width="110">0,1,7,6,4,2,3,5,3,4,3,1,4,6</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Discrete Chart -->
                                <div id="panel-5" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>Discrete <span class="fw-300"><i>Chart</i></span></h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Discrete charts display data as individual vertical lines. Set a threshold value to change the color of lines based on their values.
                                            </div>
                                            <div class="demo d-flex justify-content-center flex-wrap d-sm-block">
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="discrete" data-line-color="var(--primary-500)" data-threshold-color="var(--danger-500)" data-threshold-value="5" data-height="40" data-width="110" data-line-width="2">5,9,7,6,5,3,2,5,8,9,7,5</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="discrete" data-line-color="var(--success-500)" data-threshold-color="var(--warning-500)" data-threshold-value="6" data-height="40" data-width="110" data-line-width="3">8,4,6,9,5,3,7,5,7,8,4,9</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Pie Chart -->
                                <div id="panel-6" class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>Pie <span class="fw-300"><i>Chart</i></span></h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Toggle">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-close" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-offset="0,10" data-bs-original-title="Close">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#x-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Pie charts show data as proportional slices of a whole. You can customize slice colors using the <code>data-slice-colors</code> attribute with an array of colors.
                                            </div>
                                            <div class="demo d-flex justify-content-center flex-wrap d-sm-block">
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="pie" data-width="80" data-height="80">30,20,45,5</span>
                                                </div>
                                                <div class="p-3 w-auto text-center d-inline-flex border-faded">
                                                    <span class="streamline" data-type="pie" data-width="80" data-height="80" data-slice-colors="var(--info-500),var(--warning-500),var(--success-200)">7,6,3</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <?php include('partials/app-footer.php'); ?>

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

    <script type="module" src="/public/scripts/pages/streamline.js"></script>

</body>

</html>