rianraka/mamberamo
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
rifqiryandi
2022-04-13 13:51:55 +07:00
commit 47e209c023
3107 changed files with 238911 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
public/style/js/dashboard/dashboard-1.js Normal file
View File

@ -0,0 +1,273 @@
(function($) {
/* "use strict" */
var dzChartlist = function() {
let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var btnAware = function() {
$('.avtivity-card')
.on('mouseenter', function(e) {
var parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top;
$(this).find('.effect').css({ top: relY, left: relX })
})
.on('mouseout', function(e) {
var parentOffset = $(this).offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top;
$(this).find('.effect').css({ top: relY, left: relX })
});
}
var chartTimeline = function() {
var optionsTimeline = {
chart: {
type: "bar",
height: 320,
stacked: true,
toolbar: {
show: false
},
sparkline: {
//enabled: true
},
backgroundBarRadius: 5,
offsetX: -10,
},
series: [{
name: "New Clients",
data: [70, 20, 75, 20, 50, 40, 65, 15, 40, 55, 60, 20, 75, 40, 25, 70, 20, 40, 65, 50]
},
{
name: "Retained Clients",
data: [-60, -10, -50, -25, -30, -65, -22, -10, -50, -20, -70, -35, -60, -20, -30, -45, -70, -50, -45, -10]
}
],
plotOptions: {
bar: {
columnWidth: "20%",
endingShape: "rounded",
colors: {
backgroundBarColors: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)'],
backgroundBarOpacity: 1,
backgroundBarRadius: 5,
opacity: 0
},
},
distributed: true
},
colors: ['#0B2A97', '#FF9432'],
grid: {
show: true,
},
legend: {
show: false
},
fill: {
opacity: 1
},
dataLabels: {
enabled: false,
colors: ['#0B2A97', '#FF9432'],
dropShadow: {
enabled: true,
top: 1,
left: 1,
blur: 1,
opacity: 1
}
},
xaxis: {
categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
labels: {
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'Poppins',
fontWeight: 400
},
},
crosshairs: {
show: false,
},
axisBorder: {
show: false,
},
},
yaxis: {
//show: false
labels: {
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'Poppins',
fontWeight: 400
},
},
},
tooltip: {
x: {
show: true
}
}
};
var chartTimelineRender = new ApexCharts(document.querySelector("#chartTimeline"), optionsTimeline);
chartTimelineRender.render();
}
var chartBar = function() {
var optionsArea = {
series: [{
name: "Distance",
data: [2, 2, 1, 12, 6, 4, 10]
}],
chart: {
height: 200,
type: 'area',
group: 'social',
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
width: [10],
colors: ['#0B2A97'],
curve: 'smooth'
},
legend: {
show: false,
tooltipHoverFormatter: function(val, opts) {
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
},
},
markers: {
strokeWidth: [8],
strokeColors: ['#0B2A97'],
border: 0,
colors: ['#fff'],
hover: {
size: 13,
}
},
xaxis: {
categories: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
labels: {
style: {
colors: '#3E4954',
fontSize: '14px',
fontFamily: 'Poppins',
fontWeight: 100,
},
},
},
yaxis: {
labels: {
offsetX: -16,
style: {
colors: '#3E4954',
fontSize: '14px',
fontFamily: 'Poppins',
fontWeight: 100,
},
},
},
fill: {
colors: ['#0B2A97'],
type: 'solid',
opacity: 0
},
colors: ['#0B2A97'],
grid: {
borderColor: '#f1f1f1',
xaxis: {
lines: {
show: true
}
}
},
responsive: [{
breakpoint: 1601,
options: {
chart: {
height: 400
},
},
}, {
breakpoint: 768,
options: {
chart: {
height: 250
},
markers: {
strokeWidth: [4],
strokeColors: ['#0B2A97'],
border: 0,
colors: ['#fff'],
hover: {
size: 6,
}
},
stroke: {
width: [6],
colors: ['#0B2A97'],
curve: 'smooth'
},
}
}]
};
var chartArea = new ApexCharts(document.querySelector("#chartBar"), optionsArea);
chartArea.render();
}
/* Function ============ */
return {
init: function() {},
load: function() {
btnAware();
chartTimeline();
chartBar();
},
resize: function() {
}
}
}();
jQuery(document).ready(function() {});
jQuery(window).on('load', function() {
setTimeout(function() {
dzChartlist.load();
}, 1000);
});
jQuery(window).on('resize', function() {
});
})(jQuery);

280
public/style/js/dashboard/distance-map.js Normal file
View File

