after migrating to bootstrat 5
This commit is contained in:
@@ -39,6 +39,15 @@ def get_entries_by_id(request, _id):
|
||||
results = request.dbsession.execute(query, {'id':_id}).first()
|
||||
return results
|
||||
|
||||
def get_entries_count_by_topic(request):
|
||||
query = """SELECT topics.topic_name, tags.tag_name, count(entries.id) as count, strftime('%d/%m/%Y', created) AS create_date
|
||||
FROM entries
|
||||
INNER JOIN topics ON entries.topic_id = topics.topic
|
||||
INNER JOIN tags ON entries.tag = tags.tag
|
||||
GROUP BY entries.tag ORDER BY entries.topic_id, entries.tag;"""
|
||||
results = request.dbsession.execute(query,).fetchall()
|
||||
return results
|
||||
|
||||
def get_last_created(request):
|
||||
# gest the 10 last created posts
|
||||
query = "SELECT strftime('%d/%m/%Y', created) AS create_date, id, title, author, status FROM entries WHERE topic_id <> '_admin'"
|
||||
@@ -52,7 +61,7 @@ def get_last_created(request):
|
||||
|
||||
def get_last_edited(request):
|
||||
# gest the last edited posts
|
||||
query = "SELECT strftime('%d/%m/%Y', edited) AS edit_date, title, author, status FROM entries WHERE topic_id <> '_admin'"
|
||||
query = "SELECT strftime('%d/%m/%Y', edited) AS edit_date, id, title, author, status FROM entries WHERE topic_id <> '_admin'"
|
||||
if request.authenticated_userid == None:
|
||||
# if user is anonym, display only published posts
|
||||
query = query + " AND status='publié'"
|
||||
@@ -111,7 +120,7 @@ def update_entry(request, blog_id, new_values):
|
||||
else:
|
||||
s = "%s=:%s" % (param, param)
|
||||
|
||||
import pdb;pdb.set_trace()
|
||||
# import pdb;pdb.set_trace()
|
||||
if blog_id == '0':
|
||||
query = """INSERT INTO entries (title, body, created, edited, topic_id, tag, author, status, creator, editor)
|
||||
VALUES ('{0}', '{1}', '{2}', '{3}', '{4}', '{5}', '{6}', '{7}', '{8}', '{8}')""".format(
|
||||
|
||||
@@ -5,11 +5,13 @@ def includeme(config):
|
||||
config.add_route('blog_copy', '/blog_copy/{topic}/{id}')
|
||||
config.add_route('blog_edit', '/blog_edit/{topic}/{id}')
|
||||
config.add_route('blog_search', '/blog_search')
|
||||
config.add_route('contact', '/contact')
|
||||
config.add_route('images', '/images')
|
||||
config.add_route('image_edit', '/image_edit/{filename}')
|
||||
config.add_route('login', '/login')
|
||||
config.add_route('logout', '/logout')
|
||||
config.add_route('settings', '/settings')
|
||||
config.add_route('stats_pages', '/stats_pages')
|
||||
config.add_route('tag_edit', '/tag_edit/{topic}/{id}')
|
||||
config.add_route('topic', '/topic/{topic}')
|
||||
config.add_route('topic_edit', '/topic_edit/{topic}')
|
||||
|
||||
BIN
cao_sunyata/static/css/icons/tabler-icons/fonts/tabler-icons.eot
Normal file
BIN
cao_sunyata/static/css/icons/tabler-icons/fonts/tabler-icons.eot
Normal file
Binary file not shown.
9012
cao_sunyata/static/css/icons/tabler-icons/fonts/tabler-icons.svg
Normal file
9012
cao_sunyata/static/css/icons/tabler-icons/fonts/tabler-icons.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 5.8 MiB |
BIN
cao_sunyata/static/css/icons/tabler-icons/fonts/tabler-icons.ttf
Normal file
BIN
cao_sunyata/static/css/icons/tabler-icons/fonts/tabler-icons.ttf
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
12031
cao_sunyata/static/css/icons/tabler-icons/tabler-icons.css
Normal file
12031
cao_sunyata/static/css/icons/tabler-icons/tabler-icons.css
Normal file
File diff suppressed because it is too large
Load Diff
6
cao_sunyata/static/css/styles.css
Normal file
6
cao_sunyata/static/css/styles.css
Normal file
File diff suppressed because one or more lines are too long
16978
cao_sunyata/static/css/styles.min.css
vendored
Normal file
16978
cao_sunyata/static/css/styles.min.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
63
cao_sunyata/static/html-SEODash/authentication-login.html
Normal file
63
cao_sunyata/static/html-SEODash/authentication-login.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<div
|
||||
class="position-relative overflow-hidden radial-gradient min-vh-100 d-flex align-items-center justify-content-center">
|
||||
<div class="d-flex align-items-center justify-content-center w-100">
|
||||
<div class="row justify-content-center w-100">
|
||||
<div class="col-md-8 col-lg-6 col-xxl-3">
|
||||
<div class="card mb-0">
|
||||
<div class="card-body">
|
||||
<a href="./index.html" class="text-nowrap logo-img text-center d-block py-3 w-100">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="">
|
||||
</a>
|
||||
<p class="text-center">Your Social Campaigns</p>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Username</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input primary" type="checkbox" value="" id="flexCheckChecked" checked>
|
||||
<label class="form-check-label text-dark" for="flexCheckChecked">
|
||||
Remeber this Device
|
||||
</label>
|
||||
</div>
|
||||
<a class="text-primary fw-bold" href="./index.html">Forgot Password ?</a>
|
||||
</div>
|
||||
<a href="./index.html" class="btn btn-primary w-100 py-8 fs-4 mb-4">Sign In</a>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<p class="fs-4 mb-0 fw-bold">New to SeoDash?</p>
|
||||
<a class="text-primary fw-bold ms-2" href="./authentication-register.html">Create an account</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
58
cao_sunyata/static/html-SEODash/authentication-register.html
Normal file
58
cao_sunyata/static/html-SEODash/authentication-register.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<div
|
||||
class="position-relative overflow-hidden radial-gradient min-vh-100 d-flex align-items-center justify-content-center">
|
||||
<div class="d-flex align-items-center justify-content-center w-100">
|
||||
<div class="row justify-content-center w-100">
|
||||
<div class="col-md-8 col-lg-6 col-xxl-3">
|
||||
<div class="card mb-0">
|
||||
<div class="card-body">
|
||||
<a href="./index.html" class="text-nowrap logo-img text-center d-block py-3 w-100">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="">
|
||||
</a>
|
||||
<p class="text-center">Your Social Campaigns</p>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputtext1" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="exampleInputtext1" aria-describedby="textHelp">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Email Address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
<a href="./index.html" class="btn btn-primary w-100 py-8 fs-4 mb-4">Sign Up</a>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<p class="fs-4 mb-0 fw-bold">Already have an Account?</p>
|
||||
<a class="text-primary fw-bold ms-2" href="./authentication-login.html">Sign In</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
223
cao_sunyata/static/html-SEODash/icon-tabler.html
Normal file
223
cao_sunyata/static/html-SEODash/icon-tabler.html
Normal file
@@ -0,0 +1,223 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../../node_modules/simplebar/dist/simplebar.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<!-- Sidebar Start -->
|
||||
<aside class="left-sidebar">
|
||||
<!-- Sidebar scroll-->
|
||||
<div>
|
||||
<div class="brand-logo d-flex align-items-center justify-content-between">
|
||||
<a href="./index.html" class="text-nowrap logo-img">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="" />
|
||||
</a>
|
||||
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
|
||||
<i class="ti ti-x fs-8"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar navigation-->
|
||||
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
|
||||
<ul id="sidebarnav">
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">Home</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./index.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:home-smile-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">UI COMPONENTS</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-buttons.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Buttons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-alerts.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:danger-circle-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Alerts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-card.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:bookmark-square-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Card</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-forms.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:file-text-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-typography.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:text-field-focus-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-6" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">AUTH</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-login.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:login-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Login</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-register.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:user-plus-rounded-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Register</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-4" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">EXTRA</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./icon-tabler.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:sticker-smile-circle-2-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Icons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./sample-page.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:planet-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Sample Page</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="unlimited-access hide-menu bg-primary-subtle position-relative mb-7 mt-7 rounded-3">
|
||||
<div class="d-flex">
|
||||
<div class="unlimited-access-title me-3">
|
||||
<h6 class="fw-semibold fs-4 mb-6 text-dark w-75">Upgrade to pro</h6>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
|
||||
</div>
|
||||
<div class="unlimited-access-img">
|
||||
<img src="../assets/images/backgrounds/rocket.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Sidebar navigation -->
|
||||
</div>
|
||||
<!-- End Sidebar scroll-->
|
||||
</aside>
|
||||
<!-- Sidebar End -->
|
||||
<!-- Main wrapper -->
|
||||
<div class="body-wrapper">
|
||||
<!-- Header Start -->
|
||||
<header class="app-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item d-block d-xl-none">
|
||||
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
|
||||
<i class="ti ti-bell-ringing"></i>
|
||||
<div class="notification bg-primary rounded-circle"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
|
||||
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary me-2"><span class="d-none d-md-block">Check Pro Version</span> <span class="d-block d-md-none">Pro</span></a>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-success"><span class="d-none d-md-block">Download Free </span> <span class="d-block d-md-none">Free</span></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="../assets/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
|
||||
<div class="message-body">
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-user fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Profile</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-mail fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Account</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-list-check fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Task</p>
|
||||
</a>
|
||||
<a href="./authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
<div class="container-fluid">
|
||||
<div class="card w-100 h-100 position-relative overflow-hidden">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-semibold mb-4">Icons</h5>
|
||||
<iframe src="https://tabler-icons.io/" frameborder="0" style="height: calc(100vh - 250px); width: 100%;"
|
||||
data-simplebar=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-6 text-center">
|
||||
<p class="mb-0 fs-4">Design and Developed by <a href="https://adminmart.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">AdminMart.com</a> Distributed by <a href="https://themewagon.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">ThemeWagon</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
|
||||
<script src="../assets/js/sidebarmenu.js"></script>
|
||||
<script src="../assets/js/app.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
465
cao_sunyata/static/html-SEODash/index.html
Normal file
465
cao_sunyata/static/html-SEODash/index.html
Normal file
@@ -0,0 +1,465 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<!-- Sidebar Start -->
|
||||
<aside class="left-sidebar">
|
||||
<!-- Sidebar scroll-->
|
||||
<div>
|
||||
<div class="brand-logo d-flex align-items-center justify-content-between">
|
||||
<a href="./index.html" class="text-nowrap logo-img">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="" />
|
||||
</a>
|
||||
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
|
||||
<i class="ti ti-x fs-8"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar navigation-->
|
||||
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
|
||||
<ul id="sidebarnav">
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">Home</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./index.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:home-smile-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">UI COMPONENTS</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-buttons.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Buttons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-alerts.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:danger-circle-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Alerts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-card.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:bookmark-square-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Card</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-forms.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:file-text-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-typography.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:text-field-focus-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-6" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">AUTH</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-login.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:login-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Login</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-register.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:user-plus-rounded-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Register</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-4" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">EXTRA</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./icon-tabler.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:sticker-smile-circle-2-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Icons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./sample-page.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:planet-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Sample Page</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="unlimited-access hide-menu bg-primary-subtle position-relative mb-7 mt-7 rounded-3">
|
||||
<div class="d-flex">
|
||||
<div class="unlimited-access-title me-3">
|
||||
<h6 class="fw-semibold fs-4 mb-6 text-dark w-75">Upgrade to pro</h6>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
|
||||
</div>
|
||||
<div class="unlimited-access-img">
|
||||
<img src="../assets/images/backgrounds/rocket.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Sidebar navigation -->
|
||||
</div>
|
||||
<!-- End Sidebar scroll-->
|
||||
</aside>
|
||||
<!-- Sidebar End -->
|
||||
<!-- Main wrapper -->
|
||||
<div class="body-wrapper">
|
||||
<!-- Header Start -->
|
||||
<header class="app-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item d-block d-xl-none">
|
||||
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
|
||||
<i class="ti ti-bell-ringing"></i>
|
||||
<div class="notification bg-primary rounded-circle"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
|
||||
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary me-2"><span class="d-none d-md-block">Check Pro Version</span> <span class="d-block d-md-none">Pro</span></a>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-success"><span class="d-none d-md-block">Download Free </span> <span class="d-block d-md-none">Free</span></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="../assets/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
|
||||
<div class="message-body">
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-user fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Profile</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-mail fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Account</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-list-check fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Task</p>
|
||||
</a>
|
||||
<a href="./authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title d-flex align-items-center gap-2 mb-4">
|
||||
Traffic Overview
|
||||
<span>
|
||||
<iconify-icon icon="solar:question-circle-bold" class="fs-7 d-flex text-muted" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-success" data-bs-title="Traffic Overview"></iconify-icon>
|
||||
</span>
|
||||
</h5>
|
||||
<div id="traffic-overview" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<img src="../assets/images/backgrounds/product-tip.png" alt="image" class="img-fluid" width="205">
|
||||
<h4 class="mt-7">Productivity Tips!</h4>
|
||||
<p class="card-subtitle mt-2 mb-3">Duis at orci justo nulla in libero id leo
|
||||
molestie sodales phasellus justo.</p>
|
||||
<button class="btn btn-primary mb-3">View All Tips</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">View by page title and screen class</h5>
|
||||
<div class="table-responsive">
|
||||
<table class="table text-nowrap align-middle mb-0">
|
||||
<thead>
|
||||
<tr class="border-2 border-bottom border-primary border-0">
|
||||
<th scope="col" class="ps-0">Page Title</th>
|
||||
<th scope="col" >Link</th>
|
||||
<th scope="col" class="text-center">Pageviews</th>
|
||||
<th scope="col" class="text-center">Page Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="table-group-divider">
|
||||
<tr>
|
||||
<th scope="row" class="ps-0 fw-medium">
|
||||
<span class="table-link1 text-truncate d-block">Welcome to our
|
||||
website</span>
|
||||
</th>
|
||||
<td>
|
||||
<a href="javascript:void(0)" class="link-primary text-dark fw-medium d-block">/index.html</a>
|
||||
</td>
|
||||
<td class="text-center fw-medium">18,456</td>
|
||||
<td class="text-center fw-medium">$2.40</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="ps-0 fw-medium">
|
||||
<span class="table-link1 text-truncate d-block">Modern Admin
|
||||
Dashboard Template</span>
|
||||
</th>
|
||||
<td>
|
||||
<a href="javascript:void(0)" class="link-primary text-dark fw-medium d-block">/dashboard</a>
|
||||
</td>
|
||||
<td class="text-center fw-medium">17,452</td>
|
||||
<td class="text-center fw-medium">$0.97</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="ps-0 fw-medium">
|
||||
<span class="table-link1 text-truncate d-block">Explore our
|
||||
product catalog</span>
|
||||
</th>
|
||||
<td>
|
||||
<a href="javascript:void(0)" class="link-primary text-dark fw-medium d-block">/product-checkout</a>
|
||||
</td>
|
||||
<td class="text-center fw-medium">12,180</td>
|
||||
<td class="text-center fw-medium">$7,50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="ps-0 fw-medium">
|
||||
<span class="table-link1 text-truncate d-block">Comprehensive
|
||||
User Guide</span>
|
||||
</th>
|
||||
<td>
|
||||
<a href="javascript:void(0)" class="link-primary text-dark fw-medium d-block">/docs</a>
|
||||
</td>
|
||||
<td class="text-center fw-medium">800</td>
|
||||
<td class="text-center fw-medium">$5,50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" class="ps-0 fw-medium border-0">
|
||||
<span class="table-link1 text-truncate d-block">Check out our
|
||||
services</span>
|
||||
</th>
|
||||
<td class="border-0">
|
||||
<a href="javascript:void(0)" class="link-primary text-dark fw-medium d-block">/services</a>
|
||||
</td>
|
||||
<td class="text-center fw-medium border-0">1300</td>
|
||||
<td class="text-center fw-medium border-0">$2,15</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title d-flex align-items-center gap-2 mb-5 pb-3">Sessions by
|
||||
device<span><iconify-icon icon="solar:question-circle-bold" class="fs-7 d-flex text-muted" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-success" data-bs-title="Locations"></iconify-icon></span>
|
||||
</h5>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<iconify-icon icon="solar:laptop-minimalistic-line-duotone" class="fs-7 d-flex text-primary"></iconify-icon>
|
||||
<span class="fs-11 mt-2 d-block text-nowrap">Computers</span>
|
||||
<h4 class="mb-0 mt-1">87%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<iconify-icon icon="solar:smartphone-line-duotone" class="fs-7 d-flex text-secondary"></iconify-icon>
|
||||
<span class="fs-11 mt-2 d-block text-nowrap">Smartphone</span>
|
||||
<h4 class="mb-0 mt-1">9.2%</h4>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<iconify-icon icon="solar:tablet-line-duotone" class="fs-7 d-flex text-success"></iconify-icon>
|
||||
<span class="fs-11 mt-2 d-block text-nowrap">Tablets</span>
|
||||
<h4 class="mb-0 mt-1">3.1%</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vstack gap-4 mt-7 pt-2">
|
||||
<div>
|
||||
<div class="hstack justify-content-between">
|
||||
<span class="fs-3 fw-medium">Computers</span>
|
||||
<h6 class="fs-3 fw-medium text-dark lh-base mb-0">87%</h6>
|
||||
</div>
|
||||
<div class="progress mt-6" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-primary" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="hstack justify-content-between">
|
||||
<span class="fs-3 fw-medium">Smartphones</span>
|
||||
<h6 class="fs-3 fw-medium text-dark lh-base mb-0">9.2%</h6>
|
||||
</div>
|
||||
<div class="progress mt-6" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-secondary" style="width: 50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="hstack justify-content-between">
|
||||
<span class="fs-3 fw-medium">Tablets</span>
|
||||
<h6 class="fs-3 fw-medium text-dark lh-base mb-0">3.1%</h6>
|
||||
</div>
|
||||
<div class="progress mt-6" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-success" style="width: 35%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card overflow-hidden hover-img">
|
||||
<div class="position-relative">
|
||||
<a href="javascript:void(0)">
|
||||
<img src="../assets/images/blog/blog-img1.jpg" class="card-img-top" alt="matdash-img">
|
||||
</a>
|
||||
<span class="badge text-bg-light text-dark fs-2 lh-sm mb-9 me-9 py-1 px-2 fw-semibold position-absolute bottom-0 end-0">2
|
||||
min Read</span>
|
||||
<img src="../assets/images/profile/user-3.jpg" alt="matdash-img" class="img-fluid rounded-circle position-absolute bottom-0 start-0 mb-n9 ms-9" width="40" height="40" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Georgeanna Ramero">
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<span class="badge text-bg-light fs-2 py-1 px-2 lh-sm mt-3">Social</span>
|
||||
<a class="d-block my-4 fs-5 text-dark fw-semibold link-primary" href="">As yen tumbles, gadget-loving
|
||||
Japan goes
|
||||
for secondhand iPhones</a>
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="ti ti-eye text-dark fs-5"></i>9,125
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="ti ti-message-2 text-dark fs-5"></i>3
|
||||
</div>
|
||||
<div class="d-flex align-items-center fs-2 ms-auto">
|
||||
<i class="ti ti-point text-dark"></i>Mon, Dec 19
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card overflow-hidden hover-img">
|
||||
<div class="position-relative">
|
||||
<a href="javascript:void(0)">
|
||||
<img src="../assets/images/blog/blog-img2.jpg" class="card-img-top" alt="matdash-img">
|
||||
</a>
|
||||
<span class="badge text-bg-light text-dark fs-2 lh-sm mb-9 me-9 py-1 px-2 fw-semibold position-absolute bottom-0 end-0">2
|
||||
min Read</span>
|
||||
<img src="../assets/images/profile/user-2.jpg" alt="matdash-img" class="img-fluid rounded-circle position-absolute bottom-0 start-0 mb-n9 ms-9" width="40" height="40" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Georgeanna Ramero">
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<span class="badge text-bg-light fs-2 py-1 px-2 lh-sm mt-3">Gadget</span>
|
||||
<a class="d-block my-4 fs-5 text-dark fw-semibold link-primary" href="">Intel loses bid to revive
|
||||
antitrust case
|
||||
against patent foe Fortress</a>
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="ti ti-eye text-dark fs-5"></i>4,150
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="ti ti-message-2 text-dark fs-5"></i>38
|
||||
</div>
|
||||
<div class="d-flex align-items-center fs-2 ms-auto">
|
||||
<i class="ti ti-point text-dark"></i>Sun, Dec 18
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card overflow-hidden hover-img">
|
||||
<div class="position-relative">
|
||||
<a href="javascript:void(0)">
|
||||
<img src="../assets/images/blog/blog-img3.jpg" class="card-img-top" alt="matdash-img">
|
||||
</a>
|
||||
<span class="badge text-bg-light text-dark fs-2 lh-sm mb-9 me-9 py-1 px-2 fw-semibold position-absolute bottom-0 end-0">2
|
||||
min Read</span>
|
||||
<img src="../assets/images/profile/user-3.jpg" alt="matdash-img" class="img-fluid rounded-circle position-absolute bottom-0 start-0 mb-n9 ms-9" width="40" height="40" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Georgeanna Ramero">
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<span class="badge text-bg-light fs-2 py-1 px-2 lh-sm mt-3">Health</span>
|
||||
<a class="d-block my-4 fs-5 text-dark fw-semibold link-primary" href="">COVID outbreak deepens as more
|
||||
lockdowns
|
||||
loom in China</a>
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="ti ti-eye text-dark fs-5"></i>9,480
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="ti ti-message-2 text-dark fs-5"></i>12
|
||||
</div>
|
||||
<div class="d-flex align-items-center fs-2 ms-auto">
|
||||
<i class="ti ti-point text-dark"></i>Sat, Dec 17
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-6 text-center">
|
||||
<p class="mb-0 fs-4">Design and Developed by <a href="https://adminmart.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">AdminMart.com</a>Distributed by <a href="https://themewagon.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">ThemeWagon</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
|
||||
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
|
||||
<script src="../assets/js/sidebarmenu.js"></script>
|
||||
<script src="../assets/js/app.min.js"></script>
|
||||
<script src="../assets/js/dashboard.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
222
cao_sunyata/static/html-SEODash/sample-page.html
Normal file
222
cao_sunyata/static/html-SEODash/sample-page.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../../node_modules/simplebar/dist/simplebar.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<!-- Sidebar Start -->
|
||||
<aside class="left-sidebar">
|
||||
<!-- Sidebar scroll-->
|
||||
<div>
|
||||
<div class="brand-logo d-flex align-items-center justify-content-between">
|
||||
<a href="./index.html" class="text-nowrap logo-img">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="" />
|
||||
</a>
|
||||
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
|
||||
<i class="ti ti-x fs-8"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar navigation-->
|
||||
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
|
||||
<ul id="sidebarnav">
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">Home</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./index.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:home-smile-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">UI COMPONENTS</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-buttons.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Buttons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-alerts.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:danger-circle-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Alerts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-card.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:bookmark-square-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Card</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-forms.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:file-text-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-typography.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:text-field-focus-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-6" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">AUTH</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-login.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:login-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Login</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-register.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:user-plus-rounded-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Register</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-4" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">EXTRA</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./icon-tabler.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:sticker-smile-circle-2-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Icons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./sample-page.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:planet-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Sample Page</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="unlimited-access hide-menu bg-primary-subtle position-relative mb-7 mt-7 rounded-3">
|
||||
<div class="d-flex">
|
||||
<div class="unlimited-access-title me-3">
|
||||
<h6 class="fw-semibold fs-4 mb-6 text-dark w-75">Upgrade to pro</h6>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
|
||||
</div>
|
||||
<div class="unlimited-access-img">
|
||||
<img src="../assets/images/backgrounds/rocket.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Sidebar navigation -->
|
||||
</div>
|
||||
<!-- End Sidebar scroll-->
|
||||
</aside>
|
||||
<!-- Sidebar End -->
|
||||
<!-- Main wrapper -->
|
||||
<div class="body-wrapper">
|
||||
<!-- Header Start -->
|
||||
<header class="app-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item d-block d-xl-none">
|
||||
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
|
||||
<i class="ti ti-bell-ringing"></i>
|
||||
<div class="notification bg-primary rounded-circle"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
|
||||
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary me-2"><span class="d-none d-md-block">Check Pro Version</span> <span class="d-block d-md-none">Pro</span></a>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-success"><span class="d-none d-md-block">Download Free </span> <span class="d-block d-md-none">Free</span></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="../assets/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
|
||||
<div class="message-body">
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-user fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Profile</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-mail fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Account</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-list-check fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Task</p>
|
||||
</a>
|
||||
<a href="./authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-semibold mb-4">Sample Page</h5>
|
||||
<p class="mb-0">This is a sample page </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-6 text-center">
|
||||
<p class="mb-0 fs-4">Design and Developed by <a href="https://adminmart.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">AdminMart.com</a> Distributed by <a href="https://themewagon.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">ThemeWagon</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
|
||||
<script src="../assets/js/sidebarmenu.js"></script>
|
||||
<script src="../assets/js/app.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
249
cao_sunyata/static/html-SEODash/ui-alerts.html
Normal file
249
cao_sunyata/static/html-SEODash/ui-alerts.html
Normal file
@@ -0,0 +1,249 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../../node_modules/simplebar/dist/simplebar.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<!-- Sidebar Start -->
|
||||
<aside class="left-sidebar">
|
||||
<!-- Sidebar scroll-->
|
||||
<div>
|
||||
<div class="brand-logo d-flex align-items-center justify-content-between">
|
||||
<a href="./index.html" class="text-nowrap logo-img">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="" />
|
||||
</a>
|
||||
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
|
||||
<i class="ti ti-x fs-8"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar navigation-->
|
||||
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
|
||||
<ul id="sidebarnav">
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">Home</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./index.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:home-smile-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">UI COMPONENTS</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-buttons.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Buttons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-alerts.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:danger-circle-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Alerts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-card.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:bookmark-square-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Card</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-forms.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:file-text-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-typography.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:text-field-focus-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-6" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">AUTH</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-login.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:login-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Login</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-register.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:user-plus-rounded-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Register</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-4" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">EXTRA</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./icon-tabler.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:sticker-smile-circle-2-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Icons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./sample-page.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:planet-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Sample Page</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="unlimited-access hide-menu bg-primary-subtle position-relative mb-7 mt-7 rounded-3">
|
||||
<div class="d-flex">
|
||||
<div class="unlimited-access-title me-3">
|
||||
<h6 class="fw-semibold fs-4 mb-6 text-dark w-75">Upgrade to pro</h6>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
|
||||
</div>
|
||||
<div class="unlimited-access-img">
|
||||
<img src="../assets/images/backgrounds/rocket.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Sidebar navigation -->
|
||||
</div>
|
||||
<!-- End Sidebar scroll-->
|
||||
</aside>
|
||||
<!-- Sidebar End -->
|
||||
<!-- Main wrapper -->
|
||||
<div class="body-wrapper">
|
||||
<!-- Header Start -->
|
||||
<header class="app-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item d-block d-xl-none">
|
||||
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
|
||||
<i class="ti ti-bell-ringing"></i>
|
||||
<div class="notification bg-primary rounded-circle"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
|
||||
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary me-2"><span class="d-none d-md-block">Check Pro Version</span> <span class="d-block d-md-none">Pro</span></a>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-success"><span class="d-none d-md-block">Download Free </span> <span class="d-block d-md-none">Free</span></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="../assets/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
|
||||
<div class="message-body">
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-user fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Profile</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-mail fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Account</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-list-check fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Task</p>
|
||||
</a>
|
||||
<a href="./authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-semibold mb-4">Alerts</h5>
|
||||
<div class="card mb-0">
|
||||
<div class="card-body p-4">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-6 text-center">
|
||||
<p class="mb-0 fs-4">Design and Developed by <a href="https://adminmart.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">AdminMart.com</a> Distributed by <a href="https://themewagon.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">ThemeWagon</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
|
||||
<script src="../assets/js/sidebarmenu.js"></script>
|
||||
<script src="../assets/js/app.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
248
cao_sunyata/static/html-SEODash/ui-buttons.html
Normal file
248
cao_sunyata/static/html-SEODash/ui-buttons.html
Normal file
@@ -0,0 +1,248 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../../node_modules/simplebar/dist/simplebar.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<!-- Sidebar Start -->
|
||||
<aside class="left-sidebar">
|
||||
<!-- Sidebar scroll-->
|
||||
<div>
|
||||
<div class="brand-logo d-flex align-items-center justify-content-between">
|
||||
<a href="./index.html" class="text-nowrap logo-img">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="" />
|
||||
</a>
|
||||
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
|
||||
<i class="ti ti-x fs-8"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar navigation-->
|
||||
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
|
||||
<ul id="sidebarnav">
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">Home</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./index.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:home-smile-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">UI COMPONENTS</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-buttons.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Buttons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-alerts.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:danger-circle-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Alerts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-card.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:bookmark-square-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Card</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-forms.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:file-text-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-typography.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:text-field-focus-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-6" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">AUTH</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-login.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:login-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Login</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-register.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:user-plus-rounded-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Register</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-4" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">EXTRA</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./icon-tabler.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:sticker-smile-circle-2-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Icons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./sample-page.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:planet-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Sample Page</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="unlimited-access hide-menu bg-primary-subtle position-relative mb-7 mt-7 rounded-3">
|
||||
<div class="d-flex">
|
||||
<div class="unlimited-access-title me-3">
|
||||
<h6 class="fw-semibold fs-4 mb-6 text-dark w-75">Upgrade to pro</h6>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
|
||||
</div>
|
||||
<div class="unlimited-access-img">
|
||||
<img src="../assets/images/backgrounds/rocket.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Sidebar navigation -->
|
||||
</div>
|
||||
<!-- End Sidebar scroll-->
|
||||
</aside>
|
||||
<!-- Sidebar End -->
|
||||
<!-- Main wrapper -->
|
||||
<div class="body-wrapper">
|
||||
<!-- Header Start -->
|
||||
<header class="app-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item d-block d-xl-none">
|
||||
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
|
||||
<i class="ti ti-bell-ringing"></i>
|
||||
<div class="notification bg-primary rounded-circle"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
|
||||
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary me-2"><span class="d-none d-md-block">Check Pro Version</span> <span class="d-block d-md-none">Pro</span></a>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-success"><span class="d-none d-md-block">Download Free </span> <span class="d-block d-md-none">Free</span></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="../assets/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
|
||||
<div class="message-body">
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-user fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Profile</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-mail fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Account</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-list-check fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Task</p>
|
||||
</a>
|
||||
<a href="./authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-semibold mb-4">Buttons</h5>
|
||||
<div class="card">
|
||||
<div class="card-body p-4">
|
||||
<button type="button" class="btn btn-primary m-1">Primary</button>
|
||||
<button type="button" class="btn btn-secondary m-1">Secondary</button>
|
||||
<button type="button" class="btn btn-success m-1">Success</button>
|
||||
<button type="button" class="btn btn-danger m-1">Danger</button>
|
||||
<button type="button" class="btn btn-warning m-1">Warning</button>
|
||||
<button type="button" class="btn btn-info m-1">Info</button>
|
||||
<button type="button" class="btn btn-light m-1">Light</button>
|
||||
<button type="button" class="btn btn-dark m-1">Dark</button>
|
||||
<button type="button" class="btn btn-link m-1">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title fw-semibold mb-4">Outline buttons</h5>
|
||||
<div class="card mb-0">
|
||||
<div class="card-body p-4">
|
||||
<button type="button" class="btn btn-outline-primary m-1">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary m-1">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success m-1">Success</button>
|
||||
<button type="button" class="btn btn-outline-danger m-1">Danger</button>
|
||||
<button type="button" class="btn btn-outline-warning m-1">Warning</button>
|
||||
<button type="button" class="btn btn-outline-info m-1">Info</button>
|
||||
<button type="button" class="btn btn-outline-light m-1">Light</button>
|
||||
<button type="button" class="btn btn-outline-dark m-1">Dark</button>
|
||||
<button type="button" class="btn btn-outline-link m-1">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-6 text-center">
|
||||
<p class="mb-0 fs-4">Design and Developed by <a href="https://adminmart.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">AdminMart.com</a> Distributed by <a href="https://themewagon.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">ThemeWagon</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
|
||||
<script src="../assets/js/sidebarmenu.js"></script>
|
||||
<script src="../assets/js/app.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
262
cao_sunyata/static/html-SEODash/ui-card.html
Normal file
262
cao_sunyata/static/html-SEODash/ui-card.html
Normal file
@@ -0,0 +1,262 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../../node_modules/simplebar/dist/simplebar.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<!-- Sidebar Start -->
|
||||
<aside class="left-sidebar">
|
||||
<!-- Sidebar scroll-->
|
||||
<div>
|
||||
<div class="brand-logo d-flex align-items-center justify-content-between">
|
||||
<a href="./index.html" class="text-nowrap logo-img">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="" />
|
||||
</a>
|
||||
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
|
||||
<i class="ti ti-x fs-8"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar navigation-->
|
||||
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
|
||||
<ul id="sidebarnav">
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">Home</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./index.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:home-smile-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">UI COMPONENTS</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-buttons.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Buttons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-alerts.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:danger-circle-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Alerts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-card.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:bookmark-square-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Card</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-forms.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:file-text-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-typography.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:text-field-focus-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-6" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">AUTH</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-login.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:login-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Login</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-register.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:user-plus-rounded-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Register</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-4" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">EXTRA</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./icon-tabler.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:sticker-smile-circle-2-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Icons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./sample-page.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:planet-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Sample Page</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="unlimited-access hide-menu bg-primary-subtle position-relative mb-7 mt-7 rounded-3">
|
||||
<div class="d-flex">
|
||||
<div class="unlimited-access-title me-3">
|
||||
<h6 class="fw-semibold fs-4 mb-6 text-dark w-75">Upgrade to pro</h6>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
|
||||
</div>
|
||||
<div class="unlimited-access-img">
|
||||
<img src="../assets/images/backgrounds/rocket.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Sidebar navigation -->
|
||||
</div>
|
||||
<!-- End Sidebar scroll-->
|
||||
</aside>
|
||||
<!-- Sidebar End -->
|
||||
<!-- Main wrapper -->
|
||||
<div class="body-wrapper">
|
||||
<!-- Header Start -->
|
||||
<header class="app-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item d-block d-xl-none">
|
||||
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
|
||||
<i class="ti ti-bell-ringing"></i>
|
||||
<div class="notification bg-primary rounded-circle"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
|
||||
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary me-2"><span class="d-none d-md-block">Check Pro Version</span> <span class="d-block d-md-none">Pro</span></a>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-success"><span class="d-none d-md-block">Download Free </span> <span class="d-block d-md-none">Free</span></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="../assets/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
|
||||
<div class="message-body">
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-user fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Profile</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-mail fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Account</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-list-check fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Task</p>
|
||||
</a>
|
||||
<a href="./authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h5 class="card-title fw-semibold mb-4">Card</h5>
|
||||
<div class="card">
|
||||
<img src="../assets/images/products/s4.jpg" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
||||
the
|
||||
card's content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="card-title fw-semibold mb-4">Header and footer</h5>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="card-title fw-semibold mb-4">Titles, text, and links</h5>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
|
||||
the
|
||||
card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-6 text-center">
|
||||
<p class="mb-0 fs-4">Design and Developed by <a href="https://adminmart.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">AdminMart.com</a> Distributed by <a href="https://themewagon.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">ThemeWagon</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
|
||||
<script src="../assets/js/sidebarmenu.js"></script>
|
||||
<script src="../assets/js/app.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
270
cao_sunyata/static/html-SEODash/ui-forms.html
Normal file
270
cao_sunyata/static/html-SEODash/ui-forms.html
Normal file
@@ -0,0 +1,270 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../../node_modules/simplebar/dist/simplebar.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<!-- Sidebar Start -->
|
||||
<aside class="left-sidebar">
|
||||
<!-- Sidebar scroll-->
|
||||
<div>
|
||||
<div class="brand-logo d-flex align-items-center justify-content-between">
|
||||
<a href="./index.html" class="text-nowrap logo-img">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="" />
|
||||
</a>
|
||||
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
|
||||
<i class="ti ti-x fs-8"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar navigation-->
|
||||
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
|
||||
<ul id="sidebarnav">
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">Home</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./index.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:home-smile-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">UI COMPONENTS</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-buttons.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Buttons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-alerts.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:danger-circle-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Alerts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-card.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:bookmark-square-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Card</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-forms.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:file-text-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-typography.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:text-field-focus-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-6" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">AUTH</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-login.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:login-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Login</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-register.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:user-plus-rounded-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Register</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-4" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">EXTRA</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./icon-tabler.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:sticker-smile-circle-2-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Icons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./sample-page.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:planet-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Sample Page</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="unlimited-access hide-menu bg-primary-subtle position-relative mb-7 mt-7 rounded-3">
|
||||
<div class="d-flex">
|
||||
<div class="unlimited-access-title me-3">
|
||||
<h6 class="fw-semibold fs-4 mb-6 text-dark w-75">Upgrade to pro</h6>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
|
||||
</div>
|
||||
<div class="unlimited-access-img">
|
||||
<img src="../assets/images/backgrounds/rocket.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Sidebar navigation -->
|
||||
</div>
|
||||
<!-- End Sidebar scroll-->
|
||||
</aside>
|
||||
<!-- Sidebar End -->
|
||||
<!-- Main wrapper -->
|
||||
<div class="body-wrapper">
|
||||
<!-- Header Start -->
|
||||
<header class="app-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item d-block d-xl-none">
|
||||
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
|
||||
<i class="ti ti-bell-ringing"></i>
|
||||
<div class="notification bg-primary rounded-circle"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
|
||||
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary me-2"><span class="d-none d-md-block">Check Pro Version</span> <span class="d-block d-md-none">Pro</span></a>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-success"><span class="d-none d-md-block">Download Free </span> <span class="d-block d-md-none">Free</span></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="../assets/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
|
||||
<div class="message-body">
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-user fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Profile</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-mail fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Account</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-list-check fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Task</p>
|
||||
</a>
|
||||
<a href="./authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-semibold mb-4">Forms</h5>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title fw-semibold mb-4">Disabled forms</h5>
|
||||
<div class="card mb-0">
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<fieldset disabled>
|
||||
<legend>Disabled fieldset example</legend>
|
||||
<div class="mb-3">
|
||||
<label for="disabledTextInput" class="form-label">Disabled input</label>
|
||||
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="disabledSelect" class="form-label">Disabled select menu</label>
|
||||
<select id="disabledSelect" class="form-select">
|
||||
<option>Disabled select</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
|
||||
<label class="form-check-label" for="disabledFieldsetCheck">
|
||||
Can't check this
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-6 text-center">
|
||||
<p class="mb-0 fs-4">Design and Developed by <a href="https://adminmart.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">AdminMart.com</a> Distributed by <a href="https://themewagon.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">ThemeWagon</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
|
||||
<script src="../assets/js/sidebarmenu.js"></script>
|
||||
<script src="../assets/js/app.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
244
cao_sunyata/static/html-SEODash/ui-typography.html
Normal file
244
cao_sunyata/static/html-SEODash/ui-typography.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SeoDash Free Bootstrap Admin Template by Adminmart</title>
|
||||
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/seodashlogo.png" />
|
||||
<link rel="stylesheet" href="../../node_modules/simplebar/dist/simplebar.min.css">
|
||||
<link rel="stylesheet" href="../assets/css/styles.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Body Wrapper -->
|
||||
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
|
||||
data-sidebar-position="fixed" data-header-position="fixed">
|
||||
<!-- Sidebar Start -->
|
||||
<aside class="left-sidebar">
|
||||
<!-- Sidebar scroll-->
|
||||
<div>
|
||||
<div class="brand-logo d-flex align-items-center justify-content-between">
|
||||
<a href="./index.html" class="text-nowrap logo-img">
|
||||
<img src="../assets/images/logos/logo-light.svg" alt="" />
|
||||
</a>
|
||||
<div class="close-btn d-xl-none d-block sidebartoggler cursor-pointer" id="sidebarCollapse">
|
||||
<i class="ti ti-x fs-8"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar navigation-->
|
||||
<nav class="sidebar-nav scroll-sidebar" data-simplebar="">
|
||||
<ul id="sidebarnav">
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">Home</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./index.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:home-smile-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<i class="ti ti-dots nav-small-cap-icon fs-6"></i>
|
||||
<span class="hide-menu">UI COMPONENTS</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-buttons.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Buttons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-alerts.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:danger-circle-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Alerts</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-card.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:bookmark-square-minimalistic-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Card</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-forms.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:file-text-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Forms</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./ui-typography.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:text-field-focus-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-6" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">AUTH</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-login.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:login-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Login</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./authentication-register.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:user-plus-rounded-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Register</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-small-cap">
|
||||
<iconify-icon icon="solar:menu-dots-linear" class="nav-small-cap-icon fs-4" class="fs-6"></iconify-icon>
|
||||
<span class="hide-menu">EXTRA</span>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./icon-tabler.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:sticker-smile-circle-2-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Icons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a class="sidebar-link" href="./sample-page.html" aria-expanded="false">
|
||||
<span>
|
||||
<iconify-icon icon="solar:planet-3-bold-duotone" class="fs-6"></iconify-icon>
|
||||
</span>
|
||||
<span class="hide-menu">Sample Page</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="unlimited-access hide-menu bg-primary-subtle position-relative mb-7 mt-7 rounded-3">
|
||||
<div class="d-flex">
|
||||
<div class="unlimited-access-title me-3">
|
||||
<h6 class="fw-semibold fs-4 mb-6 text-dark w-75">Upgrade to pro</h6>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary fs-2 fw-semibold lh-sm">Buy Pro</a>
|
||||
</div>
|
||||
<div class="unlimited-access-img">
|
||||
<img src="../assets/images/backgrounds/rocket.png" alt="" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Sidebar navigation -->
|
||||
</div>
|
||||
<!-- End Sidebar scroll-->
|
||||
</aside>
|
||||
<!-- Sidebar End -->
|
||||
<!-- Main wrapper -->
|
||||
<div class="body-wrapper">
|
||||
<!-- Header Start -->
|
||||
<header class="app-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item d-block d-xl-none">
|
||||
<a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)">
|
||||
<i class="ti ti-bell-ringing"></i>
|
||||
<div class="notification bg-primary rounded-circle"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-collapse justify-content-end px-0" id="navbarNav">
|
||||
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-primary me-2"><span class="d-none d-md-block">Check Pro Version</span> <span class="d-block d-md-none">Pro</span></a>
|
||||
<a href="#" target="_blank"
|
||||
class="btn btn-success"><span class="d-none d-md-block">Download Free </span> <span class="d-block d-md-none">Free</span></a>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link nav-icon-hover" href="javascript:void(0)" id="drop2" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="../assets/images/profile/user-1.jpg" alt="" width="35" height="35" class="rounded-circle">
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
|
||||
<div class="message-body">
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-user fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Profile</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-mail fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Account</p>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item">
|
||||
<i class="ti ti-list-check fs-6"></i>
|
||||
<p class="mb-0 fs-3">My Task</p>
|
||||
</a>
|
||||
<a href="./authentication-login.html" class="btn btn-outline-primary mx-3 mt-2 d-block">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Header End -->
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-semibold mb-4">Headings</h5>
|
||||
<div class="card">
|
||||
<div class="card-body p-4">
|
||||
<h1>h1. Bootstrap heading</h1>
|
||||
<h2>h2. Bootstrap heading</h2>
|
||||
<h3>h3. Bootstrap heading</h3>
|
||||
<h4>h4. Bootstrap heading</h4>
|
||||
<h5>h5. Bootstrap heading</h5>
|
||||
<h6>h6. Bootstrap heading</h6>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title fw-semibold mb-4">Inline text elements</h5>
|
||||
<div class="card mb-0">
|
||||
<div class="card-body p-4">
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><u>This line of text will render as underlined.</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p class="mb-0"><em>This line rendered as italicized text.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-6 text-center">
|
||||
<p class="mb-0 fs-4">Design and Developed by <a href="https://adminmart.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">AdminMart.com</a> Distributed by <a href="https://themewagon.com/" target="_blank"
|
||||
class="pe-1 text-primary text-decoration-underline">ThemeWagon</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
|
||||
<script src="../assets/js/sidebarmenu.js"></script>
|
||||
<script src="../assets/js/app.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
cao_sunyata/static/images/backgrounds/product-tip.png
Normal file
BIN
cao_sunyata/static/images/backgrounds/product-tip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
BIN
cao_sunyata/static/images/backgrounds/rocket.png
Normal file
BIN
cao_sunyata/static/images/backgrounds/rocket.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
cao_sunyata/static/images/blog/blog-img1.jpg
Normal file
BIN
cao_sunyata/static/images/blog/blog-img1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
cao_sunyata/static/images/blog/blog-img2.jpg
Normal file
BIN
cao_sunyata/static/images/blog/blog-img2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
cao_sunyata/static/images/blog/blog-img3.jpg
Normal file
BIN
cao_sunyata/static/images/blog/blog-img3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
12
cao_sunyata/static/images/logos/logo-light.svg
Normal file
12
cao_sunyata/static/images/logos/logo-light.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="145" height="33" viewBox="0 0 145 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M50.0593 24.8868C48.8566 24.8868 47.7218 24.7284 46.6325 24.4116C45.5432 24.0948 44.6581 23.6874 44 23.1669L45.1574 20.587C45.7928 21.0396 46.5417 21.4017 47.4268 21.6959C48.2892 21.9901 49.1743 22.1259 50.082 22.1259C50.7629 22.1259 51.3075 22.058 51.7387 21.9222C52.1472 21.7864 52.4649 21.6054 52.6692 21.3564C52.8734 21.1075 52.9642 20.8359 52.9642 20.5191C52.9642 20.1344 52.8053 19.8175 52.4876 19.5686C52.1699 19.3423 51.7614 19.1386 51.2621 19.0028C50.7402 18.8444 50.1955 18.7086 49.5601 18.5728C48.9473 18.4371 48.3346 18.2786 47.6992 18.075C47.0864 17.8713 46.5191 17.6223 45.9971 17.3055C45.4751 16.9887 45.0666 16.5813 44.7489 16.0834C44.4312 15.5629 44.2723 14.9293 44.2723 14.1372C44.2723 13.2772 44.4993 12.5078 44.9532 11.8062C45.407 11.1047 46.1106 10.5389 47.041 10.1315C47.9715 9.72418 49.1289 9.49787 50.5359 9.49787C51.4664 9.49787 52.3968 9.61103 53.3046 9.83734C54.2124 10.0636 55.0067 10.3805 55.7102 10.8331L54.6436 13.4356C53.9401 13.0509 53.2592 12.7567 52.5557 12.553C51.8522 12.372 51.1714 12.2588 50.5132 12.2588C49.8551 12.2588 49.3104 12.3267 48.8792 12.4851C48.4481 12.6436 48.153 12.8472 47.9715 13.0962C47.7899 13.3451 47.6992 13.6393 47.6992 13.9561C47.6992 14.3409 47.858 14.6351 48.1757 14.884C48.4934 15.1103 48.9019 15.314 49.4012 15.4498C49.9232 15.5856 50.4678 15.744 51.1033 15.8798C51.716 16.0156 52.3288 16.174 52.9642 16.3776C53.5769 16.5587 54.1443 16.8076 54.6663 17.1245C55.1882 17.4413 55.5967 17.8486 55.9144 18.3465C56.2322 18.8444 56.391 19.5007 56.391 20.2701C56.391 21.1075 56.1641 21.8769 55.6875 22.5559C55.2109 23.2574 54.5301 23.8006 53.5996 24.2305C52.6465 24.6832 51.4664 24.8868 50.0593 24.8868Z" fill="#3A4752"/>
|
||||
<path d="M62.1553 21.8769H70.2572V24.6379H58.7285V9.79207H69.9848V12.553H62.1553V21.8769ZM61.9057 15.7666H69.0771V18.4371H61.9057V15.7666Z" fill="#3A4752"/>
|
||||
<path d="M80.2426 24.8868C79.0625 24.8868 77.9732 24.7058 76.9746 24.3211C75.9761 23.9363 75.1137 23.3932 74.3875 22.7143C73.6613 22.0127 73.0939 21.198 72.6854 20.2702C72.2769 19.3423 72.0727 18.3239 72.0727 17.215C72.0727 16.1061 72.2769 15.0877 72.6854 14.1598C73.0939 13.232 73.6613 12.4173 74.3875 11.7157C75.1137 11.0141 75.9988 10.4936 76.9746 10.1089C77.9732 9.72418 79.0398 9.54314 80.2199 9.54314C81.4 9.54314 82.4893 9.72418 83.4652 10.1089C84.441 10.4936 85.3034 11.0368 86.0296 11.7157C86.7558 12.4173 87.3232 13.2093 87.7317 14.1372C88.1402 15.0651 88.3444 16.0834 88.3444 17.215C88.3444 18.3239 88.1402 19.3423 87.7317 20.2928C87.3232 21.2433 86.7558 22.058 86.0296 22.7369C85.3034 23.4158 84.441 23.959 83.4652 24.3437C82.4893 24.7058 81.4227 24.8868 80.2426 24.8868ZM80.2199 21.9675C80.878 21.9675 81.4908 21.8543 82.0581 21.628C82.6255 21.4017 83.1021 21.0849 83.5333 20.6549C83.9645 20.2249 84.2822 19.727 84.5318 19.1386C84.7587 18.5502 84.8722 17.9165 84.8722 17.215C84.8722 16.5134 84.7587 15.8571 84.5318 15.2914C84.3049 14.703 83.9645 14.2051 83.556 13.7751C83.1475 13.3451 82.6482 13.0283 82.0808 12.802C81.5135 12.5757 80.9007 12.4625 80.2199 12.4625C79.5618 12.4625 78.949 12.5757 78.3817 12.802C77.8143 13.0283 77.3377 13.3451 76.9066 13.7751C76.4754 14.2051 76.1577 14.703 75.908 15.2914C75.6811 15.8798 75.5676 16.5134 75.5676 17.215C75.5676 17.9165 75.6811 18.5502 75.908 19.1386C76.135 19.727 76.4754 20.2249 76.8839 20.6549C77.2924 21.0849 77.7916 21.4017 78.359 21.628C78.949 21.8543 79.5618 21.9675 80.2199 21.9675Z" fill="#3A4752"/>
|
||||
<path d="M90.977 24.6379V9.79207H97.7398C99.3511 9.79207 100.781 10.1089 102.006 10.7199C103.232 11.331 104.208 12.1909 104.911 13.2999C105.615 14.4088 105.955 15.7214 105.955 17.215C105.955 18.7086 105.615 20.0212 104.911 21.1301C104.208 22.239 103.255 23.099 102.006 23.71C100.781 24.3211 99.3511 24.6379 97.7398 24.6379H90.977ZM94.4265 21.809H97.581C98.5795 21.809 99.4419 21.628 100.168 21.2433C100.894 20.8586 101.462 20.338 101.87 19.6365C102.279 18.9349 102.483 18.1202 102.483 17.1924C102.483 16.2419 102.279 15.4272 101.87 14.7482C101.462 14.0693 100.894 13.5262 100.168 13.1641C99.4419 12.7793 98.5795 12.5983 97.581 12.5983H94.4265V21.809Z" fill="#3A4752"/>
|
||||
<path d="M111.856 24.8189C110.971 24.8189 110.199 24.6605 109.563 24.3663C108.928 24.0721 108.429 23.6421 108.088 23.1216C107.748 22.6011 107.566 22.0127 107.566 21.3564C107.566 20.6775 107.725 20.0891 108.066 19.5686C108.406 19.0481 108.928 18.6634 109.654 18.3692C110.38 18.075 111.311 17.9392 112.491 17.9392H115.532V19.8628H112.854C112.083 19.8628 111.538 19.9986 111.243 20.2475C110.948 20.4965 110.812 20.8133 110.812 21.198C110.812 21.628 110.971 21.9675 111.311 22.2164C111.651 22.4653 112.105 22.5785 112.673 22.5785C113.217 22.5785 113.717 22.4427 114.17 22.1938C114.602 21.9222 114.919 21.5375 115.124 21.0396L115.646 22.5785C115.396 23.3253 114.965 23.8685 114.329 24.2532C113.694 24.6379 112.854 24.8189 111.856 24.8189ZM115.35 24.6379V22.4201L115.146 21.9222V17.9392C115.146 17.2376 114.919 16.6718 114.488 16.2871C114.057 15.9024 113.399 15.6987 112.491 15.6987C111.878 15.6987 111.288 15.7892 110.698 15.9929C110.108 16.174 109.609 16.4455 109.2 16.7624L107.998 14.454C108.633 14.024 109.382 13.6846 110.244 13.4356C111.129 13.1867 112.014 13.0735 112.922 13.0735C114.67 13.0735 116.031 13.4809 116.984 14.2956C117.96 15.1103 118.437 16.4003 118.437 18.1429V24.6605H115.35V24.6379Z" fill="#3A4752"/>
|
||||
<path d="M125.313 24.8189C124.337 24.8189 123.384 24.7058 122.499 24.4795C121.591 24.2532 120.888 23.959 120.366 23.5969L121.478 21.2206C122 21.5375 122.613 21.809 123.339 22.0127C124.065 22.2164 124.769 22.3296 125.449 22.3296C126.221 22.3296 126.766 22.239 127.083 22.058C127.401 21.8769 127.56 21.628 127.56 21.2885C127.56 21.017 127.446 20.8133 127.197 20.6775C126.947 20.5417 126.63 20.4512 126.198 20.3607C125.79 20.2928 125.336 20.2249 124.837 20.157C124.337 20.0891 123.861 19.9986 123.362 19.8628C122.862 19.7496 122.408 19.5686 122 19.3197C121.591 19.0707 121.251 18.7539 121.001 18.3465C120.752 17.9392 120.638 17.396 120.638 16.7624C120.638 16.0382 120.842 15.4045 121.274 14.8614C121.682 14.3182 122.295 13.8656 123.089 13.5488C123.884 13.232 124.837 13.0735 125.949 13.0735C126.72 13.0735 127.515 13.1641 128.332 13.3225C129.149 13.5035 129.807 13.7298 130.351 14.0693L129.239 16.4229C128.695 16.1061 128.127 15.8798 127.56 15.744C126.993 15.6308 126.448 15.5629 125.926 15.5629C125.177 15.5629 124.655 15.6535 124.315 15.8571C123.974 16.0608 123.815 16.3098 123.815 16.6266C123.815 16.9208 123.929 17.1245 124.179 17.2603C124.428 17.396 124.746 17.5092 125.177 17.5997C125.586 17.6902 126.039 17.7581 126.539 17.826C127.038 17.8939 127.515 17.9844 128.014 18.1202C128.513 18.256 128.967 18.4371 129.375 18.6634C129.784 18.8897 130.102 19.2065 130.374 19.6139C130.624 20.0212 130.76 20.5417 130.76 21.198C130.76 21.8996 130.556 22.5332 130.124 23.0764C129.693 23.6195 129.08 24.0495 128.286 24.3663C127.424 24.6605 126.448 24.8189 125.313 24.8189Z" fill="#3A4752"/>
|
||||
<path d="M139.701 13.0509C140.609 13.0509 141.426 13.232 142.13 13.5941C142.856 13.9561 143.401 14.4993 143.832 15.2461C144.24 15.9929 144.444 16.9434 144.444 18.0976V24.6379H141.131V18.6181C141.131 17.6902 140.927 17.0113 140.518 16.5813C140.11 16.1513 139.543 15.925 138.816 15.925C138.294 15.925 137.818 16.0382 137.409 16.2645C137.001 16.4908 136.66 16.8303 136.433 17.2829C136.206 17.7355 136.093 18.3239 136.093 19.0255V24.6605H132.757V8.88684H136.07V16.3776L135.321 15.4272C135.73 14.6577 136.32 14.0693 137.092 13.6619C137.863 13.2546 138.726 13.0509 139.701 13.0509Z" fill="#3A4752"/>
|
||||
<path opacity="0.5" d="M16 32.8868C11.925 32.8868 8.2 31.3618 5.375 28.8618C4.8 28.3368 4.25 27.7868 3.75 27.1868C1.4 24.3868 0 20.7868 0 16.8868C0 12.9868 1.4 9.38684 3.75 6.61184C4.35 5.91184 5 5.23684 5.725 4.63684C8.5 2.28684 12.075 0.886841 16 0.886841C19.925 0.886841 23.5 2.28684 26.275 4.63684C26.875 5.13684 27.425 5.68684 27.95 6.26184C30.425 9.06184 31.95 12.7118 31.975 16.7368H27.95C27.875 10.1868 22.55 4.91184 16 4.91184C9.4 4.91184 4.025 10.2618 4.025 16.8868C4.025 23.4868 9.375 28.8618 16 28.8618V32.8868Z" fill="#2952FF"/>
|
||||
<path d="M24.0751 16.8868C24.0751 16.8368 24.0751 16.7868 24.0751 16.7368C24 12.3368 20.4 8.81183 16 8.81183C11.55 8.81183 7.92505 12.4118 7.92505 16.8868C7.92505 21.3618 11.55 24.9618 16 24.9618C20.45 24.9618 24.0751 21.3368 24.0751 16.8868ZM11.6 16.8868C11.6 14.4618 13.575 12.4868 16 12.4868C18.375 12.4868 20.325 14.3868 20.4 16.7368C20.4 16.7868 20.4 16.8368 20.4 16.8868C20.4 19.3118 18.425 21.2868 16 21.2868C13.575 21.2868 11.6 19.3118 11.6 16.8868Z" fill="#2952FF"/>
|
||||
<path d="M32 32.8868H24.4V28.8368H27.975V25.3118H32V32.8868Z" fill="#2952FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.5 KiB |
BIN
cao_sunyata/static/images/logos/seodashlogo.png
Normal file
BIN
cao_sunyata/static/images/logos/seodashlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
cao_sunyata/static/images/products/s1.jpg
Normal file
BIN
cao_sunyata/static/images/products/s1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
cao_sunyata/static/images/products/s11.jpg
Normal file
BIN
cao_sunyata/static/images/products/s11.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
cao_sunyata/static/images/products/s4.jpg
Normal file
BIN
cao_sunyata/static/images/products/s4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
cao_sunyata/static/images/products/s5.jpg
Normal file
BIN
cao_sunyata/static/images/products/s5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
cao_sunyata/static/images/products/s7.jpg
Normal file
BIN
cao_sunyata/static/images/products/s7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
cao_sunyata/static/images/profile/user-1.jpg
Normal file
BIN
cao_sunyata/static/images/profile/user-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
cao_sunyata/static/images/profile/user-2.jpg
Normal file
BIN
cao_sunyata/static/images/profile/user-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
cao_sunyata/static/images/profile/user-3 (1).jpg
Normal file
BIN
cao_sunyata/static/images/profile/user-3 (1).jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
cao_sunyata/static/images/profile/user-3.jpg
Normal file
BIN
cao_sunyata/static/images/profile/user-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
cao_sunyata/static/img/IMG_0029.jpeg
Normal file
BIN
cao_sunyata/static/img/IMG_0029.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
37
cao_sunyata/static/js/app.min.js
vendored
Normal file
37
cao_sunyata/static/js/app.min.js
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
|
||||
$(function () {
|
||||
// Admin Panel settings
|
||||
|
||||
//****************************
|
||||
/* This is for the mini-sidebar if width is less then 1170*/
|
||||
//****************************
|
||||
var setsidebartype = function () {
|
||||
var width =
|
||||
window.innerWidth > 0 ? window.innerWidth : this.screen.width;
|
||||
if (width < 1199) {
|
||||
$("#main-wrapper").attr("data-sidebartype", "mini-sidebar");
|
||||
$("#main-wrapper").addClass("mini-sidebar");
|
||||
} else {
|
||||
$("#main-wrapper").attr("data-sidebartype", "full");
|
||||
$("#main-wrapper").removeClass("mini-sidebar");
|
||||
}
|
||||
};
|
||||
$(window).ready(setsidebartype);
|
||||
$(window).on("resize", setsidebartype);
|
||||
//****************************
|
||||
/* This is for sidebartoggler*/
|
||||
//****************************
|
||||
$(".sidebartoggler").on("click", function () {
|
||||
$("#main-wrapper").toggleClass("mini-sidebar");
|
||||
if ($("#main-wrapper").hasClass("mini-sidebar")) {
|
||||
$(".sidebartoggler").prop("checked", !0);
|
||||
$("#main-wrapper").attr("data-sidebartype", "mini-sidebar");
|
||||
} else {
|
||||
$(".sidebartoggler").prop("checked", !1);
|
||||
$("#main-wrapper").attr("data-sidebartype", "full");
|
||||
}
|
||||
});
|
||||
$(".sidebartoggler").on("click", function () {
|
||||
$("#main-wrapper").toggleClass("show-sidebar");
|
||||
});
|
||||
})
|
||||
82
cao_sunyata/static/js/dashboard.js
Normal file
82
cao_sunyata/static/js/dashboard.js
Normal file
@@ -0,0 +1,82 @@
|
||||
$(function () {
|
||||
// -----------------------------------------------------------------------
|
||||
// Traffic Overview
|
||||
// -----------------------------------------------------------------------
|
||||
|
||||
var chart = {
|
||||
series: [
|
||||
{
|
||||
name: "New Users",
|
||||
data: [5, 1, 17, 6, 15, 9, 6],
|
||||
},
|
||||
{
|
||||
name: "Users",
|
||||
data: [7, 11, 4, 16, 10, 14, 10],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
type: "line",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
height: 320,
|
||||
stacked: false,
|
||||
},
|
||||
colors: ["var(--bs-gray-300)", "var(--bs-primary)"],
|
||||
plotOptions: {},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: "smooth",
|
||||
dashArray: [8, 0],
|
||||
},
|
||||
grid: {
|
||||
borderColor: "rgba(0,0,0,0.1)",
|
||||
strokeDashArray: 3,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
// text: 'Age',
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 4,
|
||||
},
|
||||
markers: {
|
||||
strokeColor: ["var(--bs-gray-300)", "var(--bs-primary)"],
|
||||
strokeWidth: 2,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#traffic-overview"),
|
||||
chart
|
||||
);
|
||||
chart.render();
|
||||
|
||||
|
||||
})
|
||||
52
cao_sunyata/static/js/sidebarmenu.js
Normal file
52
cao_sunyata/static/js/sidebarmenu.js
Normal file
@@ -0,0 +1,52 @@
|
||||
/*
|
||||
Template Name: Admin Template
|
||||
Author: Wrappixel
|
||||
|
||||
File: js
|
||||
*/
|
||||
// ==============================================================
|
||||
// Auto select left navbar
|
||||
// ==============================================================
|
||||
$(function () {
|
||||
"use strict";
|
||||
var url = window.location + "";
|
||||
var path = url.replace(
|
||||
window.location.protocol + "//" + window.location.host + "/",
|
||||
""
|
||||
);
|
||||
var element = $("ul#sidebarnav a").filter(function () {
|
||||
return this.href === url || this.href === path; // || url.href.indexOf(this.href) === 0;
|
||||
});
|
||||
element.parentsUntil(".sidebar-nav").each(function (index) {
|
||||
if ($(this).is("li") && $(this).children("a").length !== 0) {
|
||||
$(this).children("a").addClass("active");
|
||||
$(this).parent("ul#sidebarnav").length === 0
|
||||
? $(this).addClass("active")
|
||||
: $(this).addClass("selected");
|
||||
} else if (!$(this).is("ul") && $(this).children("a").length === 0) {
|
||||
$(this).addClass("selected");
|
||||
} else if ($(this).is("ul")) {
|
||||
$(this).addClass("in");
|
||||
}
|
||||
});
|
||||
|
||||
element.addClass("active");
|
||||
$("#sidebarnav a").on("click", function (e) {
|
||||
if (!$(this).hasClass("active")) {
|
||||
// hide any open menus and remove all other classes
|
||||
$("ul", $(this).parents("ul:first")).removeClass("in");
|
||||
$("a", $(this).parents("ul:first")).removeClass("active");
|
||||
|
||||
// open our new menu and add the open class
|
||||
$(this).next("ul").addClass("in");
|
||||
$(this).addClass("active");
|
||||
} else if ($(this).hasClass("active")) {
|
||||
$(this).removeClass("active");
|
||||
$(this).parents("ul:first").removeClass("active");
|
||||
$(this).next("ul").removeClass("in");
|
||||
}
|
||||
});
|
||||
$("#sidebarnav >li >a.has-arrow").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
});
|
||||
21
cao_sunyata/static/libs/apexcharts/LICENSE
Normal file
21
cao_sunyata/static/libs/apexcharts/LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2018 ApexCharts
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
228
cao_sunyata/static/libs/apexcharts/README.md
Normal file
228
cao_sunyata/static/libs/apexcharts/README.md
Normal file
@@ -0,0 +1,228 @@
|
||||
<p align="center"><img src="https://apexcharts.com/media/apexcharts-logo.png"></p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/apexcharts/apexcharts.js/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" alt="License"></a>
|
||||
<a href="https://travis-ci.com/apexcharts/apexcharts.js"><img src="https://api.travis-ci.com/apexcharts/apexcharts.js.svg?branch=master" alt="build" /></a>
|
||||
<img alt="downloads" src="https://img.shields.io/npm/dm/apexcharts.svg"/>
|
||||
<a href="https://www.npmjs.com/package/apexcharts"><img src="https://img.shields.io/npm/v/apexcharts.svg" alt="ver"></a>
|
||||
<img alt="size" src="https://badgen.net/bundlephobia/min/apexcharts?label=size">
|
||||
<a href="https://cdn.jsdelivr.net/npm/apexcharts@3.12.0/types/apexcharts.d.ts"><img src="https://badgen.net/npm/types/apexcharts"/></a>
|
||||
<a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="prettier"></a>
|
||||
<a href="https://www.jsdelivr.com/package/npm/apexcharts"><img src="https://data.jsdelivr.com/v1/package/npm/apexcharts/badge" alt="jsdelivr" /></a>
|
||||
<a href="https://codeclimate.com/github/apexcharts/apexcharts.js"><img src="https://badgen.net/codeclimate/maintainability/apexcharts/apexcharts.js" /></a>
|
||||
<img src="https://badgen.net/codeclimate/tech-debt/apexcharts/apexcharts.js"/>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://twitter.com/intent/tweet?text=Create%20visualizations%20with%20this%20free%20and%20open-source%20JavaScript%20Chart%20library&url=https://www.apexcharts.com&hashtags=javascript,charts,visualizations,developers,apexcharts"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a>
|
||||
</p>
|
||||
|
||||
<p align="center">A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards. ApexCharts is an MIT licensed open-source project that can be used in commercial and non-commercial projects.</p>
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/"><img
|
||||
src="https://apexcharts.com/media/apexcharts-banner.png"></a></p>
|
||||
|
||||
<br />
|
||||
|
||||
## Browsers support
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> Edge | [<img src="https://user-images.githubusercontent.com/17712401/124668393-30772d00-de87-11eb-9360-3199c3b68b95.png" alt="IE" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> IE11 |
|
||||
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| 31+ ✔ | 35+ ✔ | 6+ ✔ | Edge ✔ | [(IE11)](#using-it-with-ie11) ✔ |
|
||||
|
||||
## Download and Installation
|
||||
|
||||
##### Installing via npm
|
||||
|
||||
```bash
|
||||
npm install apexcharts --save
|
||||
```
|
||||
|
||||
##### Direct <script> include
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||
```
|
||||
|
||||
## Wrappers for Vue/React/Angular/Stencil
|
||||
|
||||
Integrate easily with 3rd party frameworks
|
||||
|
||||
- [vue-apexcharts](https://github.com/apexcharts/vue-apexcharts)
|
||||
- [react-apexcharts](https://github.com/apexcharts/react-apexcharts)
|
||||
- [ng-apexcharts](https://github.com/apexcharts/ng-apexcharts) - Plugin by [Morris Janatzek](https://morrisj.net/)
|
||||
- [stencil-apexcharts](https://github.com/apexcharts/stencil-apexcharts)
|
||||
|
||||
### Unofficial Wrappers
|
||||
|
||||
Useful links to wrappers other than the popular frameworks mentioned above
|
||||
|
||||
- [apexcharter](https://github.com/dreamRs/apexcharter) - Htmlwidget for ApexCharts
|
||||
- [apexcharts.rb](https://github.com/styd/apexcharts.rb) - Ruby wrapper for ApexCharts
|
||||
- [larapex-charts](https://github.com/ArielMejiaDev/larapex-charts) - Laravel wrapper for ApexCharts
|
||||
- [blazor-apexcharts](https://github.com/apexcharts/Blazor-ApexCharts) - Blazor wrapper for ApexCharts [demo](https://apexcharts.github.io/Blazor-ApexCharts/)
|
||||
- [svelte-apexcharts](https://github.com/galkatz373/svelte-apexcharts) - Svelte wrapper for ApexCharts
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import ApexCharts from 'apexcharts'
|
||||
```
|
||||
|
||||
To create a basic bar chart with minimal configuration, write as follows:
|
||||
|
||||
```js
|
||||
var options = {
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'sales',
|
||||
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
|
||||
}
|
||||
],
|
||||
xaxis: {
|
||||
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
|
||||
}
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(document.querySelector('#chart'), options)
|
||||
chart.render()
|
||||
```
|
||||
|
||||
This will render the following chart
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/"><img src="https://apexcharts.com/media/first-bar-chart.svg"></a></p>
|
||||
|
||||
### A little more than the basic
|
||||
|
||||
You can create a combination of different charts, sync them and give your desired look with unlimited possibilities.
|
||||
Below is an example of synchronized charts with github style.
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/area-charts/github-style/"><img src="https://apexcharts.com/media/github-charts.gif"></a></p>
|
||||
|
||||
## Interactivity
|
||||
|
||||
Zoom, Pan, Scroll through data. Make selections and load other charts using those selections.
|
||||
An example showing some interactivity
|
||||
|
||||
<p align="center"><a href="https://codepen.io/apexcharts/pen/QrbEQg" target="_blank"><img src="https://apexcharts.com/media/interactivity.gif" alt="interactive chart"></a></p>
|
||||
|
||||
## Dynamic Series Update
|
||||
|
||||
Another approach to Drill down charts where one selection updates the data of other charts.
|
||||
An example of loading dynamic series into charts is shown below
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/dynamic-loaded-chart/"><img src="https://apexcharts.com/media/dynamic-selection.gif" alt="dynamic-loading-chart" /></a></p>
|
||||
|
||||
## Annotations
|
||||
|
||||
Annotations allows you to write custom text on specific values or on axes values. Valuable to expand the visual appeal of your chart and make it more informative.
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/docs/annotations/"><img src="https://apexcharts.com/media/annotations.png" alt="annotations" /></a></p>
|
||||
|
||||
## Mixed Charts
|
||||
|
||||
You can combine more than one chart type to create a combo/mixed chart. Possible combinations can be line/area/column together in a single chart. Each chart-type can have it's own y-axis.
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/mixed-charts/"><img src="https://apexcharts.com/wp-content/uploads/2018/05/line-column-area-mixed-chart.svg" alt="annotations" width="490" /></a></p>
|
||||
|
||||
## Candlestick
|
||||
|
||||
Use a candlestick chart (a common financial chart) to describe price changes of a security, derivative, or currency. Below image show how you can use another chart as a brush/preview-pane which acts as a handle to browse the main candlestick chart.
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/candlestick-charts/"><img src="https://apexcharts.com/media/candlestick.png" alt="candlestick" width="490" /></a></p>
|
||||
|
||||
## Heatmaps
|
||||
|
||||
Use Heatmaps to represent data through colors and shades. Frequently used with bigger data collections, they are valuable for recognizing patterns and area of focus.
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/heatmap-charts/"><img src="https://apexcharts.com/media/heatmap-charts.png" alt="heatmap" /></a></p>
|
||||
|
||||
## Gauges
|
||||
|
||||
The tiny gauges are an important part of a dashboard and are useful in displaying single series data. A demo of these gauges:
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/radialbar-charts/"><img src="https://apexcharts.com/media/radialbars-gauges.png" width="490" alt="radialbar-chart" /></a></p>
|
||||
|
||||
## Sparklines
|
||||
|
||||
Utilize sparklines to indicate trends in data, for example, occasional increments or declines, monetary cycles, or to feature most extreme and least values:
|
||||
|
||||
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/sparklines/"><img src="https://apexcharts.com/media/sparklines.png" alt="sparkline-chart" /></a></p>
|
||||
|
||||
|
||||
## Need Advanced Data Grid for your next project?
|
||||
We partnered with Infragistics, creators of the fastest data grids on the planet! Ignite UI Grids can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates.
|
||||
|
||||
<p align="center"><a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid" target="_blank"><img src="https://apexcharts.com/media/infragistics-data-grid.png" /></a></p>
|
||||
|
||||
Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal hand-on coding. The grid is available in most of your favorite frameworks:
|
||||
|
||||
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid">Angular Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/grids">React Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/data-grid">Blazor Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/data-grid">Web Components DataGrid</a> | <a target="_blank" href="https://www.igniteui.com/grid/overview">jQuery Data Grid </a>
|
||||
|
||||
## What's included
|
||||
|
||||
The download bundle includes the following files and directories providing a minified single file in the dist folder. Every asset including icon/css is bundled in the js itself to avoid loading multiple files.
|
||||
|
||||
```
|
||||
apexcharts/
|
||||
├── dist/
|
||||
│ └── apexcharts.min.js
|
||||
├── src/
|
||||
│ ├── assets/
|
||||
│ ├── charts/
|
||||
│ ├── modules/
|
||||
│ ├── utils/
|
||||
│ └── apexcharts.js
|
||||
└── samples/
|
||||
```
|
||||
|
||||
## Using it with IE11
|
||||
|
||||
If you need to make it work with IE11, you need to include these polyfills before including ApexCharts
|
||||
|
||||
- [promise-polyfill](https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js)
|
||||
- [classlist.js](https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill)
|
||||
- [ResizeObserver polyfill](https://cdn.jsdelivr.net/npm/@juggle/resize-observer)
|
||||
- [findIndex](https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn) - You will need this only if you require timeline/rangebar charts
|
||||
- [canvg](https://unpkg.com/canvg@3.0.4/lib/umd.js) - You will need this only if you require PNG download of your charts
|
||||
|
||||
## Development
|
||||
|
||||
#### Install dependencies and run project
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
This will start the webpack watch and any changes you make to `src` folder will auto-compile and output will be produced in the `dist` folder.
|
||||
|
||||
#### Minifying the src
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Where do I go next?
|
||||
|
||||
Head over to the <a href="https://apexcharts.com/docs/">documentation</a> section to read more about how to use different kinds of charts and explore all options.
|
||||
|
||||
## Contacts
|
||||
|
||||
Email: <a href="info@apexcharts.com">info@apexcharts.com</a>
|
||||
|
||||
Twitter: <a href="https://twitter.com/apexcharts">@apexcharts</a>
|
||||
|
||||
Facebook: <a href="https://facebook.com/apexcharts">fb.com/apexcharts</a>
|
||||
|
||||
## Dependency
|
||||
|
||||
ApexCharts uses <a href="https://svgdotjs.github.io/" target="_blank">SVG.js</a> for drawing shapes, animations, applying svg filters and a lot more under the hood. The library is bundled in the final build file, so you don't need to include it.
|
||||
|
||||
## License
|
||||
|
||||
ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.
|
||||
106
cao_sunyata/static/libs/apexcharts/package.json
Normal file
106
cao_sunyata/static/libs/apexcharts/package.json
Normal file
@@ -0,0 +1,106 @@
|
||||
{
|
||||
"name": "apexcharts",
|
||||
"version": "3.35.2",
|
||||
"description": "A JavaScript Chart Library",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/apexcharts/apexcharts.js.git"
|
||||
},
|
||||
"main": "dist/apexcharts.common.js",
|
||||
"unpkg": "dist/apexcharts.js",
|
||||
"jsdelivr": "dist/apexcharts.js",
|
||||
"typings": "types/apexcharts.d.ts",
|
||||
"files": [
|
||||
"src",
|
||||
"dist/*.js",
|
||||
"dist/*.css",
|
||||
"dist/locales/*.json",
|
||||
"types/*.d.ts"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "rollup -w -c build/config.js --environment TARGET:web-umd-dev",
|
||||
"dev:cjs": "rollup -w -c build/config.js --environment TARGET:web-cjs",
|
||||
"bundle": "node build/build.js",
|
||||
"build": "npm run bundle && webpack",
|
||||
"build:umd": "rollup -w -c build/config.js --environment TARGET:web-umd-dev",
|
||||
"build:amd": "webpack",
|
||||
"lint": "eslint .",
|
||||
"lint:fix": "eslint . --fix",
|
||||
"test": "npm run e2e && npm run unit",
|
||||
"unit": "jest tests/unit/",
|
||||
"e2e": "node tests/e2e/samples.js test",
|
||||
"e2e:update": "node tests/e2e/samples.js update",
|
||||
"build:samples": "node samples/source/index.js generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"svg.draggable.js": "^2.2.2",
|
||||
"svg.easing.js": "^2.0.0",
|
||||
"svg.filter.js": "^2.0.2",
|
||||
"svg.pathmorphing.js": "^0.1.3",
|
||||
"svg.resize.js": "^1.4.3",
|
||||
"svg.select.js": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.8.7",
|
||||
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
||||
"@babel/preset-env": "^7.8.7",
|
||||
"@rollup/plugin-babel": "^5.2.1",
|
||||
"@rollup/plugin-json": "4.0.1",
|
||||
"@rollup/plugin-node-resolve": "6.0.0",
|
||||
"@rollup/plugin-replace": "2.3.0",
|
||||
"@rollup/plugin-strip": "1.3.1",
|
||||
"babel-eslint": "10.0.3",
|
||||
"babel-jest": "27.3.1",
|
||||
"babel-loader": "8.0.6",
|
||||
"babel-plugin-istanbul": "6.0.0",
|
||||
"chalk": "3.0.0",
|
||||
"css-loader": "3.4.1",
|
||||
"eslint": "8.2.0",
|
||||
"eslint-config-prettier": "6.9.0",
|
||||
"eslint-loader": "3.0.3",
|
||||
"eslint-plugin-import": "2.19.1",
|
||||
"eslint-plugin-prettier": "3.1.2",
|
||||
"eslint-plugin-promise": "4.2.1",
|
||||
"fs-extra": "8.1.0",
|
||||
"jest": "27.3.1",
|
||||
"nunjucks": "3.2.1",
|
||||
"nyc": "15.0.0",
|
||||
"pixelmatch": "5.1.0",
|
||||
"pngjs": "3.4.0",
|
||||
"postcss": "^8.3.11",
|
||||
"prettier": "1.19.1",
|
||||
"puppeteer": "2.0.0",
|
||||
"puppeteer-cluster": "0.18.0",
|
||||
"rollup": "2.56.0",
|
||||
"rollup-plugin-babel": "4.4.0",
|
||||
"rollup-plugin-copy-glob": "0.3.2",
|
||||
"rollup-plugin-postcss": "4.0.1",
|
||||
"rollup-plugin-svgo": "1.1.0",
|
||||
"rollup-plugin-terser": "7.0.2",
|
||||
"style-loader": "1.1.2",
|
||||
"svg-inline-loader": "0.8.0",
|
||||
"terser": "5.3.8",
|
||||
"tslint": "5.12.1",
|
||||
"typescript": "3.2.2",
|
||||
"webpack": "5.3.2",
|
||||
"webpack-bundle-analyzer": "3.9.0",
|
||||
"webpack-cli": "4.9.1"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/apexcharts/apexcharts.js/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://www.opensource.org/licenses/mit-license.php"
|
||||
}
|
||||
],
|
||||
"homepage": "https://apexcharts.com",
|
||||
"keywords": [
|
||||
"charts",
|
||||
"graphs",
|
||||
"visualizations",
|
||||
"data"
|
||||
]
|
||||
}
|
||||
762
cao_sunyata/static/libs/apexcharts/src/apexcharts.js
Normal file
762
cao_sunyata/static/libs/apexcharts/src/apexcharts.js
Normal file
@@ -0,0 +1,762 @@
|
||||
import Annotations from './modules/annotations/Annotations'
|
||||
import Base from './modules/Base'
|
||||
import CoreUtils from './modules/CoreUtils'
|
||||
import DataLabels from './modules/DataLabels'
|
||||
import Defaults from './modules/settings/Defaults'
|
||||
import Exports from './modules/Exports'
|
||||
import Grid from './modules/axes/Grid'
|
||||
import Markers from './modules/Markers'
|
||||
import Range from './modules/Range'
|
||||
import Utils from './utils/Utils'
|
||||
import XAxis from './modules/axes/XAxis'
|
||||
import YAxis from './modules/axes/YAxis'
|
||||
import InitCtxVariables from './modules/helpers/InitCtxVariables'
|
||||
import Destroy from './modules/helpers/Destroy'
|
||||
import { addResizeListener, removeResizeListener } from './utils/Resize'
|
||||
import apexCSS from './assets/apexcharts.css'
|
||||
|
||||
/**
|
||||
*
|
||||
* @module ApexCharts
|
||||
**/
|
||||
|
||||
export default class ApexCharts {
|
||||
constructor(el, opts) {
|
||||
this.opts = opts
|
||||
this.ctx = this
|
||||
|
||||
// Pass the user supplied options to the Base Class where these options will be extended with defaults. The returned object from Base Class will become the config object in the entire codebase.
|
||||
this.w = new Base(opts).init()
|
||||
|
||||
this.el = el
|
||||
|
||||
this.w.globals.cuid = Utils.randomId()
|
||||
this.w.globals.chartID = this.w.config.chart.id
|
||||
? Utils.escapeString(this.w.config.chart.id)
|
||||
: this.w.globals.cuid
|
||||
|
||||
const initCtx = new InitCtxVariables(this)
|
||||
initCtx.initModules()
|
||||
|
||||
this.create = Utils.bind(this.create, this)
|
||||
this.windowResizeHandler = this._windowResizeHandler.bind(this)
|
||||
this.parentResizeHandler = this._parentResizeCallback.bind(this)
|
||||
}
|
||||
|
||||
/**
|
||||
* The primary method user will call to render the chart.
|
||||
*/
|
||||
render() {
|
||||
// main method
|
||||
return new Promise((resolve, reject) => {
|
||||
// only draw chart, if element found
|
||||
if (this.el !== null) {
|
||||
if (typeof Apex._chartInstances === 'undefined') {
|
||||
Apex._chartInstances = []
|
||||
}
|
||||
if (this.w.config.chart.id) {
|
||||
Apex._chartInstances.push({
|
||||
id: this.w.globals.chartID,
|
||||
group: this.w.config.chart.group,
|
||||
chart: this
|
||||
})
|
||||
}
|
||||
|
||||
// set the locale here
|
||||
this.setLocale(this.w.config.chart.defaultLocale)
|
||||
const beforeMount = this.w.config.chart.events.beforeMount
|
||||
if (typeof beforeMount === 'function') {
|
||||
beforeMount(this, this.w)
|
||||
}
|
||||
|
||||
this.events.fireEvent('beforeMount', [this, this.w])
|
||||
window.addEventListener('resize', this.windowResizeHandler)
|
||||
addResizeListener(this.el.parentNode, this.parentResizeHandler)
|
||||
|
||||
// Add CSS if not already added
|
||||
if (!this.css) {
|
||||
let rootNode = this.el.getRootNode && this.el.getRootNode()
|
||||
let inShadowRoot = Utils.is('ShadowRoot', rootNode)
|
||||
let doc = this.el.ownerDocument
|
||||
let globalCSS = doc.getElementById('apexcharts-css')
|
||||
|
||||
if (inShadowRoot || !globalCSS) {
|
||||
this.css = document.createElement('style')
|
||||
this.css.id = 'apexcharts-css'
|
||||
this.css.textContent = apexCSS
|
||||
|
||||
if (inShadowRoot) {
|
||||
// We are in Shadow DOM, add to shadow root
|
||||
rootNode.prepend(this.css)
|
||||
} else {
|
||||
// Add to <head> of element's document
|
||||
doc.head.appendChild(this.css)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let graphData = this.create(this.w.config.series, {})
|
||||
if (!graphData) return resolve(this)
|
||||
this.mount(graphData)
|
||||
.then(() => {
|
||||
if (typeof this.w.config.chart.events.mounted === 'function') {
|
||||
this.w.config.chart.events.mounted(this, this.w)
|
||||
}
|
||||
|
||||
this.events.fireEvent('mounted', [this, this.w])
|
||||
resolve(graphData)
|
||||
})
|
||||
.catch((e) => {
|
||||
reject(e)
|
||||
// handle error in case no data or element not found
|
||||
})
|
||||
} else {
|
||||
reject(new Error('Element not found'))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
create(ser, opts) {
|
||||
let w = this.w
|
||||
|
||||
const initCtx = new InitCtxVariables(this)
|
||||
initCtx.initModules()
|
||||
let gl = this.w.globals
|
||||
|
||||
gl.noData = false
|
||||
gl.animationEnded = false
|
||||
|
||||
this.responsive.checkResponsiveConfig(opts)
|
||||
|
||||
if (w.config.xaxis.convertedCatToNumeric) {
|
||||
const defaults = new Defaults(w.config)
|
||||
defaults.convertCatToNumericXaxis(w.config, this.ctx)
|
||||
}
|
||||
|
||||
if (this.el === null) {
|
||||
gl.animationEnded = true
|
||||
return null
|
||||
}
|
||||
|
||||
this.core.setupElements()
|
||||
|
||||
if (w.config.chart.type === 'treemap') {
|
||||
w.config.grid.show = false
|
||||
w.config.yaxis[0].show = false
|
||||
}
|
||||
|
||||
if (gl.svgWidth === 0) {
|
||||
// if the element is hidden, skip drawing
|
||||
gl.animationEnded = true
|
||||
return null
|
||||
}
|
||||
|
||||
const combo = CoreUtils.checkComboSeries(ser)
|
||||
gl.comboCharts = combo.comboCharts
|
||||
gl.comboBarCount = combo.comboBarCount
|
||||
|
||||
const allSeriesAreEmpty = ser.every((s) => s.data && s.data.length === 0)
|
||||
|
||||
if (ser.length === 0 || allSeriesAreEmpty) {
|
||||
this.series.handleNoData()
|
||||
}
|
||||
|
||||
this.events.setupEventHandlers()
|
||||
|
||||
// Handle the data inputted by user and set some of the global variables (for eg, if data is datetime / numeric / category). Don't calculate the range / min / max at this time
|
||||
this.data.parseData(ser)
|
||||
|
||||
// this is a good time to set theme colors first
|
||||
this.theme.init()
|
||||
|
||||
// as markers accepts array, we need to setup global markers for easier access
|
||||
const markers = new Markers(this)
|
||||
markers.setGlobalMarkerSize()
|
||||
|
||||
// labelFormatters should be called before dimensions as in dimensions we need text labels width
|
||||
this.formatters.setLabelFormatters()
|
||||
this.titleSubtitle.draw()
|
||||
|
||||
// legend is calculated here before coreCalculations because it affects the plottable area
|
||||
// if there is some data to show or user collapsed all series, then proceed drawing legend
|
||||
if (
|
||||
!gl.noData ||
|
||||
gl.collapsedSeries.length === gl.series.length ||
|
||||
w.config.legend.showForSingleSeries
|
||||
) {
|
||||
this.legend.init()
|
||||
}
|
||||
|
||||
// check whether in multiple series, all series share the same X
|
||||
this.series.hasAllSeriesEqualX()
|
||||
|
||||
// coreCalculations will give the min/max range and yaxis/axis values. It should be called here to set series variable from config to globals
|
||||
if (gl.axisCharts) {
|
||||
this.core.coreCalculations()
|
||||
if (w.config.xaxis.type !== 'category') {
|
||||
// as we have minX and maxX values, determine the default DateTimeFormat for time series
|
||||
this.formatters.setLabelFormatters()
|
||||
}
|
||||
this.ctx.toolbar.minX = w.globals.minX
|
||||
this.ctx.toolbar.maxX = w.globals.maxX
|
||||
}
|
||||
|
||||
// we need to generate yaxis for heatmap separately as we are not showing numerics there, but seriesNames. There are some tweaks which are required for heatmap to align labels correctly which are done in below function
|
||||
// Also we need to do this before calculating Dimensions plotCoords() method of Dimensions
|
||||
this.formatters.heatmapLabelFormatters()
|
||||
|
||||
// get the largest marker size which will be needed in dimensions calc
|
||||
const coreUtils = new CoreUtils(this)
|
||||
coreUtils.getLargestMarkerSize()
|
||||
|
||||
// We got plottable area here, next task would be to calculate axis areas
|
||||
this.dimensions.plotCoords()
|
||||
|
||||
const xyRatios = this.core.xySettings()
|
||||
|
||||
this.grid.createGridMask()
|
||||
|
||||
const elGraph = this.core.plotChartType(ser, xyRatios)
|
||||
|
||||
const dataLabels = new DataLabels(this)
|
||||
dataLabels.bringForward()
|
||||
if (w.config.dataLabels.background.enabled) {
|
||||
dataLabels.dataLabelsBackground()
|
||||
}
|
||||
|
||||
// after all the drawing calculations, shift the graphical area (actual charts/bars) excluding legends
|
||||
this.core.shiftGraphPosition()
|
||||
|
||||
const dim = {
|
||||
plot: {
|
||||
left: w.globals.translateX,
|
||||
top: w.globals.translateY,
|
||||
width: w.globals.gridWidth,
|
||||
height: w.globals.gridHeight
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
elGraph,
|
||||
xyRatios,
|
||||
elInner: w.globals.dom.elGraphical,
|
||||
dimensions: dim
|
||||
}
|
||||
}
|
||||
|
||||
mount(graphData = null) {
|
||||
let me = this
|
||||
let w = me.w
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
// no data to display
|
||||
if (me.el === null) {
|
||||
return reject(
|
||||
new Error('Not enough data to display or target element not found')
|
||||
)
|
||||
} else if (graphData === null || w.globals.allSeriesCollapsed) {
|
||||
me.series.handleNoData()
|
||||
}
|
||||
if (w.config.chart.type !== 'treemap') {
|
||||
me.axes.drawAxis(w.config.chart.type, graphData.xyRatios)
|
||||
}
|
||||
|
||||
me.grid = new Grid(me)
|
||||
let elgrid = me.grid.drawGrid()
|
||||
|
||||
me.annotations = new Annotations(me)
|
||||
me.annotations.drawImageAnnos()
|
||||
me.annotations.drawTextAnnos()
|
||||
|
||||
if (w.config.grid.position === 'back' && elgrid) {
|
||||
w.globals.dom.elGraphical.add(elgrid.el)
|
||||
}
|
||||
|
||||
let xAxis = new XAxis(this.ctx)
|
||||
let yaxis = new YAxis(this.ctx)
|
||||
if (elgrid !== null) {
|
||||
xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth)
|
||||
yaxis.setYAxisTextAlignments()
|
||||
|
||||
w.config.yaxis.map((yaxe, index) => {
|
||||
if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1) {
|
||||
yaxis.yAxisTitleRotate(index, yaxe.opposite)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (w.config.annotations.position === 'back') {
|
||||
w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
|
||||
me.annotations.drawAxesAnnotations()
|
||||
}
|
||||
|
||||
if (Array.isArray(graphData.elGraph)) {
|
||||
for (let g = 0; g < graphData.elGraph.length; g++) {
|
||||
w.globals.dom.elGraphical.add(graphData.elGraph[g])
|
||||
}
|
||||
} else {
|
||||
w.globals.dom.elGraphical.add(graphData.elGraph)
|
||||
}
|
||||
|
||||
if (w.config.grid.position === 'front' && elgrid) {
|
||||
w.globals.dom.elGraphical.add(elgrid.el)
|
||||
}
|
||||
|
||||
if (w.config.xaxis.crosshairs.position === 'front') {
|
||||
me.crosshairs.drawXCrosshairs()
|
||||
}
|
||||
|
||||
if (w.config.yaxis[0].crosshairs.position === 'front') {
|
||||
me.crosshairs.drawYCrosshairs()
|
||||
}
|
||||
|
||||
if (w.config.annotations.position === 'front') {
|
||||
w.globals.dom.Paper.add(w.globals.dom.elAnnotations)
|
||||
me.annotations.drawAxesAnnotations()
|
||||
}
|
||||
|
||||
if (!w.globals.noData) {
|
||||
// draw tooltips at the end
|
||||
if (w.config.tooltip.enabled && !w.globals.noData) {
|
||||
me.w.globals.tooltip.drawTooltip(graphData.xyRatios)
|
||||
}
|
||||
|
||||
if (
|
||||
w.globals.axisCharts &&
|
||||
(w.globals.isXNumeric ||
|
||||
w.config.xaxis.convertedCatToNumeric ||
|
||||
w.globals.isRangeBar)
|
||||
) {
|
||||
if (
|
||||
w.config.chart.zoom.enabled ||
|
||||
(w.config.chart.selection && w.config.chart.selection.enabled) ||
|
||||
(w.config.chart.pan && w.config.chart.pan.enabled)
|
||||
) {
|
||||
me.zoomPanSelection.init({
|
||||
xyRatios: graphData.xyRatios
|
||||
})
|
||||
}
|
||||
} else {
|
||||
const tools = w.config.chart.toolbar.tools
|
||||
let toolsArr = [
|
||||
'zoom',
|
||||
'zoomin',
|
||||
'zoomout',
|
||||
'selection',
|
||||
'pan',
|
||||
'reset'
|
||||
]
|
||||
toolsArr.forEach((t) => {
|
||||
tools[t] = false
|
||||
})
|
||||
}
|
||||
|
||||
if (w.config.chart.toolbar.show && !w.globals.allSeriesCollapsed) {
|
||||
me.toolbar.createToolbar()
|
||||
}
|
||||
}
|
||||
|
||||
if (w.globals.memory.methodsToExec.length > 0) {
|
||||
w.globals.memory.methodsToExec.forEach((fn) => {
|
||||
fn.method(fn.params, false, fn.context)
|
||||
})
|
||||
}
|
||||
|
||||
if (!w.globals.axisCharts && !w.globals.noData) {
|
||||
me.core.resizeNonAxisCharts()
|
||||
}
|
||||
resolve(me)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy the chart instance by removing all elements which also clean up event listeners on those elements.
|
||||
*/
|
||||
destroy() {
|
||||
window.removeEventListener('resize', this.windowResizeHandler)
|
||||
|
||||
removeResizeListener(this.el.parentNode, this.parentResizeHandler)
|
||||
// remove the chart's instance from the global Apex._chartInstances
|
||||
const chartID = this.w.config.chart.id
|
||||
if (chartID) {
|
||||
Apex._chartInstances.forEach((c, i) => {
|
||||
if (c.id === Utils.escapeString(chartID)) {
|
||||
Apex._chartInstances.splice(i, 1)
|
||||
}
|
||||
})
|
||||
}
|
||||
new Destroy(this.ctx).clear({ isUpdating: false })
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows users to update Options after the chart has rendered.
|
||||
*
|
||||
* @param {object} options - A new config object can be passed which will be merged with the existing config object
|
||||
* @param {boolean} redraw - should redraw from beginning or should use existing paths and redraw from there
|
||||
* @param {boolean} animate - should animate or not on updating Options
|
||||
*/
|
||||
updateOptions(
|
||||
options,
|
||||
redraw = false,
|
||||
animate = true,
|
||||
updateSyncedCharts = true,
|
||||
overwriteInitialConfig = true
|
||||
) {
|
||||
const w = this.w
|
||||
|
||||
// when called externally, clear some global variables
|
||||
// fixes apexcharts.js#1488
|
||||
w.globals.selection = undefined
|
||||
|
||||
if (options.series) {
|
||||
this.series.resetSeries(false, true, false)
|
||||
if (options.series.length && options.series[0].data) {
|
||||
options.series = options.series.map((s, i) => {
|
||||
return this.updateHelpers._extendSeries(s, i)
|
||||
})
|
||||
}
|
||||
|
||||
// user updated the series via updateOptions() function.
|
||||
// Hence, we need to reset axis min/max to avoid zooming issues
|
||||
this.updateHelpers.revertDefaultAxisMinMax()
|
||||
}
|
||||
// user has set x-axis min/max externally - hence we need to forcefully set the xaxis min/max
|
||||
if (options.xaxis) {
|
||||
options = this.updateHelpers.forceXAxisUpdate(options)
|
||||
}
|
||||
if (options.yaxis) {
|
||||
options = this.updateHelpers.forceYAxisUpdate(options)
|
||||
}
|
||||
if (w.globals.collapsedSeriesIndices.length > 0) {
|
||||
this.series.clearPreviousPaths()
|
||||
}
|
||||
/* update theme mode#459 */
|
||||
if (options.theme) {
|
||||
options = this.theme.updateThemeOptions(options)
|
||||
}
|
||||
return this.updateHelpers._updateOptions(
|
||||
options,
|
||||
redraw,
|
||||
animate,
|
||||
updateSyncedCharts,
|
||||
overwriteInitialConfig
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows users to update Series after the chart has rendered.
|
||||
*
|
||||
* @param {array} series - New series which will override the existing
|
||||
*/
|
||||
updateSeries(newSeries = [], animate = true, overwriteInitialSeries = true) {
|
||||
this.series.resetSeries(false)
|
||||
this.updateHelpers.revertDefaultAxisMinMax()
|
||||
return this.updateHelpers._updateSeries(
|
||||
newSeries,
|
||||
animate,
|
||||
overwriteInitialSeries
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows users to append a new series after the chart has rendered.
|
||||
*
|
||||
* @param {array} newSerie - New serie which will be appended to the existing series
|
||||
*/
|
||||
appendSeries(newSerie, animate = true, overwriteInitialSeries = true) {
|
||||
const newSeries = this.w.config.series.slice()
|
||||
newSeries.push(newSerie)
|
||||
this.series.resetSeries(false)
|
||||
this.updateHelpers.revertDefaultAxisMinMax()
|
||||
return this.updateHelpers._updateSeries(
|
||||
newSeries,
|
||||
animate,
|
||||
overwriteInitialSeries
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows users to append Data to series.
|
||||
*
|
||||
* @param {array} newData - New data in the same format as series
|
||||
*/
|
||||
appendData(newData, overwriteInitialSeries = true) {
|
||||
let me = this
|
||||
|
||||
me.w.globals.dataChanged = true
|
||||
|
||||
me.series.getPreviousPaths()
|
||||
|
||||
let newSeries = me.w.config.series.slice()
|
||||
|
||||
for (let i = 0; i < newSeries.length; i++) {
|
||||
if (newData[i] !== null && typeof newData[i] !== 'undefined') {
|
||||
for (let j = 0; j < newData[i].data.length; j++) {
|
||||
newSeries[i].data.push(newData[i].data[j])
|
||||
}
|
||||
}
|
||||
}
|
||||
me.w.config.series = newSeries
|
||||
if (overwriteInitialSeries) {
|
||||
me.w.globals.initialSeries = Utils.clone(me.w.config.series)
|
||||
}
|
||||
|
||||
return this.update()
|
||||
}
|
||||
|
||||
update(options) {
|
||||
return new Promise((resolve, reject) => {
|
||||
new Destroy(this.ctx).clear({ isUpdating: true })
|
||||
|
||||
const graphData = this.create(this.w.config.series, options)
|
||||
if (!graphData) return resolve(this)
|
||||
this.mount(graphData)
|
||||
.then(() => {
|
||||
if (typeof this.w.config.chart.events.updated === 'function') {
|
||||
this.w.config.chart.events.updated(this, this.w)
|
||||
}
|
||||
this.events.fireEvent('updated', [this, this.w])
|
||||
|
||||
this.w.globals.isDirty = true
|
||||
|
||||
resolve(this)
|
||||
})
|
||||
.catch((e) => {
|
||||
reject(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all charts in the same "group" (including the instance which is called upon) to sync them when user zooms in/out or pan.
|
||||
*/
|
||||
getSyncedCharts() {
|
||||
const chartGroups = this.getGroupedCharts()
|
||||
let allCharts = [this]
|
||||
if (chartGroups.length) {
|
||||
allCharts = []
|
||||
chartGroups.forEach((ch) => {
|
||||
allCharts.push(ch)
|
||||
})
|
||||
}
|
||||
|
||||
return allCharts
|
||||
}
|
||||
|
||||
/**
|
||||
* Get charts in the same "group" (excluding the instance which is called upon) to perform operations on the other charts of the same group (eg., tooltip hovering)
|
||||
*/
|
||||
getGroupedCharts() {
|
||||
return Apex._chartInstances
|
||||
.filter((ch) => {
|
||||
if (ch.group) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
.map((ch) => (this.w.config.chart.group === ch.group ? ch.chart : this))
|
||||
}
|
||||
|
||||
static getChartByID(id) {
|
||||
const chartId = Utils.escapeString(id)
|
||||
const c = Apex._chartInstances.filter((ch) => ch.id === chartId)[0]
|
||||
return c && c.chart
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows the user to provide data attrs in the element and the chart will render automatically when this method is called by searching for the elements containing 'data-apexcharts' attribute
|
||||
*/
|
||||
static initOnLoad() {
|
||||
const els = document.querySelectorAll('[data-apexcharts]')
|
||||
|
||||
for (let i = 0; i < els.length; i++) {
|
||||
const el = els[i]
|
||||
const options = JSON.parse(els[i].getAttribute('data-options'))
|
||||
const apexChart = new ApexCharts(el, options)
|
||||
apexChart.render()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This static method allows users to call chart methods without necessarily from the
|
||||
* instance of the chart in case user has assigned chartID to the targeted chart.
|
||||
* The chartID is used for mapping the instance stored in Apex._chartInstances global variable
|
||||
*
|
||||
* This is helpful in cases when you don't have reference of the chart instance
|
||||
* easily and need to call the method from anywhere.
|
||||
* For eg, in React/Vue applications when you have many parent/child components,
|
||||
* and need easy reference to other charts for performing dynamic operations
|
||||
*
|
||||
* @param {string} chartID - The unique identifier which will be used to call methods
|
||||
* on that chart instance
|
||||
* @param {function} fn - The method name to call
|
||||
* @param {object} opts - The parameters which are accepted in the original method will be passed here in the same order.
|
||||
*/
|
||||
static exec(chartID, fn, ...opts) {
|
||||
const chart = this.getChartByID(chartID)
|
||||
if (!chart) return
|
||||
|
||||
// turn on the global exec flag to indicate this method was called
|
||||
chart.w.globals.isExecCalled = true
|
||||
|
||||
let ret = null
|
||||
if (chart.publicMethods.indexOf(fn) !== -1) {
|
||||
ret = chart[fn](...opts)
|
||||
}
|
||||
return ret
|
||||
}
|
||||
|
||||
static merge(target, source) {
|
||||
return Utils.extend(target, source)
|
||||
}
|
||||
|
||||
toggleSeries(seriesName) {
|
||||
return this.series.toggleSeries(seriesName)
|
||||
}
|
||||
|
||||
highlightSeriesOnLegendHover(e, targetElement) {
|
||||
return this.series.toggleSeriesOnHover(e, targetElement)
|
||||
}
|
||||
|
||||
showSeries(seriesName) {
|
||||
this.series.showSeries(seriesName)
|
||||
}
|
||||
|
||||
hideSeries(seriesName) {
|
||||
this.series.hideSeries(seriesName)
|
||||
}
|
||||
|
||||
resetSeries(shouldUpdateChart = true, shouldResetZoom = true) {
|
||||
this.series.resetSeries(shouldUpdateChart, shouldResetZoom)
|
||||
}
|
||||
|
||||
// Public method to add event listener on chart context
|
||||
addEventListener(name, handler) {
|
||||
this.events.addEventListener(name, handler)
|
||||
}
|
||||
|
||||
// Public method to remove event listener on chart context
|
||||
removeEventListener(name, handler) {
|
||||
this.events.removeEventListener(name, handler)
|
||||
}
|
||||
|
||||
addXaxisAnnotation(opts, pushToMemory = true, context = undefined) {
|
||||
let me = this
|
||||
if (context) {
|
||||
me = context
|
||||
}
|
||||
me.annotations.addXaxisAnnotationExternal(opts, pushToMemory, me)
|
||||
}
|
||||
|
||||
addYaxisAnnotation(opts, pushToMemory = true, context = undefined) {
|
||||
let me = this
|
||||
if (context) {
|
||||
me = context
|
||||
}
|
||||
me.annotations.addYaxisAnnotationExternal(opts, pushToMemory, me)
|
||||
}
|
||||
|
||||
addPointAnnotation(opts, pushToMemory = true, context = undefined) {
|
||||
let me = this
|
||||
if (context) {
|
||||
me = context
|
||||
}
|
||||
me.annotations.addPointAnnotationExternal(opts, pushToMemory, me)
|
||||
}
|
||||
|
||||
clearAnnotations(context = undefined) {
|
||||
let me = this
|
||||
if (context) {
|
||||
me = context
|
||||
}
|
||||
me.annotations.clearAnnotations(me)
|
||||
}
|
||||
|
||||
removeAnnotation(id, context = undefined) {
|
||||
let me = this
|
||||
if (context) {
|
||||
me = context
|
||||
}
|
||||
me.annotations.removeAnnotation(me, id)
|
||||
}
|
||||
|
||||
getChartArea() {
|
||||
const el = this.w.globals.dom.baseEl.querySelector('.apexcharts-inner')
|
||||
|
||||
return el
|
||||
}
|
||||
|
||||
getSeriesTotalXRange(minX, maxX) {
|
||||
return this.coreUtils.getSeriesTotalsXRange(minX, maxX)
|
||||
}
|
||||
|
||||
getHighestValueInSeries(seriesIndex = 0) {
|
||||
const range = new Range(this.ctx)
|
||||
return range.getMinYMaxY(seriesIndex).highestY
|
||||
}
|
||||
|
||||
getLowestValueInSeries(seriesIndex = 0) {
|
||||
const range = new Range(this.ctx)
|
||||
return range.getMinYMaxY(seriesIndex).lowestY
|
||||
}
|
||||
|
||||
getSeriesTotal() {
|
||||
return this.w.globals.seriesTotals
|
||||
}
|
||||
|
||||
toggleDataPointSelection(seriesIndex, dataPointIndex) {
|
||||
return this.updateHelpers.toggleDataPointSelection(
|
||||
seriesIndex,
|
||||
dataPointIndex
|
||||
)
|
||||
}
|
||||
|
||||
zoomX(min, max) {
|
||||
this.ctx.toolbar.zoomUpdateOptions(min, max)
|
||||
}
|
||||
|
||||
setLocale(localeName) {
|
||||
this.localization.setCurrentLocaleValues(localeName)
|
||||
}
|
||||
|
||||
dataURI(options) {
|
||||
const exp = new Exports(this.ctx)
|
||||
return exp.dataURI(options)
|
||||
}
|
||||
|
||||
paper() {
|
||||
return this.w.globals.dom.Paper
|
||||
}
|
||||
|
||||
_parentResizeCallback() {
|
||||
if (
|
||||
this.w.globals.animationEnded &&
|
||||
this.w.config.chart.redrawOnParentResize
|
||||
) {
|
||||
this._windowResize()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle window resize and re-draw the whole chart.
|
||||
*/
|
||||
_windowResize() {
|
||||
clearTimeout(this.w.globals.resizeTimer)
|
||||
this.w.globals.resizeTimer = window.setTimeout(() => {
|
||||
this.w.globals.resized = true
|
||||
this.w.globals.dataChanged = false
|
||||
|
||||
// we need to redraw the whole chart on window resize (with a small delay).
|
||||
this.ctx.update()
|
||||
}, 150)
|
||||
}
|
||||
|
||||
_windowResizeHandler() {
|
||||
let { redrawOnWindowResize: redraw } = this.w.config.chart
|
||||
|
||||
if (typeof redraw === 'function') {
|
||||
redraw = redraw()
|
||||
}
|
||||
|
||||
redraw && this._windowResize()
|
||||
}
|
||||
}
|
||||
688
cao_sunyata/static/libs/apexcharts/src/assets/apexcharts.css
Normal file
688
cao_sunyata/static/libs/apexcharts/src/assets/apexcharts.css
Normal file
@@ -0,0 +1,688 @@
|
||||
.apexcharts-canvas {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
/* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */
|
||||
}
|
||||
|
||||
|
||||
/* scrollbar is not visible by default for legend, hence forcing the visibility */
|
||||
.apexcharts-canvas ::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.apexcharts-canvas ::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
|
||||
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
|
||||
.apexcharts-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.apexcharts-text tspan {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.legend-mouseover-inactive {
|
||||
transition: 0.15s ease all;
|
||||
opacity: 0.20;
|
||||
}
|
||||
|
||||
.apexcharts-series-collapsed {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip {
|
||||
border-radius: 5px;
|
||||
box-shadow: 2px 2px 6px -4px #999;
|
||||
cursor: default;
|
||||
font-size: 14px;
|
||||
left: 62px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
z-index: 12;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-active {
|
||||
opacity: 1;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-light {
|
||||
border: 1px solid #e3e3e3;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-dark {
|
||||
color: #fff;
|
||||
background: rgba(30, 30, 30, 0.8);
|
||||
}
|
||||
|
||||
.apexcharts-tooltip * {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
|
||||
.apexcharts-tooltip-title {
|
||||
padding: 6px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
|
||||
background: #ECEFF1;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-y-value,
|
||||
.apexcharts-tooltip-text-goals-value,
|
||||
.apexcharts-tooltip-text-z-value {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-title:empty,
|
||||
.apexcharts-tooltip-text-y-label:empty,
|
||||
.apexcharts-tooltip-text-y-value:empty,
|
||||
.apexcharts-tooltip-text-goals-label:empty,
|
||||
.apexcharts-tooltip-text-goals-value:empty,
|
||||
.apexcharts-tooltip-text-z-value:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-y-value,
|
||||
.apexcharts-tooltip-text-goals-value,
|
||||
.apexcharts-tooltip-text-z-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-text-goals-label,
|
||||
.apexcharts-tooltip-text-goals-value {
|
||||
padding: 6px 0 5px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-goals-group,
|
||||
.apexcharts-tooltip-text-goals-label,
|
||||
.apexcharts-tooltip-text-goals-value {
|
||||
display: flex;
|
||||
}
|
||||
.apexcharts-tooltip-text-goals-label:not(:empty),
|
||||
.apexcharts-tooltip-text-goals-value:not(:empty) {
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-marker {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group {
|
||||
padding: 0 10px;
|
||||
display: none;
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group.apexcharts-active,
|
||||
.apexcharts-tooltip-series-group:last-child {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group-hidden {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-y-group {
|
||||
padding: 6px 0 5px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-box, .apexcharts-custom-tooltip {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-boxPlot {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-box>div {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-box span.value {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-rangebar {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-rangebar .category {
|
||||
font-weight: 600;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-rangebar .series-name {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip {
|
||||
opacity: 0;
|
||||
padding: 9px 10px;
|
||||
pointer-events: none;
|
||||
color: #373d3f;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: #ECEFF1;
|
||||
border: 1px solid #90A4AE;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip.apexcharts-theme-dark {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip:after,
|
||||
.apexcharts-xaxistooltip:before {
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip:after {
|
||||
border-color: rgba(236, 239, 241, 0);
|
||||
border-width: 6px;
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip:before {
|
||||
border-color: rgba(144, 164, 174, 0);
|
||||
border-width: 7px;
|
||||
margin-left: -7px;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom:after,
|
||||
.apexcharts-xaxistooltip-bottom:before {
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top:after,
|
||||
.apexcharts-xaxistooltip-top:before {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom:after {
|
||||
border-bottom-color: #ECEFF1;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom:before {
|
||||
border-bottom-color: #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top:after {
|
||||
border-top-color: #ECEFF1
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top:before {
|
||||
border-top-color: #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {
|
||||
border-top-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
|
||||
border-top-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip.apexcharts-active {
|
||||
opacity: 1;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip {
|
||||
opacity: 0;
|
||||
padding: 4px 10px;
|
||||
pointer-events: none;
|
||||
color: #373d3f;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: #ECEFF1;
|
||||
border: 1px solid #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip.apexcharts-theme-dark {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip:after,
|
||||
.apexcharts-yaxistooltip:before {
|
||||
top: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip:after {
|
||||
border-color: rgba(236, 239, 241, 0);
|
||||
border-width: 6px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip:before {
|
||||
border-color: rgba(144, 164, 174, 0);
|
||||
border-width: 7px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left:after,
|
||||
.apexcharts-yaxistooltip-left:before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right:after,
|
||||
.apexcharts-yaxistooltip-right:before {
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left:after {
|
||||
border-left-color: #ECEFF1;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left:before {
|
||||
border-left-color: #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {
|
||||
border-left-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
|
||||
border-left-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right:after {
|
||||
border-right-color: #ECEFF1;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right:before {
|
||||
border-right-color: #90A4AE;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {
|
||||
border-right-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
|
||||
border-right-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip.apexcharts-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apexcharts-xcrosshairs,
|
||||
.apexcharts-ycrosshairs {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-xcrosshairs.apexcharts-active,
|
||||
.apexcharts-ycrosshairs.apexcharts-active {
|
||||
opacity: 1;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-ycrosshairs-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-selection-rect {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.svg_select_boundingRect, .svg_select_points_rot {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.apexcharts-selection-rect + g .svg_select_boundingRect,
|
||||
.apexcharts-selection-rect + g .svg_select_points_rot {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.apexcharts-selection-rect + g .svg_select_points_l,
|
||||
.apexcharts-selection-rect + g .svg_select_points_r {
|
||||
cursor: ew-resize;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.svg_select_points {
|
||||
fill: #efefef;
|
||||
stroke: #333;
|
||||
rx: 2;
|
||||
}
|
||||
|
||||
.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
|
||||
cursor: crosshair
|
||||
}
|
||||
|
||||
.apexcharts-svg.apexcharts-zoomable.hovering-pan {
|
||||
cursor: move
|
||||
}
|
||||
|
||||
.apexcharts-zoom-icon,
|
||||
.apexcharts-zoomin-icon,
|
||||
.apexcharts-zoomout-icon,
|
||||
.apexcharts-reset-icon,
|
||||
.apexcharts-pan-icon,
|
||||
.apexcharts-selection-icon,
|
||||
.apexcharts-menu-icon,
|
||||
.apexcharts-toolbar-custom-icon {
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 24px;
|
||||
color: #6E8192;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.apexcharts-zoom-icon svg,
|
||||
.apexcharts-zoomin-icon svg,
|
||||
.apexcharts-zoomout-icon svg,
|
||||
.apexcharts-reset-icon svg,
|
||||
.apexcharts-menu-icon svg {
|
||||
fill: #6E8192;
|
||||
}
|
||||
|
||||
.apexcharts-selection-icon svg {
|
||||
fill: #444;
|
||||
transform: scale(0.76)
|
||||
}
|
||||
|
||||
.apexcharts-theme-dark .apexcharts-zoom-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-zoomin-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-zoomout-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-reset-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-pan-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-selection-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-menu-icon svg,
|
||||
.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {
|
||||
fill: #f3f4f5;
|
||||
}
|
||||
|
||||
.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,
|
||||
.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,
|
||||
.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {
|
||||
fill: #008FFB;
|
||||
}
|
||||
|
||||
.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,
|
||||
.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,
|
||||
.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,
|
||||
.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,
|
||||
.apexcharts-theme-light .apexcharts-reset-icon:hover svg,
|
||||
.apexcharts-theme-light .apexcharts-menu-icon:hover svg {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.apexcharts-selection-icon,
|
||||
.apexcharts-menu-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.apexcharts-reset-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.apexcharts-zoom-icon,
|
||||
.apexcharts-reset-icon,
|
||||
.apexcharts-menu-icon {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.apexcharts-zoomin-icon,
|
||||
.apexcharts-zoomout-icon {
|
||||
transform: scale(0.7)
|
||||
}
|
||||
|
||||
.apexcharts-zoomout-icon {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.apexcharts-pan-icon {
|
||||
transform: scale(0.62);
|
||||
position: relative;
|
||||
left: 1px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.apexcharts-pan-icon svg {
|
||||
fill: #fff;
|
||||
stroke: #6E8192;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.apexcharts-pan-icon.apexcharts-selected svg {
|
||||
stroke: #008FFB;
|
||||
}
|
||||
|
||||
.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
.apexcharts-toolbar {
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
max-width: 176px;
|
||||
text-align: right;
|
||||
border-radius: 3px;
|
||||
padding: 0px 6px 2px 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.apexcharts-menu {
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
right: 10px;
|
||||
opacity: 0;
|
||||
min-width: 110px;
|
||||
transition: 0.15s ease all;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.apexcharts-menu.apexcharts-menu-open {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
.apexcharts-menu-item {
|
||||
padding: 6px 7px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.apexcharts-theme-light .apexcharts-menu-item:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.apexcharts-theme-dark .apexcharts-menu {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.apexcharts-canvas:hover .apexcharts-toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-datalabel.apexcharts-element-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label,
|
||||
.apexcharts-datalabels,
|
||||
.apexcharts-datalabel,
|
||||
.apexcharts-datalabel-label,
|
||||
.apexcharts-datalabel-value {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label-delay {
|
||||
opacity: 0;
|
||||
animation-name: opaque;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
.apexcharts-canvas .apexcharts-element-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-hide .apexcharts-series-points {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.apexcharts-gridline,
|
||||
.apexcharts-annotation-rect,
|
||||
.apexcharts-tooltip .apexcharts-marker,
|
||||
.apexcharts-area-series .apexcharts-area,
|
||||
.apexcharts-line,
|
||||
.apexcharts-zoom-rect,
|
||||
.apexcharts-toolbar svg,
|
||||
.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
|
||||
.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,
|
||||
.apexcharts-radar-series path,
|
||||
.apexcharts-radar-series polygon {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* markers */
|
||||
|
||||
.apexcharts-marker {
|
||||
transition: 0.15s ease all;
|
||||
}
|
||||
|
||||
@keyframes opaque {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Resize generated styles */
|
||||
|
||||
@keyframes resizeanim {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.resize-triggers {
|
||||
animation: 1ms resizeanim;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.resize-triggers,
|
||||
.resize-triggers>div,
|
||||
.contract-trigger:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.resize-triggers>div {
|
||||
background: #eee;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.contract-trigger:before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="3.2"/>
|
||||
<path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 355 B |
@@ -0,0 +1,4 @@
|
||||
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 199 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
|
||||
|
After Width: | Height: | Size: 185 B |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
|
||||
<defs>
|
||||
<path id="a" d="M0 0h24v24H0z"/>
|
||||
</defs>
|
||||
<clipPath id="b">
|
||||
<use xlink:href="#a" overflow="visible"/>
|
||||
</clipPath>
|
||||
<path clip-path="url(#b)" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 416 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 289 B |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
|
||||
<defs>
|
||||
<path d="M0 0h24v24H0z" id="a"/>
|
||||
</defs>
|
||||
<clipPath id="b">
|
||||
<use overflow="visible" xlink:href="#a"/>
|
||||
</clipPath>
|
||||
<path clip-path="url(#b)" d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 656 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
|
||||
<path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 269 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 263 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 308 B |
@@ -0,0 +1,4 @@
|
||||
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 366 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 265 B |
@@ -0,0 +1,4 @@
|
||||
<svg fill="#6E8192" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 439 B |
@@ -0,0 +1,3 @@
|
||||
<svg stroke="#333" fill="none" height="24" viewBox="0 0 28 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="4" width="16" height="16" stroke-width="2.5" stroke-dasharray="4" stroke-dashoffset="2"></rect>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 231 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
|
||||
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
||||
<path d="M0 0h24v24H0V0z" fill="none"/>
|
||||
<path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 450 B |
@@ -0,0 +1,10 @@
|
||||
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<path d="M0 0h24v24H0z" id="a"/>
|
||||
</defs>
|
||||
<clipPath id="b">
|
||||
<use overflow="visible" xlink:href="#a"/>
|
||||
</clipPath>
|
||||
<path clip-path="url(#b)" d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6z"/>
|
||||
<path clip-path="url(#b)" d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 600 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M3 5v4h2V5h4V3H5c-1.1 0-2 .9-2 2zm2 10H3v4c0 1.1.9 2 2 2h4v-2H5v-4zm14 4h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4zm0-16h-4v2h4v4h2V5c0-1.1-.9-2-2-2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 301 B |
492
cao_sunyata/static/libs/apexcharts/src/charts/Bar.js
Normal file
492
cao_sunyata/static/libs/apexcharts/src/charts/Bar.js
Normal file
@@ -0,0 +1,492 @@
|
||||
import BarDataLabels from './common/bar/DataLabels'
|
||||
import BarHelpers from './common/bar/Helpers'
|
||||
import CoreUtils from '../modules/CoreUtils'
|
||||
import Utils from '../utils/Utils'
|
||||
import Filters from '../modules/Filters'
|
||||
import Graphics from '../modules/Graphics'
|
||||
|
||||
/**
|
||||
* ApexCharts Bar Class responsible for drawing both Columns and Bars.
|
||||
*
|
||||
* @module Bar
|
||||
**/
|
||||
|
||||
class Bar {
|
||||
constructor(ctx, xyRatios) {
|
||||
this.ctx = ctx
|
||||
this.w = ctx.w
|
||||
const w = this.w
|
||||
this.barOptions = w.config.plotOptions.bar
|
||||
|
||||
this.isHorizontal = this.barOptions.horizontal
|
||||
this.strokeWidth = w.config.stroke.width
|
||||
this.isNullValue = false
|
||||
|
||||
this.isRangeBar = w.globals.seriesRangeBar.length && this.isHorizontal
|
||||
|
||||
this.xyRatios = xyRatios
|
||||
|
||||
if (this.xyRatios !== null) {
|
||||
this.xRatio = xyRatios.xRatio
|
||||
this.initialXRatio = xyRatios.initialXRatio
|
||||
this.yRatio = xyRatios.yRatio
|
||||
this.invertedXRatio = xyRatios.invertedXRatio
|
||||
this.invertedYRatio = xyRatios.invertedYRatio
|
||||
this.baseLineY = xyRatios.baseLineY
|
||||
this.baseLineInvertedY = xyRatios.baseLineInvertedY
|
||||
}
|
||||
this.yaxisIndex = 0
|
||||
this.seriesLen = 0
|
||||
|
||||
this.barHelpers = new BarHelpers(this)
|
||||
}
|
||||
|
||||
/** primary draw method which is called on bar object
|
||||
* @memberof Bar
|
||||
* @param {array} series - user supplied series values
|
||||
* @param {int} seriesIndex - the index by which series will be drawn on the svg
|
||||
* @return {node} element which is supplied to parent chart draw method for appending
|
||||
**/
|
||||
draw(series, seriesIndex) {
|
||||
let w = this.w
|
||||
let graphics = new Graphics(this.ctx)
|
||||
|
||||
const coreUtils = new CoreUtils(this.ctx, w)
|
||||
series = coreUtils.getLogSeries(series)
|
||||
this.series = series
|
||||
this.yRatio = coreUtils.getLogYRatios(this.yRatio)
|
||||
|
||||
this.barHelpers.initVariables(series)
|
||||
|
||||
let ret = graphics.group({
|
||||
class: 'apexcharts-bar-series apexcharts-plot-series'
|
||||
})
|
||||
|
||||
if (w.config.dataLabels.enabled) {
|
||||
if (this.totalItems > this.barOptions.dataLabels.maxItems) {
|
||||
console.warn(
|
||||
'WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering.'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0, bc = 0; i < series.length; i++, bc++) {
|
||||
let x,
|
||||
y,
|
||||
xDivision, // xDivision is the GRIDWIDTH divided by number of datapoints (columns)
|
||||
yDivision, // yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
|
||||
zeroH, // zeroH is the baseline where 0 meets y axis
|
||||
zeroW // zeroW is the baseline where 0 meets x axis
|
||||
|
||||
let yArrj = [] // hold y values of current iterating series
|
||||
let xArrj = [] // hold x values of current iterating series
|
||||
|
||||
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
|
||||
|
||||
// el to which series will be drawn
|
||||
let elSeries = graphics.group({
|
||||
class: `apexcharts-series`,
|
||||
rel: i + 1,
|
||||
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex]),
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex)
|
||||
|
||||
if (series[i].length > 0) {
|
||||
this.visibleI = this.visibleI + 1
|
||||
}
|
||||
|
||||
let barHeight = 0
|
||||
let barWidth = 0
|
||||
|
||||
if (this.yRatio.length > 1) {
|
||||
this.yaxisIndex = realIndex
|
||||
}
|
||||
|
||||
this.isReversed =
|
||||
w.config.yaxis[this.yaxisIndex] &&
|
||||
w.config.yaxis[this.yaxisIndex].reversed
|
||||
|
||||
let initPositions = this.barHelpers.initialPositions()
|
||||
|
||||
y = initPositions.y
|
||||
barHeight = initPositions.barHeight
|
||||
yDivision = initPositions.yDivision
|
||||
zeroW = initPositions.zeroW
|
||||
|
||||
x = initPositions.x
|
||||
barWidth = initPositions.barWidth
|
||||
xDivision = initPositions.xDivision
|
||||
zeroH = initPositions.zeroH
|
||||
|
||||
if (!this.horizontal) {
|
||||
xArrj.push(x + barWidth / 2)
|
||||
}
|
||||
|
||||
// eldatalabels
|
||||
let elDataLabelsWrap = graphics.group({
|
||||
class: 'apexcharts-datalabels',
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
let elGoalsMarkers = graphics.group({
|
||||
class: 'apexcharts-bar-goals-markers',
|
||||
style: `pointer-events: none`
|
||||
})
|
||||
|
||||
for (let j = 0; j < w.globals.dataPoints; j++) {
|
||||
const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
|
||||
|
||||
let paths = null
|
||||
const pathsParams = {
|
||||
indexes: {
|
||||
i,
|
||||
j,
|
||||
realIndex,
|
||||
bc
|
||||
},
|
||||
x,
|
||||
y,
|
||||
strokeWidth,
|
||||
elSeries
|
||||
}
|
||||
if (this.isHorizontal) {
|
||||
paths = this.drawBarPaths({
|
||||
...pathsParams,
|
||||
barHeight,
|
||||
zeroW,
|
||||
yDivision
|
||||
})
|
||||
barWidth = this.series[i][j] / this.invertedYRatio
|
||||
} else {
|
||||
paths = this.drawColumnPaths({
|
||||
...pathsParams,
|
||||
xDivision,
|
||||
barWidth,
|
||||
zeroH
|
||||
})
|
||||
barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex]
|
||||
}
|
||||
|
||||
const barGoalLine = this.barHelpers.drawGoalLine({
|
||||
barXPosition: paths.barXPosition,
|
||||
barYPosition: paths.barYPosition,
|
||||
goalX: paths.goalX,
|
||||
goalY: paths.goalY,
|
||||
barHeight,
|
||||
barWidth
|
||||
})
|
||||
|
||||
if (barGoalLine) {
|
||||
elGoalsMarkers.add(barGoalLine)
|
||||
}
|
||||
|
||||
y = paths.y
|
||||
x = paths.x
|
||||
|
||||
// push current X
|
||||
if (j > 0) {
|
||||
xArrj.push(x + barWidth / 2)
|
||||
}
|
||||
|
||||
yArrj.push(y)
|
||||
|
||||
let pathFill = this.barHelpers.getPathFillColor(series, i, j, realIndex)
|
||||
|
||||
this.renderSeries({
|
||||
realIndex,
|
||||
pathFill,
|
||||
j,
|
||||
i,
|
||||
pathFrom: paths.pathFrom,
|
||||
pathTo: paths.pathTo,
|
||||
strokeWidth,
|
||||
elSeries,
|
||||
x,
|
||||
y,
|
||||
series,
|
||||
barHeight,
|
||||
barWidth,
|
||||
elDataLabelsWrap,
|
||||
elGoalsMarkers,
|
||||
visibleSeries: this.visibleI,
|
||||
type: 'bar'
|
||||
})
|
||||
}
|
||||
|
||||
// push all x val arrays into main xArr
|
||||
w.globals.seriesXvalues[realIndex] = xArrj
|
||||
w.globals.seriesYvalues[realIndex] = yArrj
|
||||
|
||||
ret.add(elSeries)
|
||||
}
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
renderSeries({
|
||||
realIndex,
|
||||
pathFill,
|
||||
lineFill,
|
||||
j,
|
||||
i,
|
||||
pathFrom,
|
||||
pathTo,
|
||||
strokeWidth,
|
||||
elSeries,
|
||||
x,
|
||||
y,
|
||||
y1,
|
||||
y2,
|
||||
series,
|
||||
barHeight,
|
||||
barWidth,
|
||||
barYPosition,
|
||||
elDataLabelsWrap,
|
||||
elGoalsMarkers,
|
||||
visibleSeries,
|
||||
type
|
||||
}) {
|
||||
const w = this.w
|
||||
const graphics = new Graphics(this.ctx)
|
||||
|
||||
if (!lineFill) {
|
||||
/* fix apexcharts#341 */
|
||||
lineFill = this.barOptions.distributed
|
||||
? w.globals.stroke.colors[j]
|
||||
: w.globals.stroke.colors[realIndex]
|
||||
}
|
||||
|
||||
if (w.config.series[i].data[j] && w.config.series[i].data[j].strokeColor) {
|
||||
lineFill = w.config.series[i].data[j].strokeColor
|
||||
}
|
||||
|
||||
if (this.isNullValue) {
|
||||
pathFill = 'none'
|
||||
}
|
||||
|
||||
let delay =
|
||||
((j / w.config.chart.animations.animateGradually.delay) *
|
||||
(w.config.chart.animations.speed / w.globals.dataPoints)) /
|
||||
2.4
|
||||
|
||||
let renderedPath = graphics.renderPaths({
|
||||
i,
|
||||
j,
|
||||
realIndex,
|
||||
pathFrom,
|
||||
pathTo,
|
||||
stroke: lineFill,
|
||||
strokeWidth,
|
||||
strokeLineCap: w.config.stroke.lineCap,
|
||||
fill: pathFill,
|
||||
animationDelay: delay,
|
||||
initialSpeed: w.config.chart.animations.speed,
|
||||
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
|
||||
className: `apexcharts-${type}-area`
|
||||
})
|
||||
|
||||
renderedPath.attr('clip-path', `url(#gridRectMask${w.globals.cuid})`)
|
||||
|
||||
const forecast = w.config.forecastDataPoints
|
||||
if (forecast.count > 0) {
|
||||
if (j >= w.globals.dataPoints - forecast.count) {
|
||||
renderedPath.node.setAttribute('stroke-dasharray', forecast.dashArray)
|
||||
renderedPath.node.setAttribute('stroke-width', forecast.strokeWidth)
|
||||
renderedPath.node.setAttribute('fill-opacity', forecast.fillOpacity)
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof y1 !== 'undefined' && typeof y2 !== 'undefined') {
|
||||
renderedPath.attr('data-range-y1', y1)
|
||||
renderedPath.attr('data-range-y2', y2)
|
||||
}
|
||||
|
||||
const filters = new Filters(this.ctx)
|
||||
filters.setSelectionFilter(renderedPath, realIndex, j)
|
||||
elSeries.add(renderedPath)
|
||||
|
||||
let barDataLabels = new BarDataLabels(this)
|
||||
let dataLabels = barDataLabels.handleBarDataLabels({
|
||||
x,
|
||||
y,
|
||||
y1,
|
||||
y2,
|
||||
i,
|
||||
j,
|
||||
series,
|
||||
realIndex,
|
||||
barHeight,
|
||||
barWidth,
|
||||
barYPosition,
|
||||
renderedPath,
|
||||
visibleSeries
|
||||
})
|
||||
if (dataLabels !== null) {
|
||||
elDataLabelsWrap.add(dataLabels)
|
||||
}
|
||||
|
||||
elSeries.add(elDataLabelsWrap)
|
||||
|
||||
if (elGoalsMarkers) {
|
||||
elSeries.add(elGoalsMarkers)
|
||||
}
|
||||
return elSeries
|
||||
}
|
||||
|
||||
drawBarPaths({
|
||||
indexes,
|
||||
barHeight,
|
||||
strokeWidth,
|
||||
zeroW,
|
||||
x,
|
||||
y,
|
||||
yDivision,
|
||||
elSeries
|
||||
}) {
|
||||
let w = this.w
|
||||
|
||||
let i = indexes.i
|
||||
let j = indexes.j
|
||||
|
||||
if (w.globals.isXNumeric) {
|
||||
y =
|
||||
(w.globals.seriesX[i][j] - w.globals.minX) / this.invertedXRatio -
|
||||
barHeight
|
||||
}
|
||||
|
||||
let barYPosition = y + barHeight * this.visibleI
|
||||
|
||||
x = this.barHelpers.getXForValue(this.series[i][j], zeroW)
|
||||
|
||||
const paths = this.barHelpers.getBarpaths({
|
||||
barYPosition,
|
||||
barHeight,
|
||||
x1: zeroW,
|
||||
x2: x,
|
||||
strokeWidth,
|
||||
series: this.series,
|
||||
realIndex: indexes.realIndex,
|
||||
i,
|
||||
j,
|
||||
w
|
||||
})
|
||||
|
||||
if (!w.globals.isXNumeric) {
|
||||
y = y + yDivision
|
||||
}
|
||||
|
||||
this.barHelpers.barBackground({
|
||||
j,
|
||||
i,
|
||||
y1: barYPosition - barHeight * this.visibleI,
|
||||
y2: barHeight * this.seriesLen,
|
||||
elSeries
|
||||
})
|
||||
|
||||
return {
|
||||
pathTo: paths.pathTo,
|
||||
pathFrom: paths.pathFrom,
|
||||
x,
|
||||
y,
|
||||
goalX: this.barHelpers.getGoalValues('x', zeroW, null, i, j),
|
||||
barYPosition
|
||||
}
|
||||
}
|
||||
|
||||
drawColumnPaths({
|
||||
indexes,
|
||||
x,
|
||||
y,
|
||||
xDivision,
|
||||
barWidth,
|
||||
zeroH,
|
||||
strokeWidth,
|
||||
elSeries
|
||||
}) {
|
||||
let w = this.w
|
||||
|
||||
let realIndex = indexes.realIndex
|
||||
let i = indexes.i
|
||||
let j = indexes.j
|
||||
let bc = indexes.bc
|
||||
|
||||
if (w.globals.isXNumeric) {
|
||||
let sxI = realIndex
|
||||
if (!w.globals.seriesX[realIndex].length) {
|
||||
sxI = w.globals.maxValsInArrayIndex
|
||||
}
|
||||
|
||||
x =
|
||||
(w.globals.seriesX[sxI][j] - w.globals.minX) / this.xRatio -
|
||||
(barWidth * this.seriesLen) / 2
|
||||
}
|
||||
|
||||
let barXPosition = x + barWidth * this.visibleI
|
||||
|
||||
y = this.barHelpers.getYForValue(this.series[i][j], zeroH)
|
||||
|
||||
const paths = this.barHelpers.getColumnPaths({
|
||||
barXPosition,
|
||||
barWidth,
|
||||
y1: zeroH,
|
||||
y2: y,
|
||||
strokeWidth,
|
||||
series: this.series,
|
||||
realIndex: indexes.realIndex,
|
||||
i,
|
||||
j,
|
||||
w
|
||||
})
|
||||
|
||||
if (!w.globals.isXNumeric) {
|
||||
x = x + xDivision
|
||||
}
|
||||
|
||||
this.barHelpers.barBackground({
|
||||
bc,
|
||||
j,
|
||||
i,
|
||||
x1: barXPosition - strokeWidth / 2 - barWidth * this.visibleI,
|
||||
x2: barWidth * this.seriesLen + strokeWidth / 2,
|
||||
elSeries
|
||||
})
|
||||
|
||||
return {
|
||||
pathTo: paths.pathTo,
|
||||
pathFrom: paths.pathFrom,
|
||||
x,
|
||||
y,
|
||||
goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j),
|
||||
barXPosition
|
||||
}
|
||||
}
|
||||
|
||||
/** getPreviousPath is a common function for bars/columns which is used to get previous paths when data changes.
|
||||
* @memberof Bar
|
||||
* @param {int} realIndex - current iterating i
|
||||
* @param {int} j - current iterating series's j index
|
||||
* @return {string} pathFrom is the string which will be appended in animations
|
||||
**/
|
||||
getPreviousPath(realIndex, j) {
|
||||
let w = this.w
|
||||
let pathFrom
|
||||
for (let pp = 0; pp < w.globals.previousPaths.length; pp++) {
|
||||
let gpp = w.globals.previousPaths[pp]
|
||||
|
||||
if (
|
||||
gpp.paths &&
|
||||
gpp.paths.length > 0 &&
|
||||
parseInt(gpp.realIndex, 10) === parseInt(realIndex, 10)
|
||||
) {
|
||||
if (typeof w.globals.previousPaths[pp].paths[j] !== 'undefined') {
|
||||
pathFrom = w.globals.previousPaths[pp].paths[j].d
|
||||
}
|
||||
}
|
||||
}
|
||||
return pathFrom
|
||||
}
|
||||
}
|
||||
|
||||
export default Bar
|
||||
481
cao_sunyata/static/libs/apexcharts/src/charts/BarStacked.js
Normal file
481
cao_sunyata/static/libs/apexcharts/src/charts/BarStacked.js
Normal file
@@ -0,0 +1,481 @@
|
||||
import CoreUtils from '../modules/CoreUtils'
|
||||
import Bar from './Bar'
|
||||
import Graphics from '../modules/Graphics'
|
||||
import Utils from '../utils/Utils'
|
||||
|
||||
/**
|
||||
* ApexCharts BarStacked Class responsible for drawing both Stacked Columns and Bars.
|
||||
*
|
||||
* @module BarStacked
|
||||
* The whole calculation for stacked bar/column is different from normal bar/column,
|
||||
* hence it makes sense to derive a new class for it extending most of the props of Parent Bar
|
||||
**/
|
||||
|
||||
class BarStacked extends Bar {
|
||||
draw(series, seriesIndex) {
|
||||
let w = this.w
|
||||
this.graphics = new Graphics(this.ctx)
|
||||
this.bar = new Bar(this.ctx, this.xyRatios)
|
||||
|
||||
const coreUtils = new CoreUtils(this.ctx, w)
|
||||
series = coreUtils.getLogSeries(series)
|
||||
this.yRatio = coreUtils.getLogYRatios(this.yRatio)
|
||||
|
||||
this.barHelpers.initVariables(series)
|
||||
|
||||
if (w.config.chart.stackType === '100%') {
|
||||
series = w.globals.seriesPercent.slice()
|
||||
}
|
||||
|
||||
this.series = series
|
||||
|
||||
this.totalItems = 0
|
||||
|
||||
this.prevY = [] // y position on chart
|
||||
this.prevX = [] // x position on chart
|
||||
this.prevYF = [] // y position including shapes on chart
|
||||
this.prevXF = [] // x position including shapes on chart
|
||||
this.prevYVal = [] // y values (series[i][j]) in columns
|
||||
this.prevXVal = [] // x values (series[i][j]) in bars
|
||||
|
||||
this.xArrj = [] // xj indicates x position on graph in bars
|
||||
this.xArrjF = [] // xjF indicates bar's x position + roundedShape's positions in bars
|
||||
this.xArrjVal = [] // x val means the actual series's y values in horizontal/bars
|
||||
this.yArrj = [] // yj indicates y position on graph in columns
|
||||
this.yArrjF = [] // yjF indicates bar's y position + roundedShape's positions in columns
|
||||
this.yArrjVal = [] // y val means the actual series's y values in columns
|
||||
|
||||
for (let sl = 0; sl < series.length; sl++) {
|
||||
if (series[sl].length > 0) {
|
||||
this.totalItems += series[sl].length
|
||||
}
|
||||
}
|
||||
|
||||
let ret = this.graphics.group({
|
||||
class: 'apexcharts-bar-series apexcharts-plot-series'
|
||||
})
|
||||
|
||||
let x = 0
|
||||
let y = 0
|
||||
|
||||
for (let i = 0, bc = 0; i < series.length; i++, bc++) {
|
||||
let xDivision // xDivision is the GRIDWIDTH divided by number of datapoints (columns)
|
||||
let yDivision // yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
|
||||
let zeroH // zeroH is the baseline where 0 meets y axis
|
||||
let zeroW // zeroW is the baseline where 0 meets x axis
|
||||
|
||||
let xArrValues = []
|
||||
let yArrValues = []
|
||||
|
||||
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
|
||||
|
||||
if (this.yRatio.length > 1) {
|
||||
this.yaxisIndex = realIndex
|
||||
}
|
||||
|
||||
this.isReversed =
|
||||
w.config.yaxis[this.yaxisIndex] &&
|
||||
w.config.yaxis[this.yaxisIndex].reversed
|
||||
|
||||
// el to which series will be drawn
|
||||
let elSeries = this.graphics.group({
|
||||
class: `apexcharts-series`,
|
||||
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex]),
|
||||
rel: i + 1,
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex)
|
||||
|
||||
// eldatalabels
|
||||
let elDataLabelsWrap = this.graphics.group({
|
||||
class: 'apexcharts-datalabels',
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
let barHeight = 0
|
||||
let barWidth = 0
|
||||
|
||||
let initPositions = this.initialPositions(
|
||||
x,
|
||||
y,
|
||||
xDivision,
|
||||
yDivision,
|
||||
zeroH,
|
||||
zeroW
|
||||
)
|
||||
y = initPositions.y
|
||||
barHeight = initPositions.barHeight
|
||||
yDivision = initPositions.yDivision
|
||||
zeroW = initPositions.zeroW
|
||||
|
||||
x = initPositions.x
|
||||
barWidth = initPositions.barWidth
|
||||
xDivision = initPositions.xDivision
|
||||
zeroH = initPositions.zeroH
|
||||
|
||||
this.yArrj = []
|
||||
this.yArrjF = []
|
||||
this.yArrjVal = []
|
||||
this.xArrj = []
|
||||
this.xArrjF = []
|
||||
this.xArrjVal = []
|
||||
|
||||
// if (!this.horizontal) {
|
||||
// this.xArrj.push(x + barWidth / 2)
|
||||
// }
|
||||
|
||||
// fix issue #1215;
|
||||
// where all stack bar disappear after collapsing the first series
|
||||
// sol: if only 1 arr in this.prevY(this.prevY.length === 1) and all are NaN
|
||||
if (this.prevY.length === 1 && this.prevY[0].every((val) => isNaN(val))) {
|
||||
// make this.prevY[0] all zeroH
|
||||
this.prevY[0] = this.prevY[0].map((val) => zeroH)
|
||||
// make this.prevYF[0] all 0
|
||||
this.prevYF[0] = this.prevYF[0].map((val) => 0)
|
||||
}
|
||||
|
||||
for (let j = 0; j < w.globals.dataPoints; j++) {
|
||||
const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
|
||||
const commonPathOpts = {
|
||||
indexes: { i, j, realIndex, bc },
|
||||
strokeWidth,
|
||||
x,
|
||||
y,
|
||||
elSeries
|
||||
}
|
||||
let paths = null
|
||||
if (this.isHorizontal) {
|
||||
paths = this.drawStackedBarPaths({
|
||||
...commonPathOpts,
|
||||
zeroW,
|
||||
barHeight,
|
||||
yDivision
|
||||
})
|
||||
barWidth = this.series[i][j] / this.invertedYRatio
|
||||
} else {
|
||||
paths = this.drawStackedColumnPaths({
|
||||
...commonPathOpts,
|
||||
xDivision,
|
||||
barWidth,
|
||||
zeroH
|
||||
})
|
||||
barHeight = this.series[i][j] / this.yRatio[this.yaxisIndex]
|
||||
}
|
||||
|
||||
y = paths.y
|
||||
x = paths.x
|
||||
|
||||
xArrValues.push(x)
|
||||
yArrValues.push(y)
|
||||
|
||||
let pathFill = this.barHelpers.getPathFillColor(series, i, j, realIndex)
|
||||
|
||||
elSeries = this.renderSeries({
|
||||
realIndex,
|
||||
pathFill,
|
||||
j,
|
||||
i,
|
||||
pathFrom: paths.pathFrom,
|
||||
pathTo: paths.pathTo,
|
||||
strokeWidth,
|
||||
elSeries,
|
||||
x,
|
||||
y,
|
||||
series,
|
||||
barHeight,
|
||||
barWidth,
|
||||
elDataLabelsWrap,
|
||||
type: 'bar',
|
||||
visibleSeries: 0
|
||||
})
|
||||
}
|
||||
|
||||
// push all x val arrays into main xArr
|
||||
w.globals.seriesXvalues[realIndex] = xArrValues
|
||||
w.globals.seriesYvalues[realIndex] = yArrValues
|
||||
|
||||
// push all current y values array to main PrevY Array
|
||||
this.prevY.push(this.yArrj)
|
||||
this.prevYF.push(this.yArrjF)
|
||||
this.prevYVal.push(this.yArrjVal)
|
||||
this.prevX.push(this.xArrj)
|
||||
this.prevXF.push(this.xArrjF)
|
||||
this.prevXVal.push(this.xArrjVal)
|
||||
|
||||
ret.add(elSeries)
|
||||
}
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
initialPositions(x, y, xDivision, yDivision, zeroH, zeroW) {
|
||||
let w = this.w
|
||||
|
||||
let barHeight, barWidth
|
||||
if (this.isHorizontal) {
|
||||
// height divided into equal parts
|
||||
yDivision = w.globals.gridHeight / w.globals.dataPoints
|
||||
barHeight = yDivision
|
||||
|
||||
barHeight =
|
||||
(barHeight * parseInt(w.config.plotOptions.bar.barHeight, 10)) / 100
|
||||
|
||||
zeroW =
|
||||
this.baseLineInvertedY +
|
||||
w.globals.padHorizontal +
|
||||
(this.isReversed ? w.globals.gridWidth : 0) -
|
||||
(this.isReversed ? this.baseLineInvertedY * 2 : 0)
|
||||
|
||||
// initial y position is half of barHeight * half of number of Bars
|
||||
y = (yDivision - barHeight) / 2
|
||||
} else {
|
||||
// width divided into equal parts
|
||||
xDivision = w.globals.gridWidth / w.globals.dataPoints
|
||||
|
||||
barWidth = xDivision
|
||||
|
||||
if (w.globals.isXNumeric && w.globals.dataPoints > 1) {
|
||||
// the check (w.globals.dataPoints > 1) fixes apexcharts.js #1617
|
||||
xDivision = w.globals.minXDiff / this.xRatio
|
||||
barWidth = (xDivision * parseInt(this.barOptions.columnWidth, 10)) / 100
|
||||
} else {
|
||||
barWidth =
|
||||
(barWidth * parseInt(w.config.plotOptions.bar.columnWidth, 10)) / 100
|
||||
}
|
||||
|
||||
zeroH =
|
||||
this.baseLineY[this.yaxisIndex] +
|
||||
(this.isReversed ? w.globals.gridHeight : 0) -
|
||||
(this.isReversed ? this.baseLineY[this.yaxisIndex] * 2 : 0)
|
||||
|
||||
// initial x position is one third of barWidth
|
||||
x = w.globals.padHorizontal + (xDivision - barWidth) / 2
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
yDivision,
|
||||
xDivision,
|
||||
barHeight,
|
||||
barWidth,
|
||||
zeroH,
|
||||
zeroW
|
||||
}
|
||||
}
|
||||
|
||||
drawStackedBarPaths({
|
||||
indexes,
|
||||
barHeight,
|
||||
strokeWidth,
|
||||
zeroW,
|
||||
x,
|
||||
y,
|
||||
yDivision,
|
||||
elSeries
|
||||
}) {
|
||||
let w = this.w
|
||||
let barYPosition = y
|
||||
let barXPosition
|
||||
let i = indexes.i
|
||||
let j = indexes.j
|
||||
|
||||
let prevBarW = 0
|
||||
for (let k = 0; k < this.prevXF.length; k++) {
|
||||
prevBarW = prevBarW + this.prevXF[k][j]
|
||||
}
|
||||
|
||||
if (i > 0) {
|
||||
let bXP = zeroW
|
||||
|
||||
if (this.prevXVal[i - 1][j] < 0) {
|
||||
bXP =
|
||||
this.series[i][j] >= 0
|
||||
? this.prevX[i - 1][j] +
|
||||
prevBarW -
|
||||
(this.isReversed ? prevBarW : 0) * 2
|
||||
: this.prevX[i - 1][j]
|
||||
} else if (this.prevXVal[i - 1][j] >= 0) {
|
||||
bXP =
|
||||
this.series[i][j] >= 0
|
||||
? this.prevX[i - 1][j]
|
||||
: this.prevX[i - 1][j] -
|
||||
prevBarW +
|
||||
(this.isReversed ? prevBarW : 0) * 2
|
||||
}
|
||||
|
||||
barXPosition = bXP
|
||||
} else {
|
||||
// the first series will not have prevX values
|
||||
barXPosition = zeroW
|
||||
}
|
||||
|
||||
if (this.series[i][j] === null) {
|
||||
x = barXPosition
|
||||
} else {
|
||||
x =
|
||||
barXPosition +
|
||||
this.series[i][j] / this.invertedYRatio -
|
||||
(this.isReversed ? this.series[i][j] / this.invertedYRatio : 0) * 2
|
||||
}
|
||||
|
||||
const paths = this.barHelpers.getBarpaths({
|
||||
barYPosition,
|
||||
barHeight,
|
||||
x1: barXPosition,
|
||||
x2: x,
|
||||
strokeWidth,
|
||||
series: this.series,
|
||||
realIndex: indexes.realIndex,
|
||||
i,
|
||||
j,
|
||||
w
|
||||
})
|
||||
|
||||
this.barHelpers.barBackground({
|
||||
j,
|
||||
i,
|
||||
y1: barYPosition,
|
||||
y2: barHeight,
|
||||
elSeries
|
||||
})
|
||||
|
||||
y = y + yDivision
|
||||
|
||||
return {
|
||||
pathTo: paths.pathTo,
|
||||
pathFrom: paths.pathFrom,
|
||||
x,
|
||||
y
|
||||
}
|
||||
}
|
||||
|
||||
drawStackedColumnPaths({
|
||||
indexes,
|
||||
x,
|
||||
y,
|
||||
xDivision,
|
||||
barWidth,
|
||||
zeroH,
|
||||
strokeWidth,
|
||||
elSeries
|
||||
}) {
|
||||
let w = this.w
|
||||
let i = indexes.i
|
||||
let j = indexes.j
|
||||
let bc = indexes.bc
|
||||
|
||||
if (w.globals.isXNumeric) {
|
||||
let seriesVal = w.globals.seriesX[i][j]
|
||||
if (!seriesVal) seriesVal = 0
|
||||
x = (seriesVal - w.globals.minX) / this.xRatio - barWidth / 2
|
||||
}
|
||||
|
||||
let barXPosition = x
|
||||
let barYPosition
|
||||
|
||||
let prevBarH = 0
|
||||
for (let k = 0; k < this.prevYF.length; k++) {
|
||||
// fix issue #1215
|
||||
// in case where this.prevYF[k][j] is NaN, use 0 instead
|
||||
prevBarH = prevBarH + (!isNaN(this.prevYF[k][j]) ? this.prevYF[k][j] : 0)
|
||||
}
|
||||
|
||||
if (
|
||||
(i > 0 && !w.globals.isXNumeric) ||
|
||||
(i > 0 &&
|
||||
w.globals.isXNumeric &&
|
||||
w.globals.seriesX[i - 1][j] === w.globals.seriesX[i][j])
|
||||
) {
|
||||
let bYP
|
||||
let prevYValue
|
||||
const p = Math.min(this.yRatio.length + 1, i + 1)
|
||||
if (this.prevY[i - 1] !== undefined) {
|
||||
for (let ii = 1; ii < p; ii++) {
|
||||
if (!isNaN(this.prevY[i - ii][j])) {
|
||||
// find the previous available value to give prevYValue
|
||||
prevYValue = this.prevY[i - ii][j]
|
||||
// if found it, break the loop
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let ii = 1; ii < p; ii++) {
|
||||
// find the previous available value(non-NaN) to give bYP
|
||||
if (this.prevYVal[i - ii][j] < 0) {
|
||||
bYP =
|
||||
this.series[i][j] >= 0
|
||||
? prevYValue - prevBarH + (this.isReversed ? prevBarH : 0) * 2
|
||||
: prevYValue
|
||||
// found it? break the loop
|
||||
break
|
||||
} else if (this.prevYVal[i - ii][j] >= 0) {
|
||||
bYP =
|
||||
this.series[i][j] >= 0
|
||||
? prevYValue
|
||||
: prevYValue + prevBarH - (this.isReversed ? prevBarH : 0) * 2
|
||||
// found it? break the loop
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof bYP === 'undefined') bYP = w.globals.gridHeight
|
||||
|
||||
// if this.prevYF[0] is all 0 resulted from line #486
|
||||
// AND every arr starting from the second only contains NaN
|
||||
if (
|
||||
this.prevYF[0].every((val) => val === 0) &&
|
||||
this.prevYF.slice(1, i).every((arr) => arr.every((val) => isNaN(val)))
|
||||
) {
|
||||
// Use the same calc way as line #485
|
||||
barYPosition = w.globals.gridHeight - zeroH
|
||||
} else {
|
||||
// Nothing special
|
||||
barYPosition = bYP
|
||||
}
|
||||
} else {
|
||||
// the first series will not have prevY values, also if the prev index's series X doesn't matches the current index's series X, then start from zero
|
||||
barYPosition = w.globals.gridHeight - zeroH
|
||||
}
|
||||
|
||||
y =
|
||||
barYPosition -
|
||||
this.series[i][j] / this.yRatio[this.yaxisIndex] +
|
||||
(this.isReversed ? this.series[i][j] / this.yRatio[this.yaxisIndex] : 0) *
|
||||
2
|
||||
|
||||
const paths = this.barHelpers.getColumnPaths({
|
||||
barXPosition,
|
||||
barWidth,
|
||||
y1: barYPosition,
|
||||
y2: y,
|
||||
yRatio: this.yRatio[this.yaxisIndex],
|
||||
strokeWidth: this.strokeWidth,
|
||||
series: this.series,
|
||||
realIndex: indexes.realIndex,
|
||||
i,
|
||||
j,
|
||||
w
|
||||
})
|
||||
|
||||
this.barHelpers.barBackground({
|
||||
bc,
|
||||
j,
|
||||
i,
|
||||
x1: barXPosition,
|
||||
x2: barWidth,
|
||||
elSeries
|
||||
})
|
||||
|
||||
x = x + xDivision
|
||||
|
||||
return {
|
||||
pathTo: paths.pathTo,
|
||||
pathFrom: paths.pathFrom,
|
||||
x: w.globals.isXNumeric ? x - xDivision : x,
|
||||
y
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default BarStacked
|
||||
428
cao_sunyata/static/libs/apexcharts/src/charts/BoxCandleStick.js
Normal file
428
cao_sunyata/static/libs/apexcharts/src/charts/BoxCandleStick.js
Normal file
@@ -0,0 +1,428 @@
|
||||
import CoreUtils from '../modules/CoreUtils'
|
||||
import Bar from './Bar'
|
||||
import Fill from '../modules/Fill'
|
||||
import Graphics from '../modules/Graphics'
|
||||
import Utils from '../utils/Utils'
|
||||
|
||||
/**
|
||||
* ApexCharts BoxCandleStick Class responsible for drawing both Stacked Columns and Bars.
|
||||
*
|
||||
* @module BoxCandleStick
|
||||
**/
|
||||
|
||||
class BoxCandleStick extends Bar {
|
||||
draw(series, seriesIndex) {
|
||||
let w = this.w
|
||||
let graphics = new Graphics(this.ctx)
|
||||
let fill = new Fill(this.ctx)
|
||||
|
||||
this.candlestickOptions = this.w.config.plotOptions.candlestick
|
||||
this.boxOptions = this.w.config.plotOptions.boxPlot
|
||||
this.isHorizontal = w.config.plotOptions.bar.horizontal
|
||||
|
||||
const coreUtils = new CoreUtils(this.ctx, w)
|
||||
series = coreUtils.getLogSeries(series)
|
||||
this.series = series
|
||||
this.yRatio = coreUtils.getLogYRatios(this.yRatio)
|
||||
|
||||
this.barHelpers.initVariables(series)
|
||||
|
||||
let ret = graphics.group({
|
||||
class: `apexcharts-${w.config.chart.type}-series apexcharts-plot-series`
|
||||
})
|
||||
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
this.isBoxPlot =
|
||||
w.config.chart.type === 'boxPlot' ||
|
||||
w.config.series[i].type === 'boxPlot'
|
||||
|
||||
let x,
|
||||
y,
|
||||
xDivision, // xDivision is the GRIDWIDTH divided by number of datapoints (columns)
|
||||
yDivision, // yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
|
||||
zeroH, // zeroH is the baseline where 0 meets y axis
|
||||
zeroW // zeroW is the baseline where 0 meets x axis
|
||||
|
||||
let yArrj = [] // hold y values of current iterating series
|
||||
let xArrj = [] // hold x values of current iterating series
|
||||
|
||||
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
|
||||
|
||||
// el to which series will be drawn
|
||||
let elSeries = graphics.group({
|
||||
class: `apexcharts-series`,
|
||||
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex]),
|
||||
rel: i + 1,
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex)
|
||||
|
||||
if (series[i].length > 0) {
|
||||
this.visibleI = this.visibleI + 1
|
||||
}
|
||||
|
||||
let barHeight = 0
|
||||
let barWidth = 0
|
||||
|
||||
if (this.yRatio.length > 1) {
|
||||
this.yaxisIndex = realIndex
|
||||
}
|
||||
|
||||
let initPositions = this.barHelpers.initialPositions()
|
||||
|
||||
y = initPositions.y
|
||||
barHeight = initPositions.barHeight
|
||||
yDivision = initPositions.yDivision
|
||||
zeroW = initPositions.zeroW
|
||||
|
||||
x = initPositions.x
|
||||
barWidth = initPositions.barWidth
|
||||
xDivision = initPositions.xDivision
|
||||
zeroH = initPositions.zeroH
|
||||
|
||||
xArrj.push(x + barWidth / 2)
|
||||
|
||||
// eldatalabels
|
||||
let elDataLabelsWrap = graphics.group({
|
||||
class: 'apexcharts-datalabels',
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
for (let j = 0; j < w.globals.dataPoints; j++) {
|
||||
const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
|
||||
|
||||
let paths = null
|
||||
const pathsParams = {
|
||||
indexes: {
|
||||
i,
|
||||
j,
|
||||
realIndex
|
||||
},
|
||||
x,
|
||||
y,
|
||||
strokeWidth,
|
||||
elSeries
|
||||
}
|
||||
|
||||
if (this.isHorizontal) {
|
||||
paths = this.drawHorizontalBoxPaths({
|
||||
...pathsParams,
|
||||
yDivision,
|
||||
barHeight,
|
||||
zeroW
|
||||
})
|
||||
} else {
|
||||
paths = this.drawVerticalBoxPaths({
|
||||
...pathsParams,
|
||||
xDivision,
|
||||
barWidth,
|
||||
zeroH
|
||||
})
|
||||
}
|
||||
|
||||
y = paths.y
|
||||
x = paths.x
|
||||
|
||||
// push current X
|
||||
if (j > 0) {
|
||||
xArrj.push(x + barWidth / 2)
|
||||
}
|
||||
|
||||
yArrj.push(y)
|
||||
|
||||
paths.pathTo.forEach((pathTo, pi) => {
|
||||
let lineFill =
|
||||
!this.isBoxPlot && this.candlestickOptions.wick.useFillColor
|
||||
? paths.color[pi]
|
||||
: w.globals.stroke.colors[i]
|
||||
|
||||
let pathFill = fill.fillPath({
|
||||
seriesNumber: realIndex,
|
||||
dataPointIndex: j,
|
||||
color: paths.color[pi],
|
||||
value: series[i][j]
|
||||
})
|
||||
|
||||
this.renderSeries({
|
||||
realIndex,
|
||||
pathFill,
|
||||
lineFill,
|
||||
j,
|
||||
i,
|
||||
pathFrom: paths.pathFrom,
|
||||
pathTo,
|
||||
strokeWidth,
|
||||
elSeries,
|
||||
x,
|
||||
y,
|
||||
series,
|
||||
barHeight,
|
||||
barWidth,
|
||||
elDataLabelsWrap,
|
||||
visibleSeries: this.visibleI,
|
||||
type: w.config.chart.type
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// push all x val arrays into main xArr
|
||||
w.globals.seriesXvalues[realIndex] = xArrj
|
||||
w.globals.seriesYvalues[realIndex] = yArrj
|
||||
|
||||
ret.add(elSeries)
|
||||
}
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
drawVerticalBoxPaths({
|
||||
indexes,
|
||||
x,
|
||||
y,
|
||||
xDivision,
|
||||
barWidth,
|
||||
zeroH,
|
||||
strokeWidth
|
||||
}) {
|
||||
let w = this.w
|
||||
let graphics = new Graphics(this.ctx)
|
||||
|
||||
let i = indexes.i
|
||||
let j = indexes.j
|
||||
|
||||
let isPositive = true
|
||||
let colorPos = w.config.plotOptions.candlestick.colors.upward
|
||||
let colorNeg = w.config.plotOptions.candlestick.colors.downward
|
||||
let color = ''
|
||||
|
||||
if (this.isBoxPlot) {
|
||||
color = [this.boxOptions.colors.lower, this.boxOptions.colors.upper]
|
||||
}
|
||||
|
||||
const yRatio = this.yRatio[this.yaxisIndex]
|
||||
let realIndex = indexes.realIndex
|
||||
|
||||
const ohlc = this.getOHLCValue(realIndex, j)
|
||||
let l1 = zeroH
|
||||
let l2 = zeroH
|
||||
|
||||
if (ohlc.o > ohlc.c) {
|
||||
isPositive = false
|
||||
}
|
||||
|
||||
let y1 = Math.min(ohlc.o, ohlc.c)
|
||||
let y2 = Math.max(ohlc.o, ohlc.c)
|
||||
let m = ohlc.m
|
||||
|
||||
if (w.globals.isXNumeric) {
|
||||
x =
|
||||
(w.globals.seriesX[realIndex][j] - w.globals.minX) / this.xRatio -
|
||||
barWidth / 2
|
||||
}
|
||||
|
||||
let barXPosition = x + barWidth * this.visibleI
|
||||
|
||||
if (
|
||||
typeof this.series[i][j] === 'undefined' ||
|
||||
this.series[i][j] === null
|
||||
) {
|
||||
y1 = zeroH
|
||||
y2 = zeroH
|
||||
} else {
|
||||
y1 = zeroH - y1 / yRatio
|
||||
y2 = zeroH - y2 / yRatio
|
||||
l1 = zeroH - ohlc.h / yRatio
|
||||
l2 = zeroH - ohlc.l / yRatio
|
||||
m = zeroH - ohlc.m / yRatio
|
||||
}
|
||||
|
||||
let pathTo = graphics.move(barXPosition, zeroH)
|
||||
let pathFrom = graphics.move(barXPosition + barWidth / 2, y1)
|
||||
if (w.globals.previousPaths.length > 0) {
|
||||
pathFrom = this.getPreviousPath(realIndex, j, true)
|
||||
}
|
||||
|
||||
if (this.isBoxPlot) {
|
||||
pathTo = [
|
||||
graphics.move(barXPosition, y1) +
|
||||
graphics.line(barXPosition + barWidth / 2, y1) +
|
||||
graphics.line(barXPosition + barWidth / 2, l1) +
|
||||
graphics.line(barXPosition + barWidth / 4, l1) +
|
||||
graphics.line(barXPosition + barWidth - barWidth / 4, l1) +
|
||||
graphics.line(barXPosition + barWidth / 2, l1) +
|
||||
graphics.line(barXPosition + barWidth / 2, y1) +
|
||||
graphics.line(barXPosition + barWidth, y1) +
|
||||
graphics.line(barXPosition + barWidth, m) +
|
||||
graphics.line(barXPosition, m) +
|
||||
graphics.line(barXPosition, y1 + strokeWidth / 2),
|
||||
graphics.move(barXPosition, m) +
|
||||
graphics.line(barXPosition + barWidth, m) +
|
||||
graphics.line(barXPosition + barWidth, y2) +
|
||||
graphics.line(barXPosition + barWidth / 2, y2) +
|
||||
graphics.line(barXPosition + barWidth / 2, l2) +
|
||||
graphics.line(barXPosition + barWidth - barWidth / 4, l2) +
|
||||
graphics.line(barXPosition + barWidth / 4, l2) +
|
||||
graphics.line(barXPosition + barWidth / 2, l2) +
|
||||
graphics.line(barXPosition + barWidth / 2, y2) +
|
||||
graphics.line(barXPosition, y2) +
|
||||
graphics.line(barXPosition, m) +
|
||||
'z'
|
||||
]
|
||||
} else {
|
||||
// candlestick
|
||||
pathTo = [
|
||||
graphics.move(barXPosition, y2) +
|
||||
graphics.line(barXPosition + barWidth / 2, y2) +
|
||||
graphics.line(barXPosition + barWidth / 2, l1) +
|
||||
graphics.line(barXPosition + barWidth / 2, y2) +
|
||||
graphics.line(barXPosition + barWidth, y2) +
|
||||
graphics.line(barXPosition + barWidth, y1) +
|
||||
graphics.line(barXPosition + barWidth / 2, y1) +
|
||||
graphics.line(barXPosition + barWidth / 2, l2) +
|
||||
graphics.line(barXPosition + barWidth / 2, y1) +
|
||||
graphics.line(barXPosition, y1) +
|
||||
graphics.line(barXPosition, y2 - strokeWidth / 2)
|
||||
]
|
||||
}
|
||||
|
||||
pathFrom = pathFrom + graphics.move(barXPosition, y1)
|
||||
|
||||
if (!w.globals.isXNumeric) {
|
||||
x = x + xDivision
|
||||
}
|
||||
|
||||
return {
|
||||
pathTo,
|
||||
pathFrom,
|
||||
x,
|
||||
y: y2,
|
||||
barXPosition,
|
||||
color: this.isBoxPlot ? color : isPositive ? [colorPos] : [colorNeg]
|
||||
}
|
||||
}
|
||||
|
||||
drawHorizontalBoxPaths({
|
||||
indexes,
|
||||
x,
|
||||
y,
|
||||
yDivision,
|
||||
barHeight,
|
||||
zeroW,
|
||||
strokeWidth
|
||||
}) {
|
||||
let w = this.w
|
||||
let graphics = new Graphics(this.ctx)
|
||||
|
||||
let i = indexes.i
|
||||
let j = indexes.j
|
||||
|
||||
let color = this.boxOptions.colors.lower
|
||||
|
||||
if (this.isBoxPlot) {
|
||||
color = [this.boxOptions.colors.lower, this.boxOptions.colors.upper]
|
||||
}
|
||||
|
||||
const yRatio = this.invertedYRatio
|
||||
let realIndex = indexes.realIndex
|
||||
|
||||
const ohlc = this.getOHLCValue(realIndex, j)
|
||||
let l1 = zeroW
|
||||
let l2 = zeroW
|
||||
|
||||
let x1 = Math.min(ohlc.o, ohlc.c)
|
||||
let x2 = Math.max(ohlc.o, ohlc.c)
|
||||
let m = ohlc.m
|
||||
|
||||
if (w.globals.isXNumeric) {
|
||||
y =
|
||||
(w.globals.seriesX[realIndex][j] - w.globals.minX) /
|
||||
this.invertedXRatio -
|
||||
barHeight / 2
|
||||
}
|
||||
|
||||
let barYPosition = y + barHeight * this.visibleI
|
||||
|
||||
if (
|
||||
typeof this.series[i][j] === 'undefined' ||
|
||||
this.series[i][j] === null
|
||||
) {
|
||||
x1 = zeroW
|
||||
x2 = zeroW
|
||||
} else {
|
||||
x1 = zeroW + x1 / yRatio
|
||||
x2 = zeroW + x2 / yRatio
|
||||
l1 = zeroW + ohlc.h / yRatio
|
||||
l2 = zeroW + ohlc.l / yRatio
|
||||
m = zeroW + ohlc.m / yRatio
|
||||
}
|
||||
|
||||
let pathTo = graphics.move(zeroW, barYPosition)
|
||||
let pathFrom = graphics.move(x1, barYPosition + barHeight / 2)
|
||||
if (w.globals.previousPaths.length > 0) {
|
||||
pathFrom = this.getPreviousPath(realIndex, j, true)
|
||||
}
|
||||
|
||||
pathTo = [
|
||||
graphics.move(x1, barYPosition) +
|
||||
graphics.line(x1, barYPosition + barHeight / 2) +
|
||||
graphics.line(l1, barYPosition + barHeight / 2) +
|
||||
graphics.line(l1, barYPosition + barHeight / 2 - barHeight / 4) +
|
||||
graphics.line(l1, barYPosition + barHeight / 2 + barHeight / 4) +
|
||||
graphics.line(l1, barYPosition + barHeight / 2) +
|
||||
graphics.line(x1, barYPosition + barHeight / 2) +
|
||||
graphics.line(x1, barYPosition + barHeight) +
|
||||
graphics.line(m, barYPosition + barHeight) +
|
||||
graphics.line(m, barYPosition) +
|
||||
graphics.line(x1 + strokeWidth / 2, barYPosition),
|
||||
graphics.move(m, barYPosition) +
|
||||
graphics.line(m, barYPosition + barHeight) +
|
||||
graphics.line(x2, barYPosition + barHeight) +
|
||||
graphics.line(x2, barYPosition + barHeight / 2) +
|
||||
graphics.line(l2, barYPosition + barHeight / 2) +
|
||||
graphics.line(l2, barYPosition + barHeight - barHeight / 4) +
|
||||
graphics.line(l2, barYPosition + barHeight / 4) +
|
||||
graphics.line(l2, barYPosition + barHeight / 2) +
|
||||
graphics.line(x2, barYPosition + barHeight / 2) +
|
||||
graphics.line(x2, barYPosition) +
|
||||
graphics.line(m, barYPosition) +
|
||||
'z'
|
||||
]
|
||||
|
||||
pathFrom = pathFrom + graphics.move(x1, barYPosition)
|
||||
|
||||
if (!w.globals.isXNumeric) {
|
||||
y = y + yDivision
|
||||
}
|
||||
|
||||
return {
|
||||
pathTo,
|
||||
pathFrom,
|
||||
x: x2,
|
||||
y,
|
||||
barYPosition,
|
||||
color
|
||||
}
|
||||
}
|
||||
getOHLCValue(i, j) {
|
||||
const w = this.w
|
||||
|
||||
return {
|
||||
o: this.isBoxPlot
|
||||
? w.globals.seriesCandleH[i][j]
|
||||
: w.globals.seriesCandleO[i][j],
|
||||
h: this.isBoxPlot
|
||||
? w.globals.seriesCandleO[i][j]
|
||||
: w.globals.seriesCandleH[i][j],
|
||||
m: w.globals.seriesCandleM[i][j],
|
||||
l: this.isBoxPlot
|
||||
? w.globals.seriesCandleC[i][j]
|
||||
: w.globals.seriesCandleL[i][j],
|
||||
c: this.isBoxPlot
|
||||
? w.globals.seriesCandleL[i][j]
|
||||
: w.globals.seriesCandleC[i][j]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default BoxCandleStick
|
||||
241
cao_sunyata/static/libs/apexcharts/src/charts/HeatMap.js
Normal file
241
cao_sunyata/static/libs/apexcharts/src/charts/HeatMap.js
Normal file
@@ -0,0 +1,241 @@
|
||||
import Animations from '../modules/Animations'
|
||||
import Graphics from '../modules/Graphics'
|
||||
import Fill from '../modules/Fill'
|
||||
import Utils from '../utils/Utils'
|
||||
import Helpers from './common/treemap/Helpers'
|
||||
import Filters from '../modules/Filters'
|
||||
|
||||
/**
|
||||
* ApexCharts HeatMap Class.
|
||||
* @module HeatMap
|
||||
**/
|
||||
|
||||
export default class HeatMap {
|
||||
constructor(ctx, xyRatios) {
|
||||
this.ctx = ctx
|
||||
this.w = ctx.w
|
||||
|
||||
this.xRatio = xyRatios.xRatio
|
||||
this.yRatio = xyRatios.yRatio
|
||||
|
||||
this.dynamicAnim = this.w.config.chart.animations.dynamicAnimation
|
||||
|
||||
this.helpers = new Helpers(ctx)
|
||||
this.rectRadius = this.w.config.plotOptions.heatmap.radius
|
||||
this.strokeWidth = this.w.config.stroke.show
|
||||
? this.w.config.stroke.width
|
||||
: 0
|
||||
}
|
||||
|
||||
draw(series) {
|
||||
let w = this.w
|
||||
const graphics = new Graphics(this.ctx)
|
||||
|
||||
let ret = graphics.group({
|
||||
class: 'apexcharts-heatmap'
|
||||
})
|
||||
|
||||
ret.attr('clip-path', `url(#gridRectMask${w.globals.cuid})`)
|
||||
|
||||
// width divided into equal parts
|
||||
let xDivision = w.globals.gridWidth / w.globals.dataPoints
|
||||
let yDivision = w.globals.gridHeight / w.globals.series.length
|
||||
|
||||
let y1 = 0
|
||||
let rev = false
|
||||
|
||||
this.negRange = this.helpers.checkColorRange()
|
||||
|
||||
let heatSeries = series.slice()
|
||||
if (w.config.yaxis[0].reversed) {
|
||||
rev = true
|
||||
heatSeries.reverse()
|
||||
}
|
||||
|
||||
for (
|
||||
let i = rev ? 0 : heatSeries.length - 1;
|
||||
rev ? i < heatSeries.length : i >= 0;
|
||||
rev ? i++ : i--
|
||||
) {
|
||||
// el to which series will be drawn
|
||||
let elSeries = graphics.group({
|
||||
class: `apexcharts-series apexcharts-heatmap-series`,
|
||||
seriesName: Utils.escapeString(w.globals.seriesNames[i]),
|
||||
rel: i + 1,
|
||||
'data:realIndex': i
|
||||
})
|
||||
this.ctx.series.addCollapsedClassToSeries(elSeries, i)
|
||||
|
||||
if (w.config.chart.dropShadow.enabled) {
|
||||
const shadow = w.config.chart.dropShadow
|
||||
const filters = new Filters(this.ctx)
|
||||
filters.dropShadow(elSeries, shadow, i)
|
||||
}
|
||||
|
||||
let x1 = 0
|
||||
let shadeIntensity = w.config.plotOptions.heatmap.shadeIntensity
|
||||
|
||||
for (let j = 0; j < heatSeries[i].length; j++) {
|
||||
let heatColor = this.helpers.getShadeColor(
|
||||
w.config.chart.type,
|
||||
i,
|
||||
j,
|
||||
this.negRange
|
||||
)
|
||||
let color = heatColor.color
|
||||
let heatColorProps = heatColor.colorProps
|
||||
|
||||
if (w.config.fill.type === 'image') {
|
||||
const fill = new Fill(this.ctx)
|
||||
|
||||
color = fill.fillPath({
|
||||
seriesNumber: i,
|
||||
dataPointIndex: j,
|
||||
opacity: w.globals.hasNegs
|
||||
? heatColorProps.percent < 0
|
||||
? 1 - (1 + heatColorProps.percent / 100)
|
||||
: shadeIntensity + heatColorProps.percent / 100
|
||||
: heatColorProps.percent / 100,
|
||||
patternID: Utils.randomId(),
|
||||
width: w.config.fill.image.width
|
||||
? w.config.fill.image.width
|
||||
: xDivision,
|
||||
height: w.config.fill.image.height
|
||||
? w.config.fill.image.height
|
||||
: yDivision
|
||||
})
|
||||
}
|
||||
|
||||
let radius = this.rectRadius
|
||||
|
||||
let rect = graphics.drawRect(x1, y1, xDivision, yDivision, radius)
|
||||
rect.attr({
|
||||
cx: x1,
|
||||
cy: y1
|
||||
})
|
||||
|
||||
rect.node.classList.add('apexcharts-heatmap-rect')
|
||||
elSeries.add(rect)
|
||||
|
||||
rect.attr({
|
||||
fill: color,
|
||||
i,
|
||||
index: i,
|
||||
j,
|
||||
val: heatSeries[i][j],
|
||||
'stroke-width': this.strokeWidth,
|
||||
stroke: w.config.plotOptions.heatmap.useFillColorAsStroke
|
||||
? color
|
||||
: w.globals.stroke.colors[0],
|
||||
color
|
||||
})
|
||||
|
||||
this.helpers.addListeners(rect)
|
||||
|
||||
if (w.config.chart.animations.enabled && !w.globals.dataChanged) {
|
||||
let speed = 1
|
||||
if (!w.globals.resized) {
|
||||
speed = w.config.chart.animations.speed
|
||||
}
|
||||
this.animateHeatMap(rect, x1, y1, xDivision, yDivision, speed)
|
||||
}
|
||||
|
||||
if (w.globals.dataChanged) {
|
||||
let speed = 1
|
||||
if (this.dynamicAnim.enabled && w.globals.shouldAnimate) {
|
||||
speed = this.dynamicAnim.speed
|
||||
|
||||
let colorFrom =
|
||||
w.globals.previousPaths[i] &&
|
||||
w.globals.previousPaths[i][j] &&
|
||||
w.globals.previousPaths[i][j].color
|
||||
|
||||
if (!colorFrom) colorFrom = 'rgba(255, 255, 255, 0)'
|
||||
|
||||
this.animateHeatColor(
|
||||
rect,
|
||||
Utils.isColorHex(colorFrom)
|
||||
? colorFrom
|
||||
: Utils.rgb2hex(colorFrom),
|
||||
Utils.isColorHex(color) ? color : Utils.rgb2hex(color),
|
||||
speed
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
let formatter = w.config.dataLabels.formatter
|
||||
let formattedText = formatter(w.globals.series[i][j], {
|
||||
value: w.globals.series[i][j],
|
||||
seriesIndex: i,
|
||||
dataPointIndex: j,
|
||||
w
|
||||
})
|
||||
|
||||
let dataLabels = this.helpers.calculateDataLabels({
|
||||
text: formattedText,
|
||||
x: x1 + xDivision / 2,
|
||||
y: y1 + yDivision / 2,
|
||||
i,
|
||||
j,
|
||||
colorProps: heatColorProps,
|
||||
series: heatSeries
|
||||
})
|
||||
if (dataLabels !== null) {
|
||||
elSeries.add(dataLabels)
|
||||
}
|
||||
|
||||
x1 = x1 + xDivision
|
||||
}
|
||||
|
||||
y1 = y1 + yDivision
|
||||
|
||||
ret.add(elSeries)
|
||||
}
|
||||
|
||||
// adjust yaxis labels for heatmap
|
||||
let yAxisScale = w.globals.yAxisScale[0].result.slice()
|
||||
if (w.config.yaxis[0].reversed) {
|
||||
yAxisScale.unshift('')
|
||||
} else {
|
||||
yAxisScale.push('')
|
||||
}
|
||||
w.globals.yAxisScale[0].result = yAxisScale
|
||||
let divisor = w.globals.gridHeight / w.globals.series.length
|
||||
w.config.yaxis[0].labels.offsetY = -(divisor / 2)
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
animateHeatMap(el, x, y, width, height, speed) {
|
||||
const animations = new Animations(this.ctx)
|
||||
animations.animateRect(
|
||||
el,
|
||||
{
|
||||
x: x + width / 2,
|
||||
y: y + height / 2,
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
{
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height
|
||||
},
|
||||
speed,
|
||||
() => {
|
||||
animations.animationCompleted(el)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
animateHeatColor(el, colorFrom, colorTo, speed) {
|
||||
el.attr({
|
||||
fill: colorFrom
|
||||
})
|
||||
.animate(speed)
|
||||
.attr({
|
||||
fill: colorTo
|
||||
})
|
||||
}
|
||||
}
|
||||
728
cao_sunyata/static/libs/apexcharts/src/charts/Line.js
Normal file
728
cao_sunyata/static/libs/apexcharts/src/charts/Line.js
Normal file
@@ -0,0 +1,728 @@
|
||||
import CoreUtils from '../modules/CoreUtils'
|
||||
import Graphics from '../modules/Graphics'
|
||||
import Fill from '../modules/Fill'
|
||||
import DataLabels from '../modules/DataLabels'
|
||||
import Markers from '../modules/Markers'
|
||||
import Scatter from './Scatter'
|
||||
import Utils from '../utils/Utils'
|
||||
import Helpers from './common/line/Helpers'
|
||||
|
||||
/**
|
||||
* ApexCharts Line Class responsible for drawing Line / Area Charts.
|
||||
* This class is also responsible for generating values for Bubble/Scatter charts, so need to rename it to Axis Charts to avoid confusions
|
||||
* @module Line
|
||||
**/
|
||||
|
||||
class Line {
|
||||
constructor(ctx, xyRatios, isPointsChart) {
|
||||
this.ctx = ctx
|
||||
this.w = ctx.w
|
||||
|
||||
this.xyRatios = xyRatios
|
||||
|
||||
this.pointsChart =
|
||||
!(
|
||||
this.w.config.chart.type !== 'bubble' &&
|
||||
this.w.config.chart.type !== 'scatter'
|
||||
) || isPointsChart
|
||||
|
||||
this.scatter = new Scatter(this.ctx)
|
||||
|
||||
this.noNegatives = this.w.globals.minX === Number.MAX_VALUE
|
||||
|
||||
this.lineHelpers = new Helpers(this)
|
||||
this.markers = new Markers(this.ctx)
|
||||
|
||||
this.prevSeriesY = []
|
||||
this.categoryAxisCorrection = 0
|
||||
this.yaxisIndex = 0
|
||||
}
|
||||
|
||||
draw(series, ptype, seriesIndex) {
|
||||
let w = this.w
|
||||
let graphics = new Graphics(this.ctx)
|
||||
let type = w.globals.comboCharts ? ptype : w.config.chart.type
|
||||
let ret = graphics.group({
|
||||
class: `apexcharts-${type}-series apexcharts-plot-series`
|
||||
})
|
||||
|
||||
const coreUtils = new CoreUtils(this.ctx, w)
|
||||
this.yRatio = this.xyRatios.yRatio
|
||||
this.zRatio = this.xyRatios.zRatio
|
||||
this.xRatio = this.xyRatios.xRatio
|
||||
this.baseLineY = this.xyRatios.baseLineY
|
||||
|
||||
series = coreUtils.getLogSeries(series)
|
||||
this.yRatio = coreUtils.getLogYRatios(this.yRatio)
|
||||
|
||||
// push all series in an array, so we can draw in reverse order (for stacked charts)
|
||||
let allSeries = []
|
||||
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
series = this.lineHelpers.sameValueSeriesFix(i, series)
|
||||
|
||||
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
|
||||
|
||||
this._initSerieVariables(series, i, realIndex)
|
||||
|
||||
let yArrj = [] // hold y values of current iterating series
|
||||
let xArrj = [] // hold x values of current iterating series
|
||||
|
||||
let x = w.globals.padHorizontal + this.categoryAxisCorrection
|
||||
let y = 1
|
||||
|
||||
let linePaths = []
|
||||
let areaPaths = []
|
||||
|
||||
this.ctx.series.addCollapsedClassToSeries(this.elSeries, realIndex)
|
||||
|
||||
if (w.globals.isXNumeric && w.globals.seriesX.length > 0) {
|
||||
x = (w.globals.seriesX[realIndex][0] - w.globals.minX) / this.xRatio
|
||||
}
|
||||
|
||||
xArrj.push(x)
|
||||
|
||||
let pX = x
|
||||
let pY
|
||||
let prevX = pX
|
||||
let prevY = this.zeroY
|
||||
let lineYPosition = 0
|
||||
|
||||
// the first value in the current series is not null or undefined
|
||||
let firstPrevY = this.lineHelpers.determineFirstPrevY({
|
||||
i,
|
||||
series,
|
||||
prevY,
|
||||
lineYPosition
|
||||
})
|
||||
prevY = firstPrevY.prevY
|
||||
|
||||
yArrj.push(prevY)
|
||||
pY = prevY
|
||||
|
||||
let pathsFrom = this._calculatePathsFrom({
|
||||
series,
|
||||
i,
|
||||
realIndex,
|
||||
prevX,
|
||||
prevY
|
||||
})
|
||||
|
||||
let paths = this._iterateOverDataPoints({
|
||||
series,
|
||||
realIndex,
|
||||
i,
|
||||
x,
|
||||
y,
|
||||
pX,
|
||||
pY,
|
||||
pathsFrom,
|
||||
linePaths,
|
||||
areaPaths,
|
||||
seriesIndex,
|
||||
lineYPosition,
|
||||
xArrj,
|
||||
yArrj
|
||||
})
|
||||
|
||||
this._handlePaths({ type, realIndex, i, paths })
|
||||
|
||||
this.elSeries.add(this.elPointsMain)
|
||||
this.elSeries.add(this.elDataLabelsWrap)
|
||||
|
||||
allSeries.push(this.elSeries)
|
||||
}
|
||||
|
||||
if (w.config.chart.stacked) {
|
||||
for (let s = allSeries.length; s > 0; s--) {
|
||||
ret.add(allSeries[s - 1])
|
||||
}
|
||||
} else {
|
||||
for (let s = 0; s < allSeries.length; s++) {
|
||||
ret.add(allSeries[s])
|
||||
}
|
||||
}
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
_initSerieVariables(series, i, realIndex) {
|
||||
const w = this.w
|
||||
const graphics = new Graphics(this.ctx)
|
||||
|
||||
// width divided into equal parts
|
||||
this.xDivision =
|
||||
w.globals.gridWidth /
|
||||
(w.globals.dataPoints - (w.config.xaxis.tickPlacement === 'on' ? 1 : 0))
|
||||
|
||||
this.strokeWidth = Array.isArray(w.config.stroke.width)
|
||||
? w.config.stroke.width[realIndex]
|
||||
: w.config.stroke.width
|
||||
|
||||
if (this.yRatio.length > 1) {
|
||||
this.yaxisIndex = realIndex
|
||||
}
|
||||
|
||||
this.isReversed =
|
||||
w.config.yaxis[this.yaxisIndex] &&
|
||||
w.config.yaxis[this.yaxisIndex].reversed
|
||||
|
||||
// zeroY is the 0 value in y series which can be used in negative charts
|
||||
this.zeroY =
|
||||
w.globals.gridHeight -
|
||||
this.baseLineY[this.yaxisIndex] -
|
||||
(this.isReversed ? w.globals.gridHeight : 0) +
|
||||
(this.isReversed ? this.baseLineY[this.yaxisIndex] * 2 : 0)
|
||||
|
||||
this.areaBottomY = this.zeroY
|
||||
if (
|
||||
this.zeroY > w.globals.gridHeight ||
|
||||
w.config.plotOptions.area.fillTo === 'end'
|
||||
) {
|
||||
this.areaBottomY = w.globals.gridHeight
|
||||
}
|
||||
|
||||
this.categoryAxisCorrection = this.xDivision / 2
|
||||
|
||||
// el to which series will be drawn
|
||||
this.elSeries = graphics.group({
|
||||
class: `apexcharts-series`,
|
||||
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex])
|
||||
})
|
||||
|
||||
// points
|
||||
this.elPointsMain = graphics.group({
|
||||
class: 'apexcharts-series-markers-wrap',
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
// eldatalabels
|
||||
this.elDataLabelsWrap = graphics.group({
|
||||
class: 'apexcharts-datalabels',
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
let longestSeries = series[i].length === w.globals.dataPoints
|
||||
this.elSeries.attr({
|
||||
'data:longestSeries': longestSeries,
|
||||
rel: i + 1,
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
this.appendPathFrom = true
|
||||
}
|
||||
|
||||
_calculatePathsFrom({ series, i, realIndex, prevX, prevY }) {
|
||||
const w = this.w
|
||||
const graphics = new Graphics(this.ctx)
|
||||
let linePath, areaPath, pathFromLine, pathFromArea
|
||||
|
||||
if (series[i][0] === null) {
|
||||
// when the first value itself is null, we need to move the pointer to a location where a null value is not found
|
||||
for (let s = 0; s < series[i].length; s++) {
|
||||
if (series[i][s] !== null) {
|
||||
prevX = this.xDivision * s
|
||||
prevY = this.zeroY - series[i][s] / this.yRatio[this.yaxisIndex]
|
||||
linePath = graphics.move(prevX, prevY)
|
||||
areaPath = graphics.move(prevX, this.areaBottomY)
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
linePath = graphics.move(prevX, prevY)
|
||||
areaPath =
|
||||
graphics.move(prevX, this.areaBottomY) + graphics.line(prevX, prevY)
|
||||
}
|
||||
|
||||
pathFromLine = graphics.move(-1, this.zeroY) + graphics.line(-1, this.zeroY)
|
||||
pathFromArea = graphics.move(-1, this.zeroY) + graphics.line(-1, this.zeroY)
|
||||
|
||||
if (w.globals.previousPaths.length > 0) {
|
||||
const pathFrom = this.lineHelpers.checkPreviousPaths({
|
||||
pathFromLine,
|
||||
pathFromArea,
|
||||
realIndex
|
||||
})
|
||||
pathFromLine = pathFrom.pathFromLine
|
||||
pathFromArea = pathFrom.pathFromArea
|
||||
}
|
||||
|
||||
return {
|
||||
prevX,
|
||||
prevY,
|
||||
linePath,
|
||||
areaPath,
|
||||
pathFromLine,
|
||||
pathFromArea
|
||||
}
|
||||
}
|
||||
|
||||
_handlePaths({ type, realIndex, i, paths }) {
|
||||
const w = this.w
|
||||
const graphics = new Graphics(this.ctx)
|
||||
const fill = new Fill(this.ctx)
|
||||
|
||||
// push all current y values array to main PrevY Array
|
||||
this.prevSeriesY.push(paths.yArrj)
|
||||
|
||||
// push all x val arrays into main xArr
|
||||
w.globals.seriesXvalues[realIndex] = paths.xArrj
|
||||
w.globals.seriesYvalues[realIndex] = paths.yArrj
|
||||
|
||||
const forecast = w.config.forecastDataPoints
|
||||
if (forecast.count > 0) {
|
||||
const forecastCutoff =
|
||||
w.globals.seriesXvalues[realIndex][
|
||||
w.globals.seriesXvalues[realIndex].length - forecast.count - 1
|
||||
]
|
||||
const elForecastMask = graphics.drawRect(
|
||||
forecastCutoff,
|
||||
0,
|
||||
w.globals.gridWidth,
|
||||
w.globals.gridHeight,
|
||||
0
|
||||
)
|
||||
w.globals.dom.elForecastMask.appendChild(elForecastMask.node)
|
||||
|
||||
const elNonForecastMask = graphics.drawRect(
|
||||
0,
|
||||
0,
|
||||
forecastCutoff,
|
||||
w.globals.gridHeight,
|
||||
0
|
||||
)
|
||||
w.globals.dom.elNonForecastMask.appendChild(elNonForecastMask.node)
|
||||
}
|
||||
|
||||
// these elements will be shown after area path animation completes
|
||||
if (!this.pointsChart) {
|
||||
w.globals.delayedElements.push({
|
||||
el: this.elPointsMain.node,
|
||||
index: realIndex
|
||||
})
|
||||
}
|
||||
|
||||
const defaultRenderedPathOptions = {
|
||||
i,
|
||||
realIndex,
|
||||
animationDelay: i,
|
||||
initialSpeed: w.config.chart.animations.speed,
|
||||
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
|
||||
className: `apexcharts-${type}`
|
||||
}
|
||||
|
||||
if (type === 'area') {
|
||||
let pathFill = fill.fillPath({
|
||||
seriesNumber: realIndex
|
||||
})
|
||||
|
||||
for (let p = 0; p < paths.areaPaths.length; p++) {
|
||||
let renderedPath = graphics.renderPaths({
|
||||
...defaultRenderedPathOptions,
|
||||
pathFrom: paths.pathFromArea,
|
||||
pathTo: paths.areaPaths[p],
|
||||
stroke: 'none',
|
||||
strokeWidth: 0,
|
||||
strokeLineCap: null,
|
||||
fill: pathFill
|
||||
})
|
||||
|
||||
this.elSeries.add(renderedPath)
|
||||
}
|
||||
}
|
||||
|
||||
if (w.config.stroke.show && !this.pointsChart) {
|
||||
let lineFill = null
|
||||
if (type === 'line') {
|
||||
lineFill = fill.fillPath({
|
||||
seriesNumber: realIndex,
|
||||
i
|
||||
})
|
||||
} else {
|
||||
if (w.config.stroke.fill.type === 'solid') {
|
||||
lineFill = w.globals.stroke.colors[realIndex]
|
||||
} else {
|
||||
const prevFill = w.config.fill
|
||||
w.config.fill = w.config.stroke.fill
|
||||
|
||||
lineFill = fill.fillPath({
|
||||
seriesNumber: realIndex,
|
||||
i
|
||||
})
|
||||
w.config.fill = prevFill
|
||||
}
|
||||
}
|
||||
|
||||
for (let p = 0; p < paths.linePaths.length; p++) {
|
||||
const linePathCommonOpts = {
|
||||
...defaultRenderedPathOptions,
|
||||
pathFrom: paths.pathFromLine,
|
||||
pathTo: paths.linePaths[p],
|
||||
stroke: lineFill,
|
||||
strokeWidth: this.strokeWidth,
|
||||
strokeLineCap: w.config.stroke.lineCap,
|
||||
fill: 'none'
|
||||
}
|
||||
let renderedPath = graphics.renderPaths(linePathCommonOpts)
|
||||
this.elSeries.add(renderedPath)
|
||||
|
||||
if (forecast.count > 0) {
|
||||
let renderedForecastPath = graphics.renderPaths(linePathCommonOpts)
|
||||
|
||||
renderedForecastPath.node.setAttribute(
|
||||
'stroke-dasharray',
|
||||
forecast.dashArray
|
||||
)
|
||||
|
||||
if (forecast.strokeWidth) {
|
||||
renderedForecastPath.node.setAttribute(
|
||||
'stroke-width',
|
||||
forecast.strokeWidth
|
||||
)
|
||||
}
|
||||
|
||||
this.elSeries.add(renderedForecastPath)
|
||||
renderedForecastPath.attr(
|
||||
'clip-path',
|
||||
`url(#forecastMask${w.globals.cuid})`
|
||||
)
|
||||
renderedPath.attr(
|
||||
'clip-path',
|
||||
`url(#nonForecastMask${w.globals.cuid})`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_iterateOverDataPoints({
|
||||
series,
|
||||
realIndex,
|
||||
i,
|
||||
x,
|
||||
y,
|
||||
pX,
|
||||
pY,
|
||||
pathsFrom,
|
||||
linePaths,
|
||||
areaPaths,
|
||||
seriesIndex,
|
||||
lineYPosition,
|
||||
xArrj,
|
||||
yArrj
|
||||
}) {
|
||||
const w = this.w
|
||||
let graphics = new Graphics(this.ctx)
|
||||
let yRatio = this.yRatio
|
||||
let { prevY, linePath, areaPath, pathFromLine, pathFromArea } = pathsFrom
|
||||
|
||||
const minY = Utils.isNumber(w.globals.minYArr[realIndex])
|
||||
? w.globals.minYArr[realIndex]
|
||||
: w.globals.minY
|
||||
|
||||
const iterations =
|
||||
w.globals.dataPoints > 1 ? w.globals.dataPoints - 1 : w.globals.dataPoints
|
||||
|
||||
for (let j = 0; j < iterations; j++) {
|
||||
const isNull =
|
||||
typeof series[i][j + 1] === 'undefined' || series[i][j + 1] === null
|
||||
|
||||
if (w.globals.isXNumeric) {
|
||||
let sX = w.globals.seriesX[realIndex][j + 1]
|
||||
if (typeof w.globals.seriesX[realIndex][j + 1] === 'undefined') {
|
||||
/* fix #374 */
|
||||
sX = w.globals.seriesX[realIndex][iterations - 1]
|
||||
}
|
||||
x = (sX - w.globals.minX) / this.xRatio
|
||||
} else {
|
||||
x = x + this.xDivision
|
||||
}
|
||||
|
||||
if (w.config.chart.stacked) {
|
||||
if (
|
||||
i > 0 &&
|
||||
w.globals.collapsedSeries.length < w.config.series.length - 1
|
||||
) {
|
||||
// a collapsed series in a stacked bar chart may provide wrong result for the next series, hence find the prevIndex of prev series which is not collapsed - fixes apexcharts.js#1372
|
||||
const prevIndex = (pi) => {
|
||||
let pii = pi
|
||||
for (let cpi = 0; cpi < w.globals.series.length; cpi++) {
|
||||
if (w.globals.collapsedSeriesIndices.indexOf(pi) > -1) {
|
||||
pii--
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return pii >= 0 ? pii : 0
|
||||
}
|
||||
lineYPosition = this.prevSeriesY[prevIndex(i - 1)][j + 1]
|
||||
} else {
|
||||
// the first series will not have prevY values
|
||||
lineYPosition = this.zeroY
|
||||
}
|
||||
} else {
|
||||
lineYPosition = this.zeroY
|
||||
}
|
||||
|
||||
if (isNull) {
|
||||
y =
|
||||
lineYPosition -
|
||||
minY / yRatio[this.yaxisIndex] +
|
||||
(this.isReversed ? minY / yRatio[this.yaxisIndex] : 0) * 2
|
||||
} else {
|
||||
y =
|
||||
lineYPosition -
|
||||
series[i][j + 1] / yRatio[this.yaxisIndex] +
|
||||
(this.isReversed ? series[i][j + 1] / yRatio[this.yaxisIndex] : 0) * 2
|
||||
}
|
||||
|
||||
// push current X
|
||||
xArrj.push(x)
|
||||
|
||||
// push current Y that will be used as next series's bottom position
|
||||
yArrj.push(y)
|
||||
|
||||
let pointsPos = this.lineHelpers.calculatePoints({
|
||||
series,
|
||||
x,
|
||||
y,
|
||||
realIndex,
|
||||
i,
|
||||
j,
|
||||
prevY
|
||||
})
|
||||
|
||||
let calculatedPaths = this._createPaths({
|
||||
series,
|
||||
i,
|
||||
realIndex,
|
||||
j,
|
||||
x,
|
||||
y,
|
||||
pX,
|
||||
pY,
|
||||
linePath,
|
||||
areaPath,
|
||||
linePaths,
|
||||
areaPaths,
|
||||
seriesIndex
|
||||
})
|
||||
|
||||
areaPaths = calculatedPaths.areaPaths
|
||||
linePaths = calculatedPaths.linePaths
|
||||
pX = calculatedPaths.pX
|
||||
pY = calculatedPaths.pY
|
||||
areaPath = calculatedPaths.areaPath
|
||||
linePath = calculatedPaths.linePath
|
||||
|
||||
if (this.appendPathFrom) {
|
||||
pathFromLine = pathFromLine + graphics.line(x, this.zeroY)
|
||||
pathFromArea = pathFromArea + graphics.line(x, this.zeroY)
|
||||
}
|
||||
|
||||
this.handleNullDataPoints(series, pointsPos, i, j, realIndex)
|
||||
|
||||
this._handleMarkersAndLabels({
|
||||
pointsPos,
|
||||
series,
|
||||
x,
|
||||
y,
|
||||
prevY,
|
||||
i,
|
||||
j,
|
||||
realIndex
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
yArrj,
|
||||
xArrj,
|
||||
pathFromArea,
|
||||
areaPaths,
|
||||
pathFromLine,
|
||||
linePaths
|
||||
}
|
||||
}
|
||||
|
||||
_handleMarkersAndLabels({ pointsPos, series, x, y, prevY, i, j, realIndex }) {
|
||||
const w = this.w
|
||||
let dataLabels = new DataLabels(this.ctx)
|
||||
|
||||
if (!this.pointsChart) {
|
||||
if (w.globals.series[i].length > 1) {
|
||||
this.elPointsMain.node.classList.add('apexcharts-element-hidden')
|
||||
}
|
||||
|
||||
let elPointsWrap = this.markers.plotChartMarkers(
|
||||
pointsPos,
|
||||
realIndex,
|
||||
j + 1
|
||||
)
|
||||
if (elPointsWrap !== null) {
|
||||
this.elPointsMain.add(elPointsWrap)
|
||||
}
|
||||
} else {
|
||||
// scatter / bubble chart points creation
|
||||
this.scatter.draw(this.elSeries, j, {
|
||||
realIndex,
|
||||
pointsPos,
|
||||
zRatio: this.zRatio,
|
||||
elParent: this.elPointsMain
|
||||
})
|
||||
}
|
||||
|
||||
let drawnLabels = dataLabels.drawDataLabel(
|
||||
pointsPos,
|
||||
realIndex,
|
||||
j + 1,
|
||||
null
|
||||
)
|
||||
if (drawnLabels !== null) {
|
||||
this.elDataLabelsWrap.add(drawnLabels)
|
||||
}
|
||||
}
|
||||
|
||||
_createPaths({
|
||||
series,
|
||||
i,
|
||||
realIndex,
|
||||
j,
|
||||
x,
|
||||
y,
|
||||
pX,
|
||||
pY,
|
||||
linePath,
|
||||
areaPath,
|
||||
linePaths,
|
||||
areaPaths,
|
||||
seriesIndex
|
||||
}) {
|
||||
let w = this.w
|
||||
let graphics = new Graphics(this.ctx)
|
||||
|
||||
let curve = w.config.stroke.curve
|
||||
const areaBottomY = this.areaBottomY
|
||||
|
||||
if (Array.isArray(w.config.stroke.curve)) {
|
||||
if (Array.isArray(seriesIndex)) {
|
||||
curve = w.config.stroke.curve[seriesIndex[i]]
|
||||
} else {
|
||||
curve = w.config.stroke.curve[i]
|
||||
}
|
||||
}
|
||||
|
||||
// logic of smooth curve derived from chartist
|
||||
// CREDITS: https://gionkunz.github.io/chartist-js/
|
||||
if (curve === 'smooth') {
|
||||
let length = (x - pX) * 0.35
|
||||
if (w.globals.hasNullValues) {
|
||||
if (series[i][j] !== null) {
|
||||
if (series[i][j + 1] !== null) {
|
||||
linePath =
|
||||
graphics.move(pX, pY) +
|
||||
graphics.curve(pX + length, pY, x - length, y, x + 1, y)
|
||||
areaPath =
|
||||
graphics.move(pX + 1, pY) +
|
||||
graphics.curve(pX + length, pY, x - length, y, x + 1, y) +
|
||||
graphics.line(x, areaBottomY) +
|
||||
graphics.line(pX, areaBottomY) +
|
||||
'z'
|
||||
} else {
|
||||
linePath = graphics.move(pX, pY)
|
||||
areaPath = graphics.move(pX, pY) + 'z'
|
||||
}
|
||||
}
|
||||
|
||||
linePaths.push(linePath)
|
||||
areaPaths.push(areaPath)
|
||||
} else {
|
||||
linePath =
|
||||
linePath + graphics.curve(pX + length, pY, x - length, y, x, y)
|
||||
areaPath =
|
||||
areaPath + graphics.curve(pX + length, pY, x - length, y, x, y)
|
||||
}
|
||||
|
||||
pX = x
|
||||
pY = y
|
||||
|
||||
if (j === series[i].length - 2) {
|
||||
// last loop, close path
|
||||
areaPath =
|
||||
areaPath +
|
||||
graphics.curve(pX, pY, x, y, x, areaBottomY) +
|
||||
graphics.move(x, y) +
|
||||
'z'
|
||||
if (!w.globals.hasNullValues) {
|
||||
linePaths.push(linePath)
|
||||
areaPaths.push(areaPath)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (series[i][j + 1] === null) {
|
||||
linePath = linePath + graphics.move(x, y)
|
||||
|
||||
const numericOrCatX = w.globals.isXNumeric
|
||||
? (w.globals.seriesX[realIndex][j] - w.globals.minX) / this.xRatio
|
||||
: x - this.xDivision
|
||||
areaPath =
|
||||
areaPath +
|
||||
graphics.line(numericOrCatX, areaBottomY) +
|
||||
graphics.move(x, y) +
|
||||
'z'
|
||||
}
|
||||
if (series[i][j] === null) {
|
||||
linePath = linePath + graphics.move(x, y)
|
||||
areaPath = areaPath + graphics.move(x, areaBottomY)
|
||||
}
|
||||
|
||||
if (curve === 'stepline') {
|
||||
linePath =
|
||||
linePath + graphics.line(x, null, 'H') + graphics.line(null, y, 'V')
|
||||
areaPath =
|
||||
areaPath + graphics.line(x, null, 'H') + graphics.line(null, y, 'V')
|
||||
} else if (curve === 'straight') {
|
||||
linePath = linePath + graphics.line(x, y)
|
||||
areaPath = areaPath + graphics.line(x, y)
|
||||
}
|
||||
|
||||
if (j === series[i].length - 2) {
|
||||
// last loop, close path
|
||||
areaPath =
|
||||
areaPath + graphics.line(x, areaBottomY) + graphics.move(x, y) + 'z'
|
||||
linePaths.push(linePath)
|
||||
areaPaths.push(areaPath)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
linePaths,
|
||||
areaPaths,
|
||||
pX,
|
||||
pY,
|
||||
linePath,
|
||||
areaPath
|
||||
}
|
||||
}
|
||||
|
||||
handleNullDataPoints(series, pointsPos, i, j, realIndex) {
|
||||
const w = this.w
|
||||
if (
|
||||
(series[i][j] === null && w.config.markers.showNullDataPoints) ||
|
||||
series[i].length === 1
|
||||
) {
|
||||
// fixes apexcharts.js#1282, #1252
|
||||
let elPointsWrap = this.markers.plotChartMarkers(
|
||||
pointsPos,
|
||||
realIndex,
|
||||
j + 1,
|
||||
this.strokeWidth - w.config.markers.strokeWidth / 2,
|
||||
true
|
||||
)
|
||||
if (elPointsWrap !== null) {
|
||||
this.elPointsMain.add(elPointsWrap)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Line
|
||||
1057
cao_sunyata/static/libs/apexcharts/src/charts/Pie.js
Normal file
1057
cao_sunyata/static/libs/apexcharts/src/charts/Pie.js
Normal file
File diff suppressed because it is too large
Load Diff
524
cao_sunyata/static/libs/apexcharts/src/charts/Radar.js
Normal file
524
cao_sunyata/static/libs/apexcharts/src/charts/Radar.js
Normal file
@@ -0,0 +1,524 @@
|
||||
import Fill from '../modules/Fill'
|
||||
import Graphics from '../modules/Graphics'
|
||||
import Markers from '../modules/Markers'
|
||||
import DataLabels from '../modules/DataLabels'
|
||||
import Filters from '../modules/Filters'
|
||||
import Utils from '../utils/Utils'
|
||||
import Helpers from './common/circle/Helpers'
|
||||
import CoreUtils from '../modules/CoreUtils'
|
||||
|
||||
/**
|
||||
* ApexCharts Radar Class for Spider/Radar Charts.
|
||||
* @module Radar
|
||||
**/
|
||||
|
||||
class Radar {
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx
|
||||
this.w = ctx.w
|
||||
|
||||
this.chartType = this.w.config.chart.type
|
||||
|
||||
this.initialAnim = this.w.config.chart.animations.enabled
|
||||
this.dynamicAnim =
|
||||
this.initialAnim &&
|
||||
this.w.config.chart.animations.dynamicAnimation.enabled
|
||||
|
||||
this.animDur = 0
|
||||
|
||||
const w = this.w
|
||||
this.graphics = new Graphics(this.ctx)
|
||||
|
||||
this.lineColorArr =
|
||||
w.globals.stroke.colors !== undefined
|
||||
? w.globals.stroke.colors
|
||||
: w.globals.colors
|
||||
|
||||
this.defaultSize =
|
||||
w.globals.svgHeight < w.globals.svgWidth
|
||||
? w.globals.gridHeight + w.globals.goldenPadding * 1.5
|
||||
: w.globals.gridWidth
|
||||
|
||||
this.isLog = w.config.yaxis[0].logarithmic
|
||||
|
||||
this.coreUtils = new CoreUtils(this.ctx)
|
||||
this.maxValue = this.isLog
|
||||
? this.coreUtils.getLogVal(w.globals.maxY, 0)
|
||||
: w.globals.maxY
|
||||
this.minValue = this.isLog
|
||||
? this.coreUtils.getLogVal(this.w.globals.minY, 0)
|
||||
: w.globals.minY
|
||||
|
||||
this.polygons = w.config.plotOptions.radar.polygons
|
||||
|
||||
this.strokeWidth = w.config.stroke.show ? w.config.stroke.width : 0
|
||||
|
||||
this.size =
|
||||
this.defaultSize / 2.1 - this.strokeWidth - w.config.chart.dropShadow.blur
|
||||
|
||||
if (w.config.xaxis.labels.show) {
|
||||
this.size = this.size - w.globals.xAxisLabelsWidth / 1.75
|
||||
}
|
||||
|
||||
if (w.config.plotOptions.radar.size !== undefined) {
|
||||
this.size = w.config.plotOptions.radar.size
|
||||
}
|
||||
|
||||
this.dataRadiusOfPercent = []
|
||||
this.dataRadius = []
|
||||
this.angleArr = []
|
||||
|
||||
this.yaxisLabelsTextsPos = []
|
||||
}
|
||||
|
||||
draw(series) {
|
||||
let w = this.w
|
||||
const fill = new Fill(this.ctx)
|
||||
|
||||
const allSeries = []
|
||||
const dataLabels = new DataLabels(this.ctx)
|
||||
|
||||
if (series.length) {
|
||||
this.dataPointsLen = series[w.globals.maxValsInArrayIndex].length
|
||||
}
|
||||
this.disAngle = (Math.PI * 2) / this.dataPointsLen
|
||||
|
||||
let halfW = w.globals.gridWidth / 2
|
||||
let halfH = w.globals.gridHeight / 2
|
||||
let translateX = halfW + w.config.plotOptions.radar.offsetX
|
||||
let translateY = halfH + w.config.plotOptions.radar.offsetY
|
||||
|
||||
let ret = this.graphics.group({
|
||||
class: 'apexcharts-radar-series apexcharts-plot-series',
|
||||
transform: `translate(${translateX || 0}, ${translateY || 0})`
|
||||
})
|
||||
|
||||
let dataPointsPos = []
|
||||
let elPointsMain = null
|
||||
let elDataPointsMain = null
|
||||
|
||||
this.yaxisLabels = this.graphics.group({
|
||||
class: 'apexcharts-yaxis'
|
||||
})
|
||||
|
||||
series.forEach((s, i) => {
|
||||
let longestSeries = s.length === w.globals.dataPoints
|
||||
|
||||
// el to which series will be drawn
|
||||
let elSeries = this.graphics.group().attr({
|
||||
class: `apexcharts-series`,
|
||||
'data:longestSeries': longestSeries,
|
||||
seriesName: Utils.escapeString(w.globals.seriesNames[i]),
|
||||
rel: i + 1,
|
||||
'data:realIndex': i
|
||||
})
|
||||
|
||||
this.dataRadiusOfPercent[i] = []
|
||||
this.dataRadius[i] = []
|
||||
this.angleArr[i] = []
|
||||
|
||||
s.forEach((dv, j) => {
|
||||
const range = Math.abs(this.maxValue - this.minValue)
|
||||
dv = dv + Math.abs(this.minValue)
|
||||
|
||||
if (this.isLog) {
|
||||
dv = this.coreUtils.getLogVal(dv, 0)
|
||||
}
|
||||
|
||||
this.dataRadiusOfPercent[i][j] = dv / range
|
||||
|
||||
this.dataRadius[i][j] = this.dataRadiusOfPercent[i][j] * this.size
|
||||
this.angleArr[i][j] = j * this.disAngle
|
||||
})
|
||||
|
||||
dataPointsPos = this.getDataPointsPos(
|
||||
this.dataRadius[i],
|
||||
this.angleArr[i]
|
||||
)
|
||||
const paths = this.createPaths(dataPointsPos, {
|
||||
x: 0,
|
||||
y: 0
|
||||
})
|
||||
|
||||
// points
|
||||
elPointsMain = this.graphics.group({
|
||||
class: 'apexcharts-series-markers-wrap apexcharts-element-hidden'
|
||||
})
|
||||
|
||||
// datapoints
|
||||
elDataPointsMain = this.graphics.group({
|
||||
class: `apexcharts-datalabels`,
|
||||
'data:realIndex': i
|
||||
})
|
||||
|
||||
w.globals.delayedElements.push({
|
||||
el: elPointsMain.node,
|
||||
index: i
|
||||
})
|
||||
|
||||
const defaultRenderedPathOptions = {
|
||||
i,
|
||||
realIndex: i,
|
||||
animationDelay: i,
|
||||
initialSpeed: w.config.chart.animations.speed,
|
||||
dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
|
||||
className: `apexcharts-radar`,
|
||||
shouldClipToGrid: false,
|
||||
bindEventsOnPaths: false,
|
||||
stroke: w.globals.stroke.colors[i],
|
||||
strokeLineCap: w.config.stroke.lineCap
|
||||
}
|
||||
|
||||
let pathFrom = null
|
||||
|
||||
if (w.globals.previousPaths.length > 0) {
|
||||
pathFrom = this.getPreviousPath(i)
|
||||
}
|
||||
|
||||
for (let p = 0; p < paths.linePathsTo.length; p++) {
|
||||
let renderedLinePath = this.graphics.renderPaths({
|
||||
...defaultRenderedPathOptions,
|
||||
pathFrom: pathFrom === null ? paths.linePathsFrom[p] : pathFrom,
|
||||
pathTo: paths.linePathsTo[p],
|
||||
strokeWidth: Array.isArray(this.strokeWidth)
|
||||
? this.strokeWidth[i]
|
||||
: this.strokeWidth,
|
||||
fill: 'none',
|
||||
drawShadow: false
|
||||
})
|
||||
|
||||
elSeries.add(renderedLinePath)
|
||||
|
||||
let pathFill = fill.fillPath({
|
||||
seriesNumber: i
|
||||
})
|
||||
|
||||
let renderedAreaPath = this.graphics.renderPaths({
|
||||
...defaultRenderedPathOptions,
|
||||
pathFrom: pathFrom === null ? paths.areaPathsFrom[p] : pathFrom,
|
||||
pathTo: paths.areaPathsTo[p],
|
||||
strokeWidth: 0,
|
||||
fill: pathFill,
|
||||
drawShadow: false
|
||||
})
|
||||
|
||||
if (w.config.chart.dropShadow.enabled) {
|
||||
const filters = new Filters(this.ctx)
|
||||
|
||||
const shadow = w.config.chart.dropShadow
|
||||
filters.dropShadow(
|
||||
renderedAreaPath,
|
||||
Object.assign({}, shadow, { noUserSpaceOnUse: true }),
|
||||
i
|
||||
)
|
||||
}
|
||||
|
||||
elSeries.add(renderedAreaPath)
|
||||
}
|
||||
|
||||
s.forEach((sj, j) => {
|
||||
let markers = new Markers(this.ctx)
|
||||
|
||||
let opts = markers.getMarkerConfig({
|
||||
cssClass: 'apexcharts-marker',
|
||||
seriesIndex: i,
|
||||
dataPointIndex: j
|
||||
})
|
||||
|
||||
let point = this.graphics.drawMarker(
|
||||
dataPointsPos[j].x,
|
||||
dataPointsPos[j].y,
|
||||
opts
|
||||
)
|
||||
|
||||
point.attr('rel', j)
|
||||
point.attr('j', j)
|
||||
point.attr('index', i)
|
||||
point.node.setAttribute('default-marker-size', opts.pSize)
|
||||
|
||||
let elPointsWrap = this.graphics.group({
|
||||
class: 'apexcharts-series-markers'
|
||||
})
|
||||
|
||||
if (elPointsWrap) {
|
||||
elPointsWrap.add(point)
|
||||
}
|
||||
|
||||
elPointsMain.add(elPointsWrap)
|
||||
|
||||
elSeries.add(elPointsMain)
|
||||
|
||||
const dataLabelsConfig = w.config.dataLabels
|
||||
|
||||
if (dataLabelsConfig.enabled) {
|
||||
let text = dataLabelsConfig.formatter(w.globals.series[i][j], {
|
||||
seriesIndex: i,
|
||||
dataPointIndex: j,
|
||||
w
|
||||
})
|
||||
|
||||
dataLabels.plotDataLabelsText({
|
||||
x: dataPointsPos[j].x,
|
||||
y: dataPointsPos[j].y,
|
||||
text,
|
||||
textAnchor: 'middle',
|
||||
i,
|
||||
j: i,
|
||||
parent: elDataPointsMain,
|
||||
offsetCorrection: false,
|
||||
dataLabelsConfig: {
|
||||
...dataLabelsConfig
|
||||
}
|
||||
})
|
||||
}
|
||||
elSeries.add(elDataPointsMain)
|
||||
})
|
||||
|
||||
allSeries.push(elSeries)
|
||||
})
|
||||
|
||||
this.drawPolygons({
|
||||
parent: ret
|
||||
})
|
||||
|
||||
if (w.config.xaxis.labels.show) {
|
||||
const xaxisTexts = this.drawXAxisTexts()
|
||||
ret.add(xaxisTexts)
|
||||
}
|
||||
|
||||
allSeries.forEach((elS) => {
|
||||
ret.add(elS)
|
||||
})
|
||||
|
||||
ret.add(this.yaxisLabels)
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
drawPolygons(opts) {
|
||||
const w = this.w
|
||||
const { parent } = opts
|
||||
const helpers = new Helpers(this.ctx)
|
||||
|
||||
const yaxisTexts = w.globals.yAxisScale[0].result.reverse()
|
||||
const layers = yaxisTexts.length
|
||||
|
||||
let radiusSizes = []
|
||||
let layerDis = this.size / (layers - 1)
|
||||
for (let i = 0; i < layers; i++) {
|
||||
radiusSizes[i] = layerDis * i
|
||||
}
|
||||
radiusSizes.reverse()
|
||||
|
||||
let polygonStrings = []
|
||||
let lines = []
|
||||
|
||||
radiusSizes.forEach((radiusSize, r) => {
|
||||
const polygon = Utils.getPolygonPos(radiusSize, this.dataPointsLen)
|
||||
let string = ''
|
||||
|
||||
polygon.forEach((p, i) => {
|
||||
if (r === 0) {
|
||||
const line = this.graphics.drawLine(
|
||||
p.x,
|
||||
p.y,
|
||||
0,
|
||||
0,
|
||||
Array.isArray(this.polygons.connectorColors)
|
||||
? this.polygons.connectorColors[i]
|
||||
: this.polygons.connectorColors
|
||||
)
|
||||
|
||||
lines.push(line)
|
||||
}
|
||||
|
||||
if (i === 0) {
|
||||
this.yaxisLabelsTextsPos.push({
|
||||
x: p.x,
|
||||
y: p.y
|
||||
})
|
||||
}
|
||||
|
||||
string += p.x + ',' + p.y + ' '
|
||||
})
|
||||
|
||||
polygonStrings.push(string)
|
||||
})
|
||||
|
||||
polygonStrings.forEach((p, i) => {
|
||||
const strokeColors = this.polygons.strokeColors
|
||||
const strokeWidth = this.polygons.strokeWidth
|
||||
const polygon = this.graphics.drawPolygon(
|
||||
p,
|
||||
Array.isArray(strokeColors) ? strokeColors[i] : strokeColors,
|
||||
Array.isArray(strokeWidth) ? strokeWidth[i] : strokeWidth,
|
||||
w.globals.radarPolygons.fill.colors[i]
|
||||
)
|
||||
parent.add(polygon)
|
||||
})
|
||||
|
||||
lines.forEach((l) => {
|
||||
parent.add(l)
|
||||
})
|
||||
|
||||
if (w.config.yaxis[0].show) {
|
||||
this.yaxisLabelsTextsPos.forEach((p, i) => {
|
||||
const yText = helpers.drawYAxisTexts(p.x, p.y, i, yaxisTexts[i])
|
||||
this.yaxisLabels.add(yText)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
drawXAxisTexts() {
|
||||
const w = this.w
|
||||
|
||||
const xaxisLabelsConfig = w.config.xaxis.labels
|
||||
let elXAxisWrap = this.graphics.group({
|
||||
class: 'apexcharts-xaxis'
|
||||
})
|
||||
|
||||
let polygonPos = Utils.getPolygonPos(this.size, this.dataPointsLen)
|
||||
|
||||
w.globals.labels.forEach((label, i) => {
|
||||
let formatter = w.config.xaxis.labels.formatter
|
||||
let dataLabels = new DataLabels(this.ctx)
|
||||
|
||||
if (polygonPos[i]) {
|
||||
let textPos = this.getTextPos(polygonPos[i], this.size)
|
||||
|
||||
let text = formatter(label, {
|
||||
seriesIndex: -1,
|
||||
dataPointIndex: i,
|
||||
w
|
||||
})
|
||||
|
||||
dataLabels.plotDataLabelsText({
|
||||
x: textPos.newX,
|
||||
y: textPos.newY,
|
||||
text,
|
||||
textAnchor: textPos.textAnchor,
|
||||
i,
|
||||
j: i,
|
||||
parent: elXAxisWrap,
|
||||
color:
|
||||
Array.isArray(xaxisLabelsConfig.style.colors) &&
|
||||
xaxisLabelsConfig.style.colors[i]
|
||||
? xaxisLabelsConfig.style.colors[i]
|
||||
: '#a8a8a8',
|
||||
dataLabelsConfig: {
|
||||
textAnchor: textPos.textAnchor,
|
||||
dropShadow: { enabled: false },
|
||||
...xaxisLabelsConfig
|
||||
},
|
||||
offsetCorrection: false
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return elXAxisWrap
|
||||
}
|
||||
|
||||
createPaths(pos, origin) {
|
||||
let linePathsTo = []
|
||||
let linePathsFrom = []
|
||||
let areaPathsTo = []
|
||||
let areaPathsFrom = []
|
||||
|
||||
if (pos.length) {
|
||||
linePathsFrom = [this.graphics.move(origin.x, origin.y)]
|
||||
areaPathsFrom = [this.graphics.move(origin.x, origin.y)]
|
||||
|
||||
let linePathTo = this.graphics.move(pos[0].x, pos[0].y)
|
||||
let areaPathTo = this.graphics.move(pos[0].x, pos[0].y)
|
||||
|
||||
pos.forEach((p, i) => {
|
||||
linePathTo += this.graphics.line(p.x, p.y)
|
||||
areaPathTo += this.graphics.line(p.x, p.y)
|
||||
if (i === pos.length - 1) {
|
||||
linePathTo += 'Z'
|
||||
areaPathTo += 'Z'
|
||||
}
|
||||
})
|
||||
|
||||
linePathsTo.push(linePathTo)
|
||||
areaPathsTo.push(areaPathTo)
|
||||
}
|
||||
|
||||
return {
|
||||
linePathsFrom,
|
||||
linePathsTo,
|
||||
areaPathsFrom,
|
||||
areaPathsTo
|
||||
}
|
||||
}
|
||||
|
||||
getTextPos(pos, polygonSize) {
|
||||
let limit = 10
|
||||
let textAnchor = 'middle'
|
||||
|
||||
let newX = pos.x
|
||||
let newY = pos.y
|
||||
|
||||
if (Math.abs(pos.x) >= limit) {
|
||||
if (pos.x > 0) {
|
||||
textAnchor = 'start'
|
||||
newX += 10
|
||||
} else if (pos.x < 0) {
|
||||
textAnchor = 'end'
|
||||
newX -= 10
|
||||
}
|
||||
} else {
|
||||
textAnchor = 'middle'
|
||||
}
|
||||
if (Math.abs(pos.y) >= polygonSize - limit) {
|
||||
if (pos.y < 0) {
|
||||
newY -= 10
|
||||
} else if (pos.y > 0) {
|
||||
newY += 10
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
textAnchor,
|
||||
newX,
|
||||
newY
|
||||
}
|
||||
}
|
||||
|
||||
getPreviousPath(realIndex) {
|
||||
let w = this.w
|
||||
let pathFrom = null
|
||||
for (let pp = 0; pp < w.globals.previousPaths.length; pp++) {
|
||||
let gpp = w.globals.previousPaths[pp]
|
||||
|
||||
if (
|
||||
gpp.paths.length > 0 &&
|
||||
parseInt(gpp.realIndex, 10) === parseInt(realIndex, 10)
|
||||
) {
|
||||
if (typeof w.globals.previousPaths[pp].paths[0] !== 'undefined') {
|
||||
pathFrom = w.globals.previousPaths[pp].paths[0].d
|
||||
}
|
||||
}
|
||||
}
|
||||
return pathFrom
|
||||
}
|
||||
|
||||
getDataPointsPos(
|
||||
dataRadiusArr,
|
||||
angleArr,
|
||||
dataPointsLen = this.dataPointsLen
|
||||
) {
|
||||
dataRadiusArr = dataRadiusArr || []
|
||||
angleArr = angleArr || []
|
||||
let dataPointsPosArray = []
|
||||
for (let j = 0; j < dataPointsLen; j++) {
|
||||
let curPointPos = {}
|
||||
curPointPos.x = dataRadiusArr[j] * Math.sin(angleArr[j])
|
||||
curPointPos.y = -dataRadiusArr[j] * Math.cos(angleArr[j])
|
||||
dataPointsPosArray.push(curPointPos)
|
||||
}
|
||||
return dataPointsPosArray
|
||||
}
|
||||
}
|
||||
|
||||
export default Radar
|
||||
469
cao_sunyata/static/libs/apexcharts/src/charts/Radial.js
Normal file
469
cao_sunyata/static/libs/apexcharts/src/charts/Radial.js
Normal file
@@ -0,0 +1,469 @@
|
||||
import Pie from './Pie'
|
||||
import Utils from '../utils/Utils'
|
||||
import Fill from '../modules/Fill'
|
||||
import Graphics from '../modules/Graphics'
|
||||
import Filters from '../modules/Filters'
|
||||
|
||||
/**
|
||||
* ApexCharts Radial Class for drawing Circle / Semi Circle Charts.
|
||||
* @module Radial
|
||||
**/
|
||||
|
||||
class Radial extends Pie {
|
||||
constructor(ctx) {
|
||||
super(ctx)
|
||||
|
||||
this.ctx = ctx
|
||||
this.w = ctx.w
|
||||
this.animBeginArr = [0]
|
||||
this.animDur = 0
|
||||
|
||||
const w = this.w
|
||||
this.startAngle = w.config.plotOptions.radialBar.startAngle
|
||||
this.endAngle = w.config.plotOptions.radialBar.endAngle
|
||||
|
||||
this.totalAngle = Math.abs(
|
||||
w.config.plotOptions.radialBar.endAngle -
|
||||
w.config.plotOptions.radialBar.startAngle
|
||||
)
|
||||
|
||||
this.trackStartAngle = w.config.plotOptions.radialBar.track.startAngle
|
||||
this.trackEndAngle = w.config.plotOptions.radialBar.track.endAngle
|
||||
|
||||
this.donutDataLabels = this.w.config.plotOptions.radialBar.dataLabels
|
||||
this.radialDataLabels = this.donutDataLabels // make a copy for easy reference
|
||||
|
||||
if (!this.trackStartAngle) this.trackStartAngle = this.startAngle
|
||||
if (!this.trackEndAngle) this.trackEndAngle = this.endAngle
|
||||
|
||||
if (this.endAngle === 360) this.endAngle = 359.99
|
||||
|
||||
this.margin = parseInt(w.config.plotOptions.radialBar.track.margin, 10)
|
||||
}
|
||||
|
||||
draw(series) {
|
||||
let w = this.w
|
||||
const graphics = new Graphics(this.ctx)
|
||||
|
||||
let ret = graphics.group({
|
||||
class: 'apexcharts-radialbar'
|
||||
})
|
||||
|
||||
if (w.globals.noData) return ret
|
||||
|
||||
let elSeries = graphics.group()
|
||||
|
||||
let centerY = this.defaultSize / 2
|
||||
let centerX = w.globals.gridWidth / 2
|
||||
|
||||
let size = this.defaultSize / 2.05
|
||||
if (!w.config.chart.sparkline.enabled) {
|
||||
size = size - w.config.stroke.width - w.config.chart.dropShadow.blur
|
||||
}
|
||||
let colorArr = w.globals.fill.colors
|
||||
|
||||
if (w.config.plotOptions.radialBar.track.show) {
|
||||
let elTracks = this.drawTracks({
|
||||
size,
|
||||
centerX,
|
||||
centerY,
|
||||
colorArr,
|
||||
series
|
||||
})
|
||||
elSeries.add(elTracks)
|
||||
}
|
||||
|
||||
let elG = this.drawArcs({
|
||||
size,
|
||||
centerX,
|
||||
centerY,
|
||||
colorArr,
|
||||
series
|
||||
})
|
||||
|
||||
let totalAngle = 360
|
||||
|
||||
if (w.config.plotOptions.radialBar.startAngle < 0) {
|
||||
totalAngle = this.totalAngle
|
||||
}
|
||||
|
||||
let angleRatio = (360 - totalAngle) / 360
|
||||
w.globals.radialSize = size - size * angleRatio
|
||||
|
||||
if (this.radialDataLabels.value.show) {
|
||||
let offset = Math.max(
|
||||
this.radialDataLabels.value.offsetY,
|
||||
this.radialDataLabels.name.offsetY
|
||||
)
|
||||
w.globals.radialSize += offset * angleRatio
|
||||
}
|
||||
|
||||
elSeries.add(elG.g)
|
||||
|
||||
if (w.config.plotOptions.radialBar.hollow.position === 'front') {
|
||||
elG.g.add(elG.elHollow)
|
||||
if (elG.dataLabels) {
|
||||
elG.g.add(elG.dataLabels)
|
||||
}
|
||||
}
|
||||
|
||||
ret.add(elSeries)
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
drawTracks(opts) {
|
||||
let w = this.w
|
||||
const graphics = new Graphics(this.ctx)
|
||||
|
||||
let g = graphics.group({
|
||||
class: 'apexcharts-tracks'
|
||||
})
|
||||
|
||||
let filters = new Filters(this.ctx)
|
||||
let fill = new Fill(this.ctx)
|
||||
|
||||
let strokeWidth = this.getStrokeWidth(opts)
|
||||
|
||||
opts.size = opts.size - strokeWidth / 2
|
||||
|
||||
for (let i = 0; i < opts.series.length; i++) {
|
||||
let elRadialBarTrack = graphics.group({
|
||||
class: 'apexcharts-radialbar-track apexcharts-track'
|
||||
})
|
||||
g.add(elRadialBarTrack)
|
||||
|
||||
elRadialBarTrack.attr({
|
||||
rel: i + 1
|
||||
})
|
||||
|
||||
opts.size = opts.size - strokeWidth - this.margin
|
||||
|
||||
const trackConfig = w.config.plotOptions.radialBar.track
|
||||
let pathFill = fill.fillPath({
|
||||
seriesNumber: 0,
|
||||
size: opts.size,
|
||||
fillColors: Array.isArray(trackConfig.background)
|
||||
? trackConfig.background[i]
|
||||
: trackConfig.background,
|
||||
solid: true
|
||||
})
|
||||
|
||||
let startAngle = this.trackStartAngle
|
||||
let endAngle = this.trackEndAngle
|
||||
|
||||
if (Math.abs(endAngle) + Math.abs(startAngle) >= 360)
|
||||
endAngle = 360 - Math.abs(this.startAngle) - 0.1
|
||||
|
||||
let elPath = graphics.drawPath({
|
||||
d: '',
|
||||
stroke: pathFill,
|
||||
strokeWidth:
|
||||
(strokeWidth * parseInt(trackConfig.strokeWidth, 10)) / 100,
|
||||
fill: 'none',
|
||||
strokeOpacity: trackConfig.opacity,
|
||||
classes: 'apexcharts-radialbar-area'
|
||||
})
|
||||
|
||||
if (trackConfig.dropShadow.enabled) {
|
||||
const shadow = trackConfig.dropShadow
|
||||
filters.dropShadow(elPath, shadow)
|
||||
}
|
||||
|
||||
elRadialBarTrack.add(elPath)
|
||||
|
||||
elPath.attr('id', 'apexcharts-radialbarTrack-' + i)
|
||||
|
||||
this.animatePaths(elPath, {
|
||||
centerX: opts.centerX,
|
||||
centerY: opts.centerY,
|
||||
endAngle,
|
||||
startAngle,
|
||||
size: opts.size,
|
||||
i,
|
||||
totalItems: 2,
|
||||
animBeginArr: 0,
|
||||
dur: 0,
|
||||
isTrack: true,
|
||||
easing: w.globals.easing
|
||||
})
|
||||
}
|
||||
|
||||
return g
|
||||
}
|
||||
|
||||
drawArcs(opts) {
|
||||
let w = this.w
|
||||
// size, donutSize, centerX, centerY, colorArr, lineColorArr, sectorAngleArr, series
|
||||
|
||||
let graphics = new Graphics(this.ctx)
|
||||
let fill = new Fill(this.ctx)
|
||||
let filters = new Filters(this.ctx)
|
||||
let g = graphics.group()
|
||||
|
||||
let strokeWidth = this.getStrokeWidth(opts)
|
||||
opts.size = opts.size - strokeWidth / 2
|
||||
|
||||
let hollowFillID = w.config.plotOptions.radialBar.hollow.background
|
||||
let hollowSize =
|
||||
opts.size -
|
||||
strokeWidth * opts.series.length -
|
||||
this.margin * opts.series.length -
|
||||
(strokeWidth *
|
||||
parseInt(w.config.plotOptions.radialBar.track.strokeWidth, 10)) /
|
||||
100 /
|
||||
2
|
||||
|
||||
let hollowRadius = hollowSize - w.config.plotOptions.radialBar.hollow.margin
|
||||
|
||||
if (w.config.plotOptions.radialBar.hollow.image !== undefined) {
|
||||
hollowFillID = this.drawHollowImage(opts, g, hollowSize, hollowFillID)
|
||||
}
|
||||
|
||||
let elHollow = this.drawHollow({
|
||||
size: hollowRadius,
|
||||
centerX: opts.centerX,
|
||||
centerY: opts.centerY,
|
||||
fill: hollowFillID ? hollowFillID : 'transparent'
|
||||
})
|
||||
|
||||
if (w.config.plotOptions.radialBar.hollow.dropShadow.enabled) {
|
||||
const shadow = w.config.plotOptions.radialBar.hollow.dropShadow
|
||||
filters.dropShadow(elHollow, shadow)
|
||||
}
|
||||
|
||||
let shown = 1
|
||||
if (!this.radialDataLabels.total.show && w.globals.series.length > 1) {
|
||||
shown = 0
|
||||
}
|
||||
|
||||
let dataLabels = null
|
||||
|
||||
if (this.radialDataLabels.show) {
|
||||
dataLabels = this.renderInnerDataLabels(this.radialDataLabels, {
|
||||
hollowSize,
|
||||
centerX: opts.centerX,
|
||||
centerY: opts.centerY,
|
||||
opacity: shown
|
||||
})
|
||||
}
|
||||
|
||||
if (w.config.plotOptions.radialBar.hollow.position === 'back') {
|
||||
g.add(elHollow)
|
||||
if (dataLabels) {
|
||||
g.add(dataLabels)
|
||||
}
|
||||
}
|
||||
|
||||
let reverseLoop = false
|
||||
if (w.config.plotOptions.radialBar.inverseOrder) {
|
||||
reverseLoop = true
|
||||
}
|
||||
|
||||
for (
|
||||
let i = reverseLoop ? opts.series.length - 1 : 0;
|
||||
reverseLoop ? i >= 0 : i < opts.series.length;
|
||||
reverseLoop ? i-- : i++
|
||||
) {
|
||||
let elRadialBarArc = graphics.group({
|
||||
class: `apexcharts-series apexcharts-radial-series`,
|
||||
seriesName: Utils.escapeString(w.globals.seriesNames[i])
|
||||
})
|
||||
g.add(elRadialBarArc)
|
||||
|
||||
elRadialBarArc.attr({
|
||||
rel: i + 1,
|
||||
'data:realIndex': i
|
||||
})
|
||||
|
||||
this.ctx.series.addCollapsedClassToSeries(elRadialBarArc, i)
|
||||
|
||||
opts.size = opts.size - strokeWidth - this.margin
|
||||
|
||||
let pathFill = fill.fillPath({
|
||||
seriesNumber: i,
|
||||
size: opts.size,
|
||||
value: opts.series[i]
|
||||
})
|
||||
|
||||
let startAngle = this.startAngle
|
||||
let prevStartAngle
|
||||
|
||||
// if data exceeds 100, make it 100
|
||||
const dataValue =
|
||||
Utils.negToZero(opts.series[i] > 100 ? 100 : opts.series[i]) / 100
|
||||
|
||||
let endAngle = Math.round(this.totalAngle * dataValue) + this.startAngle
|
||||
|
||||
let prevEndAngle
|
||||
if (w.globals.dataChanged) {
|
||||
prevStartAngle = this.startAngle
|
||||
prevEndAngle =
|
||||
Math.round(
|
||||
(this.totalAngle * Utils.negToZero(w.globals.previousPaths[i])) /
|
||||
100
|
||||
) + prevStartAngle
|
||||
}
|
||||
|
||||
const currFullAngle = Math.abs(endAngle) + Math.abs(startAngle)
|
||||
if (currFullAngle >= 360) {
|
||||
endAngle = endAngle - 0.01
|
||||
}
|
||||
|
||||
const prevFullAngle = Math.abs(prevEndAngle) + Math.abs(prevStartAngle)
|
||||
if (prevFullAngle >= 360) {
|
||||
prevEndAngle = prevEndAngle - 0.01
|
||||
}
|
||||
|
||||
let angle = endAngle - startAngle
|
||||
|
||||
const dashArray = Array.isArray(w.config.stroke.dashArray)
|
||||
? w.config.stroke.dashArray[i]
|
||||
: w.config.stroke.dashArray
|
||||
|
||||
let elPath = graphics.drawPath({
|
||||
d: '',
|
||||
stroke: pathFill,
|
||||
strokeWidth,
|
||||
fill: 'none',
|
||||
fillOpacity: w.config.fill.opacity,
|
||||
classes: 'apexcharts-radialbar-area apexcharts-radialbar-slice-' + i,
|
||||
strokeDashArray: dashArray
|
||||
})
|
||||
|
||||
Graphics.setAttrs(elPath.node, {
|
||||
'data:angle': angle,
|
||||
'data:value': opts.series[i]
|
||||
})
|
||||
|
||||
if (w.config.chart.dropShadow.enabled) {
|
||||
const shadow = w.config.chart.dropShadow
|
||||
filters.dropShadow(elPath, shadow, i)
|
||||
}
|
||||
filters.setSelectionFilter(elPath, 0, i)
|
||||
|
||||
this.addListeners(elPath, this.radialDataLabels)
|
||||
|
||||
elRadialBarArc.add(elPath)
|
||||
|
||||
elPath.attr({
|
||||
index: 0,
|
||||
j: i
|
||||
})
|
||||
|
||||
let dur = 0
|
||||
if (this.initialAnim && !w.globals.resized && !w.globals.dataChanged) {
|
||||
dur = w.config.chart.animations.speed
|
||||
}
|
||||
|
||||
if (w.globals.dataChanged) {
|
||||
dur = w.config.chart.animations.dynamicAnimation.speed
|
||||
}
|
||||
this.animDur = dur / (opts.series.length * 1.2) + this.animDur
|
||||
this.animBeginArr.push(this.animDur)
|
||||
|
||||
this.animatePaths(elPath, {
|
||||
centerX: opts.centerX,
|
||||
centerY: opts.centerY,
|
||||
endAngle,
|
||||
startAngle,
|
||||
prevEndAngle,
|
||||
prevStartAngle,
|
||||
size: opts.size,
|
||||
i,
|
||||
totalItems: 2,
|
||||
animBeginArr: this.animBeginArr,
|
||||
dur,
|
||||
shouldSetPrevPaths: true,
|
||||
easing: w.globals.easing
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
g,
|
||||
elHollow,
|
||||
dataLabels
|
||||
}
|
||||
}
|
||||
|
||||
drawHollow(opts) {
|
||||
const graphics = new Graphics(this.ctx)
|
||||
|
||||
let circle = graphics.drawCircle(opts.size * 2)
|
||||
|
||||
circle.attr({
|
||||
class: 'apexcharts-radialbar-hollow',
|
||||
cx: opts.centerX,
|
||||
cy: opts.centerY,
|
||||
r: opts.size,
|
||||
fill: opts.fill
|
||||
})
|
||||
|
||||
return circle
|
||||
}
|
||||
|
||||
drawHollowImage(opts, g, hollowSize, hollowFillID) {
|
||||
const w = this.w
|
||||
let fill = new Fill(this.ctx)
|
||||
|
||||
let randID = Utils.randomId()
|
||||
let hollowFillImg = w.config.plotOptions.radialBar.hollow.image
|
||||
|
||||
if (w.config.plotOptions.radialBar.hollow.imageClipped) {
|
||||
fill.clippedImgArea({
|
||||
width: hollowSize,
|
||||
height: hollowSize,
|
||||
image: hollowFillImg,
|
||||
patternID: `pattern${w.globals.cuid}${randID}`
|
||||
})
|
||||
hollowFillID = `url(#pattern${w.globals.cuid}${randID})`
|
||||
} else {
|
||||
const imgWidth = w.config.plotOptions.radialBar.hollow.imageWidth
|
||||
const imgHeight = w.config.plotOptions.radialBar.hollow.imageHeight
|
||||
if (imgWidth === undefined && imgHeight === undefined) {
|
||||
let image = w.globals.dom.Paper.image(hollowFillImg).loaded(function(
|
||||
loader
|
||||
) {
|
||||
this.move(
|
||||
opts.centerX -
|
||||
loader.width / 2 +
|
||||
w.config.plotOptions.radialBar.hollow.imageOffsetX,
|
||||
opts.centerY -
|
||||
loader.height / 2 +
|
||||
w.config.plotOptions.radialBar.hollow.imageOffsetY
|
||||
)
|
||||
})
|
||||
g.add(image)
|
||||
} else {
|
||||
let image = w.globals.dom.Paper.image(hollowFillImg).loaded(function(
|
||||
loader
|
||||
) {
|
||||
this.move(
|
||||
opts.centerX -
|
||||
imgWidth / 2 +
|
||||
w.config.plotOptions.radialBar.hollow.imageOffsetX,
|
||||
opts.centerY -
|
||||
imgHeight / 2 +
|
||||
w.config.plotOptions.radialBar.hollow.imageOffsetY
|
||||
)
|
||||
this.size(imgWidth, imgHeight)
|
||||
})
|
||||
g.add(image)
|
||||
}
|
||||
}
|
||||
return hollowFillID
|
||||
}
|
||||
|
||||
getStrokeWidth(opts) {
|
||||
const w = this.w
|
||||
return (
|
||||
(opts.size *
|
||||
(100 - parseInt(w.config.plotOptions.radialBar.hollow.size, 10))) /
|
||||
100 /
|
||||
(opts.series.length + 1) -
|
||||
this.margin
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Radial
|
||||
454
cao_sunyata/static/libs/apexcharts/src/charts/RangeBar.js
Normal file
454
cao_sunyata/static/libs/apexcharts/src/charts/RangeBar.js
Normal file
@@ -0,0 +1,454 @@
|
||||
import Bar from './Bar'
|
||||
import Graphics from '../modules/Graphics'
|
||||
import Utils from '../utils/Utils'
|
||||
import DateTime from '../utils/DateTime'
|
||||
|
||||
/**
|
||||
* ApexCharts RangeBar Class responsible for drawing Range/Timeline Bars.
|
||||
*
|
||||
* @module RangeBar
|
||||
**/
|
||||
|
||||
class RangeBar extends Bar {
|
||||
draw(series, seriesIndex) {
|
||||
let w = this.w
|
||||
let graphics = new Graphics(this.ctx)
|
||||
|
||||
this.rangeBarOptions = this.w.config.plotOptions.rangeBar
|
||||
|
||||
this.series = series
|
||||
this.seriesRangeStart = w.globals.seriesRangeStart
|
||||
this.seriesRangeEnd = w.globals.seriesRangeEnd
|
||||
|
||||
this.barHelpers.initVariables(series)
|
||||
|
||||
let ret = graphics.group({
|
||||
class: 'apexcharts-rangebar-series apexcharts-plot-series'
|
||||
})
|
||||
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
let x,
|
||||
y,
|
||||
xDivision, // xDivision is the GRIDWIDTH divided by number of datapoints (columns)
|
||||
yDivision, // yDivision is the GRIDHEIGHT divided by number of datapoints (bars)
|
||||
zeroH, // zeroH is the baseline where 0 meets y axis
|
||||
zeroW // zeroW is the baseline where 0 meets x axis
|
||||
|
||||
let realIndex = w.globals.comboCharts ? seriesIndex[i] : i
|
||||
|
||||
// el to which series will be drawn
|
||||
let elSeries = graphics.group({
|
||||
class: `apexcharts-series`,
|
||||
seriesName: Utils.escapeString(w.globals.seriesNames[realIndex]),
|
||||
rel: i + 1,
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
this.ctx.series.addCollapsedClassToSeries(elSeries, realIndex)
|
||||
|
||||
if (series[i].length > 0) {
|
||||
this.visibleI = this.visibleI + 1
|
||||
}
|
||||
|
||||
let barHeight = 0
|
||||
let barWidth = 0
|
||||
|
||||
if (this.yRatio.length > 1) {
|
||||
this.yaxisIndex = realIndex
|
||||
}
|
||||
|
||||
let initPositions = this.barHelpers.initialPositions()
|
||||
|
||||
y = initPositions.y
|
||||
zeroW = initPositions.zeroW
|
||||
|
||||
x = initPositions.x
|
||||
barWidth = initPositions.barWidth
|
||||
xDivision = initPositions.xDivision
|
||||
zeroH = initPositions.zeroH
|
||||
|
||||
// eldatalabels
|
||||
let elDataLabelsWrap = graphics.group({
|
||||
class: 'apexcharts-datalabels',
|
||||
'data:realIndex': realIndex
|
||||
})
|
||||
|
||||
let elGoalsMarkers = graphics.group({
|
||||
class: 'apexcharts-rangebar-goals-markers',
|
||||
style: `pointer-events: none`
|
||||
})
|
||||
|
||||
for (let j = 0; j < w.globals.dataPoints; j++) {
|
||||
const strokeWidth = this.barHelpers.getStrokeWidth(i, j, realIndex)
|
||||
|
||||
const y1 = this.seriesRangeStart[i][j]
|
||||
const y2 = this.seriesRangeEnd[i][j]
|
||||
|
||||
let paths = null
|
||||
let barYPosition = null
|
||||
const params = { x, y, strokeWidth, elSeries }
|
||||
|
||||
yDivision = initPositions.yDivision
|
||||
barHeight = initPositions.barHeight
|
||||
|
||||
if (this.isHorizontal) {
|
||||
barYPosition = y + barHeight * this.visibleI
|
||||
|
||||
let seriesLen = this.seriesLen
|
||||
if (w.config.plotOptions.bar.rangeBarGroupRows) {
|
||||
seriesLen = 1
|
||||
}
|
||||
|
||||
let srty = (yDivision - barHeight * seriesLen) / 2
|
||||
|
||||
if (typeof w.config.series[i].data[j] === 'undefined') {
|
||||
// no data exists for further indexes, hence we need to get out the innr loop.
|
||||
// As we are iterating over total datapoints, there is a possiblity the series might not have data for j index
|
||||
break
|
||||
}
|
||||
|
||||
if (w.config.series[i].data[j].x) {
|
||||
let positions = this.detectOverlappingBars({
|
||||
i,
|
||||
j,
|
||||
barYPosition,
|
||||
srty,
|
||||
barHeight,
|
||||
yDivision,
|
||||
initPositions
|
||||
})
|
||||
|
||||
barHeight = positions.barHeight
|
||||
barYPosition = positions.barYPosition
|
||||
}
|
||||
|
||||
paths = this.drawRangeBarPaths({
|
||||
indexes: { i, j, realIndex },
|
||||
barHeight,
|
||||
barYPosition,
|
||||
zeroW,
|
||||
yDivision,
|
||||
y1,
|
||||
y2,
|
||||
...params
|
||||
})
|
||||
|
||||
barWidth = paths.barWidth
|
||||
} else {
|
||||
paths = this.drawRangeColumnPaths({
|
||||
indexes: { i, j, realIndex },
|
||||
zeroH,
|
||||
barWidth,
|
||||
xDivision,
|
||||
...params
|
||||
})
|
||||
|
||||
barHeight = paths.barHeight
|
||||
}
|
||||
|
||||
const barGoalLine = this.barHelpers.drawGoalLine({
|
||||
barXPosition: paths.barXPosition,
|
||||
barYPosition,
|
||||
goalX: paths.goalX,
|
||||
goalY: paths.goalY,
|
||||
barHeight,
|
||||
barWidth
|
||||
})
|
||||
|
||||
if (barGoalLine) {
|
||||
elGoalsMarkers.add(barGoalLine)
|
||||
}
|
||||
|
||||
y = paths.y
|
||||
x = paths.x
|
||||
|
||||
let pathFill = this.barHelpers.getPathFillColor(series, i, j, realIndex)
|
||||
|
||||
let lineFill = w.globals.stroke.colors[realIndex]
|
||||
|
||||
this.renderSeries({
|
||||
realIndex,
|
||||
pathFill,
|
||||
lineFill,
|
||||
j,
|
||||
i,
|
||||
x,
|
||||
y,
|
||||
y1,
|
||||
y2,
|
||||
pathFrom: paths.pathFrom,
|
||||
pathTo: paths.pathTo,
|
||||
strokeWidth,
|
||||
elSeries,
|
||||
series,
|
||||
barHeight,
|
||||
barYPosition,
|
||||
barWidth,
|
||||
elDataLabelsWrap,
|
||||
elGoalsMarkers,
|
||||
visibleSeries: this.visibleI,
|
||||
type: 'rangebar'
|
||||
})
|
||||
}
|
||||
|
||||
ret.add(elSeries)
|
||||
}
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
detectOverlappingBars({
|
||||
i,
|
||||
j,
|
||||
barYPosition,
|
||||
srty,
|
||||
barHeight,
|
||||
yDivision,
|
||||
initPositions
|
||||
}) {
|
||||
const w = this.w
|
||||
let overlaps = []
|
||||
let rangeName = w.config.series[i].data[j].rangeName
|
||||
|
||||
const labelX = w.config.series[i].data[j].x
|
||||
const rowIndex = w.globals.labels.indexOf(labelX)
|
||||
const overlappedIndex = w.globals.seriesRangeBar[i].findIndex(
|
||||
(tx) => tx.x === labelX && tx.overlaps.length > 0
|
||||
)
|
||||
|
||||
if (w.config.plotOptions.bar.rangeBarGroupRows) {
|
||||
barYPosition = srty + yDivision * rowIndex
|
||||
} else {
|
||||
barYPosition = srty + barHeight * this.visibleI + yDivision * rowIndex
|
||||
}
|
||||
|
||||
if (overlappedIndex > -1 && !w.config.plotOptions.bar.rangeBarOverlap) {
|
||||
overlaps = w.globals.seriesRangeBar[i][overlappedIndex].overlaps
|
||||
|
||||
if (overlaps.indexOf(rangeName) > -1) {
|
||||
barHeight = initPositions.barHeight / overlaps.length
|
||||
|
||||
barYPosition =
|
||||
barHeight * this.visibleI +
|
||||
(yDivision * (100 - parseInt(this.barOptions.barHeight, 10))) /
|
||||
100 /
|
||||
2 +
|
||||
barHeight * (this.visibleI + overlaps.indexOf(rangeName)) +
|
||||
yDivision * rowIndex
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
barYPosition,
|
||||
barHeight
|
||||
}
|
||||
}
|
||||
|
||||
drawRangeColumnPaths({
|
||||
indexes,
|
||||
x,
|
||||
strokeWidth,
|
||||
xDivision,
|
||||
barWidth,
|
||||
zeroH
|
||||
}) {
|
||||
let w = this.w
|
||||
|
||||
let i = indexes.i
|
||||
let j = indexes.j
|
||||
|
||||
const yRatio = this.yRatio[this.yaxisIndex]
|
||||
let realIndex = indexes.realIndex
|
||||
|
||||
const range = this.getRangeValue(realIndex, j)
|
||||
|
||||
let y1 = Math.min(range.start, range.end)
|
||||
let y2 = Math.max(range.start, range.end)
|
||||
|
||||
if (w.globals.isXNumeric) {
|
||||
x =
|
||||
(w.globals.seriesX[i][j] - w.globals.minX) / this.xRatio - barWidth / 2
|
||||
}
|
||||
|
||||
let barXPosition = x + barWidth * this.visibleI
|
||||
|
||||
if (
|
||||
typeof this.series[i][j] === 'undefined' ||
|
||||
this.series[i][j] === null
|
||||
) {
|
||||
y1 = zeroH
|
||||
} else {
|
||||
y1 = zeroH - y1 / yRatio
|
||||
y2 = zeroH - y2 / yRatio
|
||||
}
|
||||
const barHeight = Math.abs(y2 - y1)
|
||||
|
||||
const paths = this.barHelpers.getColumnPaths({
|
||||
barXPosition,
|
||||
barWidth,
|
||||
y1,
|
||||
y2,
|
||||
strokeWidth: this.strokeWidth,
|
||||
series: this.seriesRangeEnd,
|
||||
realIndex: indexes.realIndex,
|
||||
i: realIndex,
|
||||
j,
|
||||
w
|
||||
})
|
||||
|
||||
if (!w.globals.isXNumeric) {
|
||||
x = x + xDivision
|
||||
}
|
||||
|
||||
return {
|
||||
pathTo: paths.pathTo,
|
||||
pathFrom: paths.pathFrom,
|
||||
barHeight,
|
||||
x,
|
||||
y: y2,
|
||||
goalY: this.barHelpers.getGoalValues('y', null, zeroH, i, j),
|
||||
barXPosition
|
||||
}
|
||||
}
|
||||
|
||||
drawRangeBarPaths({
|
||||
indexes,
|
||||
y,
|
||||
y1,
|
||||
y2,
|
||||
yDivision,
|
||||
barHeight,
|
||||
barYPosition,
|
||||
zeroW
|
||||
}) {
|
||||
let w = this.w
|
||||
|
||||
const x1 = zeroW + y1 / this.invertedYRatio
|
||||
const x2 = zeroW + y2 / this.invertedYRatio
|
||||
|
||||
const barWidth = Math.abs(x2 - x1)
|
||||
|
||||
const paths = this.barHelpers.getBarpaths({
|
||||
barYPosition,
|
||||
barHeight,
|
||||
x1,
|
||||
x2,
|
||||
strokeWidth: this.strokeWidth,
|
||||
series: this.seriesRangeEnd,
|
||||
i: indexes.realIndex,
|
||||
realIndex: indexes.realIndex,
|
||||
j: indexes.j,
|
||||
w
|
||||
})
|
||||
|
||||
if (!w.globals.isXNumeric) {
|
||||
y = y + yDivision
|
||||
}
|
||||
|
||||
return {
|
||||
pathTo: paths.pathTo,
|
||||
pathFrom: paths.pathFrom,
|
||||
barWidth,
|
||||
x: x2,
|
||||
goalX: this.barHelpers.getGoalValues(
|
||||
'x',
|
||||
zeroW,
|
||||
null,
|
||||
indexes.realIndex,
|
||||
indexes.j
|
||||
),
|
||||
y
|
||||
}
|
||||
}
|
||||
|
||||
getRangeValue(i, j) {
|
||||
const w = this.w
|
||||
return {
|
||||
start: w.globals.seriesRangeStart[i][j],
|
||||
end: w.globals.seriesRangeEnd[i][j]
|
||||
}
|
||||
}
|
||||
|
||||
getTooltipValues({ ctx, seriesIndex, dataPointIndex, y1, y2, w }) {
|
||||
let start = w.globals.seriesRangeStart[seriesIndex][dataPointIndex]
|
||||
let end = w.globals.seriesRangeEnd[seriesIndex][dataPointIndex]
|
||||
let ylabel = w.globals.labels[dataPointIndex]
|
||||
let seriesName = w.config.series[seriesIndex].name
|
||||
? w.config.series[seriesIndex].name
|
||||
: ''
|
||||
const yLbFormatter = w.config.tooltip.y.formatter
|
||||
const yLbTitleFormatter = w.config.tooltip.y.title.formatter
|
||||
|
||||
const opts = {
|
||||
w,
|
||||
seriesIndex,
|
||||
dataPointIndex,
|
||||
start,
|
||||
end
|
||||
}
|
||||
|
||||
if (typeof yLbTitleFormatter === 'function') {
|
||||
seriesName = yLbTitleFormatter(seriesName, opts)
|
||||
}
|
||||
|
||||
if (Number.isFinite(y1) && Number.isFinite(y2)) {
|
||||
start = y1
|
||||
end = y2
|
||||
|
||||
if (w.config.series[seriesIndex].data[dataPointIndex].x) {
|
||||
ylabel = w.config.series[seriesIndex].data[dataPointIndex].x + ':'
|
||||
}
|
||||
|
||||
if (typeof yLbFormatter === 'function') {
|
||||
ylabel = yLbFormatter(ylabel, opts)
|
||||
}
|
||||
}
|
||||
|
||||
let startVal = ''
|
||||
let endVal = ''
|
||||
|
||||
const color = w.globals.colors[seriesIndex]
|
||||
if (w.config.tooltip.x.formatter === undefined) {
|
||||
if (w.config.xaxis.type === 'datetime') {
|
||||
let datetimeObj = new DateTime(ctx)
|
||||
startVal = datetimeObj.formatDate(
|
||||
datetimeObj.getDate(start),
|
||||
w.config.tooltip.x.format
|
||||
)
|
||||
endVal = datetimeObj.formatDate(
|
||||
datetimeObj.getDate(end),
|
||||
w.config.tooltip.x.format
|
||||
)
|
||||
} else {
|
||||
startVal = start
|
||||
endVal = end
|
||||
}
|
||||
} else {
|
||||
startVal = w.config.tooltip.x.formatter(start)
|
||||
endVal = w.config.tooltip.x.formatter(end)
|
||||
}
|
||||
|
||||
return { start, end, startVal, endVal, ylabel, color, seriesName }
|
||||
}
|
||||
|
||||
buildCustomTooltipHTML({ color, seriesName, ylabel, start, end }) {
|
||||
return (
|
||||
'<div class="apexcharts-tooltip-rangebar">' +
|
||||
'<div> <span class="series-name" style="color: ' +
|
||||
color +
|
||||
'">' +
|
||||
(seriesName ? seriesName : '') +
|
||||
'</span></div>' +
|
||||
'<div> <span class="category">' +
|
||||
ylabel +
|
||||
' </span> <span class="value start-value">' +
|
||||
start +
|
||||
'</span> <span class="separator">-</span> <span class="value end-value">' +
|
||||
end +
|
||||
'</span></div>' +
|
||||
'</div>'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default RangeBar
|
||||
267
cao_sunyata/static/libs/apexcharts/src/charts/Scatter.js
Normal file
267
cao_sunyata/static/libs/apexcharts/src/charts/Scatter.js
Normal file
@@ -0,0 +1,267 @@
|
||||
import Animations from '../modules/Animations'
|
||||
import Fill from '../modules/Fill'
|
||||
import Filters from '../modules/Filters'
|
||||
import Graphics from '../modules/Graphics'
|
||||
import Markers from '../modules/Markers'
|
||||
|
||||
/**
|
||||
* ApexCharts Scatter Class.
|
||||
* This Class also handles bubbles chart as currently there is no major difference in drawing them,
|
||||
* @module Scatter
|
||||
**/
|
||||
export default class Scatter {
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx
|
||||
this.w = ctx.w
|
||||
|
||||
this.initialAnim = this.w.config.chart.animations.enabled
|
||||
this.dynamicAnim =
|
||||
this.initialAnim &&
|
||||
this.w.config.chart.animations.dynamicAnimation.enabled
|
||||
}
|
||||
|
||||
draw(elSeries, j, opts) {
|
||||
let w = this.w
|
||||
|
||||
let graphics = new Graphics(this.ctx)
|
||||
|
||||
let realIndex = opts.realIndex
|
||||
let pointsPos = opts.pointsPos
|
||||
let zRatio = opts.zRatio
|
||||
let elPointsMain = opts.elParent
|
||||
|
||||
let elPointsWrap = graphics.group({
|
||||
class: `apexcharts-series-markers apexcharts-series-${w.config.chart.type}`
|
||||
})
|
||||
|
||||
elPointsWrap.attr('clip-path', `url(#gridRectMarkerMask${w.globals.cuid})`)
|
||||
|
||||
if (Array.isArray(pointsPos.x)) {
|
||||
for (let q = 0; q < pointsPos.x.length; q++) {
|
||||
let dataPointIndex = j + 1
|
||||
let shouldDraw = true
|
||||
|
||||
// a small hack as we have 2 points for the first val to connect it
|
||||
if (j === 0 && q === 0) dataPointIndex = 0
|
||||
if (j === 0 && q === 1) dataPointIndex = 1
|
||||
|
||||
let radius = 0
|
||||
let finishRadius = w.globals.markers.size[realIndex]
|
||||
|
||||
if (zRatio !== Infinity) {
|
||||
// means we have a bubble
|
||||
finishRadius = w.globals.seriesZ[realIndex][dataPointIndex] / zRatio
|
||||
|
||||
const bubble = w.config.plotOptions.bubble
|
||||
if (bubble.minBubbleRadius && finishRadius < bubble.minBubbleRadius) {
|
||||
finishRadius = bubble.minBubbleRadius
|
||||
}
|
||||
|
||||
if (bubble.maxBubbleRadius && finishRadius > bubble.maxBubbleRadius) {
|
||||
finishRadius = bubble.maxBubbleRadius
|
||||
}
|
||||
}
|
||||
|
||||
if (!w.config.chart.animations.enabled) {
|
||||
radius = finishRadius
|
||||
}
|
||||
|
||||
let x = pointsPos.x[q]
|
||||
let y = pointsPos.y[q]
|
||||
|
||||
radius = radius || 0
|
||||
|
||||
if (
|
||||
y === null ||
|
||||
typeof w.globals.series[realIndex][dataPointIndex] === 'undefined'
|
||||
) {
|
||||
shouldDraw = false
|
||||
}
|
||||
|
||||
if (shouldDraw) {
|
||||
const point = this.drawPoint(
|
||||
x,
|
||||
y,
|
||||
radius,
|
||||
finishRadius,
|
||||
realIndex,
|
||||
dataPointIndex,
|
||||
j
|
||||
)
|
||||
elPointsWrap.add(point)
|
||||
}
|
||||
|
||||
elPointsMain.add(elPointsWrap)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawPoint(x, y, radius, finishRadius, realIndex, dataPointIndex, j) {
|
||||
const w = this.w
|
||||
|
||||
let i = realIndex
|
||||
let anim = new Animations(this.ctx)
|
||||
let filters = new Filters(this.ctx)
|
||||
let fill = new Fill(this.ctx)
|
||||
let markers = new Markers(this.ctx)
|
||||
const graphics = new Graphics(this.ctx)
|
||||
|
||||
const markerConfig = markers.getMarkerConfig({
|
||||
cssClass: 'apexcharts-marker',
|
||||
seriesIndex: i,
|
||||
dataPointIndex,
|
||||
finishRadius:
|
||||
w.config.chart.type === 'bubble' ||
|
||||
(w.globals.comboCharts &&
|
||||
w.config.series[realIndex] &&
|
||||
w.config.series[realIndex].type === 'bubble')
|
||||
? finishRadius
|
||||
: null
|
||||
})
|
||||
|
||||
finishRadius = markerConfig.pSize
|
||||
|
||||
let pathFillCircle = fill.fillPath({
|
||||
seriesNumber: realIndex,
|
||||
dataPointIndex,
|
||||
color: markerConfig.pointFillColor,
|
||||
patternUnits: 'objectBoundingBox',
|
||||
value: w.globals.series[realIndex][j]
|
||||
})
|
||||
|
||||
let el
|
||||
if (markerConfig.shape === 'circle') {
|
||||
el = graphics.drawCircle(radius)
|
||||
} else if (
|
||||
markerConfig.shape === 'square' ||
|
||||
markerConfig.shape === 'rect'
|
||||
) {
|
||||
el = graphics.drawRect(
|
||||
0,
|
||||
0,
|
||||
markerConfig.width - markerConfig.pointStrokeWidth / 2,
|
||||
markerConfig.height - markerConfig.pointStrokeWidth / 2,
|
||||
markerConfig.pRadius
|
||||
)
|
||||
}
|
||||
|
||||
if (w.config.series[i].data[dataPointIndex]) {
|
||||
if (w.config.series[i].data[dataPointIndex].fillColor) {
|
||||
pathFillCircle = w.config.series[i].data[dataPointIndex].fillColor
|
||||
}
|
||||
}
|
||||
|
||||
el.attr({
|
||||
x: x - markerConfig.width / 2 - markerConfig.pointStrokeWidth / 2,
|
||||
y: y - markerConfig.height / 2 - markerConfig.pointStrokeWidth / 2,
|
||||
cx: x,
|
||||
cy: y,
|
||||
fill: pathFillCircle,
|
||||
'fill-opacity': markerConfig.pointFillOpacity,
|
||||
stroke: markerConfig.pointStrokeColor,
|
||||
r: finishRadius,
|
||||
'stroke-width': markerConfig.pointStrokeWidth,
|
||||
'stroke-dasharray': markerConfig.pointStrokeDashArray,
|
||||
'stroke-opacity': markerConfig.pointStrokeOpacity
|
||||
})
|
||||
|
||||
if (w.config.chart.dropShadow.enabled) {
|
||||
const dropShadow = w.config.chart.dropShadow
|
||||
filters.dropShadow(el, dropShadow, realIndex)
|
||||
}
|
||||
|
||||
if (this.initialAnim && !w.globals.dataChanged && !w.globals.resized) {
|
||||
let speed = w.config.chart.animations.speed
|
||||
|
||||
anim.animateMarker(
|
||||
el,
|
||||
0,
|
||||
markerConfig.shape === 'circle'
|
||||
? finishRadius
|
||||
: { width: markerConfig.width, height: markerConfig.height },
|
||||
speed,
|
||||
w.globals.easing,
|
||||
() => {
|
||||
window.setTimeout(() => {
|
||||
anim.animationCompleted(el)
|
||||
}, 100)
|
||||
}
|
||||
)
|
||||
} else {
|
||||
w.globals.animationEnded = true
|
||||
}
|
||||
|
||||
if (w.globals.dataChanged && markerConfig.shape === 'circle') {
|
||||
if (this.dynamicAnim) {
|
||||
let speed = w.config.chart.animations.dynamicAnimation.speed
|
||||
let prevX, prevY, prevR
|
||||
|
||||
let prevPathJ = null
|
||||
|
||||
prevPathJ =
|
||||
w.globals.previousPaths[realIndex] &&
|
||||
w.globals.previousPaths[realIndex][j]
|
||||
|
||||
if (typeof prevPathJ !== 'undefined' && prevPathJ !== null) {
|
||||
// series containing less elements will ignore these values and revert to 0
|
||||
prevX = prevPathJ.x
|
||||
prevY = prevPathJ.y
|
||||
prevR =
|
||||
typeof prevPathJ.r !== 'undefined' ? prevPathJ.r : finishRadius
|
||||
}
|
||||
|
||||
for (let cs = 0; cs < w.globals.collapsedSeries.length; cs++) {
|
||||
if (w.globals.collapsedSeries[cs].index === realIndex) {
|
||||
speed = 1
|
||||
finishRadius = 0
|
||||
}
|
||||
}
|
||||
|
||||
if (x === 0 && y === 0) finishRadius = 0
|
||||
|
||||
anim.animateCircle(
|
||||
el,
|
||||
{
|
||||
cx: prevX,
|
||||
cy: prevY,
|
||||
r: prevR
|
||||
},
|
||||
{
|
||||
cx: x,
|
||||
cy: y,
|
||||
r: finishRadius
|
||||
},
|
||||
speed,
|
||||
w.globals.easing
|
||||
)
|
||||
} else {
|
||||
el.attr({
|
||||
r: finishRadius
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
el.attr({
|
||||
rel: dataPointIndex,
|
||||
j: dataPointIndex,
|
||||
index: realIndex,
|
||||
'default-marker-size': finishRadius
|
||||
})
|
||||
|
||||
filters.setSelectionFilter(el, realIndex, dataPointIndex)
|
||||
markers.addEvents(el)
|
||||
|
||||
el.node.classList.add('apexcharts-marker')
|
||||
|
||||
return el
|
||||
}
|
||||
|
||||
centerTextInBubble(y) {
|
||||
let w = this.w
|
||||
y = y + parseInt(w.config.dataLabels.style.fontSize, 10) / 4
|
||||
|
||||
return {
|
||||
y
|
||||
}
|
||||
}
|
||||
}
|
||||
302
cao_sunyata/static/libs/apexcharts/src/charts/Treemap.js
Normal file
302
cao_sunyata/static/libs/apexcharts/src/charts/Treemap.js
Normal file
@@ -0,0 +1,302 @@
|
||||
import '../libs/Treemap-squared'
|
||||
import Graphics from '../modules/Graphics'
|
||||
import Animations from '../modules/Animations'
|
||||
import Fill from '../modules/Fill'
|
||||
import Helpers from './common/treemap/Helpers'
|
||||
import Filters from '../modules/Filters'
|
||||
|
||||
import Utils from '../utils/Utils'
|
||||
|
||||
/**
|
||||
* ApexCharts TreemapChart Class.
|
||||
* @module TreemapChart
|
||||
**/
|
||||
|
||||
export default class TreemapChart {
|
||||
constructor(ctx, xyRatios) {
|
||||
this.ctx = ctx
|
||||
this.w = ctx.w
|
||||
|
||||
this.strokeWidth = this.w.config.stroke.width
|
||||
this.helpers = new Helpers(ctx)
|
||||
this.dynamicAnim = this.w.config.chart.animations.dynamicAnimation
|
||||
|
||||
this.labels = []
|
||||
}
|
||||
|
||||
draw(series) {
|
||||
let w = this.w
|
||||
const graphics = new Graphics(this.ctx)
|
||||
const fill = new Fill(this.ctx)
|
||||
|
||||
let ret = graphics.group({
|
||||
class: 'apexcharts-treemap'
|
||||
})
|
||||
|
||||
if (w.globals.noData) return ret
|
||||
|
||||
let ser = []
|
||||
series.forEach((s) => {
|
||||
let d = s.map((v) => {
|
||||
return Math.abs(v)
|
||||
})
|
||||
ser.push(d)
|
||||
})
|
||||
|
||||
this.negRange = this.helpers.checkColorRange()
|
||||
|
||||
w.config.series.forEach((s, i) => {
|
||||
s.data.forEach((l) => {
|
||||
if (!Array.isArray(this.labels[i])) this.labels[i] = []
|
||||
this.labels[i].push(l.x)
|
||||
})
|
||||
})
|
||||
|
||||
const nodes = window.TreemapSquared.generate(
|
||||
ser,
|
||||
w.globals.gridWidth,
|
||||
w.globals.gridHeight
|
||||
)
|
||||
|
||||
nodes.forEach((node, i) => {
|
||||
let elSeries = graphics.group({
|
||||
class: `apexcharts-series apexcharts-treemap-series`,
|
||||
seriesName: Utils.escapeString(w.globals.seriesNames[i]),
|
||||
rel: i + 1,
|
||||
'data:realIndex': i
|
||||
})
|
||||
|
||||
if (w.config.chart.dropShadow.enabled) {
|
||||
const shadow = w.config.chart.dropShadow
|
||||
const filters = new Filters(this.ctx)
|
||||
filters.dropShadow(ret, shadow, i)
|
||||
}
|
||||
|
||||
let elDataLabelWrap = graphics.group({
|
||||
class: 'apexcharts-data-labels'
|
||||
})
|
||||
|
||||
node.forEach((r, j) => {
|
||||
const x1 = r[0]
|
||||
const y1 = r[1]
|
||||
const x2 = r[2]
|
||||
const y2 = r[3]
|
||||
let elRect = graphics.drawRect(
|
||||
x1,
|
||||
y1,
|
||||
x2 - x1,
|
||||
y2 - y1,
|
||||
0,
|
||||
'#fff',
|
||||
1,
|
||||
this.strokeWidth,
|
||||
w.config.plotOptions.treemap.useFillColorAsStroke
|
||||
? color
|
||||
: w.globals.stroke.colors[i]
|
||||
)
|
||||
elRect.attr({
|
||||
cx: x1,
|
||||
cy: y1,
|
||||
index: i,
|
||||
i,
|
||||
j,
|
||||
width: x2 - x1,
|
||||
height: y2 - y1
|
||||
})
|
||||
|
||||
let colorProps = this.helpers.getShadeColor(
|
||||
w.config.chart.type,
|
||||
i,
|
||||
j,
|
||||
this.negRange
|
||||
)
|
||||
let color = colorProps.color
|
||||
|
||||
if (
|
||||
typeof w.config.series[i].data[j] !== 'undefined' &&
|
||||
w.config.series[i].data[j].fillColor
|
||||
) {
|
||||
color = w.config.series[i].data[j].fillColor
|
||||
}
|
||||
let pathFill = fill.fillPath({
|
||||
color,
|
||||
seriesNumber: i,
|
||||
dataPointIndex: j
|
||||
})
|
||||
|
||||
elRect.node.classList.add('apexcharts-treemap-rect')
|
||||
|
||||
elRect.attr({
|
||||
fill: pathFill
|
||||
})
|
||||
|
||||
this.helpers.addListeners(elRect)
|
||||
|
||||
let fromRect = {
|
||||
x: x1 + (x2 - x1) / 2,
|
||||
y: y1 + (y2 - y1) / 2,
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
let toRect = {
|
||||
x: x1,
|
||||
y: y1,
|
||||
width: x2 - x1,
|
||||
height: y2 - y1
|
||||
}
|
||||
|
||||
if (w.config.chart.animations.enabled && !w.globals.dataChanged) {
|
||||
let speed = 1
|
||||
if (!w.globals.resized) {
|
||||
speed = w.config.chart.animations.speed
|
||||
}
|
||||
this.animateTreemap(elRect, fromRect, toRect, speed)
|
||||
}
|
||||
if (w.globals.dataChanged) {
|
||||
let speed = 1
|
||||
if (this.dynamicAnim.enabled && w.globals.shouldAnimate) {
|
||||
speed = this.dynamicAnim.speed
|
||||
|
||||
if (
|
||||
w.globals.previousPaths[i] &&
|
||||
w.globals.previousPaths[i][j] &&
|
||||
w.globals.previousPaths[i][j].rect
|
||||
) {
|
||||
fromRect = w.globals.previousPaths[i][j].rect
|
||||
}
|
||||
|
||||
this.animateTreemap(elRect, fromRect, toRect, speed)
|
||||
}
|
||||
}
|
||||
|
||||
const fontSize = this.getFontSize(r)
|
||||
|
||||
let formattedText = w.config.dataLabels.formatter(this.labels[i][j], {
|
||||
value: w.globals.series[i][j],
|
||||
seriesIndex: i,
|
||||
dataPointIndex: j,
|
||||
w
|
||||
})
|
||||
let dataLabels = this.helpers.calculateDataLabels({
|
||||
text: formattedText,
|
||||
x: (x1 + x2) / 2,
|
||||
y: (y1 + y2) / 2 + this.strokeWidth / 2 + fontSize / 3,
|
||||
i,
|
||||
j,
|
||||
colorProps,
|
||||
fontSize,
|
||||
series
|
||||
})
|
||||
if (w.config.dataLabels.enabled && dataLabels) {
|
||||
this.rotateToFitLabel(dataLabels, formattedText, x1, y1, x2, y2)
|
||||
}
|
||||
elSeries.add(elRect)
|
||||
|
||||
if (dataLabels !== null) {
|
||||
elSeries.add(dataLabels)
|
||||
}
|
||||
})
|
||||
elSeries.add(elDataLabelWrap)
|
||||
|
||||
ret.add(elSeries)
|
||||
})
|
||||
|
||||
return ret
|
||||
}
|
||||
|
||||
// This calculates a font-size based upon
|
||||
// average label length and the size of the box the label is
|
||||
// going into. The maximum font size is set in chart config.
|
||||
getFontSize(coordinates) {
|
||||
const w = this.w
|
||||
|
||||
// total length of labels (i.e [["Italy"],["Spain", "Greece"]] -> 16)
|
||||
function totalLabelLength(arr) {
|
||||
let i,
|
||||
total = 0
|
||||
if (Array.isArray(arr[0])) {
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
total += totalLabelLength(arr[i])
|
||||
}
|
||||
} else {
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
total += arr[i].length
|
||||
}
|
||||
}
|
||||
return total
|
||||
}
|
||||
|
||||
// count of labels (i.e [["Italy"],["Spain", "Greece"]] -> 3)
|
||||
function countLabels(arr) {
|
||||
let i,
|
||||
total = 0
|
||||
if (Array.isArray(arr[0])) {
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
total += countLabels(arr[i])
|
||||
}
|
||||
} else {
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
total += 1
|
||||
}
|
||||
}
|
||||
return total
|
||||
}
|
||||
let averagelabelsize =
|
||||
totalLabelLength(this.labels) / countLabels(this.labels)
|
||||
|
||||
function fontSize(width, height) {
|
||||
// the font size should be proportional to the size of the box (and the value)
|
||||
// otherwise you can end up creating a visual distortion where two boxes of identical
|
||||
// size have different sized labels, and thus make it look as if the two boxes
|
||||
// represent different sizes
|
||||
let area = width * height
|
||||
let arearoot = Math.pow(area, 0.5)
|
||||
return Math.min(
|
||||
arearoot / averagelabelsize,
|
||||
parseInt(w.config.dataLabels.style.fontSize, 10)
|
||||
)
|
||||
}
|
||||
|
||||
return fontSize(
|
||||
coordinates[2] - coordinates[0],
|
||||
coordinates[3] - coordinates[1]
|
||||
)
|
||||
}
|
||||
|
||||
rotateToFitLabel(elText, text, x1, y1, x2, y2) {
|
||||
const graphics = new Graphics(this.ctx)
|
||||
const textRect = graphics.getTextRects(text)
|
||||
//if the label fits better sideways then rotate it
|
||||
if (textRect.width + 5 > x2 - x1 && textRect.width <= y2 - y1) {
|
||||
let labelRotatingCenter = graphics.rotateAroundCenter(elText.node)
|
||||
|
||||
elText.node.setAttribute(
|
||||
'transform',
|
||||
`rotate(-90 ${labelRotatingCenter.x} ${labelRotatingCenter.y})`
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
animateTreemap(el, fromRect, toRect, speed) {
|
||||
const animations = new Animations(this.ctx)
|
||||
animations.animateRect(
|
||||
el,
|
||||
{
|
||||
x: fromRect.x,
|
||||
y: fromRect.y,
|
||||
width: fromRect.width,
|
||||
height: fromRect.height
|
||||
},
|
||||
{
|
||||
x: toRect.x,
|
||||
y: toRect.y,
|
||||
width: toRect.width,
|
||||
height: toRect.height
|
||||
},
|
||||
speed,
|
||||
() => {
|
||||
animations.animationCompleted(el)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,442 @@
|
||||
import Graphics from '../../../modules/Graphics'
|
||||
import DataLabels from '../../../modules/DataLabels'
|
||||
|
||||
export default class BarDataLabels {
|
||||
constructor(barCtx) {
|
||||
this.w = barCtx.w
|
||||
this.barCtx = barCtx
|
||||
}
|
||||
/** handleBarDataLabels is used to calculate the positions for the data-labels
|
||||
* It also sets the element's data attr for bars and calls drawCalculatedBarDataLabels()
|
||||
* After calculating, it also calls the function to draw data labels
|
||||
* @memberof Bar
|
||||
* @param {object} {barProps} most of the bar properties used throughout the bar
|
||||
* drawing function
|
||||
* @return {object} dataLabels node-element which you can append later
|
||||
**/
|
||||
handleBarDataLabels(opts) {
|
||||
let {
|
||||
x,
|
||||
y,
|
||||
y1,
|
||||
y2,
|
||||
i,
|
||||
j,
|
||||
realIndex,
|
||||
series,
|
||||
barHeight,
|
||||
barWidth,
|
||||
barYPosition,
|
||||
visibleSeries,
|
||||
renderedPath
|
||||
} = opts
|
||||
let w = this.w
|
||||
let graphics = new Graphics(this.barCtx.ctx)
|
||||
|
||||
let strokeWidth = Array.isArray(this.barCtx.strokeWidth)
|
||||
? this.barCtx.strokeWidth[realIndex]
|
||||
: this.barCtx.strokeWidth
|
||||
|
||||
let bcx = x + parseFloat(barWidth * visibleSeries)
|
||||
let bcy = y + parseFloat(barHeight * visibleSeries)
|
||||
|
||||
if (w.globals.isXNumeric && !w.globals.isBarHorizontal) {
|
||||
bcx = x + parseFloat(barWidth * (visibleSeries + 1))
|
||||
bcy = y + parseFloat(barHeight * (visibleSeries + 1)) - strokeWidth
|
||||
}
|
||||
|
||||
let dataLabels = null
|
||||
let dataLabelsX = x
|
||||
let dataLabelsY = y
|
||||
let dataLabelsPos = {}
|
||||
let dataLabelsConfig = w.config.dataLabels
|
||||
let barDataLabelsConfig = this.barCtx.barOptions.dataLabels
|
||||
|
||||
if (typeof barYPosition !== 'undefined' && this.barCtx.isRangeBar) {
|
||||
bcy = barYPosition
|
||||
dataLabelsY = barYPosition
|
||||
}
|
||||
|
||||
const offX = dataLabelsConfig.offsetX
|
||||
const offY = dataLabelsConfig.offsetY
|
||||
|
||||
let textRects = {
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
if (w.config.dataLabels.enabled) {
|
||||
const yLabel = this.barCtx.series[i][j]
|
||||
|
||||
textRects = graphics.getTextRects(
|
||||
w.globals.yLabelFormatters[0](yLabel),
|
||||
parseFloat(dataLabelsConfig.style.fontSize)
|
||||
)
|
||||
}
|
||||
|
||||
const params = {
|
||||
x,
|
||||
y,
|
||||
i,
|
||||
j,
|
||||
renderedPath,
|
||||
bcx,
|
||||
bcy,
|
||||
barHeight,
|
||||
barWidth,
|
||||
textRects,
|
||||
strokeWidth,
|
||||
dataLabelsX,
|
||||
dataLabelsY,
|
||||
barDataLabelsConfig,
|
||||
offX,
|
||||
offY
|
||||
}
|
||||
|
||||
if (this.barCtx.isHorizontal) {
|
||||
dataLabelsPos = this.calculateBarsDataLabelsPosition(params)
|
||||
} else {
|
||||
dataLabelsPos = this.calculateColumnsDataLabelsPosition(params)
|
||||
}
|
||||
|
||||
renderedPath.attr({
|
||||
cy: dataLabelsPos.bcy,
|
||||
cx: dataLabelsPos.bcx,
|
||||
j,
|
||||
val: series[i][j],
|
||||
barHeight,
|
||||
barWidth
|
||||
})
|
||||
|
||||
dataLabels = this.drawCalculatedDataLabels({
|
||||
x: dataLabelsPos.dataLabelsX,
|
||||
y: dataLabelsPos.dataLabelsY,
|
||||
val: this.barCtx.isRangeBar ? [y1, y2] : series[i][j],
|
||||
i: realIndex,
|
||||
j,
|
||||
barWidth,
|
||||
barHeight,
|
||||
textRects,
|
||||
dataLabelsConfig
|
||||
})
|
||||
|
||||
return dataLabels
|
||||
}
|
||||
|
||||
calculateColumnsDataLabelsPosition(opts) {
|
||||
const w = this.w
|
||||
let {
|
||||
i,
|
||||
j,
|
||||
y,
|
||||
bcx,
|
||||
barWidth,
|
||||
barHeight,
|
||||
textRects,
|
||||
dataLabelsY,
|
||||
barDataLabelsConfig,
|
||||
strokeWidth,
|
||||
offX,
|
||||
offY
|
||||
} = opts
|
||||
|
||||
let dataLabelsX
|
||||
barHeight = Math.abs(barHeight)
|
||||
|
||||
let vertical =
|
||||
w.config.plotOptions.bar.dataLabels.orientation === 'vertical'
|
||||
|
||||
bcx = bcx - strokeWidth / 2
|
||||
|
||||
let dataPointsDividedWidth = w.globals.gridWidth / w.globals.dataPoints
|
||||
if (w.globals.isXNumeric) {
|
||||
dataLabelsX = bcx - barWidth / 2 + offX
|
||||
} else {
|
||||
dataLabelsX = bcx - dataPointsDividedWidth + barWidth / 2 + offX
|
||||
}
|
||||
|
||||
if (vertical) {
|
||||
const offsetDLX = 2
|
||||
dataLabelsX =
|
||||
dataLabelsX + textRects.height / 2 - strokeWidth / 2 - offsetDLX
|
||||
}
|
||||
|
||||
let valIsNegative = this.barCtx.series[i][j] < 0
|
||||
|
||||
let newY = y
|
||||
if (this.barCtx.isReversed) {
|
||||
newY = y - barHeight + (valIsNegative ? barHeight * 2 : 0)
|
||||
y = y - barHeight
|
||||
}
|
||||
|
||||
switch (barDataLabelsConfig.position) {
|
||||
case 'center':
|
||||
if (vertical) {
|
||||
if (valIsNegative) {
|
||||
dataLabelsY = newY + barHeight / 2 + offY
|
||||
} else {
|
||||
dataLabelsY = newY + barHeight / 2 - offY
|
||||
}
|
||||
} else {
|
||||
if (valIsNegative) {
|
||||
dataLabelsY = newY - barHeight / 2 + textRects.height / 2 + offY
|
||||
} else {
|
||||
dataLabelsY = newY + barHeight / 2 + textRects.height / 2 - offY
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'bottom':
|
||||
if (vertical) {
|
||||
if (valIsNegative) {
|
||||
dataLabelsY = newY + barHeight + offY
|
||||
} else {
|
||||
dataLabelsY = newY + barHeight - offY
|
||||
}
|
||||
} else {
|
||||
if (valIsNegative) {
|
||||
dataLabelsY =
|
||||
newY - barHeight + textRects.height + strokeWidth + offY
|
||||
} else {
|
||||
dataLabelsY =
|
||||
newY + barHeight - textRects.height / 2 + strokeWidth - offY
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'top':
|
||||
if (vertical) {
|
||||
if (valIsNegative) {
|
||||
dataLabelsY = newY + offY
|
||||
} else {
|
||||
dataLabelsY = newY - offY
|
||||
}
|
||||
} else {
|
||||
if (valIsNegative) {
|
||||
dataLabelsY = newY - textRects.height / 2 - offY
|
||||
} else {
|
||||
dataLabelsY = newY + textRects.height + offY
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
if (!w.config.chart.stacked) {
|
||||
if (dataLabelsY < 0) {
|
||||
dataLabelsY = 0 + strokeWidth
|
||||
} else if (dataLabelsY + textRects.height / 3 > w.globals.gridHeight) {
|
||||
dataLabelsY = w.globals.gridHeight - strokeWidth
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
bcx,
|
||||
bcy: y,
|
||||
dataLabelsX,
|
||||
dataLabelsY
|
||||
}
|
||||
}
|
||||
|
||||
calculateBarsDataLabelsPosition(opts) {
|
||||
const w = this.w
|
||||
let {
|
||||
x,
|
||||
i,
|
||||
j,
|
||||
bcy,
|
||||
barHeight,
|
||||
barWidth,
|
||||
textRects,
|
||||
dataLabelsX,
|
||||
strokeWidth,
|
||||
barDataLabelsConfig,
|
||||
offX,
|
||||
offY
|
||||
} = opts
|
||||
|
||||
let dataPointsDividedHeight = w.globals.gridHeight / w.globals.dataPoints
|
||||
|
||||
barWidth = Math.abs(barWidth)
|
||||
|
||||
let dataLabelsY =
|
||||
bcy -
|
||||
(this.barCtx.isRangeBar ? 0 : dataPointsDividedHeight) +
|
||||
barHeight / 2 +
|
||||
textRects.height / 2 +
|
||||
offY -
|
||||
3
|
||||
|
||||
let valIsNegative = this.barCtx.series[i][j] < 0
|
||||
|
||||
let newX = x
|
||||
if (this.barCtx.isReversed) {
|
||||
newX = x + barWidth - (valIsNegative ? barWidth * 2 : 0)
|
||||
x = w.globals.gridWidth - barWidth
|
||||
}
|
||||
|
||||
switch (barDataLabelsConfig.position) {
|
||||
case 'center':
|
||||
if (valIsNegative) {
|
||||
dataLabelsX = newX + barWidth / 2 - offX
|
||||
} else {
|
||||
dataLabelsX =
|
||||
Math.max(textRects.width / 2, newX - barWidth / 2) + offX
|
||||
}
|
||||
break
|
||||
case 'bottom':
|
||||
if (valIsNegative) {
|
||||
dataLabelsX =
|
||||
newX +
|
||||
barWidth -
|
||||
strokeWidth -
|
||||
Math.round(textRects.width / 2) -
|
||||
offX
|
||||
} else {
|
||||
dataLabelsX =
|
||||
newX -
|
||||
barWidth +
|
||||
strokeWidth +
|
||||
Math.round(textRects.width / 2) +
|
||||
offX
|
||||
}
|
||||
break
|
||||
case 'top':
|
||||
if (valIsNegative) {
|
||||
dataLabelsX =
|
||||
newX - strokeWidth + Math.round(textRects.width / 2) - offX
|
||||
} else {
|
||||
dataLabelsX =
|
||||
newX - strokeWidth - Math.round(textRects.width / 2) + offX
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
if (!w.config.chart.stacked) {
|
||||
if (dataLabelsX < 0) {
|
||||
dataLabelsX = dataLabelsX + textRects.width + strokeWidth
|
||||
} else if (dataLabelsX + textRects.width / 2 > w.globals.gridWidth) {
|
||||
dataLabelsX = w.globals.gridWidth - textRects.width - strokeWidth
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
bcx: x,
|
||||
bcy,
|
||||
dataLabelsX,
|
||||
dataLabelsY
|
||||
}
|
||||
}
|
||||
|
||||
drawCalculatedDataLabels({
|
||||
x,
|
||||
y,
|
||||
val,
|
||||
i,
|
||||
j,
|
||||
textRects,
|
||||
barHeight,
|
||||
barWidth,
|
||||
dataLabelsConfig
|
||||
}) {
|
||||
const w = this.w
|
||||
let rotate = 'rotate(0)'
|
||||
if (w.config.plotOptions.bar.dataLabels.orientation === 'vertical')
|
||||
rotate = `rotate(-90, ${x}, ${y})`
|
||||
|
||||
const dataLabels = new DataLabels(this.barCtx.ctx)
|
||||
const graphics = new Graphics(this.barCtx.ctx)
|
||||
const formatter = dataLabelsConfig.formatter
|
||||
|
||||
let elDataLabelsWrap = null
|
||||
|
||||
const isSeriesNotCollapsed =
|
||||
w.globals.collapsedSeriesIndices.indexOf(i) > -1
|
||||
|
||||
if (dataLabelsConfig.enabled && !isSeriesNotCollapsed) {
|
||||
elDataLabelsWrap = graphics.group({
|
||||
class: 'apexcharts-data-labels',
|
||||
transform: rotate
|
||||
})
|
||||
|
||||
let text = ''
|
||||
if (typeof val !== 'undefined') {
|
||||
text = formatter(val, {
|
||||
seriesIndex: i,
|
||||
dataPointIndex: j,
|
||||
w
|
||||
})
|
||||
}
|
||||
|
||||
let valIsNegative = w.globals.series[i][j] < 0
|
||||
let position = w.config.plotOptions.bar.dataLabels.position
|
||||
if (w.config.plotOptions.bar.dataLabels.orientation === 'vertical') {
|
||||
if (position === 'top') {
|
||||
if (valIsNegative) dataLabelsConfig.textAnchor = 'end'
|
||||
else dataLabelsConfig.textAnchor = 'start'
|
||||
}
|
||||
if (position === 'center') {
|
||||
dataLabelsConfig.textAnchor = 'middle'
|
||||
}
|
||||
if (position === 'bottom') {
|
||||
if (valIsNegative) dataLabelsConfig.textAnchor = 'end'
|
||||
else dataLabelsConfig.textAnchor = 'start'
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
this.barCtx.isRangeBar &&
|
||||
this.barCtx.barOptions.dataLabels.hideOverflowingLabels
|
||||
) {
|
||||
// hide the datalabel if it cannot fit into the rect
|
||||
const txRect = graphics.getTextRects(
|
||||
text,
|
||||
parseFloat(dataLabelsConfig.style.fontSize)
|
||||
)
|
||||
if (barWidth < txRect.width) {
|
||||
text = ''
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
w.config.chart.stacked &&
|
||||
this.barCtx.barOptions.dataLabels.hideOverflowingLabels
|
||||
) {
|
||||
// if there is not enough space to draw the label in the bar/column rect, check hideOverflowingLabels property to prevent overflowing on wrong rect
|
||||
// Note: This issue is only seen in stacked charts
|
||||
if (this.barCtx.isHorizontal) {
|
||||
if (textRects.width / 1.6 > Math.abs(barWidth)) {
|
||||
text = ''
|
||||
}
|
||||
} else {
|
||||
if (textRects.height / 1.6 > Math.abs(barHeight)) {
|
||||
text = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let modifiedDataLabelsConfig = {
|
||||
...dataLabelsConfig
|
||||
}
|
||||
if (this.barCtx.isHorizontal) {
|
||||
if (val < 0) {
|
||||
if (dataLabelsConfig.textAnchor === 'start') {
|
||||
modifiedDataLabelsConfig.textAnchor = 'end'
|
||||
} else if (dataLabelsConfig.textAnchor === 'end') {
|
||||
modifiedDataLabelsConfig.textAnchor = 'start'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dataLabels.plotDataLabelsText({
|
||||
x,
|
||||
y,
|
||||
text,
|
||||
i,
|
||||
j,
|
||||
parent: elDataLabelsWrap,
|
||||
dataLabelsConfig: modifiedDataLabelsConfig,
|
||||
alwaysDrawDataLabel: true,
|
||||
offsetCorrection: true
|
||||
})
|
||||
}
|
||||
|
||||
return elDataLabelsWrap
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,638 @@
|
||||
import Fill from '../../../modules/Fill'
|
||||
import Graphics from '../../../modules/Graphics'
|
||||
import Series from '../../../modules/Series'
|
||||
|
||||
export default class Helpers {
|
||||
constructor(barCtx) {
|
||||
this.w = barCtx.w
|
||||
this.barCtx = barCtx
|
||||
}
|
||||
|
||||
initVariables(series) {
|
||||
const w = this.w
|
||||
this.barCtx.series = series
|
||||
this.barCtx.totalItems = 0
|
||||
this.barCtx.seriesLen = 0
|
||||
this.barCtx.visibleI = -1 // visible Series
|
||||
this.barCtx.visibleItems = 1 // number of visible bars after user zoomed in/out
|
||||
|
||||
for (let sl = 0; sl < series.length; sl++) {
|
||||
if (series[sl].length > 0) {
|
||||
this.barCtx.seriesLen = this.barCtx.seriesLen + 1
|
||||
this.barCtx.totalItems += series[sl].length
|
||||
}
|
||||
if (w.globals.isXNumeric) {
|
||||
// get max visible items
|
||||
for (let j = 0; j < series[sl].length; j++) {
|
||||
if (
|
||||
w.globals.seriesX[sl][j] > w.globals.minX &&
|
||||
w.globals.seriesX[sl][j] < w.globals.maxX
|
||||
) {
|
||||
this.barCtx.visibleItems++
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.barCtx.visibleItems = w.globals.dataPoints
|
||||
}
|
||||
}
|
||||
|
||||
if (this.barCtx.seriesLen === 0) {
|
||||
// A small adjustment when combo charts are used
|
||||
this.barCtx.seriesLen = 1
|
||||
}
|
||||
this.barCtx.zeroSerieses = []
|
||||
this.barCtx.radiusOnSeriesNumber = series.length - 1 // which series to draw ending shape on
|
||||
|
||||
if (!w.globals.comboCharts) {
|
||||
this.checkZeroSeries({ series })
|
||||
}
|
||||
}
|
||||
|
||||
initialPositions() {
|
||||
let w = this.w
|
||||
let x, y, yDivision, xDivision, barHeight, barWidth, zeroH, zeroW
|
||||
|
||||
let dataPoints = w.globals.dataPoints
|
||||
if (this.barCtx.isRangeBar) {
|
||||
// timeline rangebar chart
|
||||
dataPoints = w.globals.labels.length
|
||||
}
|
||||
|
||||
let seriesLen = this.barCtx.seriesLen
|
||||
if (w.config.plotOptions.bar.rangeBarGroupRows) {
|
||||
seriesLen = 1
|
||||
}
|
||||
|
||||
if (this.barCtx.isHorizontal) {
|
||||
// height divided into equal parts
|
||||
yDivision = w.globals.gridHeight / dataPoints
|
||||
barHeight = yDivision / seriesLen
|
||||
|
||||
if (w.globals.isXNumeric) {
|
||||
yDivision = w.globals.gridHeight / this.barCtx.totalItems
|
||||
barHeight = yDivision / this.barCtx.seriesLen
|
||||
}
|
||||
|
||||
barHeight =
|
||||
(barHeight * parseInt(this.barCtx.barOptions.barHeight, 10)) / 100
|
||||
|
||||
zeroW =
|
||||
this.barCtx.baseLineInvertedY +
|
||||
w.globals.padHorizontal +
|
||||
(this.barCtx.isReversed ? w.globals.gridWidth : 0) -
|
||||
(this.barCtx.isReversed ? this.barCtx.baseLineInvertedY * 2 : 0)
|
||||
|
||||
y = (yDivision - barHeight * this.barCtx.seriesLen) / 2
|
||||
} else {
|
||||
// width divided into equal parts
|
||||
xDivision = w.globals.gridWidth / this.barCtx.visibleItems
|
||||
if (w.config.xaxis.convertedCatToNumeric) {
|
||||
xDivision = w.globals.gridWidth / w.globals.dataPoints
|
||||
}
|
||||
barWidth =
|
||||
((xDivision / this.barCtx.seriesLen) *
|
||||
parseInt(this.barCtx.barOptions.columnWidth, 10)) /
|
||||
100
|
||||
|
||||
if (w.globals.isXNumeric) {
|
||||
// max barwidth should be equal to minXDiff to avoid overlap
|
||||
let xRatio = this.barCtx.xRatio
|
||||
if (w.config.xaxis.convertedCatToNumeric) {
|
||||
xRatio = this.barCtx.initialXRatio
|
||||
}
|
||||
if (
|
||||
w.globals.minXDiff &&
|
||||
w.globals.minXDiff !== 0.5 &&
|
||||
w.globals.minXDiff / xRatio > 0
|
||||
) {
|
||||
xDivision = w.globals.minXDiff / xRatio
|
||||
}
|
||||
|
||||
barWidth =
|
||||
((xDivision / this.barCtx.seriesLen) *
|
||||
parseInt(this.barCtx.barOptions.columnWidth, 10)) /
|
||||
100
|
||||
|
||||
if (barWidth < 1) {
|
||||
barWidth = 1
|
||||
}
|
||||
}
|
||||
|
||||
zeroH =
|
||||
w.globals.gridHeight -
|
||||
this.barCtx.baseLineY[this.barCtx.yaxisIndex] -
|
||||
(this.barCtx.isReversed ? w.globals.gridHeight : 0) +
|
||||
(this.barCtx.isReversed
|
||||
? this.barCtx.baseLineY[this.barCtx.yaxisIndex] * 2
|
||||
: 0)
|
||||
|
||||
x =
|
||||
w.globals.padHorizontal +
|
||||
(xDivision - barWidth * this.barCtx.seriesLen) / 2
|
||||
}
|
||||
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
yDivision,
|
||||
xDivision,
|
||||
barHeight,
|
||||
barWidth,
|
||||
zeroH,
|
||||
zeroW
|
||||
}
|
||||
}
|
||||
|
||||
getPathFillColor(series, i, j, realIndex) {
|
||||
const w = this.w
|
||||
let fill = new Fill(this.barCtx.ctx)
|
||||
|
||||
let fillColor = null
|
||||
let seriesNumber = this.barCtx.barOptions.distributed ? j : i
|
||||
|
||||
if (this.barCtx.barOptions.colors.ranges.length > 0) {
|
||||
const colorRange = this.barCtx.barOptions.colors.ranges
|
||||
colorRange.map((range) => {
|
||||
if (series[i][j] >= range.from && series[i][j] <= range.to) {
|
||||
fillColor = range.color
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (w.config.series[i].data[j] && w.config.series[i].data[j].fillColor) {
|
||||
fillColor = w.config.series[i].data[j].fillColor
|
||||
}
|
||||
|
||||
let pathFill = fill.fillPath({
|
||||
seriesNumber: this.barCtx.barOptions.distributed
|
||||
? seriesNumber
|
||||
: realIndex,
|
||||
dataPointIndex: j,
|
||||
color: fillColor,
|
||||
value: series[i][j]
|
||||
})
|
||||
|
||||
return pathFill
|
||||
}
|
||||
|
||||
getStrokeWidth(i, j, realIndex) {
|
||||
let strokeWidth = 0
|
||||
const w = this.w
|
||||
|
||||
if (
|
||||
typeof this.barCtx.series[i][j] === 'undefined' ||
|
||||
this.barCtx.series[i][j] === null
|
||||
) {
|
||||
this.barCtx.isNullValue = true
|
||||
} else {
|
||||
this.barCtx.isNullValue = false
|
||||
}
|
||||
if (w.config.stroke.show) {
|
||||
if (!this.barCtx.isNullValue) {
|
||||
strokeWidth = Array.isArray(this.barCtx.strokeWidth)
|
||||
? this.barCtx.strokeWidth[realIndex]
|
||||
: this.barCtx.strokeWidth
|
||||
}
|
||||
}
|
||||
return strokeWidth
|
||||
}
|
||||
|
||||
barBackground({ j, i, x1, x2, y1, y2, elSeries }) {
|
||||
const w = this.w
|
||||
const graphics = new Graphics(this.barCtx.ctx)
|
||||
|
||||
const sr = new Series(this.barCtx.ctx)
|
||||
let activeSeriesIndex = sr.getActiveConfigSeriesIndex()
|
||||
|
||||
if (
|
||||
this.barCtx.barOptions.colors.backgroundBarColors.length > 0 &&
|
||||
activeSeriesIndex === i
|
||||
) {
|
||||
if (j >= this.barCtx.barOptions.colors.backgroundBarColors.length) {
|
||||
j %= this.barCtx.barOptions.colors.backgroundBarColors.length
|
||||
}
|
||||
|
||||
let bcolor = this.barCtx.barOptions.colors.backgroundBarColors[j]
|
||||
let rect = graphics.drawRect(
|
||||
typeof x1 !== 'undefined' ? x1 : 0,
|
||||
typeof y1 !== 'undefined' ? y1 : 0,
|
||||
typeof x2 !== 'undefined' ? x2 : w.globals.gridWidth,
|
||||
typeof y2 !== 'undefined' ? y2 : w.globals.gridHeight,
|
||||
this.barCtx.barOptions.colors.backgroundBarRadius,
|
||||
bcolor,
|
||||
this.barCtx.barOptions.colors.backgroundBarOpacity
|
||||
)
|
||||
elSeries.add(rect)
|
||||
rect.node.classList.add('apexcharts-backgroundBar')
|
||||
}
|
||||
}
|
||||
|
||||
getColumnPaths({
|
||||
barWidth,
|
||||
barXPosition,
|
||||
yRatio,
|
||||
y1,
|
||||
y2,
|
||||
strokeWidth,
|
||||
series,
|
||||
realIndex,
|
||||
i,
|
||||
j,
|
||||
w
|
||||
}) {
|
||||
const graphics = new Graphics(this.barCtx.ctx)
|
||||
strokeWidth = Array.isArray(strokeWidth)
|
||||
? strokeWidth[realIndex]
|
||||
: strokeWidth
|
||||
if (!strokeWidth) strokeWidth = 0
|
||||
|
||||
let shapeOpts = {
|
||||
barWidth,
|
||||
strokeWidth,
|
||||
yRatio,
|
||||
barXPosition,
|
||||
y1,
|
||||
y2
|
||||
}
|
||||
let newPath = this.getRoundedBars(w, shapeOpts, series, i, j)
|
||||
|
||||
const x1 = barXPosition
|
||||
const x2 = barXPosition + barWidth
|
||||
|
||||
let pathTo = graphics.move(x1, y1)
|
||||
let pathFrom = graphics.move(x1, y1)
|
||||
|
||||
const sl = graphics.line(x2 - strokeWidth, y1)
|
||||
if (w.globals.previousPaths.length > 0) {
|
||||
pathFrom = this.barCtx.getPreviousPath(realIndex, j, false)
|
||||
}
|
||||
|
||||
pathTo =
|
||||
pathTo +
|
||||
graphics.line(x1, newPath.y2) +
|
||||
newPath.pathWithRadius +
|
||||
graphics.line(x2 - strokeWidth, newPath.y2) +
|
||||
sl +
|
||||
sl +
|
||||
'z'
|
||||
|
||||
// the lines in pathFrom are repeated to equal it to the points of pathTo
|
||||
// this is to avoid weird animation (bug in svg.js)
|
||||
pathFrom =
|
||||
pathFrom +
|
||||
graphics.line(x1, y1) +
|
||||
sl +
|
||||
sl +
|
||||
sl +
|
||||
sl +
|
||||
sl +
|
||||
graphics.line(x1, y1)
|
||||
|
||||
if (w.config.chart.stacked) {
|
||||
this.barCtx.yArrj.push(newPath.y2)
|
||||
this.barCtx.yArrjF.push(Math.abs(y1 - newPath.y2))
|
||||
this.barCtx.yArrjVal.push(this.barCtx.series[i][j])
|
||||
}
|
||||
|
||||
return {
|
||||
pathTo,
|
||||
pathFrom
|
||||
}
|
||||
}
|
||||
|
||||
getBarpaths({
|
||||
barYPosition,
|
||||
barHeight,
|
||||
x1,
|
||||
x2,
|
||||
strokeWidth,
|
||||
series,
|
||||
realIndex,
|
||||
i,
|
||||
j,
|
||||
w
|
||||
}) {
|
||||
const graphics = new Graphics(this.barCtx.ctx)
|
||||
strokeWidth = Array.isArray(strokeWidth)
|
||||
? strokeWidth[realIndex]
|
||||
: strokeWidth
|
||||
if (!strokeWidth) strokeWidth = 0
|
||||
|
||||
let shapeOpts = {
|
||||
barHeight,
|
||||
strokeWidth,
|
||||
barYPosition,
|
||||
x2,
|
||||
x1
|
||||
}
|
||||
|
||||
let newPath = this.getRoundedBars(w, shapeOpts, series, i, j)
|
||||
|
||||
let pathTo = graphics.move(x1, barYPosition)
|
||||
let pathFrom = graphics.move(x1, barYPosition)
|
||||
|
||||
if (w.globals.previousPaths.length > 0) {
|
||||
pathFrom = this.barCtx.getPreviousPath(realIndex, j, false)
|
||||
}
|
||||
|
||||
const y1 = barYPosition
|
||||
const y2 = barYPosition + barHeight
|
||||
|
||||
const sl = graphics.line(x1, y2 - strokeWidth)
|
||||
pathTo =
|
||||
pathTo +
|
||||
graphics.line(newPath.x2, y1) +
|
||||
newPath.pathWithRadius +
|
||||
graphics.line(newPath.x2, y2 - strokeWidth) +
|
||||
sl +
|
||||
sl +
|
||||
'z'
|
||||
|
||||
pathFrom =
|
||||
pathFrom +
|
||||
graphics.line(x1, y1) +
|
||||
sl +
|
||||
sl +
|
||||
sl +
|
||||
sl +
|
||||
sl +
|
||||
graphics.line(x1, y1)
|
||||
|
||||
if (w.config.chart.stacked) {
|
||||
this.barCtx.xArrj.push(newPath.x2)
|
||||
this.barCtx.xArrjF.push(Math.abs(x1 - newPath.x2))
|
||||
this.barCtx.xArrjVal.push(this.barCtx.series[i][j])
|
||||
}
|
||||
return {
|
||||
pathTo,
|
||||
pathFrom
|
||||
}
|
||||
}
|
||||
|
||||
/** getRoundedBars draws border radius for bars/columns
|
||||
* @memberof Bar
|
||||
* @param {object} w - chart context
|
||||
* @param {object} opts - consists several properties like barHeight/barWidth
|
||||
* @param {array} series - global primary series
|
||||
* @param {int} i - current iterating series's index
|
||||
* @param {int} j - series's j of i
|
||||
* @return {object} pathWithRadius - ending shape path string
|
||||
* newY/newX - which is calculated from existing x/y based on rounded border
|
||||
**/
|
||||
getRoundedBars(w, opts, series, i, j) {
|
||||
let graphics = new Graphics(this.barCtx.ctx)
|
||||
let radius = 0
|
||||
|
||||
const borderRadius = w.config.plotOptions.bar.borderRadius
|
||||
const borderRadiusIsArray = Array.isArray(borderRadius)
|
||||
if (borderRadiusIsArray) {
|
||||
const radiusIndex =
|
||||
i > borderRadius.length - 1 ? borderRadius.length - 1 : i
|
||||
radius = borderRadius[radiusIndex]
|
||||
} else {
|
||||
radius = borderRadius
|
||||
}
|
||||
|
||||
if (
|
||||
w.config.chart.stacked &&
|
||||
series.length > 1 &&
|
||||
i !== this.barCtx.radiusOnSeriesNumber &&
|
||||
!borderRadiusIsArray
|
||||
) {
|
||||
radius = 0
|
||||
}
|
||||
|
||||
if (this.barCtx.isHorizontal) {
|
||||
let pathWithRadius = ''
|
||||
let x2 = opts.x2
|
||||
|
||||
if (Math.abs(opts.x1 - opts.x2) < radius) {
|
||||
radius = Math.abs(opts.x1 - opts.x2)
|
||||
}
|
||||
|
||||
if (typeof series[i][j] !== 'undefined' || series[i][j] !== null) {
|
||||
let inverse = this.barCtx.isReversed
|
||||
? series[i][j] > 0
|
||||
: series[i][j] < 0
|
||||
|
||||
if (inverse) radius = radius * -1
|
||||
|
||||
x2 = x2 - radius
|
||||
|
||||
pathWithRadius =
|
||||
graphics.quadraticCurve(
|
||||
x2 + radius,
|
||||
opts.barYPosition,
|
||||
x2 + radius,
|
||||
opts.barYPosition + (!inverse ? radius : radius * -1)
|
||||
) +
|
||||
graphics.line(
|
||||
x2 + radius,
|
||||
opts.barYPosition +
|
||||
opts.barHeight -
|
||||
opts.strokeWidth -
|
||||
(!inverse ? radius : radius * -1)
|
||||
) +
|
||||
graphics.quadraticCurve(
|
||||
x2 + radius,
|
||||
opts.barYPosition + opts.barHeight - opts.strokeWidth,
|
||||
x2,
|
||||
opts.barYPosition + opts.barHeight - opts.strokeWidth
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
pathWithRadius,
|
||||
x2
|
||||
}
|
||||
} else {
|
||||
let pathWithRadius = ''
|
||||
let y2 = opts.y2
|
||||
|
||||
if (Math.abs(opts.y1 - opts.y2) < radius) {
|
||||
radius = Math.abs(opts.y1 - opts.y2)
|
||||
}
|
||||
|
||||
if (typeof series[i][j] !== 'undefined' || series[i][j] !== null) {
|
||||
let inverse = series[i][j] < 0
|
||||
|
||||
if (inverse) radius = radius * -1
|
||||
|
||||
y2 = y2 + radius
|
||||
|
||||
pathWithRadius =
|
||||
graphics.quadraticCurve(
|
||||
opts.barXPosition,
|
||||
y2 - radius,
|
||||
opts.barXPosition + (!inverse ? radius : radius * -1),
|
||||
y2 - radius
|
||||
) +
|
||||
graphics.line(
|
||||
opts.barXPosition +
|
||||
opts.barWidth -
|
||||
opts.strokeWidth -
|
||||
(!inverse ? radius : radius * -1),
|
||||
y2 - radius
|
||||
) +
|
||||
graphics.quadraticCurve(
|
||||
opts.barXPosition + opts.barWidth - opts.strokeWidth,
|
||||
y2 - radius,
|
||||
opts.barXPosition + opts.barWidth - opts.strokeWidth,
|
||||
y2
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
pathWithRadius,
|
||||
y2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkZeroSeries({ series }) {
|
||||
let w = this.w
|
||||
for (let zs = 0; zs < series.length; zs++) {
|
||||
let total = 0
|
||||
for (
|
||||
let zsj = 0;
|
||||
zsj < series[w.globals.maxValsInArrayIndex].length;
|
||||
zsj++
|
||||
) {
|
||||
total += series[zs][zsj]
|
||||
}
|
||||
if (total === 0) {
|
||||
this.barCtx.zeroSerieses.push(zs)
|
||||
}
|
||||
}
|
||||
|
||||
// After getting all zeroserieses, we need to ensure whether radiusOnSeriesNumber is not in that zeroseries array
|
||||
for (let s = series.length - 1; s >= 0; s--) {
|
||||
if (
|
||||
this.barCtx.zeroSerieses.indexOf(s) > -1 &&
|
||||
s === this.radiusOnSeriesNumber
|
||||
) {
|
||||
this.barCtx.radiusOnSeriesNumber -= 1
|
||||
}
|
||||
}
|
||||
|
||||
for (let s = series.length - 1; s >= 0; s--) {
|
||||
if (
|
||||
w.globals.collapsedSeriesIndices.indexOf(
|
||||
this.barCtx.radiusOnSeriesNumber
|
||||
) > -1
|
||||
) {
|
||||
this.barCtx.radiusOnSeriesNumber -= 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getXForValue(value, zeroW, zeroPositionForNull = true) {
|
||||
let xForVal = zeroPositionForNull ? zeroW : null
|
||||
if (typeof value !== 'undefined' && value !== null) {
|
||||
xForVal =
|
||||
zeroW +
|
||||
value / this.barCtx.invertedYRatio -
|
||||
(this.barCtx.isReversed ? value / this.barCtx.invertedYRatio : 0) * 2
|
||||
}
|
||||
return xForVal
|
||||
}
|
||||
|
||||
getYForValue(value, zeroH, zeroPositionForNull = true) {
|
||||
let yForVal = zeroPositionForNull ? zeroH : null
|
||||
if (typeof value !== 'undefined' && value !== null) {
|
||||
yForVal =
|
||||
zeroH -
|
||||
value / this.barCtx.yRatio[this.barCtx.yaxisIndex] +
|
||||
(this.barCtx.isReversed
|
||||
? value / this.barCtx.yRatio[this.barCtx.yaxisIndex]
|
||||
: 0) *
|
||||
2
|
||||
}
|
||||
return yForVal
|
||||
}
|
||||
|
||||
getGoalValues(type, zeroW, zeroH, i, j) {
|
||||
const w = this.w
|
||||
|
||||
let goals = []
|
||||
if (
|
||||
w.globals.seriesGoals[i] &&
|
||||
w.globals.seriesGoals[i][j] &&
|
||||
Array.isArray(w.globals.seriesGoals[i][j])
|
||||
) {
|
||||
w.globals.seriesGoals[i][j].forEach((goal) => {
|
||||
goals.push({
|
||||
[type]:
|
||||
type === 'x'
|
||||
? this.getXForValue(goal.value, zeroW, false)
|
||||
: this.getYForValue(goal.value, zeroH, false),
|
||||
attrs: goal
|
||||
})
|
||||
})
|
||||
}
|
||||
return goals
|
||||
}
|
||||
|
||||
drawGoalLine({
|
||||
barXPosition,
|
||||
barYPosition,
|
||||
goalX,
|
||||
goalY,
|
||||
barWidth,
|
||||
barHeight
|
||||
}) {
|
||||
let graphics = new Graphics(this.barCtx.ctx)
|
||||
const lineGroup = graphics.group({
|
||||
className: 'apexcharts-bar-goals-groups'
|
||||
})
|
||||
|
||||
let line = null
|
||||
if (this.barCtx.isHorizontal) {
|
||||
if (Array.isArray(goalX)) {
|
||||
goalX.forEach((goal) => {
|
||||
let sHeight =
|
||||
typeof goal.attrs.strokeHeight !== 'undefined'
|
||||
? goal.attrs.strokeHeight
|
||||
: barHeight / 2
|
||||
let y = barYPosition + sHeight + barHeight / 2
|
||||
|
||||
line = graphics.drawLine(
|
||||
goal.x,
|
||||
y - sHeight * 2,
|
||||
goal.x,
|
||||
y,
|
||||
goal.attrs.strokeColor ? goal.attrs.strokeColor : undefined,
|
||||
goal.attrs.strokeDashArray,
|
||||
goal.attrs.strokeWidth ? goal.attrs.strokeWidth : 2,
|
||||
goal.attrs.strokeLineCap
|
||||
)
|
||||
lineGroup.add(line)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (Array.isArray(goalY)) {
|
||||
goalY.forEach((goal) => {
|
||||
let sWidth =
|
||||
typeof goal.attrs.strokeWidth !== 'undefined'
|
||||
? goal.attrs.strokeWidth
|
||||
: barWidth / 2
|
||||
let x = barXPosition + sWidth + barWidth / 2
|
||||
|
||||
line = graphics.drawLine(
|
||||
x - sWidth * 2,
|
||||
goal.y,
|
||||
x,
|
||||
goal.y,
|
||||
goal.attrs.strokeColor ? goal.attrs.strokeColor : undefined,
|
||||
goal.attrs.strokeDashArray,
|
||||
goal.attrs.strokeHeight ? goal.attrs.strokeHeight : 2,
|
||||
goal.attrs.strokeLineCap
|
||||
)
|
||||
lineGroup.add(line)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return lineGroup
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import Graphics from '../../../modules/Graphics'
|
||||
|
||||
export default class CircularChartsHelpers {
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx
|
||||
this.w = ctx.w
|
||||
}
|
||||
|
||||
drawYAxisTexts(x, y, i, text) {
|
||||
const w = this.w
|
||||
|
||||
const yaxisConfig = w.config.yaxis[0]
|
||||
const formatter = w.globals.yLabelFormatters[0]
|
||||
|
||||
const graphics = new Graphics(this.ctx)
|
||||
const yaxisLabel = graphics.drawText({
|
||||
x: x + yaxisConfig.labels.offsetX,
|
||||
y: y + yaxisConfig.labels.offsetY,
|
||||
text: formatter(text, i),
|
||||
textAnchor: 'middle',
|
||||
fontSize: yaxisConfig.labels.style.fontSize,
|
||||
fontFamily: yaxisConfig.labels.style.fontFamily,
|
||||
foreColor: Array.isArray(yaxisConfig.labels.style.colors)
|
||||
? yaxisConfig.labels.style.colors[i]
|
||||
: yaxisConfig.labels.style.colors
|
||||
})
|
||||
|
||||
return yaxisLabel
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
import CoreUtils from '../../../modules/CoreUtils'
|
||||
import Utils from '../../../utils/Utils'
|
||||
|
||||
export default class Helpers {
|
||||
constructor(lineCtx) {
|
||||
this.w = lineCtx.w
|
||||
this.lineCtx = lineCtx
|
||||
}
|
||||
|
||||
sameValueSeriesFix(i, series) {
|
||||
const w = this.w
|
||||
|
||||
if (
|
||||
w.config.chart.type === 'line' &&
|
||||
(w.config.fill.type === 'gradient' ||
|
||||
w.config.fill.type[i] === 'gradient')
|
||||
) {
|
||||
const coreUtils = new CoreUtils(this.lineCtx.ctx, w)
|
||||
|
||||
// a small adjustment to allow gradient line to draw correctly for all same values
|
||||
/* #fix https://github.com/apexcharts/apexcharts.js/issues/358 */
|
||||
if (coreUtils.seriesHaveSameValues(i)) {
|
||||
let gSeries = series[i].slice()
|
||||
gSeries[gSeries.length - 1] = gSeries[gSeries.length - 1] + 0.000001
|
||||
series[i] = gSeries
|
||||
}
|
||||
}
|
||||
return series
|
||||
}
|
||||
|
||||
calculatePoints({ series, realIndex, x, y, i, j, prevY }) {
|
||||
let w = this.w
|
||||
|
||||
let ptX = []
|
||||
let ptY = []
|
||||
|
||||
if (j === 0) {
|
||||
let xPT1st =
|
||||
this.lineCtx.categoryAxisCorrection + w.config.markers.offsetX
|
||||
// the first point for line series
|
||||
// we need to check whether it's not a time series, because a time series may
|
||||
// start from the middle of the x axis
|
||||
if (w.globals.isXNumeric) {
|
||||
xPT1st =
|
||||
(w.globals.seriesX[realIndex][0] - w.globals.minX) /
|
||||
this.lineCtx.xRatio +
|
||||
w.config.markers.offsetX
|
||||
}
|
||||
|
||||
// push 2 points for the first data values
|
||||
ptX.push(xPT1st)
|
||||
ptY.push(
|
||||
Utils.isNumber(series[i][0]) ? prevY + w.config.markers.offsetY : null
|
||||
)
|
||||
ptX.push(x + w.config.markers.offsetX)
|
||||
ptY.push(
|
||||
Utils.isNumber(series[i][j + 1]) ? y + w.config.markers.offsetY : null
|
||||
)
|
||||
} else {
|
||||
ptX.push(x + w.config.markers.offsetX)
|
||||
ptY.push(
|
||||
Utils.isNumber(series[i][j + 1]) ? y + w.config.markers.offsetY : null
|
||||
)
|
||||
}
|
||||
|
||||
let pointsPos = {
|
||||
x: ptX,
|
||||
y: ptY
|
||||
}
|
||||
|
||||
return pointsPos
|
||||
}
|
||||
|
||||
checkPreviousPaths({ pathFromLine, pathFromArea, realIndex }) {
|
||||
let w = this.w
|
||||
|
||||
for (let pp = 0; pp < w.globals.previousPaths.length; pp++) {
|
||||
let gpp = w.globals.previousPaths[pp]
|
||||
|
||||
if (
|
||||
(gpp.type === 'line' || gpp.type === 'area') &&
|
||||
gpp.paths.length > 0 &&
|
||||
parseInt(gpp.realIndex, 10) === parseInt(realIndex, 10)
|
||||
) {
|
||||
if (gpp.type === 'line') {
|
||||
this.lineCtx.appendPathFrom = false
|
||||
pathFromLine = w.globals.previousPaths[pp].paths[0].d
|
||||
} else if (gpp.type === 'area') {
|
||||
this.lineCtx.appendPathFrom = false
|
||||
pathFromArea = w.globals.previousPaths[pp].paths[0].d
|
||||
|
||||
if (w.config.stroke.show && w.globals.previousPaths[pp].paths[1]) {
|
||||
pathFromLine = w.globals.previousPaths[pp].paths[1].d
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
pathFromLine,
|
||||
pathFromArea
|
||||
}
|
||||
}
|
||||
|
||||
determineFirstPrevY({ i, series, prevY, lineYPosition }) {
|
||||
let w = this.w
|
||||
if (typeof series[i][0] !== 'undefined') {
|
||||
if (w.config.chart.stacked) {
|
||||
if (i > 0) {
|
||||
// 1st y value of previous series
|
||||
lineYPosition = this.lineCtx.prevSeriesY[i - 1][0]
|
||||
} else {
|
||||
// the first series will not have prevY values
|
||||
lineYPosition = this.lineCtx.zeroY
|
||||
}
|
||||
} else {
|
||||
lineYPosition = this.lineCtx.zeroY
|
||||
}
|
||||
prevY =
|
||||
lineYPosition -
|
||||
series[i][0] / this.lineCtx.yRatio[this.lineCtx.yaxisIndex] +
|
||||
(this.lineCtx.isReversed
|
||||
? series[i][0] / this.lineCtx.yRatio[this.lineCtx.yaxisIndex]
|
||||
: 0) *
|
||||
2
|
||||
} else {
|
||||
// the first value in the current series is null
|
||||
if (
|
||||
w.config.chart.stacked &&
|
||||
i > 0 &&
|
||||
typeof series[i][0] === 'undefined'
|
||||
) {
|
||||
// check for undefined value (undefined value will occur when we clear the series while user clicks on legend to hide serieses)
|
||||
for (let s = i - 1; s >= 0; s--) {
|
||||
// for loop to get to 1st previous value until we get it
|
||||
if (series[s][0] !== null && typeof series[s][0] !== 'undefined') {
|
||||
lineYPosition = this.lineCtx.prevSeriesY[s][0]
|
||||
prevY = lineYPosition
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
prevY,
|
||||
lineYPosition
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
import Utils from '../../../utils/Utils'
|
||||
import Graphics from '../../../modules/Graphics'
|
||||
import DataLabels from '../../../modules/DataLabels'
|
||||
|
||||
export default class TreemapHelpers {
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx
|
||||
this.w = ctx.w
|
||||
}
|
||||
|
||||
checkColorRange() {
|
||||
const w = this.w
|
||||
|
||||
let negRange = false
|
||||
let chartOpts = w.config.plotOptions[w.config.chart.type]
|
||||
|
||||
if (chartOpts.colorScale.ranges.length > 0) {
|
||||
chartOpts.colorScale.ranges.map((range, index) => {
|
||||
if (range.from <= 0) {
|
||||
negRange = true
|
||||
}
|
||||
})
|
||||
}
|
||||
return negRange
|
||||
}
|
||||
|
||||
getShadeColor(chartType, i, j, negRange) {
|
||||
const w = this.w
|
||||
|
||||
let colorShadePercent = 1
|
||||
let shadeIntensity = w.config.plotOptions[chartType].shadeIntensity
|
||||
|
||||
const colorProps = this.determineColor(chartType, i, j)
|
||||
|
||||
if (w.globals.hasNegs || negRange) {
|
||||
if (w.config.plotOptions[chartType].reverseNegativeShade) {
|
||||
if (colorProps.percent < 0) {
|
||||
colorShadePercent =
|
||||
(colorProps.percent / 100) * (shadeIntensity * 1.25)
|
||||
} else {
|
||||
colorShadePercent =
|
||||
(1 - colorProps.percent / 100) * (shadeIntensity * 1.25)
|
||||
}
|
||||
} else {
|
||||
if (colorProps.percent <= 0) {
|
||||
colorShadePercent =
|
||||
1 - (1 + colorProps.percent / 100) * shadeIntensity
|
||||
} else {
|
||||
colorShadePercent = (1 - colorProps.percent / 100) * shadeIntensity
|
||||
}
|
||||
}
|
||||
} else {
|
||||
colorShadePercent = 1 - colorProps.percent / 100
|
||||
if (chartType === 'treemap') {
|
||||
colorShadePercent =
|
||||
(1 - colorProps.percent / 100) * (shadeIntensity * 1.25)
|
||||
}
|
||||
}
|
||||
|
||||
let color = colorProps.color
|
||||
let utils = new Utils()
|
||||
|
||||
if (w.config.plotOptions[chartType].enableShades) {
|
||||
if (this.w.config.theme.mode === 'dark') {
|
||||
color = Utils.hexToRgba(
|
||||
utils.shadeColor(colorShadePercent * -1, colorProps.color),
|
||||
w.config.fill.opacity
|
||||
)
|
||||
} else {
|
||||
color = Utils.hexToRgba(
|
||||
utils.shadeColor(colorShadePercent, colorProps.color),
|
||||
w.config.fill.opacity
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return { color, colorProps }
|
||||
}
|
||||
|
||||
determineColor(chartType, i, j) {
|
||||
const w = this.w
|
||||
|
||||
let val = w.globals.series[i][j]
|
||||
|
||||
let chartOpts = w.config.plotOptions[chartType]
|
||||
|
||||
let seriesNumber = chartOpts.colorScale.inverse ? j : i
|
||||
|
||||
if (chartOpts.distributed && w.config.chart.type === 'treemap') {
|
||||
seriesNumber = j
|
||||
}
|
||||
|
||||
let color = w.globals.colors[seriesNumber]
|
||||
let foreColor = null
|
||||
let min = Math.min(...w.globals.series[i])
|
||||
let max = Math.max(...w.globals.series[i])
|
||||
|
||||
if (!chartOpts.distributed && chartType === 'heatmap') {
|
||||
min = w.globals.minY
|
||||
max = w.globals.maxY
|
||||
}
|
||||
|
||||
if (typeof chartOpts.colorScale.min !== 'undefined') {
|
||||
min =
|
||||
chartOpts.colorScale.min < w.globals.minY
|
||||
? chartOpts.colorScale.min
|
||||
: w.globals.minY
|
||||
max =
|
||||
chartOpts.colorScale.max > w.globals.maxY
|
||||
? chartOpts.colorScale.max
|
||||
: w.globals.maxY
|
||||
}
|
||||
|
||||
let total = Math.abs(max) + Math.abs(min)
|
||||
|
||||
let percent = (100 * val) / (total === 0 ? total - 0.000001 : total)
|
||||
|
||||
if (chartOpts.colorScale.ranges.length > 0) {
|
||||
const colorRange = chartOpts.colorScale.ranges
|
||||
colorRange.map((range, index) => {
|
||||
if (val >= range.from && val <= range.to) {
|
||||
color = range.color
|
||||
foreColor = range.foreColor ? range.foreColor : null
|
||||
min = range.from
|
||||
max = range.to
|
||||
let rTotal = Math.abs(max) + Math.abs(min)
|
||||
percent = (100 * val) / (rTotal === 0 ? rTotal - 0.000001 : rTotal)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
color,
|
||||
foreColor,
|
||||
percent
|
||||
}
|
||||
}
|
||||
|
||||
calculateDataLabels({ text, x, y, i, j, colorProps, fontSize }) {
|
||||
let w = this.w
|
||||
let dataLabelsConfig = w.config.dataLabels
|
||||
|
||||
const graphics = new Graphics(this.ctx)
|
||||
|
||||
let dataLabels = new DataLabels(this.ctx)
|
||||
|
||||
let elDataLabelsWrap = null
|
||||
|
||||
if (dataLabelsConfig.enabled) {
|
||||
elDataLabelsWrap = graphics.group({
|
||||
class: 'apexcharts-data-labels'
|
||||
})
|
||||
|
||||
const offX = dataLabelsConfig.offsetX
|
||||
const offY = dataLabelsConfig.offsetY
|
||||
|
||||
let dataLabelsX = x + offX
|
||||
let dataLabelsY =
|
||||
y + parseFloat(dataLabelsConfig.style.fontSize) / 3 + offY
|
||||
|
||||
dataLabels.plotDataLabelsText({
|
||||
x: dataLabelsX,
|
||||
y: dataLabelsY,
|
||||
text,
|
||||
i,
|
||||
j,
|
||||
color: colorProps.foreColor,
|
||||
parent: elDataLabelsWrap,
|
||||
fontSize,
|
||||
dataLabelsConfig
|
||||
})
|
||||
}
|
||||
|
||||
return elDataLabelsWrap
|
||||
}
|
||||
|
||||
addListeners(elRect) {
|
||||
const graphics = new Graphics(this.ctx)
|
||||
elRect.node.addEventListener(
|
||||
'mouseenter',
|
||||
graphics.pathMouseEnter.bind(this, elRect)
|
||||
)
|
||||
elRect.node.addEventListener(
|
||||
'mouseleave',
|
||||
graphics.pathMouseLeave.bind(this, elRect)
|
||||
)
|
||||
elRect.node.addEventListener(
|
||||
'mousedown',
|
||||
graphics.pathMouseDown.bind(this, elRect)
|
||||
)
|
||||
}
|
||||
}
|
||||
290
cao_sunyata/static/libs/apexcharts/src/libs/Treemap-squared.js
Normal file
290
cao_sunyata/static/libs/apexcharts/src/libs/Treemap-squared.js
Normal file
@@ -0,0 +1,290 @@
|
||||
/*
|
||||
* treemap-squarify.js - open source implementation of squarified treemaps
|
||||
*
|
||||
* Treemap Squared 0.5 - Treemap Charting library
|
||||
*
|
||||
* https://github.com/imranghory/treemap-squared/
|
||||
*
|
||||
* Copyright (c) 2012 Imran Ghory (imranghory@gmail.com)
|
||||
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
|
||||
*
|
||||
*
|
||||
* Implementation of the squarify treemap algorithm described in:
|
||||
*
|
||||
* Bruls, Mark; Huizing, Kees; van Wijk, Jarke J. (2000), "Squarified treemaps"
|
||||
* in de Leeuw, W.; van Liere, R., Data Visualization 2000:
|
||||
* Proc. Joint Eurographics and IEEE TCVG Symp. on Visualization, Springer-Verlag, pp. 33–42.
|
||||
*
|
||||
* Paper is available online at: http://www.win.tue.nl/~vanwijk/stm.pdf
|
||||
*
|
||||
* The code in this file is completeley decoupled from the drawing code so it should be trivial
|
||||
* to port it to any other vector drawing library. Given an array of datapoints this library returns
|
||||
* an array of cartesian coordinates that represent the rectangles that make up the treemap.
|
||||
*
|
||||
* The library also supports multidimensional data (nested treemaps) and performs normalization on the data.
|
||||
*
|
||||
* See the README file for more details.
|
||||
*/
|
||||
|
||||
window.TreemapSquared = {}
|
||||
;(function() {
|
||||
'use strict'
|
||||
window.TreemapSquared.generate = (function() {
|
||||
function Container(xoffset, yoffset, width, height) {
|
||||
this.xoffset = xoffset // offset from the the top left hand corner
|
||||
this.yoffset = yoffset // ditto
|
||||
this.height = height
|
||||
this.width = width
|
||||
|
||||
this.shortestEdge = function() {
|
||||
return Math.min(this.height, this.width)
|
||||
}
|
||||
|
||||
// getCoordinates - for a row of boxes which we've placed
|
||||
// return an array of their cartesian coordinates
|
||||
this.getCoordinates = function(row) {
|
||||
let coordinates = []
|
||||
let subxoffset = this.xoffset,
|
||||
subyoffset = this.yoffset //our offset within the container
|
||||
let areawidth = sumArray(row) / this.height
|
||||
let areaheight = sumArray(row) / this.width
|
||||
let i
|
||||
|
||||
if (this.width >= this.height) {
|
||||
for (i = 0; i < row.length; i++) {
|
||||
coordinates.push([
|
||||
subxoffset,
|
||||
subyoffset,
|
||||
subxoffset + areawidth,
|
||||
subyoffset + row[i] / areawidth
|
||||
])
|
||||
subyoffset = subyoffset + row[i] / areawidth
|
||||
}
|
||||
} else {
|
||||
for (i = 0; i < row.length; i++) {
|
||||
coordinates.push([
|
||||
subxoffset,
|
||||
subyoffset,
|
||||
subxoffset + row[i] / areaheight,
|
||||
subyoffset + areaheight
|
||||
])
|
||||
subxoffset = subxoffset + row[i] / areaheight
|
||||
}
|
||||
}
|
||||
return coordinates
|
||||
}
|
||||
|
||||
// cutArea - once we've placed some boxes into an row we then need to identify the remaining area,
|
||||
// this function takes the area of the boxes we've placed and calculates the location and
|
||||
// dimensions of the remaining space and returns a container box defined by the remaining area
|
||||
this.cutArea = function(area) {
|
||||
let newcontainer
|
||||
|
||||
if (this.width >= this.height) {
|
||||
let areawidth = area / this.height
|
||||
let newwidth = this.width - areawidth
|
||||
newcontainer = new Container(
|
||||
this.xoffset + areawidth,
|
||||
this.yoffset,
|
||||
newwidth,
|
||||
this.height
|
||||
)
|
||||
} else {
|
||||
let areaheight = area / this.width
|
||||
let newheight = this.height - areaheight
|
||||
newcontainer = new Container(
|
||||
this.xoffset,
|
||||
this.yoffset + areaheight,
|
||||
this.width,
|
||||
newheight
|
||||
)
|
||||
}
|
||||
return newcontainer
|
||||
}
|
||||
}
|
||||
|
||||
// normalize - the Bruls algorithm assumes we're passing in areas that nicely fit into our
|
||||
// container box, this method takes our raw data and normalizes the data values into
|
||||
// area values so that this assumption is valid.
|
||||
function normalize(data, area) {
|
||||
let normalizeddata = []
|
||||
let sum = sumArray(data)
|
||||
let multiplier = area / sum
|
||||
let i
|
||||
|
||||
for (i = 0; i < data.length; i++) {
|
||||
normalizeddata[i] = data[i] * multiplier
|
||||
}
|
||||
return normalizeddata
|
||||
}
|
||||
|
||||
// treemapMultidimensional - takes multidimensional data (aka [[23,11],[11,32]] - nested array)
|
||||
// and recursively calls itself using treemapSingledimensional
|
||||
// to create a patchwork of treemaps and merge them
|
||||
function treemapMultidimensional(data, width, height, xoffset, yoffset) {
|
||||
xoffset = typeof xoffset === 'undefined' ? 0 : xoffset
|
||||
yoffset = typeof yoffset === 'undefined' ? 0 : yoffset
|
||||
|
||||
let mergeddata = []
|
||||
let mergedtreemap
|
||||
let results = []
|
||||
let i
|
||||
|
||||
if (isArray(data[0])) {
|
||||
// if we've got more dimensions of depth
|
||||
for (i = 0; i < data.length; i++) {
|
||||
mergeddata[i] = sumMultidimensionalArray(data[i])
|
||||
}
|
||||
mergedtreemap = treemapSingledimensional(
|
||||
mergeddata,
|
||||
width,
|
||||
height,
|
||||
xoffset,
|
||||
yoffset
|
||||
)
|
||||
|
||||
for (i = 0; i < data.length; i++) {
|
||||
results.push(
|
||||
treemapMultidimensional(
|
||||
data[i],
|
||||
mergedtreemap[i][2] - mergedtreemap[i][0],
|
||||
mergedtreemap[i][3] - mergedtreemap[i][1],
|
||||
mergedtreemap[i][0],
|
||||
mergedtreemap[i][1]
|
||||
)
|
||||
)
|
||||
}
|
||||
} else {
|
||||
results = treemapSingledimensional(
|
||||
data,
|
||||
width,
|
||||
height,
|
||||
xoffset,
|
||||
yoffset
|
||||
)
|
||||
}
|
||||
return results
|
||||
}
|
||||
|
||||
// treemapSingledimensional - simple wrapper around squarify
|
||||
function treemapSingledimensional(data, width, height, xoffset, yoffset) {
|
||||
xoffset = typeof xoffset === 'undefined' ? 0 : xoffset
|
||||
yoffset = typeof yoffset === 'undefined' ? 0 : yoffset
|
||||
|
||||
let rawtreemap = squarify(
|
||||
normalize(data, width * height),
|
||||
[],
|
||||
new Container(xoffset, yoffset, width, height),
|
||||
[]
|
||||
)
|
||||
return flattenTreemap(rawtreemap)
|
||||
}
|
||||
|
||||
// flattenTreemap - squarify implementation returns an array of arrays of coordinates
|
||||
// because we have a new array everytime we switch to building a new row
|
||||
// this converts it into an array of coordinates.
|
||||
function flattenTreemap(rawtreemap) {
|
||||
let flattreemap = []
|
||||
let i, j
|
||||
|
||||
for (i = 0; i < rawtreemap.length; i++) {
|
||||
for (j = 0; j < rawtreemap[i].length; j++) {
|
||||
flattreemap.push(rawtreemap[i][j])
|
||||
}
|
||||
}
|
||||
return flattreemap
|
||||
}
|
||||
|
||||
// squarify - as per the Bruls paper
|
||||
// plus coordinates stack and containers so we get
|
||||
// usable data out of it
|
||||
function squarify(data, currentrow, container, stack) {
|
||||
let length
|
||||
let nextdatapoint
|
||||
let newcontainer
|
||||
|
||||
if (data.length === 0) {
|
||||
stack.push(container.getCoordinates(currentrow))
|
||||
return
|
||||
}
|
||||
|
||||
length = container.shortestEdge()
|
||||
nextdatapoint = data[0]
|
||||
|
||||
if (improvesRatio(currentrow, nextdatapoint, length)) {
|
||||
currentrow.push(nextdatapoint)
|
||||
squarify(data.slice(1), currentrow, container, stack)
|
||||
} else {
|
||||
newcontainer = container.cutArea(sumArray(currentrow), stack)
|
||||
stack.push(container.getCoordinates(currentrow))
|
||||
squarify(data, [], newcontainer, stack)
|
||||
}
|
||||
return stack
|
||||
}
|
||||
|
||||
// improveRatio - implements the worse calculation and comparision as given in Bruls
|
||||
// (note the error in the original paper; fixed here)
|
||||
function improvesRatio(currentrow, nextnode, length) {
|
||||
let newrow
|
||||
|
||||
if (currentrow.length === 0) {
|
||||
return true
|
||||
}
|
||||
|
||||
newrow = currentrow.slice()
|
||||
newrow.push(nextnode)
|
||||
|
||||
let currentratio = calculateRatio(currentrow, length)
|
||||
let newratio = calculateRatio(newrow, length)
|
||||
|
||||
// the pseudocode in the Bruls paper has the direction of the comparison
|
||||
// wrong, this is the correct one.
|
||||
return currentratio >= newratio
|
||||
}
|
||||
|
||||
// calculateRatio - calculates the maximum width to height ratio of the
|
||||
// boxes in this row
|
||||
function calculateRatio(row, length) {
|
||||
let min = Math.min.apply(Math, row)
|
||||
let max = Math.max.apply(Math, row)
|
||||
let sum = sumArray(row)
|
||||
return Math.max(
|
||||
(Math.pow(length, 2) * max) / Math.pow(sum, 2),
|
||||
Math.pow(sum, 2) / (Math.pow(length, 2) * min)
|
||||
)
|
||||
}
|
||||
|
||||
// isArray - checks if arr is an array
|
||||
function isArray(arr) {
|
||||
return arr && arr.constructor === Array
|
||||
}
|
||||
|
||||
// sumArray - sums a single dimensional array
|
||||
function sumArray(arr) {
|
||||
let sum = 0
|
||||
let i
|
||||
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
sum += arr[i]
|
||||
}
|
||||
return sum
|
||||
}
|
||||
|
||||
// sumMultidimensionalArray - sums the values in a nested array (aka [[0,1],[[2,3]]])
|
||||
function sumMultidimensionalArray(arr) {
|
||||
let i,
|
||||
total = 0
|
||||
|
||||
if (isArray(arr[0])) {
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
total += sumMultidimensionalArray(arr[i])
|
||||
}
|
||||
} else {
|
||||
total = sumArray(arr)
|
||||
}
|
||||
return total
|
||||
}
|
||||
|
||||
return treemapMultidimensional
|
||||
})()
|
||||
})()
|
||||
63
cao_sunyata/static/libs/apexcharts/src/locales/ar.json
Normal file
63
cao_sunyata/static/libs/apexcharts/src/locales/ar.json
Normal file
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"name": "ar",
|
||||
"options": {
|
||||
"months": [
|
||||
"يناير",
|
||||
"فبراير",
|
||||
"مارس",
|
||||
"أبريل",
|
||||
"مايو",
|
||||
"يونيو",
|
||||
"يوليو",
|
||||
"أغسطس",
|
||||
"سبتمبر",
|
||||
"أكتوبر",
|
||||
"نوفمبر",
|
||||
"ديسمبر"
|
||||
],
|
||||
"shortMonths": [
|
||||
"يناير",
|
||||
"فبراير",
|
||||
"مارس",
|
||||
"أبريل",
|
||||
"مايو",
|
||||
"يونيو",
|
||||
"يوليو",
|
||||
"أغسطس",
|
||||
"سبتمبر",
|
||||
"أكتوبر",
|
||||
"نوفمبر",
|
||||
"ديسمبر"
|
||||
],
|
||||
"days": [
|
||||
"الأحد",
|
||||
"الإثنين",
|
||||
"الثلاثاء",
|
||||
"الأربعاء",
|
||||
"الخميس",
|
||||
"الجمعة",
|
||||
"السبت"
|
||||
],
|
||||
"shortDays": [
|
||||
"أحد",
|
||||
"إثنين",
|
||||
"ثلاثاء",
|
||||
"أربعاء",
|
||||
"خميس",
|
||||
"جمعة",
|
||||
"سبت"
|
||||
],
|
||||
"toolbar": {
|
||||
"exportToSVG": "تحميل بصيغة SVG",
|
||||
"exportToPNG": "تحميل بصيغة PNG",
|
||||
"exportToCSV": "تحميل بصيغة CSV",
|
||||
"menu": "القائمة",
|
||||
"selection": "تحديد",
|
||||
"selectionZoom": "تكبير التحديد",
|
||||
"zoomIn": "تكبير",
|
||||
"zoomOut": "تصغير",
|
||||
"pan": "تحريك",
|
||||
"reset": "إعادة التعيين"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/ca.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/ca.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "ca",
|
||||
"options": {
|
||||
"months": [
|
||||
"Gener",
|
||||
"Febrer",
|
||||
"Març",
|
||||
"Abril",
|
||||
"Maig",
|
||||
"Juny",
|
||||
"Juliol",
|
||||
"Agost",
|
||||
"Setembre",
|
||||
"Octubre",
|
||||
"Novembre",
|
||||
"Desembre"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Gen.",
|
||||
"Febr.",
|
||||
"Març",
|
||||
"Abr.",
|
||||
"Maig",
|
||||
"Juny",
|
||||
"Jul.",
|
||||
"Ag.",
|
||||
"Set.",
|
||||
"Oct.",
|
||||
"Nov.",
|
||||
"Des."
|
||||
],
|
||||
"days": [
|
||||
"Diumenge",
|
||||
"Dilluns",
|
||||
"Dimarts",
|
||||
"Dimecres",
|
||||
"Dijous",
|
||||
"Divendres",
|
||||
"Dissabte"
|
||||
],
|
||||
"shortDays": ["Dg", "Dl", "Dt", "Dc", "Dj", "Dv", "Ds"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Descarregar SVG",
|
||||
"exportToPNG": "Descarregar PNG",
|
||||
"exportToCSV": "Descarregar CSV",
|
||||
"menu": "Menú",
|
||||
"selection": "Seleccionar",
|
||||
"selectionZoom": "Seleccionar Zoom",
|
||||
"zoomIn": "Augmentar",
|
||||
"zoomOut": "Disminuir",
|
||||
"pan": "Navegació",
|
||||
"reset": "Reiniciar Zoom"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/cs.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/cs.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "cs",
|
||||
"options": {
|
||||
"months": [
|
||||
"Leden",
|
||||
"Únor",
|
||||
"Březen",
|
||||
"Duben",
|
||||
"Květen",
|
||||
"Červen",
|
||||
"Červenec",
|
||||
"Srpen",
|
||||
"Září",
|
||||
"Říjen",
|
||||
"Listopad",
|
||||
"Prosinec"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Led",
|
||||
"Úno",
|
||||
"Bře",
|
||||
"Dub",
|
||||
"Kvě",
|
||||
"Čvn",
|
||||
"Čvc",
|
||||
"Srp",
|
||||
"Zář",
|
||||
"Říj",
|
||||
"Lis",
|
||||
"Pro"
|
||||
],
|
||||
"days": [
|
||||
"Neděle",
|
||||
"Pondělí",
|
||||
"Úterý",
|
||||
"Středa",
|
||||
"Čtvrtek",
|
||||
"Pátek",
|
||||
"Sobota"
|
||||
],
|
||||
"shortDays": ["Ne", "Po", "Út", "St", "Čt", "Pá", "So"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Stáhnout SVG",
|
||||
"exportToPNG": "Stáhnout PNG",
|
||||
"exportToCSV": "Stáhnout CSV",
|
||||
"menu": "Menu",
|
||||
"selection": "Vybrat",
|
||||
"selectionZoom": "Zoom: Vybrat",
|
||||
"zoomIn": "Zoom: Přiblížit",
|
||||
"zoomOut": "Zoom: Oddálit",
|
||||
"pan": "Přesouvat",
|
||||
"reset": "Resetovat"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/de.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/de.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "de",
|
||||
"options": {
|
||||
"months": [
|
||||
"Januar",
|
||||
"Februar",
|
||||
"März",
|
||||
"April",
|
||||
"Mai",
|
||||
"Juni",
|
||||
"Juli",
|
||||
"August",
|
||||
"September",
|
||||
"Oktober",
|
||||
"November",
|
||||
"Dezember"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mär",
|
||||
"Apr",
|
||||
"Mai",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Okt",
|
||||
"Nov",
|
||||
"Dez"
|
||||
],
|
||||
"days": [
|
||||
"Sonntag",
|
||||
"Montag",
|
||||
"Dienstag",
|
||||
"Mittwoch",
|
||||
"Donnerstag",
|
||||
"Freitag",
|
||||
"Samstag"
|
||||
],
|
||||
"shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "SVG speichern",
|
||||
"exportToPNG": "PNG speichern",
|
||||
"exportToCSV": "CSV speichern",
|
||||
"menu": "Menü",
|
||||
"selection": "Auswahl",
|
||||
"selectionZoom": "Auswahl vergrößern",
|
||||
"zoomIn": "Vergrößern",
|
||||
"zoomOut": "Verkleinern",
|
||||
"pan": "Verschieben",
|
||||
"reset": "Zoom zurücksetzen"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/el.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/el.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "el",
|
||||
"options": {
|
||||
"months": [
|
||||
"Ιανουάριος",
|
||||
"Φεβρουάριος",
|
||||
"Μάρτιος",
|
||||
"Απρίλιος",
|
||||
"Μάιος",
|
||||
"Ιούνιος",
|
||||
"Ιούλιος",
|
||||
"Αύγουστος",
|
||||
"Σεπτέμβριος",
|
||||
"Οκτώβριος",
|
||||
"Νοέμβριος",
|
||||
"Δεκέμβριος"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Ιαν",
|
||||
"Φευ",
|
||||
"Μαρ",
|
||||
"Απρ",
|
||||
"Μάι",
|
||||
"Ιουν",
|
||||
"Ιουλ",
|
||||
"Αυγ",
|
||||
"Σεπ",
|
||||
"Οκτ",
|
||||
"Νοε",
|
||||
"Δεκ"
|
||||
],
|
||||
"days": [
|
||||
"Κυριακή",
|
||||
"Δευτέρα",
|
||||
"Τρίτη",
|
||||
"Τετάρτη",
|
||||
"Πέμπτη",
|
||||
"Παρασκευή",
|
||||
"Σάββατο"
|
||||
],
|
||||
"shortDays": ["Κυρ", "Δευ", "Τρι", "Τετ", "Πεμ", "Παρ", "Σαβ"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Λήψη SVG",
|
||||
"exportToPNG": "Λήψη PNG",
|
||||
"exportToCSV": "Λήψη CSV",
|
||||
"menu": "Menu",
|
||||
"selection": "Επιλογή",
|
||||
"selectionZoom": "Μεγένθυση βάση επιλογής",
|
||||
"zoomIn": "Μεγένθυνση",
|
||||
"zoomOut": "Σμίκρυνση",
|
||||
"pan": "Μετατόπιση",
|
||||
"reset": "Επαναφορά μεγένθυνσης"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/en.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/en.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "en",
|
||||
"options": {
|
||||
"months": [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec"
|
||||
],
|
||||
"days": [
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday"
|
||||
],
|
||||
"shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Download SVG",
|
||||
"exportToPNG": "Download PNG",
|
||||
"exportToCSV": "Download CSV",
|
||||
"menu": "Menu",
|
||||
"selection": "Selection",
|
||||
"selectionZoom": "Selection Zoom",
|
||||
"zoomIn": "Zoom In",
|
||||
"zoomOut": "Zoom Out",
|
||||
"pan": "Panning",
|
||||
"reset": "Reset Zoom"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/es.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/es.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "es",
|
||||
"options": {
|
||||
"months": [
|
||||
"Enero",
|
||||
"Febrero",
|
||||
"Marzo",
|
||||
"Abril",
|
||||
"Mayo",
|
||||
"Junio",
|
||||
"Julio",
|
||||
"Agosto",
|
||||
"Septiembre",
|
||||
"Octubre",
|
||||
"Noviembre",
|
||||
"Diciembre"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Ene",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Abr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Ago",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dic"
|
||||
],
|
||||
"days": [
|
||||
"Domingo",
|
||||
"Lunes",
|
||||
"Martes",
|
||||
"Miércoles",
|
||||
"Jueves",
|
||||
"Viernes",
|
||||
"Sábado"
|
||||
],
|
||||
"shortDays": ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Descargar SVG",
|
||||
"exportToPNG": "Descargar PNG",
|
||||
"exportToCSV": "Descargar CSV",
|
||||
"menu": "Menu",
|
||||
"selection": "Seleccionar",
|
||||
"selectionZoom": "Seleccionar Zoom",
|
||||
"zoomIn": "Aumentar",
|
||||
"zoomOut": "Disminuir",
|
||||
"pan": "Navegación",
|
||||
"reset": "Reiniciar Zoom"
|
||||
}
|
||||
}
|
||||
}
|
||||
63
cao_sunyata/static/libs/apexcharts/src/locales/et.json
Normal file
63
cao_sunyata/static/libs/apexcharts/src/locales/et.json
Normal file
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"name": "et",
|
||||
"options": {
|
||||
"months": [
|
||||
"jaanuar",
|
||||
"veebruar",
|
||||
"märts",
|
||||
"aprill",
|
||||
"mai",
|
||||
"juuni",
|
||||
"juuli",
|
||||
"august",
|
||||
"september",
|
||||
"oktoober",
|
||||
"november",
|
||||
"detsember"
|
||||
],
|
||||
"shortMonths": [
|
||||
"jaan",
|
||||
"veebr",
|
||||
"märts",
|
||||
"apr",
|
||||
"mai",
|
||||
"juuni",
|
||||
"juuli",
|
||||
"aug",
|
||||
"sept",
|
||||
"okt",
|
||||
"nov",
|
||||
"dets"
|
||||
],
|
||||
"days": [
|
||||
"pühapäev",
|
||||
"esmaspäev",
|
||||
"teisipäev",
|
||||
"kolmapäev",
|
||||
"neljapäev",
|
||||
"reede",
|
||||
"laupäev"
|
||||
],
|
||||
"shortDays": [
|
||||
"P",
|
||||
"E",
|
||||
"T",
|
||||
"K",
|
||||
"N",
|
||||
"R",
|
||||
"L"
|
||||
],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Lae alla SVG",
|
||||
"exportToPNG": "Lae alla PNG",
|
||||
"exportToCSV": "Lae alla CSV",
|
||||
"menu": "Menüü",
|
||||
"selection": "Valik",
|
||||
"selectionZoom": "Valiku suum",
|
||||
"zoomIn": "Suurenda",
|
||||
"zoomOut": "Vähenda",
|
||||
"pan": "Panoraamimine",
|
||||
"reset": "Lähtesta suum"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/fa.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/fa.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "fa",
|
||||
"options": {
|
||||
"months": [
|
||||
"فروردین",
|
||||
"اردیبهشت",
|
||||
"خرداد",
|
||||
"تیر",
|
||||
"مرداد",
|
||||
"شهریور",
|
||||
"مهر",
|
||||
"آبان",
|
||||
"آذر",
|
||||
"دی",
|
||||
"بهمن",
|
||||
"اسفند"
|
||||
],
|
||||
"shortMonths": [
|
||||
"فرو",
|
||||
"ارد",
|
||||
"خرد",
|
||||
"تیر",
|
||||
"مرد",
|
||||
"شهر",
|
||||
"مهر",
|
||||
"آبا",
|
||||
"آذر",
|
||||
"دی",
|
||||
"بهمـ",
|
||||
"اسفـ"
|
||||
],
|
||||
"days": [
|
||||
"یکشنبه",
|
||||
"دوشنبه",
|
||||
"سه شنبه",
|
||||
"چهارشنبه",
|
||||
"پنجشنبه",
|
||||
"جمعه",
|
||||
"شنبه"
|
||||
],
|
||||
"shortDays": ["ی", "د", "س", "چ", "پ", "ج", "ش"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "دانلود SVG",
|
||||
"exportToPNG": "دانلود PNG",
|
||||
"exportToCSV": "دانلود CSV",
|
||||
"menu": "منو",
|
||||
"selection": "انتخاب",
|
||||
"selectionZoom": "بزرگنمایی انتخابی",
|
||||
"zoomIn": "بزرگنمایی",
|
||||
"zoomOut": "کوچکنمایی",
|
||||
"pan": "پیمایش",
|
||||
"reset": "بازنشانی بزرگنمایی"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/fi.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/fi.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "fi",
|
||||
"options": {
|
||||
"months": [
|
||||
"Tammikuu",
|
||||
"Helmikuu",
|
||||
"Maaliskuu",
|
||||
"Huhtikuu",
|
||||
"Toukokuu",
|
||||
"Kesäkuu",
|
||||
"Heinäkuu",
|
||||
"Elokuu",
|
||||
"Syyskuu",
|
||||
"Lokakuu",
|
||||
"Marraskuu",
|
||||
"Joulukuu"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Tammi",
|
||||
"Helmi",
|
||||
"Maalis",
|
||||
"Huhti",
|
||||
"Touko",
|
||||
"Kesä",
|
||||
"Heinä",
|
||||
"Elo",
|
||||
"Syys",
|
||||
"Loka",
|
||||
"Marras",
|
||||
"Joulu"
|
||||
],
|
||||
"days": [
|
||||
"Sunnuntai",
|
||||
"Maanantai",
|
||||
"Tiistai",
|
||||
"Keskiviikko",
|
||||
"Torstai",
|
||||
"Perjantai",
|
||||
"Lauantai"
|
||||
],
|
||||
"shortDays": ["Su", "Ma", "Ti", "Ke", "To", "Pe", "La"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Lataa SVG",
|
||||
"exportToPNG": "Lataa PNG",
|
||||
"exportToCSV": "Lataa CSV",
|
||||
"menu": "Valikko",
|
||||
"selection": "Valinta",
|
||||
"selectionZoom": "Valinnan zoomaus",
|
||||
"zoomIn": "Lähennä",
|
||||
"zoomOut": "Loitonna",
|
||||
"pan": "Panoroi",
|
||||
"reset": "Nollaa zoomaus"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/fr.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/fr.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "fr",
|
||||
"options": {
|
||||
"months": [
|
||||
"janvier",
|
||||
"février",
|
||||
"mars",
|
||||
"avril",
|
||||
"mai",
|
||||
"juin",
|
||||
"juillet",
|
||||
"août",
|
||||
"septembre",
|
||||
"octobre",
|
||||
"novembre",
|
||||
"décembre"
|
||||
],
|
||||
"shortMonths": [
|
||||
"janv.",
|
||||
"févr.",
|
||||
"mars",
|
||||
"avr.",
|
||||
"mai",
|
||||
"juin",
|
||||
"juill.",
|
||||
"août",
|
||||
"sept.",
|
||||
"oct.",
|
||||
"nov.",
|
||||
"déc."
|
||||
],
|
||||
"days": [
|
||||
"dimanche",
|
||||
"lundi",
|
||||
"mardi",
|
||||
"mercredi",
|
||||
"jeudi",
|
||||
"vendredi",
|
||||
"samedi"
|
||||
],
|
||||
"shortDays": ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Télécharger au format SVG",
|
||||
"exportToPNG": "Télécharger au format PNG",
|
||||
"exportToCSV": "Télécharger au format CSV",
|
||||
"menu": "Menu",
|
||||
"selection": "Sélection",
|
||||
"selectionZoom": "Sélection et zoom",
|
||||
"zoomIn": "Zoomer",
|
||||
"zoomOut": "Dézoomer",
|
||||
"pan": "Navigation",
|
||||
"reset": "Réinitialiser le zoom"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/he.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/he.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "he",
|
||||
"options": {
|
||||
"months": [
|
||||
"ינואר",
|
||||
"פברואר",
|
||||
"מרץ",
|
||||
"אפריל",
|
||||
"מאי",
|
||||
"יוני",
|
||||
"יולי",
|
||||
"אוגוסט",
|
||||
"ספטמבר",
|
||||
"אוקטובר",
|
||||
"נובמבר",
|
||||
"דצמבר"
|
||||
],
|
||||
"shortMonths": [
|
||||
"ינו׳",
|
||||
"פבר׳",
|
||||
"מרץ",
|
||||
"אפר׳",
|
||||
"מאי",
|
||||
"יוני",
|
||||
"יולי",
|
||||
"אוג׳",
|
||||
"ספט׳",
|
||||
"אוק׳",
|
||||
"נוב׳",
|
||||
"דצמ׳"
|
||||
],
|
||||
"days": [
|
||||
"ראשון",
|
||||
"שני",
|
||||
"שלישי",
|
||||
"רביעי",
|
||||
"חמישי",
|
||||
"שישי",
|
||||
"שבת"
|
||||
],
|
||||
"shortDays": ["א׳", "ב׳", "ג׳", "ד׳", "ה׳", "ו׳", "ש׳"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "הורד SVG",
|
||||
"exportToPNG": "הורד PNG",
|
||||
"exportToCSV": "הורד CSV",
|
||||
"menu": "תפריט",
|
||||
"selection": "בחירה",
|
||||
"selectionZoom": "זום בחירה",
|
||||
"zoomIn": "הגדלה",
|
||||
"zoomOut": "הקטנה",
|
||||
"pan": "הזזה",
|
||||
"reset": "איפוס תצוגה"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/hi.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/hi.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "hi",
|
||||
"options": {
|
||||
"months": [
|
||||
"जनवरी",
|
||||
"फ़रवरी",
|
||||
"मार्च",
|
||||
"अप्रैल",
|
||||
"मई",
|
||||
"जून",
|
||||
"जुलाई",
|
||||
"अगस्त",
|
||||
"सितंबर",
|
||||
"अक्टूबर",
|
||||
"नवंबर",
|
||||
"दिसंबर"
|
||||
],
|
||||
"shortMonths": [
|
||||
"जनवरी",
|
||||
"फ़रवरी",
|
||||
"मार्च",
|
||||
"अप्रैल",
|
||||
"मई",
|
||||
"जून",
|
||||
"जुलाई",
|
||||
"अगस्त",
|
||||
"सितंबर",
|
||||
"अक्टूबर",
|
||||
"नवंबर",
|
||||
"दिसंबर"
|
||||
],
|
||||
"days": [
|
||||
"रविवार",
|
||||
"सोमवार",
|
||||
"मंगलवार",
|
||||
"बुधवार",
|
||||
"गुरुवार",
|
||||
"शुक्रवार",
|
||||
"शनिवार"
|
||||
],
|
||||
"shortDays": ["रवि", "सोम", "मंगल", "बुध", "गुरु", "शुक्र", "शनि"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "निर्यात SVG",
|
||||
"exportToPNG": "निर्यात PNG",
|
||||
"exportToCSV": "निर्यात CSV",
|
||||
"menu": "सूची",
|
||||
"selection": "चयन",
|
||||
"selectionZoom": "ज़ूम करना",
|
||||
"zoomIn": "ज़ूम इन",
|
||||
"zoomOut": "ज़ूम आउट",
|
||||
"pan": "पैनिंग",
|
||||
"reset": "फिर से कायम करना"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/hr.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/hr.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "hr",
|
||||
"options": {
|
||||
"months": [
|
||||
"Siječanj",
|
||||
"Veljača",
|
||||
"Ožujak",
|
||||
"Travanj",
|
||||
"Svibanj",
|
||||
"Lipanj",
|
||||
"Srpanj",
|
||||
"Kolovoz",
|
||||
"Rujan",
|
||||
"Listopad",
|
||||
"Studeni",
|
||||
"Prosinac"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Sij",
|
||||
"Velj",
|
||||
"Ožu",
|
||||
"Tra",
|
||||
"Svi",
|
||||
"Lip",
|
||||
"Srp",
|
||||
"Kol",
|
||||
"Ruj",
|
||||
"Lis",
|
||||
"Stu",
|
||||
"Pro"
|
||||
],
|
||||
"days": [
|
||||
"Nedjelja",
|
||||
"Ponedjeljak",
|
||||
"Utorak",
|
||||
"Srijeda",
|
||||
"Četvrtak",
|
||||
"Petak",
|
||||
"Subota"
|
||||
],
|
||||
"shortDays": ["Ned", "Pon", "Uto", "Sri", "Čet", "Pet", "Sub"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Preuzmi SVG",
|
||||
"exportToPNG": "Preuzmi PNG",
|
||||
"exportToCSV": "Preuzmi CSV",
|
||||
"menu": "Izbornik",
|
||||
"selection": "Odabir",
|
||||
"selectionZoom": "Odabirno povećanje",
|
||||
"zoomIn": "Uvećajte prikaz",
|
||||
"zoomOut": "Umanjite prikaz",
|
||||
"pan": "Pomicanje",
|
||||
"reset": "Povratak na zadani prikaz"
|
||||
}
|
||||
}
|
||||
}
|
||||
64
cao_sunyata/static/libs/apexcharts/src/locales/hu.json
Normal file
64
cao_sunyata/static/libs/apexcharts/src/locales/hu.json
Normal file
@@ -0,0 +1,64 @@
|
||||
{
|
||||
"name": "hu",
|
||||
"options": {
|
||||
"months": [
|
||||
"január",
|
||||
"február",
|
||||
"március",
|
||||
"április",
|
||||
"május",
|
||||
"június",
|
||||
"július",
|
||||
"augusztus",
|
||||
"szeptember",
|
||||
"október",
|
||||
"november",
|
||||
"december"
|
||||
],
|
||||
"shortMonths": [
|
||||
"jan",
|
||||
"feb",
|
||||
"mar",
|
||||
"ápr",
|
||||
"máj",
|
||||
"jún",
|
||||
"júl",
|
||||
"aug",
|
||||
"szept",
|
||||
"okt",
|
||||
"nov",
|
||||
"dec"
|
||||
],
|
||||
"days": [
|
||||
"hétfő",
|
||||
"kedd",
|
||||
"szerda",
|
||||
"csütörtök",
|
||||
"péntek",
|
||||
"szombat",
|
||||
"vasárnap"
|
||||
],
|
||||
"shortDays": [
|
||||
"H",
|
||||
"K",
|
||||
"Sze",
|
||||
"Cs",
|
||||
"P",
|
||||
"Szo",
|
||||
"V"
|
||||
],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Exportálás SVG-be",
|
||||
"exportToPNG": "Exportálás PNG-be",
|
||||
"exportToCSV": "Exportálás CSV-be",
|
||||
"menu": "Fő ajánlat",
|
||||
"download": "SVG letöltése",
|
||||
"selection": "Kiválasztás",
|
||||
"selectionZoom": "Nagyító kiválasztása",
|
||||
"zoomIn": "Nagyítás",
|
||||
"zoomOut": "Kicsinyítés",
|
||||
"pan": "Képcsúsztatás",
|
||||
"reset": "Nagyító visszaállítása"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/hy.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/hy.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "hy",
|
||||
"options": {
|
||||
"months": [
|
||||
"Հունվար",
|
||||
"Փետրվար",
|
||||
"Մարտ",
|
||||
"Ապրիլ",
|
||||
"Մայիս",
|
||||
"Հունիս",
|
||||
"Հուլիս",
|
||||
"Օգոստոս",
|
||||
"Սեպտեմբեր",
|
||||
"Հոկտեմբեր",
|
||||
"Նոյեմբեր",
|
||||
"Դեկտեմբեր"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Հնվ",
|
||||
"Փտվ",
|
||||
"Մրտ",
|
||||
"Ապր",
|
||||
"Մյս",
|
||||
"Հնս",
|
||||
"Հլիս",
|
||||
"Օգս",
|
||||
"Սեպ",
|
||||
"Հոկ",
|
||||
"Նոյ",
|
||||
"Դեկ"
|
||||
],
|
||||
"days": [
|
||||
"Կիրակի",
|
||||
"Երկուշաբթի",
|
||||
"Երեքշաբթի",
|
||||
"Չորեքշաբթի",
|
||||
"Հինգշաբթի",
|
||||
"Ուրբաթ",
|
||||
"Շաբաթ"
|
||||
],
|
||||
"shortDays": ["Կիր", "Երկ", "Երք", "Չրք", "Հնգ", "Ուրբ", "Շբթ"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Բեռնել SVG",
|
||||
"exportToPNG": "Բեռնել PNG",
|
||||
"exportToCSV": "Բեռնել CSV",
|
||||
"menu": "Մենյու",
|
||||
"selection": "Ընտրված",
|
||||
"selectionZoom": "Ընտրված հատվածի խոշորացում",
|
||||
"zoomIn": "Խոշորացնել",
|
||||
"zoomOut": "Մանրացնել",
|
||||
"pan": "Տեղափոխում",
|
||||
"reset": "Բերել սկզբնական վիճակի"
|
||||
}
|
||||
}
|
||||
}
|
||||
47
cao_sunyata/static/libs/apexcharts/src/locales/id.json
Normal file
47
cao_sunyata/static/libs/apexcharts/src/locales/id.json
Normal file
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "id",
|
||||
"options": {
|
||||
"months": [
|
||||
"Januari",
|
||||
"Februari",
|
||||
"Maret",
|
||||
"April",
|
||||
"Mei",
|
||||
"Juni",
|
||||
"Juli",
|
||||
"Agustus",
|
||||
"September",
|
||||
"Oktober",
|
||||
"November",
|
||||
"Desember"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"Mei",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Agu",
|
||||
"Sep",
|
||||
"Okt",
|
||||
"Nov",
|
||||
"Des"
|
||||
],
|
||||
"days": ["Minggu", "Senin", "Selasa", "Rabu", "kamis", "Jumat", "Sabtu"],
|
||||
"shortDays": ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Unduh SVG",
|
||||
"exportToPNG": "Unduh PNG",
|
||||
"exportToCSV": "Unduh CSV",
|
||||
"menu": "Menu",
|
||||
"selection": "Pilihan",
|
||||
"selectionZoom": "Perbesar Pilihan",
|
||||
"zoomIn": "Perbesar",
|
||||
"zoomOut": "Perkecil",
|
||||
"pan": "Geser",
|
||||
"reset": "Atur Ulang Zoom"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/it.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/it.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "it",
|
||||
"options": {
|
||||
"months": [
|
||||
"Gennaio",
|
||||
"Febbraio",
|
||||
"Marzo",
|
||||
"Aprile",
|
||||
"Maggio",
|
||||
"Giugno",
|
||||
"Luglio",
|
||||
"Agosto",
|
||||
"Settembre",
|
||||
"Ottobre",
|
||||
"Novembre",
|
||||
"Dicembre"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Gen",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"Mag",
|
||||
"Giu",
|
||||
"Lug",
|
||||
"Ago",
|
||||
"Set",
|
||||
"Ott",
|
||||
"Nov",
|
||||
"Dic"
|
||||
],
|
||||
"days": [
|
||||
"Domenica",
|
||||
"Lunedì",
|
||||
"Martedì",
|
||||
"Mercoledì",
|
||||
"Giovedì",
|
||||
"Venerdì",
|
||||
"Sabato"
|
||||
],
|
||||
"shortDays": ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Scarica SVG",
|
||||
"exportToPNG": "Scarica PNG",
|
||||
"exportToCSV": "Scarica CSV",
|
||||
"menu": "Menu",
|
||||
"selection": "Selezione",
|
||||
"selectionZoom": "Seleziona Zoom",
|
||||
"zoomIn": "Zoom In",
|
||||
"zoomOut": "Zoom Out",
|
||||
"pan": "Sposta",
|
||||
"reset": "Reimposta Zoom"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/ja.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/ja.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "ja",
|
||||
"options": {
|
||||
"months": [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月"
|
||||
],
|
||||
"shortMonths": [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月"
|
||||
],
|
||||
"days": [
|
||||
"日曜日",
|
||||
"月曜日",
|
||||
"火曜日",
|
||||
"水曜日",
|
||||
"木曜日",
|
||||
"金曜日",
|
||||
"土曜日"
|
||||
],
|
||||
"shortDays": ["日", "月", "火", "水", "木", "金", "土"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "SVGダウンロード",
|
||||
"exportToPNG": "PNGダウンロード",
|
||||
"exportToCSV": "CSVダウンロード",
|
||||
"menu": "メニュー",
|
||||
"selection": "選択",
|
||||
"selectionZoom": "選択ズーム",
|
||||
"zoomIn": "拡大",
|
||||
"zoomOut": "縮小",
|
||||
"pan": "パン",
|
||||
"reset": "ズームリセット"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/ka.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/ka.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "ka",
|
||||
"options": {
|
||||
"months": [
|
||||
"იანვარი",
|
||||
"თებერვალი",
|
||||
"მარტი",
|
||||
"აპრილი",
|
||||
"მაისი",
|
||||
"ივნისი",
|
||||
"ივლისი",
|
||||
"აგვისტო",
|
||||
"სექტემბერი",
|
||||
"ოქტომბერი",
|
||||
"ნოემბერი",
|
||||
"დეკემბერი"
|
||||
],
|
||||
"shortMonths": [
|
||||
"იან",
|
||||
"თებ",
|
||||
"მარ",
|
||||
"აპრ",
|
||||
"მაი",
|
||||
"ივნ",
|
||||
"ივლ",
|
||||
"აგვ",
|
||||
"სექ",
|
||||
"ოქტ",
|
||||
"ნოე",
|
||||
"დეკ"
|
||||
],
|
||||
"days": [
|
||||
"კვირა",
|
||||
"ორშაბათი",
|
||||
"სამშაბათი",
|
||||
"ოთხშაბათი",
|
||||
"ხუთშაბათი",
|
||||
"პარასკევი",
|
||||
"შაბათი"
|
||||
],
|
||||
"shortDays": ["კვი", "ორშ", "სამ", "ოთხ", "ხუთ", "პარ", "შაბ"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "გადმოქაჩე SVG",
|
||||
"exportToPNG": "გადმოქაჩე PNG",
|
||||
"exportToCSV": "გადმოქაჩე CSV",
|
||||
"menu": "მენიუ",
|
||||
"selection": "არჩევა",
|
||||
"selectionZoom": "არჩეულის გადიდება",
|
||||
"zoomIn": "გადიდება",
|
||||
"zoomOut": "დაპატარაება",
|
||||
"pan": "გადაჩოჩება",
|
||||
"reset": "გადიდების გაუქმება"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/ko.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/ko.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "ko",
|
||||
"options": {
|
||||
"months": [
|
||||
"1월",
|
||||
"2월",
|
||||
"3월",
|
||||
"4월",
|
||||
"5월",
|
||||
"6월",
|
||||
"7월",
|
||||
"8월",
|
||||
"9월",
|
||||
"10월",
|
||||
"11월",
|
||||
"12월"
|
||||
],
|
||||
"shortMonths": [
|
||||
"1월",
|
||||
"2월",
|
||||
"3월",
|
||||
"4월",
|
||||
"5월",
|
||||
"6월",
|
||||
"7월",
|
||||
"8월",
|
||||
"9월",
|
||||
"10월",
|
||||
"11월",
|
||||
"12월"
|
||||
],
|
||||
"days": [
|
||||
"일요일",
|
||||
"월요일",
|
||||
"화요일",
|
||||
"수요일",
|
||||
"목요일",
|
||||
"금요일",
|
||||
"토요일"
|
||||
],
|
||||
"shortDays": ["일", "월", "화", "수", "목", "금", "토"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "SVG 다운로드",
|
||||
"exportToPNG": "PNG 다운로드",
|
||||
"exportToCSV": "CSV 다운로드",
|
||||
"menu": "메뉴",
|
||||
"selection": "선택",
|
||||
"selectionZoom": "선택영역 확대",
|
||||
"zoomIn": "확대",
|
||||
"zoomOut": "축소",
|
||||
"pan": "패닝",
|
||||
"reset": "원래대로"
|
||||
}
|
||||
}
|
||||
}
|
||||
55
cao_sunyata/static/libs/apexcharts/src/locales/lt.json
Normal file
55
cao_sunyata/static/libs/apexcharts/src/locales/lt.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "lt",
|
||||
"options": {
|
||||
"months": [
|
||||
"Sausis",
|
||||
"Vasaris",
|
||||
"Kovas",
|
||||
"Balandis",
|
||||
"Gegužė",
|
||||
"Birželis",
|
||||
"Liepa",
|
||||
"Rugpjūtis",
|
||||
"Rugsėjis",
|
||||
"Spalis",
|
||||
"Lapkritis",
|
||||
"Gruodis"
|
||||
],
|
||||
"shortMonths": [
|
||||
"Sau",
|
||||
"Vas",
|
||||
"Kov",
|
||||
"Bal",
|
||||
"Geg",
|
||||
"Bir",
|
||||
"Lie",
|
||||
"Rgp",
|
||||
"Rgs",
|
||||
"Spl",
|
||||
"Lap",
|
||||
"Grd"
|
||||
],
|
||||
"days": [
|
||||
"Sekmadienis",
|
||||
"Pirmadienis",
|
||||
"Antradienis",
|
||||
"Trečiadienis",
|
||||
"Ketvirtadienis",
|
||||
"Penktadienis",
|
||||
"Šeštadienis"
|
||||
],
|
||||
"shortDays": ["Sk", "Per", "An", "Tr", "Kt", "Pn", "Št"],
|
||||
"toolbar": {
|
||||
"exportToSVG": "Atsisiųsti SVG",
|
||||
"exportToPNG": "Atsisiųsti PNG",
|
||||
"exportToCSV": "Atsisiųsti CSV",
|
||||
"menu": "Menu",
|
||||
"selection": "Pasirinkimas",
|
||||
"selectionZoom": "Zoom: Pasirinkimas",
|
||||
"zoomIn": "Zoom: Priartinti",
|
||||
"zoomOut": "Zoom: Atitolinti",
|
||||
"pan": "Perkėlimas",
|
||||
"reset": "Atstatyti"
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user