<?php require_once "head.php";?>

<?php require_once "header-analytics-dashboard.php";?>

<main class="layout bg-primary-100">
    <div class="ss-section">
        <div class="ss-section-inner">

            <div class="ss-adb-head">
                <div class="ss-section fixed-width-center">
                    <div class="ss-section-inner">
                        <div class="ss-db-head mb-0">
                            <div class="ss-db-head-left">
                                <h1 class="h3 fw-bold mb-0">Your Business</h1>
                                <div class="d-flex flex-wrap">
                                    <div class="ss-dropdown dropdown d-block mt-4 me-4 js-multi-select">
                                        <button type="button" class="ss-dropdown-toggle" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Location" data-placeholder="All Locations">
                                            <span class="ss-dropdown-toggle-txt">All Locations</span>
                                            <span class="ss-dropdown-arrow">
                                                <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                            </span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start">
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option one</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option two</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option three</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ss-dropdown dropdown d-block mt-4 me-4 js-multi-select">
                                        <button type="button" class="ss-dropdown-toggle" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Department" data-placeholder="All Departments">
                                            <span class="ss-dropdown-toggle-txt">All Departments</span>
                                            <span class="ss-dropdown-arrow">
                                                <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                            </span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start">
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option one</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option two</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option three</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ss-dropdown dropdown d-block mt-4 me-4 js-multi-select">
                                        <button type="button" class="ss-dropdown-toggle" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Job Title" data-placeholder="All Job Titles">
                                            <span class="ss-dropdown-toggle-txt">All Job Titles</span>
                                            <span class="ss-dropdown-arrow">
                                                <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                            </span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start">
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option one</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option two</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option three</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ss-dropdown dropdown d-block mt-4 me-4 js-multi-select">
                                        <button type="button" class="ss-dropdown-toggle" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Age Group" data-placeholder="All Age Groups">
                                            <span class="ss-dropdown-toggle-txt">All Age Groups</span>
                                            <span class="ss-dropdown-arrow">
                                                <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                            </span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start">
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option one</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option two</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                    <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                    <span class="dropdown-item-text">Option three</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="ss-dropdown dropdown js-multi-select d-block mt-20 me-4">
                                        <button type="button" class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" data-selected-prefix="Selected">
                                            <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-start">
                                            <li class="dropdown dropend">
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-icon dropdown-submenu-toggle" data-bs-offset="0,17" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                                    <span class="dropdown-item-text">Tenure</span>
                                                    <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                            <span class="dropdown-item-text">Option one</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                            <span class="dropdown-item-text">Option two</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                            <span class="dropdown-item-text">Option three</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="dropdown dropend">
                                                <a href="javascript:;" class="dropdown-item ss-dpitem-icon dropdown-submenu-toggle" data-bs-offset="0,17" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                                                    <span class="dropdown-item-text">Diversity</span>
                                                    <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                            <span class="dropdown-item-text">Option one</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                            <span class="dropdown-item-text">Option two</span>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:;" class="dropdown-item ss-dpitem-checkbox">
                                                            <span class="ss-dropdown-checkbox-ui"><i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i></span>
                                                            <span class="dropdown-item-text">Option three</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="ss-db-head-right flex-column align-items-end">
                                <div class="d-flex align-items-center">
                                    <a href="javascript:;" class="btn-icon">
                                        <i class="ss-icon-inbox-out"><svg><use xlink:href="#ss-icon-inbox-out"></use></svg></i>
                                    </a>
                                    <a href="javascript:;" class="btn-icon">
                                        <i class="ss-icon-share"><svg><use xlink:href="#ss-icon-share"></use></svg></i>
                                    </a>
                                    <a href="javascript:;" class="btn-icon">
                                        <i class="ss-icon-refresh"><svg><use xlink:href="#ss-icon-refresh"></use></svg></i>
                                    </a>
                                </div>
                                <ul class="ss-adb-tfo">
                                    <li>
                                        <a class="ss-adb-tfo-link active">Wk</a>
                                    </li>
                                    <li>
                                        <a class="ss-adb-tfo-link">Mon</a>
                                    </li>
                                    <li>
                                        <a class="ss-adb-tfo-link">Year</a>
                                    </li>
                                    <li>
                                        <a class="ss-adb-tfo-link">All</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="ss-adb-shead">
                <div class="ss-section fixed-width-center">
                    <div class="ss-section-inner">
                        <div class="ss-db-head mb-0">
                            <div class="ss-db-head-left">
                                <div class="d-flex flex-wrap align-items-start">
                                    <span class="ss-tag removable">
                                        <span class="ss-tag-txt">Label</span>
                                        <a class="ss-tag-remove"><i class="ss-icon-close"><svg><use xlink:href="#ss-icon-close"></use></svg></i></a>
                                    </span>
                                    <span class="ss-tag removable">
                                        <span class="ss-tag-txt">Label</span>
                                        <a class="ss-tag-remove"><i class="ss-icon-close"><svg><use xlink:href="#ss-icon-close"></use></svg></i></a>
                                    </span>
                                    <span class="ss-tag removable">
                                        <span class="ss-tag-txt">Label</span>
                                        <a class="ss-tag-remove"><i class="ss-icon-close"><svg><use xlink:href="#ss-icon-close"></use></svg></i></a>
                                    </span>
                                    <span class="ss-tag removable">
                                        <span class="ss-tag-txt">Label</span>
                                        <a class="ss-tag-remove"><i class="ss-icon-close"><svg><use xlink:href="#ss-icon-close"></use></svg></i></a>
                                    </span>
                                    <span class="ss-tag removable">
                                        <span class="ss-tag-txt">Label</span>
                                        <a class="ss-tag-remove"><i class="ss-icon-close"><svg><use xlink:href="#ss-icon-close"></use></svg></i></a>
                                    </span>
                                    <span class="ss-tag removable">
                                        <span class="ss-tag-txt">Label</span>
                                        <a class="ss-tag-remove"><i class="ss-icon-close"><svg><use xlink:href="#ss-icon-close"></use></svg></i></a>
                                    </span>
                                </div>
                            </div>
                            <div class="ss-db-head-right">
                                <a class="btn btn-primary">Apply Filters</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="ss-section fixed-width-center ss-adb">
                <div class="ss-section-inner">

                    <div class="ss-adb-scyb-g">
                        <div class="ss-adb-scyb-g-h">
                            <div class="ss-adb-scyb-g-h-l">
                                <h2 class="h3 fw-bold m-0">Sales Metrics</h2>
                            </div>
                            <div class="ss-adb-scyb-g-h-r">
                                <a class="btn btn-primary">Import</a>
                                <a class="btn btn-dark">Share</a>
                            </div>
                        </div>
                        <div class="ss-adb-scyb-g-b">
                            <div class="ss-adb-scyb-a-row">
                                <div class="ss-adb-scyb-a-c">
                                    <a class="ss-db-addwidget m-0">
                                        <i class="ss-icon-plus mb-3"><svg><use xlink:href="#ss-icon-plus"></use></svg></i>
                                        <span>Add Metric</span>
                                    </a>
                                </div>
                                <div class="ss-adb-scyb-a-c">
                                    <div class="ss-db-box">
                                        <div class="ss-db-box-h">
                                            <div class="ss-db-box-h-l">
                                                <h3 class="h5">Product vs. Services</h3>
                                            </div>
                                            <div class="ss-db-box-h-r">
                                                <div class="ss-dropdown dropdown js-single-select">
                                                    <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu one</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu two</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu three</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-db-box-b pt-0">
                                            <div class="ss-db-ch-legends theme-b d-inline-flex mb-20">
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-primary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Product</span>
                                                    </span>
                                                </span>
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-secondary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Services</span>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="ss-adb-scyb-pschart" id="ss-adb-scyb-pschart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ss-adb-scyb-a-c">
                                    <div class="ss-db-box">
                                        <div class="ss-db-box-h">
                                            <div class="ss-db-box-h-l">
                                                <h3 class="h5">Upsales of Total Sales</h3>
                                            </div>
                                            <div class="ss-db-box-h-r">
                                                <div class="form-group">
                                                    <span class="form-control-wrapper">
                                                        <select class="form-control sm" data-placeholder="Sort BY">
                                                            <!-- don't rmeove below blank option because it's for show placeholder -->
                                                            <option label="Sort BY"></option>
                                                            <option value="1">Week</option>
                                                            <option selected value="2">Month</option>
                                                            <option value="3">Year</option>
                                                        </select>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-db-box-b pt-0">
                                            <div class="position-relative">
                                                <div class="ss-adb-scyb-utschart" id="ss-adb-scyb-utschart"></div>
                                                <div class="ss-adb-cm-b-r-score">
                                                    <strong class="ss-adb-cm-b-r-score-to">35%</strong>
                                                    <!-- <span class="ss-adb-cm-b-r-score-from">out of 100</span> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ss-adb-scyb-a-c">
                                    <div class="ss-db-box">
                                        <div class="ss-db-box-h">
                                            <div class="ss-db-box-h-l">
                                                <h3 class="h5">Total Sales</h3>
                                            </div>
                                            <div class="ss-db-box-h-r">
                                                <div class="ss-dropdown dropdown js-single-select">
                                                    <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu one</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu two</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu three</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-db-box-b pt-0">
                                            <div class="ss-db-ch-legends theme-b d-inline-flex mb-20">
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-primary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Actual</span>
                                                    </span>
                                                </span>
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-secondary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Estimate</span>
                                                    </span>
                                                </span>
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-yellow"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Budget</span>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="ss-adb-scyb-tschart" id="ss-adb-scyb-tschart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ss-adb-scyb-a-c">
                                    <div class="ss-db-box">
                                        <div class="ss-db-box-h">
                                            <div class="ss-db-box-h-l">
                                                <h3 class="h5">Product Sales</h3>
                                            </div>
                                            <div class="ss-db-box-h-r">
                                                <a href="javascript:;" class="btn-icon">
                                                    <i class="ss-icon-bell-outline"><svg><use xlink:href="#ss-icon-bell-outline"></use></svg></i>
                                                </a>
                                                <div class="ss-dropdown dropdown js-single-select">
                                                    <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu one</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu two</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu three</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-db-box-b pt-0">
                                            <div class="position-relative">
                                                <div class="ss-adb-scyb-pslchart" id="ss-adb-scyb-pslchart"></div>
                                                <div class="ss-adb-cm-b-r-score">
                                                    <strong class="ss-adb-cm-b-r-score-to text-uppercase">1.5m</strong>
                                                    <span class="ss-adb-cm-b-r-score-from">In Millions</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ss-adb-scyb-a-c">
                                    <div class="ss-db-box">
                                        <div class="ss-db-box-h">
                                            <div class="ss-db-box-h-l">
                                                <h3 class="h5">Service Sales</h3>
                                            </div>
                                            <div class="ss-db-box-h-r">
                                                <div class="ss-dropdown dropdown js-single-select">
                                                    <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu one</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu two</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu three</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-db-box-b pt-0">
                                            <div class="ss-adb-scyb-sschart" id="ss-adb-scyb-sschart"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ss-adb-scyb-g">
                        <div class="ss-adb-scyb-g-h">
                            <div class="ss-adb-scyb-g-h-l">
                                <h2 class="h3 fw-bold m-0">Engagement Metrics</h2>
                            </div>
                            <div class="ss-adb-scyb-g-h-r">
                                <a class="btn btn-primary">Import</a>
                                <a class="btn btn-dark">Share</a>
                            </div>
                        </div>
                        <div class="ss-adb-scyb-g-b">
                            <div class="ss-adb-scyb-a-row">
                                <div class="ss-adb-scyb-a-c">
                                    <a class="ss-db-addwidget m-0">
                                        <i class="ss-icon-plus mb-3"><svg><use xlink:href="#ss-icon-plus"></use></svg></i>
                                        <span>Add Metric</span>
                                    </a>
                                </div>
                                <div class="ss-adb-scyb-a-c">
                                    <div class="ss-db-box">
                                        <div class="ss-db-box-h">
                                            <div class="ss-db-box-h-l">
                                                <h3 class="h5">Turnover Breakdown</h3>
                                            </div>
                                            <div class="ss-db-box-h-r">
                                                <div class="ss-dropdown dropdown js-single-select">
                                                    <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu one</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu two</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu three</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-db-box-b pt-0">
                                            <div class="ss-db-ch-legends theme-b d-inline-flex mb-20">
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-primary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Good</span>
                                                    </span>
                                                </span>
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-secondary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Bad</span>
                                                    </span>
                                                </span>
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-gray"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Neutral</span>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="ss-adb-scyb-tbchart" id="ss-adb-scyb-tbchart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ss-adb-scyb-a-c">
                                    <div class="ss-db-box">
                                        <div class="ss-db-box-h">
                                            <div class="ss-db-box-h-l">
                                                <h3 class="h5">Retention vs. Pay</h3>
                                            </div>
                                            <div class="ss-db-box-h-r">
                                                <div class="ss-dropdown dropdown js-single-select">
                                                    <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu one</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu two</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu three</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-db-box-b pt-0">
                                            <div class="ss-db-ch-legends theme-b d-inline-flex mb-20">
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-primary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span class="ws-nowrap">Retention</span>
                                                    </span>
                                                </span>
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-secondary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span class="ws-nowrap">Pay Increaase %</span>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="ss-adb-scyb-rpchart" id="ss-adb-scyb-rpchart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ss-adb-scyb-a-c">
                                    <div class="ss-db-box">
                                        <div class="ss-db-box-h">
                                            <div class="ss-db-box-h-l">
                                                <h3 class="h5">Engagement VS. Wellbeing</h3>
                                            </div>
                                            <div class="ss-db-box-h-r">
                                                <div class="ss-dropdown dropdown js-single-select">
                                                    <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu one</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu two</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu three</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-db-box-b pt-0">
                                            <div class="ss-db-ch-legends theme-b d-inline-flex mb-20">
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-primary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Engagement</span>
                                                    </span>
                                                </span>
                                                <span class="ss-db-ch-legend theme-b">
                                                    <span class="ss-db-ch-legend-text">
                                                        <i class="ss-icon-circle-fill text-secondary"><svg><use xlink:href="#ss-icon-circle-fill"></use></svg></i>
                                                        <span>Well Being</span>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="ss-adb-scyb-ewchart" id="ss-adb-scyb-ewchart"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ss-adb-scyb-a-c">
                                    <div class="ss-db-box">
                                        <div class="ss-db-box-h">
                                            <div class="ss-db-box-h-l">
                                                <h3 class="h5">Total Turnover</h3>
                                            </div>
                                            <div class="ss-db-box-h-r">
                                                <a href="javascript:;" class="btn-icon">
                                                    <i class="ss-icon-bell-outline"><svg><use xlink:href="#ss-icon-bell-outline"></use></svg></i>
                                                </a>
                                                <div class="ss-dropdown dropdown js-single-select">
                                                    <button class="btn-icon" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ss-icon-ellipsis-v"><svg><use xlink:href="#ss-icon-ellipsis-v"></use></svg></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu one</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu two</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" class="dropdown-item">
                                                                <span class="dropdown-item-text">Menu three</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-db-box-b pt-0">
                                            <div class="position-relative">
                                                <div class="ss-adb-scyb-ttchart" id="ss-adb-scyb-ttchart"></div>
                                                <div class="ss-adb-cm-b-r-score">
                                                    <strong class="ss-adb-cm-b-r-score-to text-uppercase">90m</strong>
                                                    <span class="ss-adb-cm-b-r-score-from">Total Turnover</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ss-adb-scyb-g">
                        <div class="ss-adb-scyb-a-row">
                            <div class="ss-adb-scyb-a-c full-width">
                                <a class="ss-db-addwidget m-0 flex-row pd-40">
                                    <i class="ss-icon-plus me-4"><svg><use xlink:href="#ss-icon-plus"></use></svg></i>
                                    <span>Add Section</span>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</main>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script>