@ -0,0 +1,280 @@
(function($) {
/* "use strict" */
var dzChartlist = function(){
let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var chartBarRunning = function(){
var chartBarRunningOptions = {
series: [
{
name: 'Running',
data: [50, 18, 70, 40, 90, 70, 20, 75, 80, 25, 70, 45],
},
{
name: 'Cycling',
data: [80, 40, 55, 20, 45, 30, 80, 90, 85, 90, 30, 85]
},
],
chart: {
type: 'bar',
height: 370,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
endingShape:'rounded',
columnWidth: '50%',
},
},
colors:['#70349D', '#FF3282'],
dataLabels: {
enabled: false,
},
markers: {
shape: "circle",
},
legend: {
show: false,
fontSize: '12px',
labels: {
colors: '#000000',
},
markers: {
width: 18,
height: 18,
strokeWidth: 0,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
}
},
stroke: {
show: true,
width: 6,
colors: ['transparent']
},
grid: {
borderColor: '#eee',
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
crosshairs: {
show: false,
}
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
},
fill: {
opacity: 1,
colors:['#70349D', '#FF3282'],
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
},
responsive: [{
breakpoint: 575,
options: {
plotOptions: {
bar: {
columnWidth: '40%',
},
},
chart:{
height:250,
}
}
}]
};
var chartBarRunningObject = new ApexCharts(document.querySelector("#chartBarRunning"), chartBarRunningOptions);
chartBarRunningObject.render();
}
var chartBarCycle = function(){
var chartBarCycleOptions = {
series: [
{
name: 'Cycling',
data: [80, 40, 55, 20, 45, 30, 80, 90, 85, 90, 30, 85]
},
],
chart: {
type: 'bar',
height: 370,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
endingShape:'rounded',
columnWidth: '50%',
},
},
colors:['#FF3282'],
dataLabels: {
enabled: false,
},
markers: {
shape: "circle",
},
legend: {
show: false,
fontSize: '12px',
labels: {
colors: '#000000',
},
markers: {
width: 18,
height: 18,
strokeWidth: 0,
strokeColor: '#fff',
fillColors: undefined,
radius: 12,
}
},
stroke: {
show: true,
width: 6,
colors: ['transparent']
},
grid: {
borderColor: '#eee',
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
crosshairs: {
show: false,
}
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#787878',
fontSize: '13px',
fontFamily: 'poppins',
fontWeight: 100,
cssClass: 'apexcharts-xaxis-label',
},
},
},
fill: {
opacity: 1,
colors:['#FF3282'],
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
},
responsive: [{
breakpoint: 575,
options: {
plotOptions: {
bar: {
columnWidth: '40%',
},
},
chart:{
height:250,
}
}
}]
};
var chartBarCycleObject = new ApexCharts(document.querySelector("#chartBarCycle"), chartBarCycleOptions);
chartBarCycleObject.render();
}
/* Function ============ */
return {
init:function(){
},
load:function(){
chartBarRunning();
chartBarCycle();
},
resize:function(){
}
}
}();
jQuery(document).ready(function(){
});
jQuery(window).on('load',function(){
setTimeout(function(){
dzChartlist.load();
}, 1000);
});
jQuery(window).on('resize',function(){
});
})(jQuery);

425
public/style/js/dashboard/workout-statistic.js Normal file
View File

