1821 lines
65 KiB
HTML
1821 lines
65 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="row mb-4 mb-xl-6 mb-xxl-4 gy-3 justify-content-between">
|
|
<div class="col-auto">
|
|
<h2 class="mb-0 text-body-emphasis">{{ dealer.get_local_name }}</h2>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="d-flex gap-3"><a class="btn btn-phoenix-primary" href="#!"><span class="fa-solid fa-plus me-2"></span>New Package</a><a class="btn btn-primary px-4 px-sm-11" href="#!"><span class="fa-regular fa-calendar-days me-2"></span>Book Now</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="row gx-3">
|
|
<div class="col-xxl-7">
|
|
<div class="row gx-7 pe-xxl-3">
|
|
<div class="col-12 col-xl-5 col-xxl-12">
|
|
<div class="row g-0">
|
|
<div class="col-6 col-xl-12 col-xxl-6 border-bottom border-end border-end-xl-0 border-end-xxl pb-4 pt-4 pt-xl-0 pt-xxl-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
|
|
<h5 class="text-body mb-4">{% trans 'inventory'|capfirst %}</h5>
|
|
<div class="d-md-flex flex-between-center">
|
|
<div class="echart-booking-value order-1 order-sm-0 order-md-1" style="height:54px; width: 90px"></div>
|
|
<div class="mt-4 mt-md-0">
|
|
<h3 class="text-body-highlight mb-2">{{ total_cars }}</h3><span class="badge badge-phoenix badge-phoenix-primary me-2 fs-10"><span class="fa-solid fa-plus me-1"></span>23.35%</span><span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">From last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-12 col-xxl-6 border-bottom py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
|
|
<h5 class="text-body mb-4">{% trans 'inventory value'|capfirst %}</h5>
|
|
<div class="d-md-flex flex-between-center">
|
|
<div class="d-md-flex align-items-center gap-2 order-sm-0 order-md-1"><span class="fa-solid fa-money-bill-trend-up fs-5 text-warning-light dark__text-opacity-75" data-bs-theme="light"></span>
|
|
<div class="d-flex d-md-block gap-2 align-items-center mt-1 mt-md-0">
|
|
<p class="fs-9 mb-0 mb-md-2 text-body-tertiary text-nowrap">{% trans "Profits"|upper %}</p>
|
|
<h4 class="text-body-highlight mb-0">{{ total_profit }} {% trans 'SAR' %}</h4>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 mt-md-0">
|
|
<h3 class="text-body-highlight mb-2">{{ total_selling_price }} {% trans 'SAR' %}</h3><span class="badge badge-phoenix badge-phoenix-success me-2 fs-10"><span class="fa-solid fa-plus me-1"></span>3.98%</span><span class="fs-9 text-body-secondary text-nowrap d-block d-sm-inline mt-1">From last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-12 col-xxl-6 border-bottom-xl border-bottom-xxl-0 border-end border-end-xl-0 border-end-xxl py-4 pe-4 pe-sm-5 pe-xl-0 pe-xxl-5">
|
|
<h5 class="text-body mb-4">{% trans 'Commissions' %}</h5>
|
|
<div class="d-md-flex flex-between-center">
|
|
<div class="echart-commission order-sm-0 order-md-1" style="height: 54px; width: 54px"></div>
|
|
<div class="mt-3 mt-md-0">
|
|
<h3 class="text-body-highlight mb-2">$3,339.00</h3><span class="badge badge-phoenix badge-phoenix-danger me-2 fs-10"><span class="fa-solid fa-minus me-1"></span>12.21%</span><span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">From last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-xl-12 col-xxl-6 py-4 ps-4 ps-sm-5 ps-xl-0 ps-xxl-5">
|
|
<h5 class="text-body mb-4">Canceled Booking</h5>
|
|
<div class="d-md-flex flex-between-center">
|
|
<div class="chart-cancel-booking order-sm-0 order-md-1" style="height:54px; width:78px"></div>
|
|
<div class="mt-3 mt-md-0">
|
|
<h3 class="text-body-highlight mb-2">120.00</h3><span class="badge badge-phoenix badge-phoenix-danger me-2 fs-10"><span class="fa-solid fa-plus me-1"></span>5.76%</span><span class="fs-9 text-body-secondary d-block d-sm-inline mt-1">From last month</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xl-7 col-xxl-12">
|
|
<div class="mt-5 mt-xl-0 mt-xxl-5 mb-5 mb-xxl-0">
|
|
<div class="row flex-between-end gy-3 gx-2">
|
|
<div class="col-auto">
|
|
<h3 class="text-body-highlight">Financial activities</h3>
|
|
<p class="mb-0 text-body-tertiary">Balance</p>
|
|
</div>
|
|
|
|
<div class="col-auto order-md-1 order-lg-0 order-xxl-1">
|
|
<!--<div class="dropdown">
|
|
<button class="btn btn-sm btn-phoenix-secondary bg-body-emphasis bg-body-hover action-btn" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h" data-fa-transform="shrink-2"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
|
|
</div>-->
|
|
</div>
|
|
<div class="col-12 col-md-auto col-lg-12 col-xxl-auto mx-auto order-1 order-sm-0">
|
|
<div class="d-flex justify-content-center gap-6 gap-xxl-4">
|
|
<button class="btn d-flex align-items-center p-0 shadow-none fw-semibold" id="profit"><span class="bg-primary-light me-2" style="width: 16px; height: 6px; border-radius: 1px" data-bs-theme="light"></span><span class="text-body-secondary">Profit</span></button>
|
|
<button class="btn d-flex align-items-center p-0 shadow-none fw-semibold" id="revenue"><span class="bg-success-light me-2" style="width: 16px; height: 6px; border-radius: 1px" data-bs-theme="light"></span><span class="text-body-secondary">Revenue</span></button>
|
|
<button class="btn d-flex align-items-center p-0 shadow-none fw-semibold" id="expanses"><span class="bg-info-light me-2" style="width: 16px; height: 6px; border-radius: 1px" data-bs-theme="light"></span><span class="text-body-secondary">Expanses</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echart-financial-Activities" data-options='{"optionOne":"profit","optionTwo":"revenue","optionThree":"expanses"}'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xxl-5">
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-6 col-xxl-12">
|
|
<div class="col-12">
|
|
<div class="card mb-3">
|
|
<div class="bg-holder bg-card" style="background-image:url({% static 'images/spot-illustrations/39.png' %});background-position: bottom right 0px; background-size: auto;">
|
|
</div>
|
|
|
|
<div class="card-body z-5">
|
|
<div>
|
|
<h3 class="text-body-highlight mb-3">Phoenix integrations</h3>
|
|
<p class="text-body-tertiary mb-4 w-75 w-xl-100">Phoenix improves efficiency instantly and effortlessly <br class="d-none d-xxl-block"> by allowing easy & simple connection <br class="d-none d-xl-block"> to other popular programs</p><a class="btn btn-sm btn-phoenix-primary" href="#!"> <span class="fa-solid fa-link me-1"> </span>Connect Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card h-100" data-list='{"valueNames":["country","users","status"],"page":4}'>
|
|
<div class="card-header border-0 d-flex justify-content-between align-items-start">
|
|
<div>
|
|
|
|
<h3 class="text-body-highlight">Visitors</h3>
|
|
<p class="mb-0 text-body-tertiary">Users across countries</p>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-phoenix-secondary bg-body-emphasis bg-body-hover action-btn" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h" data-fa-transform="shrink-2"></span></button>
|
|
<div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body py-0">
|
|
<h4 class="d-flex align-items-center gap-2 text-body-highlight mb-3"><span class="real-time-user" data-countup='{"endValue":119}'>0</span><span class="fs-9 fw-normal">User per second</span></h4>
|
|
<div class="echart-country-wise-visitors" style="height: 43px; width: 100%"></div>
|
|
<div class="table-responsive scrollbar mt-3">
|
|
<table class="table fs-10 mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="sort ps-0 align-middle" data-sort="country" style="min-width: 100px">COUNTRY NAME</th>
|
|
<th class="sort align-middle" data-sort="users" style="min-width: 115px">USERS</th>
|
|
<th class="sort text-end align-middle" data-sort="status">STATUS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="table-country-wise-visitors">
|
|
<tr>
|
|
<td class="py-2 white-space-nowrap ps-0 country"><a class="d-flex align-items-center text-primary py-md-1 py-xxl-0" href="#!"><img src="{% static 'images/country/india-2.png' %}" alt="" width="40" />
|
|
<p class="mb-0 ps-3 fw-bold fs-9">India</p>
|
|
</a></td>
|
|
<td class="py-2 align-middle users">
|
|
<h6>92,896<span class="text-body-tertiary fw-semibold ms-2">(41.6%)</span></h6>
|
|
</td>
|
|
<td class="py-2 align-middle text-end status"><span class="badge badge-phoenix fs-10 badge-phoenix-info"><span class="fa-solid fa-plus me-1"></span>15.21%</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2 white-space-nowrap ps-0 country"><a class="d-flex align-items-center text-primary py-md-1 py-xxl-0" href="#!"><img src="{% static 'images/country/china-2.png' %}" alt="" width="40" />
|
|
<p class="mb-0 ps-3 fw-bold fs-9">China</p>
|
|
</a></td>
|
|
<td class="py-2 align-middle users">
|
|
<h6>50,496<span class="text-body-tertiary fw-semibold ms-2">(32.8%)</span></h6>
|
|
</td>
|
|
<td class="py-2 align-middle text-end status"><span class="badge badge-phoenix fs-10 badge-phoenix-warning"><span class="fa-solid fa-plus me-1"></span>05.21%</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-2 white-space-nowrap ps-0 country"><a class="d-flex align-items-center text-primary py-md-1 py-xxl-0" href="#!"><img src="{% static 'images/country/usa-2.png' %}" alt="" width="40" />
|
|
<p class="mb-0 ps-3 fw-bold fs-9">USA</p>
|
|
</a></td>
|
|
<td class="py-2 align-middle users">
|
|
<h6>45,679<span class="text-body-tertiary fw-semibold ms-2">(24.3%)</span></h6>
|
|
</td>
|
|
<td class="py-2 align-middle text-end status"><span class="badge badge-phoenix fs-10 badge-phoenix-primary"><span class="fa-solid fa-plus me-1"></span>22.12%</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer pt-3 border-0">
|
|
<div class="d-flex align-items-center">
|
|
<div class="pagination d-none"></div>
|
|
<p class="mb-0 d-none d-sm-block me-3 fw-semibold text-body" data-list-info="data-list-info"></p><a class="fw-bold fs-9 ms-auto" href="#!">View all<span class="fas fa-angle-right ms-1" data-fa-transform="down-1"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-xxl-12">
|
|
<div class="card h-100">
|
|
<div class="card-header border-0 pb-2 d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h3 class="text-body-highlight">Holidays</h3>
|
|
<p class="mb-sm-0 text-body-tertiary">Holidays next month</p>
|
|
</div><a class="btn btn-sm btn-phoenix-secondary d-flex align-items-center w-max-content" href="#!"><span class="text-nowrap">Calender</span><span class="fa-solid fa-chevron-right ms-2 fs-10"></span></a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="echart-holidays-next-month" style="height: 100%; min-height: 300px; width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mb-5">
|
|
<div class="col-xl-5 col-xxl-7">
|
|
<div class="card h-xxl-100">
|
|
<div class="card-header pb-3">
|
|
<div class="row justify-content-between g-3">
|
|
<div class="col-auto">
|
|
<h3 class="text-body-highlight">Gross Profit</h3>
|
|
<p class="mb-0">Annual income according to the board</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<select class="form-select form-select-sm">
|
|
<option>Last Fiscal Year</option>
|
|
<option>Last Calendar year</option>
|
|
<option>Last Quarter</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row align-items-center h-100 gy-5">
|
|
<div class="col-12 col-md-auto col-xl-12 col-xxl-auto order-md-1 order-xl-0 order-xxl-1 px-md-8 px-xl-6">
|
|
<div class="echart-gross-profit mx-auto mt-3 mt-md-0 mt-xl-3 mt-xxl-0" style="width: 250px; height: 250px"></div>
|
|
</div>
|
|
<div class="col-12 col-md-auto col-xl-12 col-xxl-auto flex-1 h-md-100">
|
|
<div class="d-flex flex-column justify-content-between h-md-100 h-xl-auto h-xxl-100">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex gap-2">
|
|
<div class="bullet-item bg-primary-light" data-bs-theme="light"></div>
|
|
<div>
|
|
<h6 class="mb-0 text-body fw-semibold mb-2">Flight</h6>
|
|
<h5 class="mb-0 text-body">$162,791,400</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 text-primary"><span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
|
|
<p class="mb-0 fw-bold">15.50%</p>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex gap-2">
|
|
<div class="bullet-item bg-info-light" data-bs-theme="light"></div>
|
|
<div>
|
|
<h6 class="mb-0 text-body fw-semibold mb-2">Flight (Package)</h6>
|
|
<h5 class="mb-0 text-body">$135,659,500</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 text-danger"><span class="fw-bold" data-feather="trending-down" style="width: 24px; height: 24px"></span>
|
|
<p class="mb-0 fw-bold">11.09%</p>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex gap-2">
|
|
<div class="bullet-item bg-warning-light" data-bs-theme="light"></div>
|
|
<div>
|
|
<h6 class="mb-0 text-body fw-semibold mb-2">Hotel</h6>
|
|
<h5 class="mb-0 text-body">$271,319,000</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 text-success"><span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
|
|
<p class="mb-0 fw-bold">29.98%</p>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex gap-2">
|
|
<div class="bullet-item bg-success-light" data-bs-theme="light"></div>
|
|
<div>
|
|
<h6 class="mb-0 text-body fw-semibold mb-2">Hotel (Package)</h6>
|
|
<h5 class="mb-0 text-body">$162,791,400</h5>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 text-warning"><span class="fw-bold" data-feather="trending-up" style="width: 24px; height: 24px"></span>
|
|
<p class="mb-0 fw-bold">03.90%</p>
|
|
</div>
|
|
</div>
|
|
<hr class="d-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-7 col-xxl-5">
|
|
<div class="card h-100">
|
|
<div class="card-header pb-3 d-sm-flex d-xl-block d-xxl-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h3 class="text-body-highlight">Bookings</h3>
|
|
<p class="mb-0">Completed and canceled bookings</p>
|
|
</div>
|
|
<select class="form-select form-select-sm pe-9 w-auto mt-3 mt-sm-0 mt-xl-3 mt-xxl-0" data-booking-options="data-booking-options">
|
|
<option value="0">Hotel</option>
|
|
<option value="1">Flight</option>
|
|
<option value="2">Trip</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="echart-bookings" style="height: 100%;min-height: 322px; width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<script>
|
|
(function (factory) {
|
|
typeof define === 'function' && define.amd ? define(factory) :
|
|
factory();
|
|
})((function () { 'use strict';
|
|
|
|
// import * as echarts from 'echarts';
|
|
const { merge } = window._;
|
|
|
|
// form config.js
|
|
const echartSetOption = (
|
|
chart,
|
|
userOptions,
|
|
getDefaultOptions,
|
|
responsiveOptions
|
|
) => {
|
|
const { breakpoints, resize } = window.phoenix.utils;
|
|
const handleResize = options => {
|
|
Object.keys(options).forEach(item => {
|
|
if (window.innerWidth > breakpoints[item]) {
|
|
chart.setOption(options[item]);
|
|
}
|
|
});
|
|
};
|
|
|
|
const themeController = document.body;
|
|
// Merge user options with lodash
|
|
chart.setOption(merge(getDefaultOptions(), userOptions));
|
|
|
|
const navbarVerticalToggle = document.querySelector(
|
|
'.navbar-vertical-toggle'
|
|
);
|
|
if (navbarVerticalToggle) {
|
|
navbarVerticalToggle.addEventListener('navbar.vertical.toggle', () => {
|
|
chart.resize();
|
|
if (responsiveOptions) {
|
|
handleResize(responsiveOptions);
|
|
}
|
|
});
|
|
}
|
|
|
|
resize(() => {
|
|
chart.resize();
|
|
if (responsiveOptions) {
|
|
handleResize(responsiveOptions);
|
|
}
|
|
});
|
|
if (responsiveOptions) {
|
|
handleResize(responsiveOptions);
|
|
}
|
|
|
|
themeController.addEventListener(
|
|
'clickControl',
|
|
({ detail: { control } }) => {
|
|
if (control === 'phoenixTheme') {
|
|
chart.setOption(window._.merge(getDefaultOptions(), userOptions));
|
|
}
|
|
if (responsiveOptions) {
|
|
handleResize(responsiveOptions);
|
|
}
|
|
}
|
|
);
|
|
};
|
|
// -------------------end config.js--------------------
|
|
|
|
const echartTabs = document.querySelectorAll('[data-tab-has-echarts]');
|
|
if (echartTabs) {
|
|
echartTabs.forEach(tab => {
|
|
tab.addEventListener('shown.bs.tab', e => {
|
|
const el = e.target;
|
|
const { hash } = el;
|
|
const id = hash || el.dataset.bsTarget;
|
|
const content = document.getElementById(id.substring(1));
|
|
const chart = content?.querySelector('[data-echart-tab]');
|
|
if (chart) {
|
|
window.echarts.init(chart).resize();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
const tooltipFormatter = (params, dateFormatter = 'MMM DD') => {
|
|
let tooltipItem = ``;
|
|
params.forEach(el => {
|
|
tooltipItem += `<div class='ms-1'>
|
|
<h6 class="text-body-tertiary"><span class="fas fa-circle me-1 fs-10" style="color:${
|
|
el.borderColor ? el.borderColor : el.color
|
|
}"></span>
|
|
${el.seriesName} : ${
|
|
typeof el.value === 'object' ? el.value[1] : el.value
|
|
}
|
|
</h6>
|
|
</div>`;
|
|
});
|
|
return `<div>
|
|
<p class='mb-2 text-body-tertiary'>
|
|
${
|
|
window.dayjs(params[0].axisValue).isValid()
|
|
? window.dayjs(params[0].axisValue).format(dateFormatter)
|
|
: params[0].axisValue
|
|
}
|
|
</p>
|
|
${tooltipItem}
|
|
</div>`;
|
|
};
|
|
|
|
const handleTooltipPosition = ([pos, , dom, , size]) => {
|
|
// only for mobile device
|
|
if (window.innerWidth <= 540) {
|
|
const tooltipHeight = dom.offsetHeight;
|
|
const obj = { top: pos[1] - tooltipHeight - 20 };
|
|
obj[pos[0] < size.viewSize[0] / 2 ? 'left' : 'right'] = 5;
|
|
return obj;
|
|
}
|
|
return null; // else default behaviour
|
|
};
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Echart booking value */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
const bookingValueChartInit = () => {
|
|
const { getColor, getData, getDates } = window.phoenix.utils;
|
|
const $echartBookingValue = document.querySelector('.echart-booking-value');
|
|
const tooltipFormatter = params => {
|
|
const currentDate = window.dayjs(params[0].axisValue);
|
|
const prevDate = window.dayjs(params[0].axisValue).subtract(1, 'month');
|
|
|
|
const result = params.map((param, index) => ({
|
|
value: param.value,
|
|
date: index > 0 ? prevDate : currentDate,
|
|
color: param.color
|
|
}));
|
|
|
|
let tooltipItem = ``;
|
|
result.forEach((el, index) => {
|
|
tooltipItem += `<h6 class="fs-9 ${
|
|
index > 0 && 'mb-0'
|
|
}"><span class="fas fa-circle me-2" style="color:${el.color}"></span>
|
|
${el.date.format('MMM DD')} : <span class="fw-normal">${el.value}</span>
|
|
</h6>`;
|
|
});
|
|
return `<div class='ms-1'>
|
|
${tooltipItem}
|
|
</div>`;
|
|
};
|
|
|
|
if ($echartBookingValue) {
|
|
const userOptions = getData($echartBookingValue, 'echarts');
|
|
const chart = window.echarts.init($echartBookingValue);
|
|
const getDefaultOptions = () => ({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
padding: 10,
|
|
backgroundColor: getColor('body-highlight-bg'),
|
|
borderColor: getColor('border-color'),
|
|
textStyle: { color: getColor('light-text-emphasis') },
|
|
borderWidth: 1,
|
|
transitionDuration: 0,
|
|
axisPointer: {
|
|
type: 'none'
|
|
},
|
|
formatter: params => tooltipFormatter(params),
|
|
extraCssText: 'z-index: 1000'
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: getDates(
|
|
new Date('11/1/2023'),
|
|
new Date('11/7/2023'),
|
|
1000 * 60 * 60 * 24
|
|
),
|
|
show: true,
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: { color: getColor('secondary-bg') }
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
formatter: value => window.dayjs(value).format('DD MMM'),
|
|
showMinLabel: true,
|
|
showMaxLabel: false,
|
|
color: getColor('secondary-color'),
|
|
align: 'left',
|
|
interval: 5,
|
|
fontFamily: 'Nunito Sans',
|
|
fontWeight: 600,
|
|
fontSize: 12.8
|
|
}
|
|
}
|
|
],
|
|
yAxis: {
|
|
show: false,
|
|
type: 'value',
|
|
boundaryGap: false
|
|
},
|
|
series: [
|
|
{
|
|
type: 'line',
|
|
data: [150, 100, 300, 200, 250, 180, 250],
|
|
showSymbol: false,
|
|
symbol: 'circle',
|
|
lineStyle: {
|
|
width: 2,
|
|
color: getColor('warning')
|
|
},
|
|
emphasis: {
|
|
lineStyle: {
|
|
color: getColor('warning')
|
|
}
|
|
},
|
|
itemStyle: {
|
|
color: getColor('warning')
|
|
},
|
|
zlevel: 1
|
|
}
|
|
],
|
|
grid: { left: 5, right: 5, top: 5, bottom: 0 }
|
|
});
|
|
echartSetOption(chart, userOptions, getDefaultOptions);
|
|
}
|
|
};
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Echart Bar booking */
|
|
/* -------------------------------------------------------------------------- */
|
|
const { echarts: echarts$2 } = window;
|
|
|
|
const bookingsChartInit = () => {
|
|
const { getColor, getData, getPastDates, getItemFromStore, rgbaColor } =
|
|
window.phoenix.utils;
|
|
const $bookingsChart = document.querySelector('.echart-bookings');
|
|
|
|
const fullfilledData = [
|
|
[3500, 2500, 2600, 3400, 2300, 3200, 2800, 2800],
|
|
[2736, 3874, 4192, 1948, 3567, 4821, 2315, 3986],
|
|
[2789, 3895, 2147, 4658, 1723, 3210, 4386, 1974]
|
|
];
|
|
|
|
const cencelledData = [
|
|
[-1500, -2700, -1100, -1400, -1600, -1400, -1100, -2700],
|
|
[-3874, -2631, -4422, -1765, -3198, -4910, -2087, -4675],
|
|
[-2789, -3895, -2147, -4658, -1723, -3210, -4386, -1974]
|
|
];
|
|
|
|
if ($bookingsChart) {
|
|
const userOptions = getData($bookingsChart, 'echarts');
|
|
const chart = echarts$2.init($bookingsChart);
|
|
const getDefaultOptions = () => ({
|
|
color: getColor('body-highlight-bg'),
|
|
legend: {
|
|
data: ['Fulfilled', 'Cancelled'],
|
|
itemWidth: 16,
|
|
itemHeight: 16,
|
|
icon: 'circle',
|
|
itemGap: 32,
|
|
left: 0,
|
|
inactiveColor: getColor('quaternary-color'),
|
|
textStyle: {
|
|
color: getColor('secondary-color'),
|
|
fontWeight: 600,
|
|
fontFamily: 'Nunito Sans'
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'none'
|
|
},
|
|
padding: [7, 10],
|
|
backgroundColor: getColor('body-highlight-bg'),
|
|
borderColor: getColor('border-color'),
|
|
textStyle: { color: getColor('light-text-emphasis') },
|
|
borderWidth: 1,
|
|
transitionDuration: 0,
|
|
position: (...params) => handleTooltipPosition(params),
|
|
formatter: params => tooltipFormatter(params),
|
|
extraCssText: 'z-index: 1000'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
color: getColor('secondary-text-emphasis'),
|
|
formatter: value => window.dayjs(value).format('MMM DD'),
|
|
fontFamily: 'Nunito Sans',
|
|
fontWeight: 600,
|
|
fontSize: 12.8
|
|
},
|
|
data: getPastDates(8),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: getColor('border-color-translucent')
|
|
}
|
|
},
|
|
axisTick: false
|
|
},
|
|
yAxis: {
|
|
axisLabel: {
|
|
color: getColor('body-color'),
|
|
formatter: value => `${Math.abs(Math.round(value / 1000))}K`,
|
|
fontWeight: 700,
|
|
fontFamily: 'Nunito Sans'
|
|
},
|
|
splitLine: {
|
|
interval: 10,
|
|
lineStyle: {
|
|
color: getColor('border-color-translucent')
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Fulfilled',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
data: fullfilledData[0],
|
|
barWidth: '27%',
|
|
itemStyle: {
|
|
borderRadius: [4, 4, 0, 0],
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('info')
|
|
: getColor('info-light')
|
|
}
|
|
},
|
|
{
|
|
name: 'Cancelled',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
barWidth: '27%',
|
|
data: cencelledData[0],
|
|
itemStyle: {
|
|
borderRadius: [0, 0, 4, 4],
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('info'), 0.5)
|
|
: getColor('info-lighter')
|
|
}
|
|
}
|
|
],
|
|
grid: { left: 0, right: 8, top: 52, bottom: 0, containLabel: true }
|
|
});
|
|
echartSetOption(chart, userOptions, getDefaultOptions);
|
|
|
|
const bookingSelect = document.querySelector('[data-booking-options]');
|
|
if (bookingSelect) {
|
|
bookingSelect.addEventListener('change', e => {
|
|
const { value } = e.currentTarget;
|
|
const data1 = fullfilledData[value];
|
|
const data2 = cencelledData[value];
|
|
chart.setOption({
|
|
series: [
|
|
{
|
|
data: data1
|
|
},
|
|
{
|
|
data: data2
|
|
}
|
|
]
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
// dayjs.extend(advancedFormat);
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Echarts cancel booking */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
const cancelBookingChartInit = () => {
|
|
const { getColor, getData, getDates, getItemFromStore } =
|
|
window.phoenix.utils;
|
|
const cancelBookingChartEl = document.querySelector('.chart-cancel-booking');
|
|
|
|
if (cancelBookingChartEl) {
|
|
const userOptions = getData(cancelBookingChartEl, 'echarts');
|
|
const chart = window.echarts.init(cancelBookingChartEl);
|
|
|
|
const getDefaultOptions = () => ({
|
|
color: getColor('primary'),
|
|
tooltip: {
|
|
trigger: 'item',
|
|
padding: [7, 10],
|
|
backgroundColor: getColor('body-highlight-bg'),
|
|
borderColor: getColor('border-color'),
|
|
textStyle: { color: getColor('light-text-emphasis') },
|
|
position: (...params) => handleTooltipPosition(params),
|
|
borderWidth: 1,
|
|
transitionDuration: 0,
|
|
formatter: params => {
|
|
return `<strong>${window
|
|
.dayjs(params.name)
|
|
.format('DD MMM')}:</strong> ${params.value}`;
|
|
},
|
|
extraCssText: 'z-index: 1000'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: getDates(
|
|
new Date('11/1/2023'),
|
|
new Date('11/6/2023'),
|
|
1000 * 60 * 60 * 24
|
|
)
|
|
},
|
|
yAxis: {
|
|
show: false
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
barWidth: 3,
|
|
data: [120, 150, 100, 120, 110, 160],
|
|
symbol: 'none',
|
|
itemStyle: {
|
|
borderRadius: [0.5, 0.5, 0, 0],
|
|
colos:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('info')
|
|
: getColor('info-light')
|
|
}
|
|
}
|
|
],
|
|
grid: { right: 5, left: 0, bottom: 0, top: 0 }
|
|
});
|
|
|
|
echartSetOption(chart, userOptions, getDefaultOptions);
|
|
}
|
|
};
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Echarts commission */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
const { echarts: echarts$1 } = window;
|
|
|
|
const commissionChartInit = () => {
|
|
const { getData, getColor } = window.phoenix.utils;
|
|
const $echartCommission = document.querySelector('.echart-commission');
|
|
|
|
if ($echartCommission) {
|
|
const userOptions = getData($echartCommission, 'options');
|
|
const chart = echarts$1.init($echartCommission);
|
|
|
|
const getDefaultOptions = () => ({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
padding: [7, 10],
|
|
backgroundColor: getColor('body-highlight-bg'),
|
|
borderColor: getColor('border-color'),
|
|
textStyle: { color: getColor('light-text-emphasis') },
|
|
borderWidth: 1,
|
|
position: (...params) => handleTooltipPosition(params),
|
|
transitionDuration: 0,
|
|
formatter: params => {
|
|
return `<strong>${params.seriesName}:</strong> ${params.value}%`;
|
|
},
|
|
extraCssText: 'z-index: 1000'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
name: 'Commission',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
radius: '90%',
|
|
pointer: {
|
|
show: false
|
|
},
|
|
progress: {
|
|
show: true,
|
|
overlap: false,
|
|
roundCap: true,
|
|
clip: false,
|
|
itemStyle: {
|
|
color: getColor('primary')
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 3,
|
|
color: [[1, getColor('secondary-bg')]]
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
value: 70
|
|
}
|
|
],
|
|
detail: {
|
|
show: false
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
echartSetOption(chart, userOptions, getDefaultOptions);
|
|
}
|
|
};
|
|
|
|
// dayjs.extend(advancedFormat);
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Echarts cancel booking */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
const countryWiseVisitorsChartInit = () => {
|
|
const { getColor, getData, getRandomNumber, getItemFromStore } =
|
|
window.phoenix.utils;
|
|
const countryWiseVisitorsChartEl = document.querySelector(
|
|
'.echart-country-wise-visitors'
|
|
);
|
|
|
|
const data = [
|
|
127, 156, 183, 110, 195, 129, 176, 147, 163, 199, 158, 115, 191, 105, 143,
|
|
179, 120, 168, 137, 185, 154, 122, 197, 112, 144, 170, 193, 118, 166, 151,
|
|
187, 134, 162, 107, 192, 152, 114, 198
|
|
];
|
|
const axisData = [
|
|
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
|
|
22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38
|
|
];
|
|
|
|
const tooltipFormatter = params => `
|
|
<div>
|
|
<h6 class="fs-9 text-700 mb-0"><span class="fas fa-circle me-1 text-primary-light"></span>
|
|
Users : <span class="fw-normal">${params[0].value}</span>
|
|
</h6>
|
|
</div>
|
|
`;
|
|
|
|
if (countryWiseVisitorsChartEl) {
|
|
const userOptions = getData(countryWiseVisitorsChartEl, 'echarts');
|
|
const chart = window.echarts.init(countryWiseVisitorsChartEl);
|
|
|
|
const getDefaultOptions = () => ({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
padding: [7, 10],
|
|
axisPointer: {
|
|
type: 'none'
|
|
},
|
|
backgroundColor: getColor('body-highlight-bg'),
|
|
borderColor: getColor('border-color'),
|
|
textStyle: { color: getColor('light-text-emphasis') },
|
|
borderWidth: 1,
|
|
transitionDuration: 0,
|
|
position(pos, params, dom, rect, size) {
|
|
return handleTooltipPosition(pos);
|
|
},
|
|
formatter: tooltipFormatter,
|
|
extraCssText: 'z-index: 1000'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
boundaryGap: [0.2, 0.2],
|
|
data: axisData
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
scale: true,
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
min: 100,
|
|
max: 200
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
barMaxWidth: 8,
|
|
barGap: 5,
|
|
data,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('primary')
|
|
: getColor('primary-light'),
|
|
borderRadius: [2, 2, 0, 0]
|
|
}
|
|
}
|
|
],
|
|
grid: {
|
|
right: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
top: 0
|
|
}
|
|
});
|
|
|
|
echartSetOption(chart, userOptions, getDefaultOptions);
|
|
|
|
const userCounterDom = document.querySelector('.real-time-user');
|
|
|
|
setInterval(() => {
|
|
const rndData = getRandomNumber(130, 200);
|
|
data.shift();
|
|
data.push(rndData);
|
|
axisData.shift();
|
|
axisData.push(getRandomNumber(37, 100));
|
|
userCounterDom.innerHTML = rndData;
|
|
|
|
chart.setOption({
|
|
xAxis: {
|
|
data: axisData
|
|
},
|
|
series: [
|
|
{
|
|
data
|
|
}
|
|
]
|
|
});
|
|
}, 2000);
|
|
}
|
|
};
|
|
|
|
// dayjs.extend(advancedFormat);
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Echarts Financial Activities */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
const financialActivitiesChartInit = () => {
|
|
const { getColor, getData, getItemFromStore } = window.phoenix.utils;
|
|
const $financialActivitiesChartEl = document.querySelector(
|
|
'.echart-financial-Activities'
|
|
);
|
|
|
|
const profitData = [
|
|
[1, 1, 1, 1, 1, 1],
|
|
[245000, 310000, 420000, 480000, 530000, 580000],
|
|
[278450, 513220, 359890, 444567, 201345, 589000]
|
|
];
|
|
const revenueData = [
|
|
[-810000, -640000, -630000, -590000, -620000, -780000],
|
|
[-482310, -726590, -589120, -674832, -811245, -455678],
|
|
[-432567, -688921, -517389, -759234, -601876, -485112]
|
|
];
|
|
const expansesData = [
|
|
[-450000, -250000, -200000, -120000, -230000, -270000],
|
|
[-243567, -156789, -398234, -120456, -321890, -465678],
|
|
[-235678, -142345, -398765, -287456, -173890, -451234]
|
|
];
|
|
|
|
if ($financialActivitiesChartEl) {
|
|
const userOptions = getData($financialActivitiesChartEl, 'options');
|
|
const chart = window.echarts.init($financialActivitiesChartEl);
|
|
const profitLagend = document.querySelector(`#${userOptions.optionOne}`);
|
|
const revenueLagend = document.querySelector(`#${userOptions.optionTwo}`);
|
|
const expansesLagend = document.querySelector(
|
|
`#${userOptions.optionThree}`
|
|
);
|
|
|
|
const getDefaultOptions = () => ({
|
|
color: [getColor('primary'), getColor('tertiary-bg')],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
padding: [7, 10],
|
|
backgroundColor: getColor('body-highlight-bg'),
|
|
borderColor: getColor('border-color'),
|
|
textStyle: { color: getColor('light-text-emphasis') },
|
|
borderWidth: 1,
|
|
transitionDuration: 0,
|
|
axisPointer: {
|
|
type: 'none'
|
|
},
|
|
position: (...params) => handleTooltipPosition(params),
|
|
formatter: params => tooltipFormatter(params),
|
|
extraCssText: 'z-index: 1000'
|
|
},
|
|
legend: {
|
|
data: ['Profit', 'Revenue', 'Expanses'],
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
axisLabel: {
|
|
show: true,
|
|
margin: 12,
|
|
color: getColor('secondary-text-emphasis'),
|
|
formatter: value =>
|
|
`${Math.abs(Math.round((value / 1000) * 10) / 10)}k`,
|
|
fontFamily: 'Nunito Sans',
|
|
fontWeight: 700
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: getColor('border-color-translucent')
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: [
|
|
'NOV-DEC',
|
|
'SEP-OCT',
|
|
'JUL-AUG',
|
|
'MAY-JUN',
|
|
'MAR-APR',
|
|
'JAN-FEB'
|
|
],
|
|
axisLabel: {
|
|
color: getColor('secondary-text-emphasis'),
|
|
margin: 8,
|
|
fontFamily: 'Nunito Sans',
|
|
fontWeight: 700
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: getColor('border-color-translucent')
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Profit',
|
|
stack: 'Total',
|
|
type: 'bar',
|
|
barWidth: 8,
|
|
roundCap: true,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [0, 4, 4, 0],
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('primary')
|
|
: getColor('primary-light')
|
|
},
|
|
data: profitData[0]
|
|
},
|
|
{
|
|
name: 'Revenue',
|
|
type: 'bar',
|
|
barWidth: 8,
|
|
barGap: '100%',
|
|
stack: 'Total',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [4, 0, 0, 4],
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('success')
|
|
: getColor('success-light')
|
|
},
|
|
data: revenueData[0]
|
|
},
|
|
{
|
|
name: 'Expanses',
|
|
type: 'bar',
|
|
barWidth: 8,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
itemStyle: {
|
|
borderRadius: [4, 0, 0, 4],
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('info')
|
|
: getColor('info-light')
|
|
},
|
|
data: expansesData[0]
|
|
}
|
|
],
|
|
grid: {
|
|
right: 20,
|
|
left: 3,
|
|
bottom: 0,
|
|
top: 16,
|
|
containLabel: true
|
|
},
|
|
animation: false
|
|
});
|
|
|
|
const responsiveOptions = {
|
|
xs: {
|
|
yAxis: {
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
},
|
|
grid: {
|
|
left: 15
|
|
}
|
|
},
|
|
sm: {
|
|
yAxis: {
|
|
axisLabel: {
|
|
margin: 32,
|
|
show: true
|
|
}
|
|
},
|
|
grid: {
|
|
left: 3
|
|
}
|
|
},
|
|
xl: {
|
|
yAxis: {
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
},
|
|
grid: {
|
|
left: 15
|
|
}
|
|
},
|
|
xxl: {
|
|
yAxis: {
|
|
axisLabel: {
|
|
show: true
|
|
}
|
|
},
|
|
grid: {
|
|
left: 3
|
|
}
|
|
}
|
|
};
|
|
|
|
echartSetOption(chart, userOptions, getDefaultOptions, responsiveOptions);
|
|
|
|
profitLagend.addEventListener('click', () => {
|
|
profitLagend.classList.toggle('opacity-50');
|
|
chart.dispatchAction({
|
|
type: 'legendToggleSelect',
|
|
name: 'Profit'
|
|
});
|
|
});
|
|
|
|
revenueLagend.addEventListener('click', () => {
|
|
revenueLagend.classList.toggle('opacity-50');
|
|
chart.dispatchAction({
|
|
type: 'legendToggleSelect',
|
|
name: 'Revenue'
|
|
});
|
|
});
|
|
|
|
expansesLagend.addEventListener('click', () => {
|
|
expansesLagend.classList.toggle('opacity-50');
|
|
chart.dispatchAction({
|
|
type: 'legendToggleSelect',
|
|
name: 'Expanses'
|
|
});
|
|
});
|
|
|
|
const cetegorySelect = document.querySelector('[data-activities-options]');
|
|
if (cetegorySelect) {
|
|
cetegorySelect.addEventListener('change', e => {
|
|
const { value } = e.currentTarget;
|
|
const data1 = profitData[value];
|
|
const data2 = revenueData[value];
|
|
const data3 = expansesData[value];
|
|
chart.setOption({
|
|
series: [
|
|
{
|
|
data: data1
|
|
},
|
|
{
|
|
data: data2
|
|
},
|
|
{
|
|
data: data3
|
|
}
|
|
]
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Echart Bar booking */
|
|
/* -------------------------------------------------------------------------- */
|
|
const { echarts } = window;
|
|
|
|
const grossProfitInit = () => {
|
|
const { getColor, getData, rgbaColor, getItemFromStore } =
|
|
window.phoenix.utils;
|
|
const $grossProfit = document.querySelector('.echart-gross-profit');
|
|
|
|
const data = [
|
|
{
|
|
name: 'Flight',
|
|
value: 30,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('primary')
|
|
: getColor('primary-light')
|
|
},
|
|
children: [
|
|
{
|
|
name: '1st class',
|
|
value: 5,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('primary'), 0.8)
|
|
: rgbaColor(getColor('primary-light'), 0.7)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: getColor('primary-dark')
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Business',
|
|
value: 15,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('primary'), 0.7)
|
|
: rgbaColor(getColor('primary-light'), 0.5)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('primary-dark'), 0.9)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('primary-dark'), 0.8)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('primary-dark'), 0.7)
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Economy',
|
|
value: 10,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('primary'), 0.6)
|
|
: rgbaColor(getColor('primary-light'), 0.3)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('primary-dark'), 0.6)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('primary-dark'), 0.5)
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Package',
|
|
value: 50,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('info')
|
|
: getColor('info-light')
|
|
},
|
|
children: [
|
|
{
|
|
name: 'Flight + Hotel',
|
|
value: 5,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('info'), 0.4)
|
|
: rgbaColor(getColor('info-light'), 0.3)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('info-dark'), 0.2)
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Flight + Event',
|
|
value: 20,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('info'), 0.5)
|
|
: rgbaColor(getColor('info-light'), 0.4)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('info-dark'), 0.3)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('info-dark'), 0.4)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('info-dark'), 0.5)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('info-dark'), 0.6)
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Flight + Hotel + Event',
|
|
value: 10,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('info'), 0.6)
|
|
: rgbaColor(getColor('info-light'), 0.55)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('info-dark'), 0.66)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('info-dark'), 0.7)
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Hotel + Event',
|
|
value: 5,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('info'), 0.7)
|
|
: rgbaColor(getColor('info-light'), 0.75)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('info-dark'), 0.8)
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Custom',
|
|
value: 10,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('info'), 0.8)
|
|
: rgbaColor(getColor('info-light'), 0.9)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('info-dark'), 0.9)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: getColor('info-dark')
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Hotel',
|
|
value: 25,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('success')
|
|
: getColor('success-light')
|
|
},
|
|
children: [
|
|
{
|
|
name: 'Rooms',
|
|
value: 10,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('success'), 0.8)
|
|
: rgbaColor(getColor('success-light'), 0.9)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: getColor('success-dark')
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('success-dark'), 0.88)
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Resorts',
|
|
value: 15,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('success'), 0.7)
|
|
: rgbaColor(getColor('success-light'), 0.5)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('success-dark'), 0.77)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('success-dark'), 0.66)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('success-dark'), 0.55)
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Trip',
|
|
value: 15,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? getColor('warning')
|
|
: getColor('warning-light')
|
|
},
|
|
children: [
|
|
{
|
|
name: 'Nature',
|
|
value: 5,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('warning'), 0.8)
|
|
: rgbaColor(getColor('warning-light'), 0.8)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: getColor('warning-dark')
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Events',
|
|
value: 10,
|
|
itemStyle: {
|
|
color:
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('warning'), 0.7)
|
|
: rgbaColor(getColor('warning-light'), 0.5)
|
|
},
|
|
children: [
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('warning-dark'), 0.7)
|
|
}
|
|
},
|
|
{
|
|
name: 'label-3',
|
|
value: 5,
|
|
itemStyle: {
|
|
color: rgbaColor(getColor('warning-dark'), 0.5)
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
const colors = [
|
|
getColor('primary-light'),
|
|
getColor('info-light'),
|
|
getColor('success-light'),
|
|
getColor('warning-light')
|
|
];
|
|
|
|
if ($grossProfit) {
|
|
const userOptions = getData($grossProfit, 'echarts');
|
|
const chart = echarts.init($grossProfit);
|
|
const getDefaultOptions = () => ({
|
|
color: colors,
|
|
tooltip: {
|
|
trigger: 'item',
|
|
padding: [7, 10],
|
|
backgroundColor: getColor('body-highlight-bg'),
|
|
borderColor: getColor('border-color'),
|
|
textStyle: { color: getColor('light-text-emphasis') },
|
|
borderWidth: 1,
|
|
transitionDuration: 0,
|
|
extraCssText: 'z-index: 1000'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'sunburst',
|
|
center: ['50%', '50%'],
|
|
data,
|
|
sort(a, b) {
|
|
if (a.depth === 1) {
|
|
return b.getValue() - a.getValue();
|
|
}
|
|
return a.dataIndex - b.dataIndex;
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
levels: [
|
|
{},
|
|
{
|
|
r0: 0,
|
|
r: 53,
|
|
itemStyle: {
|
|
borderWidth: 2,
|
|
borderColor: getColor('body-bg')
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
blur: {
|
|
itemStyle: {
|
|
borderWidth: 6.5
|
|
}
|
|
}
|
|
},
|
|
{
|
|
r0: 65,
|
|
r: 110,
|
|
itemStyle: {
|
|
borderWidth: 2,
|
|
borderColor: getColor('body-bg')
|
|
},
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
r0: 120,
|
|
r: 125,
|
|
itemStyle: {
|
|
borderWidth: 2,
|
|
borderColor: getColor('body-bg')
|
|
},
|
|
label: {
|
|
show: false
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
echartSetOption(chart, userOptions, getDefaultOptions);
|
|
}
|
|
};
|
|
|
|
const holidaysNextMonthChartInit = () => {
|
|
const { getColor, getData, getItemFromStore, rgbaColor } =
|
|
window.phoenix.utils;
|
|
const $holidaysNextMonthchartEl = document.querySelector(
|
|
'.echart-holidays-next-month'
|
|
);
|
|
const { echarts } = window;
|
|
const numbers = [
|
|
84, 572, 193, 427, 649, 318, 765, 112, 490, 231, 674, 815, 447, 56, 903,
|
|
178, 629, 394, 742, 295, 518, 67, 936, 129, 681, 862, 410, 553, 268, 719,
|
|
42, 589, 334, 786, 155, 607, 878, 525, 449, 206, 659, 99, 472, 724, 261,
|
|
834, 389, 613, 157, 702, 451, 82, 545, 293, 736, 870, 104, 681, 321, 574,
|
|
136, 689, 840, 470, 127, 598, 354, 807, 215, 767, 498, 51, 904, 176, 629,
|
|
389, 731, 268, 611, 155, 702, 453, 82, 537, 294, 747, 881, 109, 662, 405,
|
|
858, 515, 47, 936, 189, 641, 312, 764, 236, 579, 135, 688, 429, 71, 624,
|
|
370, 822, 173, 725, 476, 29, 880, 125, 677, 338, 791, 216, 568, 115, 666,
|
|
409, 861, 502, 44, 907, 160, 612, 374, 826, 279, 731, 182, 735, 478, 27,
|
|
879, 120, 672, 335, 788, 227, 580, 123, 676, 421, 74, 627, 381, 834, 185,
|
|
738, 489, 32, 885, 128, 681, 342, 794, 245, 598, 137, 690, 433, 76, 629,
|
|
380, 832, 194, 747, 498, 41, 894, 142, 695, 346, 799, 250, 603, 108, 661,
|
|
414, 867, 508, 59, 912, 165, 616, 369, 821, 282, 735, 179, 732, 474, 26,
|
|
879, 124, 676, 329, 782, 233, 586, 118, 671, 414, 867, 299, 651, 156, 708,
|
|
453, 100, 553, 304, 757, 901, 145, 697, 448, 96, 549, 300, 753, 896, 149,
|
|
701, 452, 105, 558, 309, 762, 907, 161, 713, 464, 73, 526, 277, 730, 875,
|
|
122, 575, 326, 779, 924, 171, 724, 475, 28, 831, 184, 737, 882, 129, 582,
|
|
333, 786, 930, 176, 729, 480, 35, 838, 191, 744, 889, 136, 589, 340, 793,
|
|
936, 183, 736, 487, 42, 845, 198, 751, 896, 143, 596, 347, 800, 945, 190,
|
|
743, 498, 49, 852, 205, 758, 903, 150, 603, 354, 807, 952, 197, 750, 505,
|
|
56, 859, 212, 765, 910, 157, 610, 361, 814, 959, 204, 757, 512, 63, 866,
|
|
219, 772, 917, 164, 617, 368, 821, 966, 211, 764, 519, 70, 873, 226, 779,
|
|
924, 171, 724, 475, 28, 831, 184, 737, 882, 129, 582, 333, 786, 930, 176,
|
|
729, 480, 35, 838, 191, 744, 889, 136, 589, 340, 793, 936, 183, 736, 487,
|
|
42, 845, 198, 751, 896, 143, 596, 347, 800, 945, 190, 743, 498, 49, 852,
|
|
205, 758, 903, 150, 603, 354, 807, 952, 197, 750, 505, 56, 859, 212, 765,
|
|
910, 157, 610, 361, 814, 959, 204, 757, 512, 63, 866, 219, 772, 917, 164,
|
|
617, 368, 821, 966, 211, 764, 519, 70, 873, 226, 779, 924, 171, 724, 475,
|
|
28, 831, 184, 737, 882, 129, 582, 333, 786, 930, 176, 729, 480, 35, 838,
|
|
191, 744, 889, 136, 589, 340, 793, 936, 183, 736, 487, 42, 845, 198, 751,
|
|
896, 143, 596, 347, 800, 945, 190, 743, 498, 49, 852, 205, 758, 903, 150,
|
|
603, 354, 807, 952, 197, 750, 505, 56, 859, 212, 765, 910, 157, 610, 361,
|
|
814, 959, 204, 757, 512, 63, 866, 219, 772, 917, 164, 617, 368, 821, 966,
|
|
211, 764, 519, 70, 873, 226, 779, 924, 171, 724, 475, 28, 831
|
|
];
|
|
function getVirtualData(year) {
|
|
const date = +echarts.time.parse(`${year}-01-01`);
|
|
const end = +echarts.time.parse(`${+year + 1}-01-01`);
|
|
const dayTime = 3600 * 24 * 1000;
|
|
const data = [];
|
|
let index = 0;
|
|
for (let time = date; time < end; time += dayTime) {
|
|
data.push([
|
|
echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
|
|
numbers[index]
|
|
]);
|
|
index += 1;
|
|
}
|
|
return data;
|
|
}
|
|
|
|
if ($holidaysNextMonthchartEl) {
|
|
const userOptions = getData($holidaysNextMonthchartEl, 'echarts');
|
|
const chart = window.echarts.init($holidaysNextMonthchartEl);
|
|
const getDefaultOptions = () => ({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
axisPointer: {
|
|
type: 'none'
|
|
},
|
|
padding: [7, 10],
|
|
backgroundColor: getColor('body-highlight-bg'),
|
|
borderColor: getColor('border-color'),
|
|
textStyle: { color: getColor('light-text-emphasis') },
|
|
borderWidth: 1,
|
|
transitionDuration: 0,
|
|
extraCssText: 'z-index: 1000'
|
|
},
|
|
visualMap: {
|
|
min: 0,
|
|
max: 1000,
|
|
calculable: true,
|
|
show: false,
|
|
color: [
|
|
getColor('warning'),
|
|
// getColor('warning-light'),
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('warning'), 0.5)
|
|
: getColor('warning-light'),
|
|
// getColor('warning-lighter')
|
|
getItemFromStore('phoenixTheme') === 'dark'
|
|
? rgbaColor(getColor('warning'), 0.75)
|
|
: getColor('warning-light')
|
|
]
|
|
},
|
|
calendar: {
|
|
orient: 'vertical',
|
|
range: '2017-03',
|
|
width: '99%',
|
|
height: '85.5%',
|
|
left: '2',
|
|
right: 'auto',
|
|
top: 42,
|
|
yearLabel: {
|
|
show: false
|
|
},
|
|
monthLabel: {
|
|
show: false
|
|
},
|
|
dayLabel: {
|
|
firstDay: 0,
|
|
nameMap: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
|
|
margin: 24,
|
|
color: getColor('secondary-text-emphasis'),
|
|
fontFamily: 'Nunito Sans',
|
|
fontWeight: 700
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
color: getColor('dark-text-emphasis'),
|
|
borderColor: getColor('border-color')
|
|
}
|
|
},
|
|
series: {
|
|
type: 'scatter',
|
|
coordinateSystem: 'calendar',
|
|
symbolSize(val) {
|
|
return val[1] / 35;
|
|
},
|
|
data: getVirtualData('2017'),
|
|
itemStyle: {
|
|
color: getColor('warning'),
|
|
opacity: 0.8
|
|
}
|
|
}
|
|
});
|
|
|
|
const responsiveOptions = {
|
|
xl: {
|
|
calendar: {
|
|
height: '83%'
|
|
}
|
|
},
|
|
xxl: {
|
|
calendar: {
|
|
height: '85.5%'
|
|
}
|
|
}
|
|
};
|
|
|
|
echartSetOption(chart, userOptions, getDefaultOptions, responsiveOptions);
|
|
}
|
|
};
|
|
|
|
const { docReady } = window.phoenix.utils;
|
|
|
|
docReady(bookingValueChartInit);
|
|
docReady(commissionChartInit);
|
|
docReady(cancelBookingChartInit);
|
|
docReady(countryWiseVisitorsChartInit);
|
|
docReady(financialActivitiesChartInit);
|
|
docReady(holidaysNextMonthChartInit);
|
|
docReady(bookingsChartInit);
|
|
docReady(grossProfitInit);
|
|
|
|
}));
|
|
//# sourceMappingURL=travel-agency-dashboard.js.map
|
|
|
|
</script>
|
|
{% endblock %}
|