var tbChart = null,
    psChart = null,
    utsChart = null,
    tsChart = null,
    pslChart = null,
    ssChart = null,
    rpChart = null,
    ewChart = null,
    ttChart = null;
window.addEventListener('DOMContentLoaded', function() {

    // for product vs service chart
    if (jQuery('#ss-adb-scyb-pschart').length) {
        psChart = Highcharts.chart('ss-adb-scyb-pschart', {
            chart: {
                type: 'line',
                spacing:[5,5,5,5]
            },
            credits: {
                enabled: false,
            },
            title: false,
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: true,
                pointFormatter: function() {
                    var axis = this.series.yAxis;
                    return '<span style="color:'+this.series.color+'">\u25CF</span> '+this.series.name+': <b>$'+axis.defaultLabelFormatter.call({ axis: axis, value: this.y, chart: axis.chart })+'</b><br>';
                },
                style: {
                    fontSize: '9px',
                    color: '#404041',
                    fontFamily: 'Open Sans, sans-serif'
                }
            },
            plotOptions: {
                series: {
                    marker:{
                        symbol: 'circle'
                    },
                    states: {
                        inactive: {
                            enabled: false
                        }
                    }
                }
            },
            xAxis: {
                lineColor: '#EDF0F2',
                labels: {
                    style: {
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
            },
            yAxis: {
                gridLineColor: '#EDF0F2',
                labels: {
                    type: 'logarithmic',
                    allowDecimals: true,
                    format: '${text}',
                    align: 'center',
                    style: {
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                title: {
                    enabled: false
                }
            },
            series: [
                {
                    name: 'Product',
                    data: [2000000, 7000000, 1000000, 6000000, 3000000],
                    color: '#55A6D5'
                },
                {
                    name: 'Services',
                    data: [1000000, 4000000, 3000000, 5000000, 2000000],
                    color: '#7BBA52'
                }
            ]
        });

        // for update above product vs service chart data programatically
        // psChart.update({
        //     xAxis: {
        //         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
        //     },
        //     series: [
        //         {
        //             name: 'Product',
        //             data: [2000000, 7000000, 1000000, 6000000, 3000000],
        //             color: '#55A6D5'
        //         },
        //         {
        //             name: 'Services',
        //             data: [1000000, 4000000, 3000000, 5000000, 2000000],
        //             color: '#7BBA52'
        //         }
        //     ]
        // });
    }

    // for Upsale of total sale chart
    if (jQuery('#ss-adb-scyb-utschart').length) {
        utsChart = Highcharts.chart('ss-adb-scyb-utschart', {
            chart: {
                type: 'solidgauge',
                spacing:[0,0,0,0],
            },
            credits: {
                    enabled: false,
            },
            title: false,
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: false,
            },
            pane: {
                startAngle: 0,
                endAngle: 360,
                background: [{
                    outerRadius: '105%',
                    innerRadius: '95%',
                    backgroundColor: '#F2F2F2',
                    borderWidth: 0
                }]
            },
            yAxis: {
                min: 0,
                max: 100, // IMPORTANT :: Don't forget to specify max/total number here
                lineWidth: 0,
                tickPositions: []
            },
            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        enabled: false
                    },
                    linecap: 'round',
                    stickyTracking: false,
                    rounded: true
                }
            },
            series: [{
                name: 'Upsales of total sales',
                data: [{
                    color: '#55A6D5',
                    radius: '105%',
                    innerRadius: '95%',
                    y: 35
                }]
            }]
        });

        // for update above Upsale of total sale chart data programatically
        // utsChart.update({
        //     yAxis: {
        //         min: 0,
        //         max: 100, // IMPORTANT :: Don't forget to specify max/total number here
        //     },
        //     series: [{
        //         name: 'Upsales of total sales',
        //         data: [{
        //             color: '#55A6D5',
        //             y: 50
        //         }]
        //     }]
        // });
    }

    // for total sale chart
    if (jQuery('#ss-adb-scyb-tschart').length) {
        tsChart = Highcharts.chart('ss-adb-scyb-tschart', {
            chart: {
                spacing:[5,5,5,5]
            },
            credits: {
                    enabled: false,
            },
            title: false,
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: true,
                shared: true,
                backgroundColor: '#ffffff',
                pointFormatter: function() {
                    var axis = this.series.yAxis;
                    return '<span style="color:'+this.series.color+'">\u25CF</span> '+this.series.name+': <b>$'+axis.defaultLabelFormatter.call({ axis: axis, value: this.y, chart: axis.chart })+'</b><br>';
                },
                borderRadius: 10,
                borderWidth: 0,
                style: {
                    fontSize: '9px',
                    color: '#404041',
                    fontFamily: 'Open Sans, sans-serif'
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.1,
                    borderWidth: 0,
                    borderRadius: 5,
                    maxPointWidth: 10
                }
            },
            xAxis: {
                lineColor: '#EDF0F2',
                labels: {
                    style: {
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
            },
            yAxis: {
                gridLineColor: '#EDF0F2',
                labels: {
                    type: 'logarithmic',
                    allowDecimals: true,
                    format: '${text}',
                    align: 'center',
                    style: {
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                title: {
                    enabled: false
                }
            },
            series: [
                {
                    type: 'column',
                    name: 'Actual',
                    data: [4000000, 8800000, 9000000, 8800000, 4400000],
                    color: '#55A6D5'
                },
                {
                    type: 'column',
                    name: 'Estimate',
                    data: [4800000, 7800000, 6200000, 5000000, 3000000],
                    color: '#7BBA52'
                },
                {
                    type: 'spline',
                    name: 'Budget',
                    data: [3800000, 5800000, 2200000, 8000000, 5000000],
                    color: '#F8C124'
                }
            ]
        });

        // for update above total sale chart data programatically
        // tsChart.update({
        //     xAxis: {
        //         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
        //     },
        //     series: [
        //         {
        //             type: 'column',
        //             name: 'Actual',
        //             data: [4000000, 8800000, 9000000, 8800000, 4400000],
        //             color: '#55A6D5'
        //         },
        //         {
        //             type: 'column',
        //             name: 'Estimate',
        //             data: [4800000, 7800000, 6200000, 5000000, 3000000],
        //             color: '#7BBA52'
        //         },
        //         {
        //             type: 'spline',
        //             name: 'Budget',
        //             data: [3800000, 5800000, 2200000, 8000000, 5000000],
        //             color: '#F8C124'
        //         }
        //     ]
        // });
    }

    // for product sales chart
    if (jQuery('#ss-adb-scyb-pslchart').length) {
        pslChart = Highcharts.chart('ss-adb-scyb-pslchart', {
            chart: {
                type: 'solidgauge',
                spacing:[0,0,0,0],
            },
            credits: {
                    enabled: false,
            },
            title: false,
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: false,
            },
            pane: {
                startAngle: 0,
                endAngle: 360,
                background: [{
                    outerRadius: '105%',
                    innerRadius: '95%',
                    backgroundColor: '#F2F2F2',
                    borderWidth: 0
                }]
            },
            yAxis: {
                min: 0,
                max: 3, // IMPORTANT :: Don't forget to specify max/total number here
                lineWidth: 0,
                tickPositions: []
            },
            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        enabled: false
                    },
                    linecap: 'round',
                    stickyTracking: false,
                    rounded: true
                }
            },
            series: [{
                name: 'Product Sales',
                data: [{
                    color: '#55A6D5',
                    radius: '105%',
                    innerRadius: '95%',
                    y: 1.5
                }]
            }]
        });

        // for update above product sales chart data programatically
        // pslChart.update({
        //     yAxis: {
        //         min: 0,
        //         max: 100, // IMPORTANT :: Don't forget to specify max/total number here
        //     },
        //     series: [{
        //         name: 'Product Sales',
        //         data: [{
        //             color: '#55A6D5',
        //             y: 75
        //         }]
        //     }]
        // });
    }

    // for Service sales chart
    if (jQuery('#ss-adb-scyb-sschart').length) {
        ssChart = Highcharts.chart('ss-adb-scyb-sschart', {
            chart: {
                type: 'bar',
                spacing:[0,0,0,0]
            },
            credits: {
                enabled: false,
            },
            title: false,
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: true,
                pointFormatter: function() {
                    var axis = this.series.yAxis;
                    return '<span style="color:'+this.series.color+'">\u25CF</span> '+this.series.name+': <b>$'+axis.defaultLabelFormatter.call({ axis: axis, value: this.y, chart: axis.chart })+'</b><br>';
                },
                style: {
                    fontSize: '9px',
                    color: '#404041',
                    fontFamily: 'Open Sans, sans-serif'
                }
            },
            plotOptions: {
                bar: {
                    pointPadding: 0.2,
                    groupPadding: 0,
                    borderWidth: 0,
                }
            },
            xAxis: {
                lineColor: '#EDF0F2',
                gridLineWidth: 1,
                gridLineColor: '#EDF0F2',
                labels: {
                    useHTML:true,
                    align: 'center',
                    style: {
                        width: '70px',
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif',
                        textAlign: 'center',
                        lineHeight: '1.2'
                    }
                },
                categories: ['Succession Planning', 'C-Suite Coaching', 'Workshops', 'Hi-Po Development', 'Board Services', 'Audits',]
            },
            yAxis: {
                gridLineWidth: 0,
                gridLineColor: '#EDF0F2',
                labels: {
                    type: 'logarithmic',
                    allowDecimals: true,
                    format: '${text}',
                    align: 'center',
                    style: {
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif',
                        textOverflow: 'none'
                    }
                },
                title: {
                    enabled: false
                }
            },
            series: [
                {
                    name: 'Service Sales',
                    data: [
                        {y: 5000000, color: '#55A6D5'},
                        {y: 3000000, color: '#ED4961'},
                        {y: 6000000, color: '#78BA65'},
                        {y: 4000000, color: '#DB8437'},
                        {y: 7000000, color: '#D555B9'},
                        {y: 6000000, color: '#65BAA2'}
                    ]
                }
            ]
        });

        // for update above Service sales chart data programatically
        // ssChart.update({
        //     xAxis: {
        //         categories: ['Succession Planning', 'C-Suite Coaching', 'Workshops', 'Hi-Po Development', 'Board Services', 'Audits']
        //     },
        //     series: [
        //         {
        //             name: 'Service Sales',
        //             data: [
        //                 {y: 5000000, color: '#55A6D5'},
        //                 {y: 3000000, color: '#ED4961'},
        //                 {y: 6000000, color: '#78BA65'},
        //                 {y: 4000000, color: '#DB8437'},
        //                 {y: 7000000, color: '#D555B9'},
        //                 {y: 6000000, color: '#65BAA2'}
        //             ]
        //         }
        //     ]
        // });
    }

    // for Turnover breakdown chart
    if (jQuery('#ss-adb-scyb-tbchart').length) {
        tbChart = Highcharts.chart('ss-adb-scyb-tbchart', {
            chart: {
                type: 'pie',
                spacing:[0,0,0,0]
            },
            credits: {
                enabled: false,
            },
            title: false,
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: false
            },
            plotOptions: {
                series: {
                    states: {
                        inactive: {
                            opacity: 1
                        },
                        hover: {
                            enabled: false
                        }
                    }
                },
                pie: {
                    borderWidth: 4,
                    dataLabels: {
                        enabled: true,
                        filter: {
                            property: 'y',
                            operator: '>',
                            value: 20 // data lable will show inside pie only if Y value is greater than 20
                        },
                        connectorWidth: 0,
                        useHTML: true,
                        shadow: true,
                        distance: -40,
                        inside: true,
                        style: {
                            fontWeight: 'normal',
                            fontSize: '11px',
                            fontFamily: 'Open Sans, sans-serif',
                        }
                    }
                }
            },
            series: [{
                minPointSize: 10,
                innerSize: '0%',
                name: 'Turnover Breakdown',
                data: [ {
                    name: 'Bad',
                    y: 22,
                    color: '#78BA65',
                    dataLabels: {
                        color: '#ffffff',
                        format: '<div class="text-center"><b class="p1 lh-1">{point.y}%</b><br><span class="p2">Bad</span></div>',
                    }
                }, {
                    name: 'Neutral',
                    y: 46,
                    color: '#F5F5F5',
                    dataLabels: {
                        color: '#404041',
                        format: '<div class="text-center"><b class="p1 lh-1">{point.y}%</b><br><span class="p2">Neu</span></div>',
                    }
                }, {
                    name: 'Good',
                    y: 32,
                    color: '#539CC1',
                    dataLabels: {
                        color: '#ffffff',
                        format: '<div class="text-center"><b class="p1 lh-1">{point.y}%</b><br><span class="p2">Good</span></div>',
                    }
                }]
            }]
        });

        // for update above Turnover breakdown chart data programatically
        // tbChart.update({
        //     series: [{
        //         data: [{
        //             name: 'Bad',
        //             y: 22,
        //             color: '#78BA65'
        //         }, {
        //             name: 'Neutral',
        //             y: 46,
        //             color: '#F5F5F5',
        //         }, {
        //             name: 'Good',
        //             y: 32,
        //             color: '#539CC1'
        //         }]
        //     }]
        // });
    }

    // for Retntion vs pay chart
    if (jQuery('#ss-adb-scyb-rpchart').length) {
        rpChart = Highcharts.chart('ss-adb-scyb-rpchart', {
            chart: {
                type: 'line',
                spacing:[5,5,5,5]
            },
            credits: {
                    enabled: false,
            },
            title: false,
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: true,
                style: {
                    fontSize: '9px',
                    color: '#404041',
                    fontFamily: 'Open Sans, sans-serif'
                }
            },
            plotOptions: {
                series: {
                    marker:{
                        symbol: 'circle'
                    },
                    states: {
                        inactive: {
                            enabled: false
                        }
                    }
                }
            },
            xAxis: {
                lineColor: '#EDF0F2',
                labels: {
                    style: {
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                categories: ['item', 'item', 'item', 'item', 'item', 'item']
            },
            yAxis: {
                gridLineColor: '#EDF0F2',
                min: 0,
                tickAmount: 5,
                labels: {
                    style: {
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                title: {
                    enabled: false
                }
            },
            series: [
                {
                    name: 'Retention',
                    data: [40, 88, 90, 88, 44, 89],
                    color: '#55A6D5'
                },
                {
                    name: 'Pay Increaase %',
                    data: [48, 78, 62, 50, 30, 84],
                    color: '#7BBA52'
                }
            ]
        });

        // for update above Retntion vs pay chart data programatically
        // rpChart.update({
        //     xAxis: {
        //         categories: ['item', 'item', 'item', 'item', 'item', 'item']
        //     },
        //     series: [
        //         {
        //             name: 'Retention',
        //             data: [48, 78, 62, 50, 30, 84],
        //             color: '#55A6D5'
        //         },
        //         {
        //             name: 'Pay Increaase %',
        //             data: [40, 88, 90, 88, 44, 89],
        //             color: '#7BBA52'
        //         }
        //     ]
        // });
    }

    // for total sale chart
    if (jQuery('#ss-adb-scyb-ewchart').length) {
        tsChart = Highcharts.chart('ss-adb-scyb-ewchart', {
            chart: {
                type: 'column',
                spacing:[5,5,5,5]
            },
            credits: {
                    enabled: false,
            },
            title: false,
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: true,
                shared: true,
                backgroundColor: '#ffffff',
                borderRadius: 10,
                borderWidth: 0,
                style: {
                    fontSize: '9px',
                    color: '#404041',
                    fontFamily: 'Open Sans, sans-serif'
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.1,
                    borderWidth: 0,
                    borderRadius: 5,
                    maxPointWidth: 10
                }
            },
            xAxis: {
                lineColor: '#EDF0F2',
                labels: {
                    style: {
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
            },
            yAxis: {
                gridLineColor: '#EDF0F2',
                min: 0,
                tickAmount: 5,
                labels: {
                    style: {
                        fontSize: '11px',
                        color: '#404041',
                        fontFamily: 'Open Sans, sans-serif'
                    }
                },
                title: {
                    enabled: false
                }
            },
            series: [
                {
                    name: 'Engagement',
                    data: [40, 88, 90, 88, 44],
                    color: '#55A6D5'
                },
                {
                    name: 'Well Being',
                    data: [48, 78, 62, 50, 30],
                    color: '#7BBA52'
                }
            ]
        });

        // for update above total sale chart data programatically
        // tsChart.update({
        //     xAxis: {
        //         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
        //     },
        //     series: [
        //         {
        //             name: 'Engagement',
        //             data: [40, 88, 90, 88, 44],
        //             color: '#55A6D5'
        //         },
        //         {
        //             name: 'Well Being',
        //             data: [48, 78, 62, 50, 30],
        //             color: '#7BBA52'
        //         }
        //     ]
        // });
    }

    // for Total turnover chart
    if (jQuery('#ss-adb-scyb-ttchart').length) {
        pslChart = Highcharts.chart('ss-adb-scyb-ttchart', {
            chart: {
                type: 'solidgauge',
                spacing:[0,0,0,0],
            },
            credits: {
                    enabled: false,
            },
            title: false,
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: false,
            },
            pane: {
                startAngle: 0,
                endAngle: 360,
                background: [{
                    outerRadius: '105%',
                    innerRadius: '95%',
                    backgroundColor: '#F2F2F2',
                    borderWidth: 0
                }]
            },
            yAxis: {
                min: 0,
                max: 100, // IMPORTANT :: Don't forget to specify max/total number here
                lineWidth: 0,
                tickPositions: []
            },
            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        enabled: false
                    },
                    linecap: 'round',
                    stickyTracking: false,
                    rounded: true
                }
            },
            series: [{
                name: 'Total Turnover',
                data: [{
                    color: '#55A6D5',
                    radius: '105%',
                    innerRadius: '95%',
                    y: 90
                }]
            }]
        });

        // for update above Total turnover chart data programatically
        // pslChart.update({
        //     yAxis: {
        //         min: 0,
        //         max: 100, // IMPORTANT :: Don't forget to specify max/total number here
        //     },
        //     series: [{
        //         name: 'Total Turnover',
        //         data: [{
        //             color: '#55A6D5',
        //             y: 75
        //         }]
        //     }]
        // });
    }

});
</script>

<?php require_once "footer.php";?>
