1508 lines
44 KiB
JavaScript
1508 lines
44 KiB
JavaScript
(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'
|
|
);
|
|
|
|
|
|
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
|