Mini Shell
Mini Shell
| Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/cards/ |
| Current File : /home/opti/workflow/src/public/app-assets/js/scripts/cards/card-ecommerce.js |
/*=========================================================================================
File Name: card-ecommerce.js
Description: intialize advance ecommerce cards
----------------------------------------------------------------------------------------
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
Version: 1.0
Author: Pixinvent
Author URL: hhttp://www.themeforest.net/user/pixinvent
==========================================================================================*/
(function(window, document, $) {
'use strict';
/********************************
* Monthly Sales *
********************************/
// Set paths
// ------------------------------
require.config({
paths: {
echarts: '../../../app-assets/vendors/js/charts/echarts'
}
});
// Configuration
// ------------------------------
require(
[
'echarts',
'echarts/chart/pie',
'echarts/chart/funnel'
],
// Charts setup
function (ec) {
/****************************************
* Monthly Sales *
****************************************/
// Initialize chart
// ------------------------------
var myChart = ec.init(document.getElementById('nightingale-rose-labels'));
// Chart Options
// ------------------------------
var chartOptions = {
// Add title
title: {
text: 'Monthly Sales',
subtext: 'product sales on monthly basis',
x: 'center',
textStyle: {
color: '#FFF'
},
subtextStyle: {
color: '#FFF'
}
},
// Add tooltip
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: +{c}$ ({d}%)"
},
color: ['#ffd775', '#ff847c', '#e84a5f', '#2a363b', '#7fd5c3', '#61a781', '#f0c75e', '#df8c7d', '#e8ed8a', '#55bcbb', '#e974b9', '#2f9395'],
// Display toolbox
toolbox: {
show: true,
orient: 'vertical',
feature: {
mark: {
show: true,
title: {
mark: 'Markline switch',
markUndo: 'Undo markline',
markClear: 'Clear markline'
}
},
dataView: {
show: true,
readOnly: false,
title: 'View data',
lang: ['View chart data', 'Close', 'Update']
},
magicType: {
show: true,
title: {
pie: 'Switch to pies',
funnel: 'Switch to funnel',
},
type: ['pie', 'funnel']
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
},
color: '#FFF'
},
// Enable drag recalculate
calculable: true,
// Add series
series: [
{
name: 'Increase (brutto)',
type: 'pie',
radius: ['15%', '73%'],
center: ['50%', '57%'],
roseType: 'area',
itemStyle: {
normal: {
label: {
textStyle: {
color: '#FFF'
}
},
labelLine: {
lineStyle: {
color: '#FFF'
}
}
}
},
// Funnel
width: '40%',
height: '78%',
x: '30%',
y: '17.5%',
max: 450,
sort: 'ascending',
data: [
{value: 440, name: 'January'},
{value: 260, name: 'February'},
{value: 350, name: 'March'},
{value: 250, name: 'April'},
{value: 210, name: 'May'},
{value: 350, name: 'June'},
{value: 300, name: 'July'},
{value: 430, name: 'August'},
{value: 400, name: 'September'},
{value: 450, name: 'October'},
{value: 330, name: 'November'},
{value: 200, name: 'December'}
],
}
]
};
// Apply options
// ------------------------------
myChart.setOption(chartOptions);
// Resize chart
// ------------------------------
$(function () {
// Resize chart on menu width change and window resize
$(window).on('resize', resize);
$(".menu-toggle").on('click', resize);
// Resize function
function resize() {
setTimeout(function() {
// Resize chart
myChart.resize();
}, 200);
}
});
/************************************
* Top Selling Categories *
************************************/
// Initialize chart
// ------------------------------
var topCategoryChart = ec.init(document.getElementById('doughnut'));
// Chart Options
// ------------------------------
var topCategoryChartOptions = {
// Add title
title: {
text: 'Top 5 Categories',
subtext: 'Top selling mobiles',
x: 'center',
textStyle: {
color: '#FFF'
},
subtextStyle: {
color: '#FFF'
}
},
// Add legend
legend: {
orient: 'vertical',
x: 'left',
data: ['Moto Z', 'Galaxy S7 Edge', 'One Plus 3', 'Mi 5', 'iPhone 6s'],
textStyle: {
color: '#FFF'
},
},
// Add custom colors
color: ['#ffd322', '#ffa422', '#e89805', '#ffc107', '#fff306'],
// Display toolbox
toolbox: {
show: true,
orient: 'vertical',
feature: {
mark: {
show: true,
title: {
mark: 'Markline switch',
markUndo: 'Undo markline',
markClear: 'Clear markline'
}
},
dataView: {
show: true,
readOnly: false,
title: 'View data',
lang: ['View chart data', 'Close', 'Update']
},
magicType: {
show: true,
title: {
pie: 'Switch to pies',
funnel: 'Switch to funnel',
},
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
y: '20%',
width: '50%',
height: '70%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
},
color: '#FFF'
},
// Enable drag recalculate
calculable: true,
// Add series
series: [
{
name: 'Top Categories',
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '57.5%'],
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
color: '#FFF'
}
},
labelLine: {
show: true,
lineStyle: {
color: '#FFF'
}
}
},
emphasis: {
label: {
show: true,
formatter: '{b}' + '\n\n' + '{c} ({d}%)',
position: 'center',
textStyle: {
fontSize: '17',
fontWeight: '500'
}
}
}
},
data: [
{value: 335, name: 'Moto Z'},
{value: 618, name: 'Galaxy S7 Edge'},
{value: 234, name: 'One Plus 3'},
{value: 135, name: 'Mi 5'},
{value: 956, name: 'iPhone 6s'}
]
}
]
};
// Apply options
// ------------------------------
topCategoryChart.setOption(topCategoryChartOptions);
// Resize chart
// ------------------------------
$(function () {
// Resize chart on menu width change and window resize
$(window).on('resize', resize);
$(".menu-toggle").on('click', resize);
// Resize function
function resize() {
setTimeout(function() {
// Resize chart
topCategoryChart.resize();
}, 200);
}
});
/************************************
* Customer Browser Stats *
************************************/
// Initialize chart
// ------------------------------
var customerBrowerChart = ec.init(document.getElementById('timeline'));
var idx = 1;
// Chart Options
// ------------------------------
var customBrowerChartOptions = {
// Add timeline
timeline: {
x: 10,
x2: 10,
data: [
'2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01',
{ name:'2014-06-01', symbol: 'emptyStar2', symbolSize: 8 },
'2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01',
{ name:'2014-12-01', symbol: 'star2', symbolSize: 8 }
],
label: {
formatter: function(s) {
return s.slice(0, 7);
},
textStyle: {
color: '#FFF'
},
},
checkpointStyle: {
color: '#6C5B7B',
borderColor: '#FFF',
label: {
// show: false,
textStyle: {
color: '#FFF'
}
}
},
controlStyle: {
normal: {
color: '#FFF'
},
},
lineStyle: {
color: '#FFF',
width: 1,
type: 'dashed'
},
autoPlay: true,
playInterval: 3000,
},
// Set options
options: [
{
// Add title
title: {
text: 'Browser statistics',
subtext: 'Based on shared research',
x: 'center',
textStyle: {
color: '#FFF'
},
subtextStyle: {
color: '#FFF'
}
},
// Add tooltip
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
// Add legend
legend: {
x: 'left',
orient: 'vertical',
data: ['Chrome','Firefox','Safari','IE9+','IE8-'],
textStyle: {
color: '#FFF'
},
},
// Add custom colors
color: ['#FECEA8', '#FF847C', '#F8AC6F','#6C5B7B', '#99B898'],
// Display toolbox
toolbox: {
show: true,
orient: 'vertical',
feature: {
mark: {
show: true,
title: {
mark: 'Markline switch',
markUndo: 'Undo markline',
markClear: 'Clear markline'
}
},
dataView: {
show: true,
readOnly: false,
title: 'View data',
lang: ['View chart data', 'Close', 'Update']
},
magicType: {
show: true,
title: {
pie: 'Switch to pies',
funnel: 'Switch to funnel',
},
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1700
}
}
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Same as image',
lang: ['Save']
}
},
color: "#FFF"
},
// Add series
series: [{
name: 'Browser',
type: 'pie',
center: ['50%', '50%'],
radius: '60%',
data: [
{value: idx * 128 + 80, name: 'Chrome'},
{value: idx * 64 + 160, name: 'Firefox'},
{value: idx * 32 + 320, name: 'Safari'},
{value: idx * 16 + 640, name: 'IE9+'},
{value: idx++ * 8 + 1280, name: 'IE8-'}
],
itemStyle: {
normal: {
label: {
textStyle: {
color: '#FFF'
}
},
labelLine: {
lineStyle: {
color: '#FFF'
}
}
}
},
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
},
{
series: [{
name: 'Browser',
type: 'pie',
data: [
{value: idx * 128 + 80, name:'Chrome'},
{value: idx * 64 + 160, name:'Firefox'},
{value: idx * 32 + 320, name:'Safari'},
{value: idx * 16 + 640, name:'IE9+'},
{value: idx++ * 8 + 1280, name:'IE8-'}
]
}]
}
]
};
// Apply options
// ------------------------------
customerBrowerChart.setOption(customBrowerChartOptions);
// Resize chart
// ------------------------------
$(function () {
// Resize chart on menu width change and window resize
$(window).on('resize', resize);
$(".menu-toggle").on('click', resize);
// Resize function
function resize() {
setTimeout(function() {
// Resize chart
customerBrowerChart.resize();
}, 200);
}
});
}
);
})(window, document, jQuery);