LaravelTest
267 строк · 7.2 Кб
1/*
2* Author: Abdullah A Almsaeed
3* Date: 4 Jan 2014
4* Description:
5* This is a demo file used only for the main dashboard (index.html)
6**/
7
8/* global moment:false, Chart:false, Sparkline:false */
9
10$(function () {11'use strict'12
13// Make the dashboard widgets sortable Using jquery UI14$('.connectedSortable').sortable({15placeholder: 'sort-highlight',16connectWith: '.connectedSortable',17handle: '.card-header, .nav-tabs',18forcePlaceholderSize: true,19zIndex: 99999920})21$('.connectedSortable .card-header').css('cursor', 'move')22
23// jQuery UI sortable for the todo list24$('.todo-list').sortable({25placeholder: 'sort-highlight',26handle: '.handle',27forcePlaceholderSize: true,28zIndex: 99999929})30
31// bootstrap WYSIHTML5 - text editor32$('.textarea').summernote()33
34$('.daterange').daterangepicker({35ranges: {36Today: [moment(), moment()],37Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],38'Last 7 Days': [moment().subtract(6, 'days'), moment()],39'Last 30 Days': [moment().subtract(29, 'days'), moment()],40'This Month': [moment().startOf('month'), moment().endOf('month')],41'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]42},43startDate: moment().subtract(29, 'days'),44endDate: moment()45}, function (start, end) {46// eslint-disable-next-line no-alert47alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))48})49
50/* jQueryKnob */51$('.knob').knob()52
53// jvectormap data54var visitorsData = {55US: 398, // USA56SA: 400, // Saudi Arabia57CA: 1000, // Canada58DE: 500, // Germany59FR: 760, // France60CN: 300, // China61AU: 700, // Australia62BR: 600, // Brazil63IN: 800, // India64GB: 320, // Great Britain65RU: 3000 // Russia66}67// World map by jvectormap68$('#world-map').vectorMap({69map: 'usa_en',70backgroundColor: 'transparent',71regionStyle: {72initial: {73fill: 'rgba(255, 255, 255, 0.7)',74'fill-opacity': 1,75stroke: 'rgba(0,0,0,.2)',76'stroke-width': 1,77'stroke-opacity': 178}79},80series: {81regions: [{82values: visitorsData,83scale: ['#ffffff', '#0154ad'],84normalizeFunction: 'polynomial'85}]86},87onRegionLabelShow: function (e, el, code) {88if (typeof visitorsData[code] !== 'undefined') {89el.html(el.html() + ': ' + visitorsData[code] + ' new visitors')90}91}92})93
94// Sparkline charts95var sparkline1 = new Sparkline($('#sparkline-1')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })96var sparkline2 = new Sparkline($('#sparkline-2')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })97var sparkline3 = new Sparkline($('#sparkline-3')[0], { width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9' })98
99sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021])100sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921])101sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21])102
103// The Calender104$('#calendar').datetimepicker({105format: 'L',106inline: true107})108
109// SLIMSCROLL FOR CHAT WIDGET110$('#chat-box').overlayScrollbars({111height: '250px'112})113
114/* Chart.js Charts */115// Sales chart116var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d')117// $('#revenue-chart').get(0).getContext('2d');118
119var salesChartData = {120labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],121datasets: [122{123label: 'Digital Goods',124backgroundColor: 'rgba(60,141,188,0.9)',125borderColor: 'rgba(60,141,188,0.8)',126pointRadius: false,127pointColor: '#3b8bba',128pointStrokeColor: 'rgba(60,141,188,1)',129pointHighlightFill: '#fff',130pointHighlightStroke: 'rgba(60,141,188,1)',131data: [28, 48, 40, 19, 86, 27, 90]132},133{134label: 'Electronics',135backgroundColor: 'rgba(210, 214, 222, 1)',136borderColor: 'rgba(210, 214, 222, 1)',137pointRadius: false,138pointColor: 'rgba(210, 214, 222, 1)',139pointStrokeColor: '#c1c7d1',140pointHighlightFill: '#fff',141pointHighlightStroke: 'rgba(220,220,220,1)',142data: [65, 59, 80, 81, 56, 55, 40]143}144]145}146
147var salesChartOptions = {148maintainAspectRatio: false,149responsive: true,150legend: {151display: false152},153scales: {154xAxes: [{155gridLines: {156display: false157}158}],159yAxes: [{160gridLines: {161display: false162}163}]164}165}166
167// This will get the first returned node in the jQuery collection.168// eslint-disable-next-line no-unused-vars169var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]170type: 'line',171data: salesChartData,172options: salesChartOptions173})174
175// Donut Chart176var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')177var pieData = {178labels: [179'Instore Sales',180'Download Sales',181'Mail-Order Sales'182],183datasets: [184{185data: [30, 12, 20],186backgroundColor: ['#f56954', '#00a65a', '#f39c12']187}188]189}190var pieOptions = {191legend: {192display: false193},194maintainAspectRatio: false,195responsive: true196}197// Create pie or douhnut chart198// You can switch between pie and douhnut using the method below.199// eslint-disable-next-line no-unused-vars200var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]201type: 'doughnut',202data: pieData,203options: pieOptions204})205
206// Sales graph chart207var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d')208// $('#revenue-chart').get(0).getContext('2d');209
210var salesGraphChartData = {211labels: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'],212datasets: [213{214label: 'Digital Goods',215fill: false,216borderWidth: 2,217lineTension: 0,218spanGaps: true,219borderColor: '#efefef',220pointRadius: 3,221pointHoverRadius: 7,222pointColor: '#efefef',223pointBackgroundColor: '#efefef',224data: [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432]225}226]227}228
229var salesGraphChartOptions = {230maintainAspectRatio: false,231responsive: true,232legend: {233display: false234},235scales: {236xAxes: [{237ticks: {238fontColor: '#efefef'239},240gridLines: {241display: false,242color: '#efefef',243drawBorder: false244}245}],246yAxes: [{247ticks: {248stepSize: 5000,249fontColor: '#efefef'250},251gridLines: {252display: true,253color: '#efefef',254drawBorder: false255}256}]257}258}259
260// This will get the first returned node in the jQuery collection.261// eslint-disable-next-line no-unused-vars262var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable]263type: 'line',264data: salesGraphChartData,265options: salesGraphChartOptions266})267})268