123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662 |
- /**
- * Dashboard Analytics
- */
-
- 'use strict';
-
- (function () {
- let cardColor, headingColor, labelColor, shadeColor, grayColor;
- if (isDarkStyle) {
- cardColor = config.colors_dark.cardColor;
- labelColor = config.colors_dark.textMuted;
- headingColor = config.colors_dark.headingColor;
- shadeColor = 'dark';
- grayColor = '#5E6692'; // gray color is for stacked bar chart
- } else {
- cardColor = config.colors.cardColor;
- labelColor = config.colors.textMuted;
- headingColor = config.colors.headingColor;
- shadeColor = '';
- grayColor = '#817D8D';
- }
-
- // swiper loop and autoplay
- // --------------------------------------------------------------------
- const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
- if (swiperWithPagination) {
- new Swiper(swiperWithPagination, {
- loop: true,
- autoplay: {
- delay: 2500,
- disableOnInteraction: false
- },
- pagination: {
- clickable: true,
- el: '.swiper-pagination'
- }
- });
- }
-
- // Revenue Generated Area Chart
- // --------------------------------------------------------------------
- const revenueGeneratedEl = document.querySelector('#revenueGenerated'),
- revenueGeneratedConfig = {
- chart: {
- height: 130,
- type: 'area',
- parentHeightOffset: 0,
- toolbar: {
- show: false
- },
- sparkline: {
- enabled: true
- }
- },
- markers: {
- colors: 'transparent',
- strokeColors: 'transparent'
- },
- grid: {
- show: false
- },
- colors: [config.colors.success],
- fill: {
- type: 'gradient',
- gradient: {
- shade: shadeColor,
- shadeIntensity: 0.8,
- opacityFrom: 0.6,
- opacityTo: 0.1
- }
- },
- dataLabels: {
- enabled: false
- },
- stroke: {
- width: 2,
- curve: 'smooth'
- },
- series: [
- {
- data: [300, 350, 330, 380, 340, 400, 380]
- }
- ],
- xaxis: {
- show: true,
- lines: {
- show: false
- },
- labels: {
- show: false
- },
- stroke: {
- width: 0
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- stroke: {
- width: 0
- },
- show: false
- },
- tooltip: {
- enabled: false
- }
- };
- if (typeof revenueGeneratedEl !== undefined && revenueGeneratedEl !== null) {
- const revenueGenerated = new ApexCharts(revenueGeneratedEl, revenueGeneratedConfig);
- revenueGenerated.render();
- }
-
- // Earning Reports Bar Chart
- // --------------------------------------------------------------------
- const weeklyEarningReportsEl = document.querySelector('#weeklyEarningReports'),
- weeklyEarningReportsConfig = {
- chart: {
- height: 202,
- parentHeightOffset: 0,
- type: 'bar',
- toolbar: {
- show: false
- }
- },
- plotOptions: {
- bar: {
- barHeight: '60%',
- columnWidth: '38%',
- startingShape: 'rounded',
- endingShape: 'rounded',
- borderRadius: 4,
- distributed: true
- }
- },
- grid: {
- show: false,
- padding: {
- top: -30,
- bottom: 0,
- left: -10,
- right: -10
- }
- },
- colors: [
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors_label.primary,
- config.colors.primary,
- config.colors_label.primary,
- config.colors_label.primary
- ],
- dataLabels: {
- enabled: false
- },
- series: [
- {
- data: [40, 65, 50, 45, 90, 55, 70]
- }
- ],
- legend: {
- show: false
- },
- xaxis: {
- categories: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
- axisBorder: {
- show: false
- },
- axisTicks: {
- show: false
- },
- labels: {
- style: {
- colors: labelColor,
- fontSize: '13px',
- fontFamily: 'Public Sans'
- }
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- tooltip: {
- enabled: false
- },
- responsive: [
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 199
- }
- }
- }
- ]
- };
- if (typeof weeklyEarningReportsEl !== undefined && weeklyEarningReportsEl !== null) {
- const weeklyEarningReports = new ApexCharts(weeklyEarningReportsEl, weeklyEarningReportsConfig);
- weeklyEarningReports.render();
- }
-
- // Support Tracker - Radial Bar Chart
- // --------------------------------------------------------------------
- const supportTrackerEl = document.querySelector('#supportTracker'),
- supportTrackerOptions = {
- series: [85],
- labels: ['Completed Task'],
- chart: {
- height: 360,
- type: 'radialBar'
- },
- plotOptions: {
- radialBar: {
- offsetY: 10,
- startAngle: -140,
- endAngle: 130,
- hollow: {
- size: '65%'
- },
- track: {
- background: cardColor,
- strokeWidth: '100%'
- },
- dataLabels: {
- name: {
- offsetY: -20,
- color: labelColor,
- fontSize: '13px',
- fontWeight: '400',
- fontFamily: 'Public Sans'
- },
- value: {
- offsetY: 10,
- color: headingColor,
- fontSize: '38px',
- fontWeight: '500',
- fontFamily: 'Public Sans'
- }
- }
- }
- },
- colors: [config.colors.primary],
- fill: {
- type: 'gradient',
- gradient: {
- shade: 'dark',
- shadeIntensity: 0.5,
- gradientToColors: [config.colors.primary],
- inverseColors: true,
- opacityFrom: 1,
- opacityTo: 0.6,
- stops: [30, 70, 100]
- }
- },
- stroke: {
- dashArray: 10
- },
- grid: {
- padding: {
- top: -20,
- bottom: 5
- }
- },
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- },
- responsive: [
- {
- breakpoint: 1025,
- options: {
- chart: {
- height: 330
- }
- }
- },
- {
- breakpoint: 769,
- options: {
- chart: {
- height: 280
- }
- }
- }
- ]
- };
- if (typeof supportTrackerEl !== undefined && supportTrackerEl !== null) {
- const supportTracker = new ApexCharts(supportTrackerEl, supportTrackerOptions);
- supportTracker.render();
- }
-
- // Total Earning Chart - Bar Chart
- // --------------------------------------------------------------------
- const totalEarningChartEl = document.querySelector('#totalEarningChart'),
- totalEarningChartOptions = {
- series: [
- {
- name: 'Earning',
- data: [15, 10, 20, 8, 12, 18, 12, 5]
- },
- {
- name: 'Expense',
- data: [-7, -10, -7, -12, -6, -9, -5, -8]
- }
- ],
- chart: {
- height: 230,
- parentHeightOffset: 0,
- stacked: true,
- type: 'bar',
- toolbar: { show: false }
- },
- tooltip: {
- enabled: false
- },
- legend: {
- show: false
- },
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: '18%',
- borderRadius: 5,
- startingShape: 'rounded',
- endingShape: 'rounded'
- }
- },
- colors: [config.colors.primary, grayColor],
- dataLabels: {
- enabled: false
- },
- grid: {
- show: false,
- padding: {
- top: -40,
- bottom: -20,
- left: -10,
- right: -2
- }
- },
- xaxis: {
- labels: {
- show: false
- },
- axisTicks: {
- show: false
- },
- axisBorder: {
- show: false
- }
- },
- yaxis: {
- labels: {
- show: false
- }
- },
- responsive: [
- {
- breakpoint: 1468,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '22%'
- }
- }
- }
- },
- {
- breakpoint: 1197,
- options: {
- chart: {
- height: 228
- },
- plotOptions: {
- bar: {
- borderRadius: 8,
- columnWidth: '26%'
- }
- }
- }
- },
- {
- breakpoint: 783,
- options: {
- chart: {
- height: 232
- },
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '28%'
- }
- }
- }
- },
- {
- breakpoint: 589,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '16%'
- }
- }
- }
- },
- {
- breakpoint: 520,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 6,
- columnWidth: '18%'
- }
- }
- }
- },
- {
- breakpoint: 426,
- options: {
- plotOptions: {
- bar: {
- borderRadius: 5,
- columnWidth: '20%'
- }
- }
- }
- },
- {
- breakpoint: 381,
- options: {
- plotOptions: {
- bar: {
- columnWidth: '24%'
- }
- }
- }
- }
- ],
- states: {
- hover: {
- filter: {
- type: 'none'
- }
- },
- active: {
- filter: {
- type: 'none'
- }
- }
- }
- };
- if (typeof totalEarningChartEl !== undefined && totalEarningChartEl !== null) {
- const totalEarningChart = new ApexCharts(totalEarningChartEl, totalEarningChartOptions);
- totalEarningChart.render();
- }
-
- // For Datatable
- // --------------------------------------------------------------------
- var dt_projects_table = $('.datatables-projects');
-
- if (dt_projects_table.length) {
- var dt_project = dt_projects_table.DataTable({
- ajax: assetsPath + 'json/user-profile.json',
- columns: [
- { data: '' },
- { data: 'id' },
- { data: 'project_name' },
- { data: 'project_leader' },
- { data: '' },
- { data: 'status' },
- { data: '' }
- ],
- columnDefs: [
- {
- // For Responsive
- className: 'control',
- searchable: false,
- orderable: false,
- responsivePriority: 2,
- targets: 0,
- render: function (data, type, full, meta) {
- return '';
- }
- },
- {
- // For Checkboxes
- targets: 1,
- orderable: false,
- searchable: false,
- responsivePriority: 3,
- checkboxes: true,
- render: function () {
- return '<input type="checkbox" class="dt-checkboxes form-check-input">';
- },
- checkboxes: {
- selectAllRender: '<input type="checkbox" class="form-check-input">'
- }
- },
- {
- // Avatar image/badge, Name and post
- targets: 2,
- responsivePriority: 4,
- render: function (data, type, full, meta) {
- var $user_img = full['project_img'],
- $name = full['project_name'],
- $date = full['date'];
- if ($user_img) {
- // For Avatar image
- var $output =
- '<img src="' + assetsPath + 'img/icons/brands/' + $user_img + '" alt="Avatar" class="rounded-circle">';
- } else {
- // For Avatar badge
- var stateNum = Math.floor(Math.random() * 6);
- var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
- var $state = states[stateNum],
- $name = full['project_name'],
- $initials = $name.match(/\b\w/g) || [];
- $initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
- $output = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>';
- }
- // Creates full output for row
- var $row_output =
- '<div class="d-flex justify-content-left align-items-center">' +
- '<div class="avatar-wrapper">' +
- '<div class="avatar me-2">' +
- $output +
- '</div>' +
- '</div>' +
- '<div class="d-flex flex-column">' +
- '<span class="text-truncate fw-medium">' +
- $name +
- '</span>' +
- '<small class="text-truncate text-muted">' +
- $date +
- '</small>' +
- '</div>' +
- '</div>';
- return $row_output;
- }
- },
- {
- // Teams
- targets: 4,
- orderable: false,
- searchable: false,
- render: function (data, type, full, meta) {
- var $team = full['team'],
- $output;
- $output = '<div class="d-flex align-items-center avatar-group">';
- for (var i = 0; i < $team.length; i++) {
- $output +=
- '<div class="avatar avatar-sm">' +
- '<img src="' +
- assetsPath +
- 'img/avatars/' +
- $team[i] +
- '" alt="Avatar" class="rounded-circle pull-up">' +
- '</div>';
- }
- $output += '</div>';
- return $output;
- }
- },
- {
- // Label
- targets: -2,
- render: function (data, type, full, meta) {
- var $status_number = full['status'];
- return (
- '<div class="d-flex align-items-center">' +
- '<div class="progress w-100 me-3" style="height: 6px;">' +
- '<div class="progress-bar" style="width: ' +
- $status_number +
- '" aria-valuenow="' +
- $status_number +
- '" aria-valuemin="0" aria-valuemax="100"></div>' +
- '</div>' +
- '<span>' +
- $status_number +
- '</span></div>'
- );
- }
- },
- {
- // Actions
- targets: -1,
- searchable: false,
- title: 'Actions',
- orderable: false,
- render: function (data, type, full, meta) {
- return (
- '<div class="d-inline-block">' +
- '<a href="javascript:;" class="btn btn-sm btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical"></i></a>' +
- '<div class="dropdown-menu dropdown-menu-end m-0">' +
- '<a href="javascript:;" class="dropdown-item">Details</a>' +
- '<a href="javascript:;" class="dropdown-item">Archive</a>' +
- '<div class="dropdown-divider"></div>' +
- '<a href="javascript:;" class="dropdown-item text-danger delete-record">Delete</a>' +
- '</div>' +
- '</div>'
- );
- }
- }
- ],
- order: [[2, 'desc']],
- dom: '<"card-header pb-0 pt-sm-0"<"head-label text-center"><"d-flex justify-content-center justify-content-md-end"f>>t<"row mx-2"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
- displayLength: 5,
- lengthMenu: [5, 10, 25, 50, 75, 100],
- responsive: {
- details: {
- display: $.fn.dataTable.Responsive.display.modal({
- header: function (row) {
- var data = row.data();
- return 'Details of "' + data['project_name'] + '" Project';
- }
- }),
- type: 'column',
- renderer: function (api, rowIdx, columns) {
- var data = $.map(columns, function (col, i) {
- return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
- ? '<tr data-dt-row="' +
- col.rowIndex +
- '" data-dt-column="' +
- col.columnIndex +
- '">' +
- '<td>' +
- col.title +
- ':' +
- '</td> ' +
- '<td>' +
- col.data +
- '</td>' +
- '</tr>'
- : '';
- }).join('');
-
- return data ? $('<table class="table"/><tbody />').append(data) : false;
- }
- }
- }
- });
- $('div.head-label').html('<h5 class="card-title mb-0">Projects</h5>');
- }
-
- // Filter form control to default size
- // ? setTimeout used for multilingual table initialization
- setTimeout(() => {
- $('.dataTables_filter .form-control').removeClass('form-control-sm');
- $('.dataTables_length .form-select').removeClass('form-select-sm');
- }, 300);
- })();
|