@ -0,0 +1,425 @@
(function($) {
/* "use strict" */
var dzChartlist = function(){
let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var chartBar = function(){
var optionsArea = {
series: [{
name: "Running",
data: [20, 40, 20, 80, 40, 40]
}
],
chart: {
height: 400,
type: 'area',
group: 'social',
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
width: [4],
colors:['#A02CFA'],
curve: 'smooth'
},
legend: {
show:false,
tooltipHoverFormatter: function(val, opts) {
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
},
markers: {
fillColors:['#A02CFA'],
width: 19,
height: 19,
strokeWidth: 0,
radius: 19
}
},
markers: {
strokeWidth: [4],
strokeColors: ['#A02CFA'],
border:0,
colors:['#fff'],
hover: {
size: 6,
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
labels: {
style: {
colors: '#3E4954',
fontSize: '14px',
fontFamily: 'Poppins',
fontWeight: 100,
},
},
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#3E4954',
fontSize: '14px',
fontFamily: 'Poppins',
fontWeight: 100,
},
},
},
fill: {
colors:['#A02CFA'],
type:'solid',
opacity: 0.7
},
colors:['#A02CFA'],
grid: {
borderColor: '#f1f1f1',
xaxis: {
lines: {
show: true
}
}
},
responsive: [{
breakpoint: 575,
options: {
chart: {
height: 250,
}
}
}]
};
var chartArea = new ApexCharts(document.querySelector("#chartBar"), optionsArea);
chartArea.render();
}
var chartBar2 = function(){
var optionsArea = {
series: [{
name: "Running",
data: [40, 40, 30, 90, 10, 80]
}
],
chart: {
height: 400,
type: 'area',
group: 'social',
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
width: [4],
colors:['#FF3282'],
curve: 'smooth'
},
legend: {
show:false,
tooltipHoverFormatter: function(val, opts) {
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
},
markers: {
fillColors:['#FF3282'],
width: 19,
height: 19,
strokeWidth: 0,
radius: 19
}
},
markers: {
strokeWidth: [4],
strokeColors: ['#FF3282'],
border:0,
colors:['#fff'],
hover: {
size: 6,
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
labels: {
style: {
colors: '#3E4954',
fontSize: '14px',
fontFamily: 'Poppins',
fontWeight: 100,
},
},
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#3E4954',
fontSize: '14px',
fontFamily: 'Poppins',
fontWeight: 100,
},
},
},
fill: {
colors:['#FF3282'],
type:'solid',
opacity: 0.7
},
colors:['#FF3282'],
grid: {
borderColor: '#f1f1f1',
xaxis: {
lines: {
show: true
}
}
},
responsive: [{
breakpoint: 575,
options: {
chart: {
height: 250,
}
}
}]
};
var chartArea = new ApexCharts(document.querySelector("#chartBar2"), optionsArea);
chartArea.render();
}
var chartBar3 = function(){
var optionsArea = {
series: [{
name: "Running",
data: [20, 15, 50, 20, 50, 30]
}
],
chart: {
height: 400,
type: 'area',
group: 'social',
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
width: [4],
colors:['#FFBC11'],
curve: 'smooth'
},
legend: {
show:false,
tooltipHoverFormatter: function(val, opts) {
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
},
markers: {
fillColors:['#FFBC11'],
width: 19,
height: 19,
strokeWidth: 0,
radius: 19
}
},
markers: {
strokeWidth: [4],
strokeColors: ['#FFBC11'],
border:0,
colors:['#fff'],
hover: {
size: 6,
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
labels: {
style: {
colors: '#3E4954',
fontSize: '14px',
fontFamily: 'Poppins',
fontWeight: 100,
},
},
},
yaxis: {
labels: {
offsetX:-16,
style: {
colors: '#3E4954',
fontSize: '14px',
fontFamily: 'Poppins',
fontWeight: 100,
},
},
},
fill: {
colors:['#FFBC11'],
type:'solid',
opacity: 0.7
},
colors:['#FFBC11'],
grid: {
borderColor: '#f1f1f1',
xaxis: {
lines: {
show: true
}
}
},
responsive: [{
breakpoint: 575,
options: {
chart: {
height: 250,
}
}
}]
};
var chartArea = new ApexCharts(document.querySelector("#chartBar3"), optionsArea);
chartArea.render();
}
var pieChart = function(){
var options = {
series: [20, 35, 45],
chart: {
type: 'donut',
height:200,
},
legend: {
show:false,
},
fill:{
colors:['#FF9900','#0B2A97','#EBEBEB']
},
stroke:{
width:0,
},
colors:['#FF9900','#0B2A97','#EBEBEB'],
dataLabels: {
enabled: false
}
};
var chart = new ApexCharts(document.querySelector("#pieChart"), options);
chart.render();
}
var radialBar = function(){
var options = {
series: [81],
chart: {
height: 280,
type: 'radialBar',
offsetY: -10
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 135,
dataLabels: {
name: {
fontSize: '16px',
color: undefined,
offsetY: 120
},
value: {
offsetY: 0,
fontSize: '34px',
color: 'black',
formatter: function (val) {
return val + "%";
}
}
}
}
},
fill: {
type: 'gradient',
colors:'#0B2A97',
gradient: {
shade: 'dark',
shadeIntensity: 0.15,
inverseColors: false,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 65, 91]
},
},
stroke: {
lineCap: 'round',
colors:'#0B2A97'
},
labels: [''],
};
var chart = new ApexCharts(document.querySelector("#radialBar"), options);
chart.render();
}
var donutChart = function(){
$("span.donut").peity("donut", {
width: "90",
height: "90"
});
}
/* Function ============ */
return {
init:function(){
},
load:function(){
chartBar();
chartBar2();
chartBar3();
pieChart();
radialBar();
donutChart();
},
resize:function(){
}
}
}();
jQuery(document).ready(function(){
});
jQuery(window).on('load',function(){
setTimeout(function(){
dzChartlist.load();
}, 1000);
});
jQuery(window).on('resize',function(){
});
})(jQuery);