resources/js/template_files/dashboard.js - Code Metrics - Inspection of "Re-built Template with new UI" - butcherman/Tech_Bench - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — dev5 ( 76b71a...013a5b )

by Ron

created 2019-10-19 01:44 UTC

resources/js/template_files/dashboard.js A

↳ Parent: Project

Complexity

Total Complexity	7
Complexity/F	1.75

Size

Lines of Code	236
Function Count	4

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	7
eloc	171
mnd	3
bc	3
fnc	4
dl	0
loc	236
rs	10
bpm	0.75
cpm	1.75
noi	4
c	0
b	0
f	0

(function($) {
  'use strict';
  $(function() {
    if ($("#order-chart").length) {
      var areaData = {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
        datasets: [
          {
            data: [175, 200, 130, 210, 40, 60, 25],
            backgroundColor: [
              'rgba(255, 193, 2, .8)'
            ],
            borderColor: [
              'transparent'
            ],
            borderWidth:3,
            fill: 'origin',
            label: "services"
          },
          {
            data: [175, 145, 190, 130, 240, 160, 200],
            backgroundColor: [
              'rgba(245, 166, 35, 1)'
            ],
            borderColor: [
              'transparent'
            ],
            borderWidth:3,
            fill: 'origin',
            label: "purchases"
          }
        ]
      };
      var areaOptions = {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
          filler: {
            propagate: false
          }
        },
        scales: {
          xAxes: [{
            display: false,
            ticks: {
              display: true
            },
            gridLines: {
              display: false,
              drawBorder: false,
              color: 'transparent',
              zeroLineColor: '#eeeeee'
            }
          }],
          yAxes: [{
            display: false,
            ticks: {
              display: true,
              autoSkip: false,
              maxRotation: 0,
              stepSize: 100,
              min: 0,
              max: 260
            },
            gridLines: {
              drawBorder: false
            }
          }]
        },
        legend: {
          display: false
        },
        tooltips: {
          enabled: true
        },
        elements: {
          line: {
            tension: .45
          },
          point: {
            radius: 0
          }
        }
      }
      var salesChartCanvas = $("#order-chart").get(0).getContext("2d");
      var salesChart = new Chart(salesChartCanvas, {

        type: 'line',
        data: areaData,
        options: areaOptions
      });
    }

    if ($("#sales-chart").length) {
      var SalesChartCanvas = $("#sales-chart").get(0).getContext("2d");
      var SalesChart = new Chart(SalesChartCanvas, {
        type: 'bar',
        data: {
          labels: ["Jan", "Feb", "Mar", "Apr", "May"],
          datasets: [{
              label: 'Offline Sales',
              data: [480, 230, 470, 210, 330],
              backgroundColor: '#8EB0FF'
            },
            {
              label: 'Online Sales',
              data: [400, 340, 550, 480, 170],
              backgroundColor: '#316FFF'
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: true,
          layout: {
            padding: {
              left: 0,
              right: 0,
              top: 20,
              bottom: 0
            }
          },
          scales: {
            yAxes: [{
              display: true,
              gridLines: {
                display: false,
                drawBorder: false
              },
              ticks: {
                display: false,
                min: 0,
                max: 500
              }
            }],
            xAxes: [{
              stacked: false,
              ticks: {
                beginAtZero: true,
                fontColor: "#9fa0a2"
              },
              gridLines: {
                color: "rgba(0, 0, 0, 0)",
                display: false
              },
              barPercentage: 1
            }]
          },
          legend: {
            display: false
          },
          elements: {
            point: {
              radius: 0
            }
          }
        },
      });
      document.getElementById('sales-legend').innerHTML = SalesChart.generateLegend();
    }

    if ($("#north-america-chart").length) {
      var areaData = {

        labels: ["Jan", "Feb", "Mar"],
        datasets: [{
            data: [100, 50, 50],
            backgroundColor: [
              "#71c016", "#8caaff", "#248afd",
            ],
            borderColor: "rgba(0,0,0,0)"
          }
        ]
      };
      var areaOptions = {

        responsive: true,
        maintainAspectRatio: true,
        segmentShowStroke: false,
        cutoutPercentage: 78,
        elements: {
          arc: {
              borderWidth: 4
          }
        },      
        legend: {
          display: false
        },
        tooltips: {
          enabled: true
        },
        legendCallback: function(chart) { 
          var text = [];
          text.push('<div class="report-chart">');
            text.push('<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' + chart.data.datasets[0].backgroundColor[0] + '"></div><p class="mb-0">Offline sales</p></div>');
            text.push('<p class="mb-0">22789</p>');
            text.push('</div>');
            text.push('<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' + chart.data.datasets[0].backgroundColor[1] + '"></div><p class="mb-0">Online sales</p></div>');
            text.push('<p class="mb-0">94678</p>');
            text.push('</div>');
            text.push('<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' + chart.data.datasets[0].backgroundColor[2] + '"></div><p class="mb-0">Returns</p></div>');
            text.push('<p class="mb-0">12097</p>');
            text.push('</div>');
          text.push('</div>');
          return text.join("");
        },
      }
      var northAmericaChartPlugins = {
        beforeDraw: function(chart) {
          var width = chart.chart.width,
              height = chart.chart.height,
              ctx = chart.chart.ctx;
      
          ctx.restore();
          var fontSize = 3.125;
          ctx.font = "600 " + fontSize + "em sans-serif";
          ctx.textBaseline = "middle";
          ctx.fillStyle = "#000";
      
          var text = "63",
              textX = Math.round((width - ctx.measureText(text).width) / 2),
              textY = height / 2;
      
          ctx.fillText(text, textX, textY);
          ctx.save();
        }
      }
      var northAmericaChartCanvas = $("#north-america-chart").get(0).getContext("2d");
      var northAmericaChart = new Chart(northAmericaChartCanvas, {
        type: 'doughnut',
        data: areaData,
        options: areaOptions,
        plugins: northAmericaChartPlugins
      });
      document.getElementById('north-america-legend').innerHTML = northAmericaChart.generateLegend();
    }

  });
})(jQuery);

1			(function($) {
2			'use strict';
3			$(function() {
4			if ($("#order-chart").length) {
5			var areaData = {
6			labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
7			datasets: [
8			{
9			data: [175, 200, 130, 210, 40, 60, 25],
10			backgroundColor: [
11			'rgba(255, 193, 2, .8)'
12			],
13			borderColor: [
14			'transparent'
15			],
16			borderWidth:3,
17			fill: 'origin',
18			label: "services"
19			},
20			{
21			data: [175, 145, 190, 130, 240, 160, 200],
22			backgroundColor: [
23			'rgba(245, 166, 35, 1)'
24			],
25			borderColor: [
26			'transparent'
27			],
28			borderWidth:3,
29			fill: 'origin',
30			label: "purchases"
31			}
32			]
33			};
34			var areaOptions = {
35			responsive: true,
36			maintainAspectRatio: true,
37			plugins: {
38			filler: {
39			propagate: false
40			}
41			},
42			scales: {
43			xAxes: [{
44			display: false,
45			ticks: {
46			display: true
47			},
48			gridLines: {
49			display: false,
50			drawBorder: false,
51			color: 'transparent',
52			zeroLineColor: '#eeeeee'
53			}
54			}],
55			yAxes: [{
56			display: false,
57			ticks: {
58			display: true,
59			autoSkip: false,
60			maxRotation: 0,
61			stepSize: 100,
62			min: 0,
63			max: 260
64			},
65			gridLines: {
66			drawBorder: false
67			}
68			}]
69			},
70			legend: {
71			display: false
72			},
73			tooltips: {
74			enabled: true
75			},
76			elements: {
77			line: {
78			tension: .45
79			},
80			point: {
81			radius: 0
82			}
83			}
84			}
85			var salesChartCanvas = $("#order-chart").get(0).getContext("2d");
86			var salesChart = new Chart(salesChartCanvas, {
			0 ignored issues – show Unused Code introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `salesChart` seems to be never used. Consider removing it. Loading history... Bug introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `Chart` seems to be never declared. If this is a global, consider adding a `/** global: Chart */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
87			type: 'line',
88			data: areaData,
89			options: areaOptions
90			});
91			}
92
93			if ($("#sales-chart").length) {
94			var SalesChartCanvas = $("#sales-chart").get(0).getContext("2d");
95			var SalesChart = new Chart(SalesChartCanvas, {
96			type: 'bar',
97			data: {
98			labels: ["Jan", "Feb", "Mar", "Apr", "May"],
99			datasets: [{
100			label: 'Offline Sales',
101			data: [480, 230, 470, 210, 330],
102			backgroundColor: '#8EB0FF'
103			},
104			{
105			label: 'Online Sales',
106			data: [400, 340, 550, 480, 170],
107			backgroundColor: '#316FFF'
108			}
109			]
110			},
111			options: {
112			responsive: true,
113			maintainAspectRatio: true,
114			layout: {
115			padding: {
116			left: 0,
117			right: 0,
118			top: 20,
119			bottom: 0
120			}
121			},
122			scales: {
123			yAxes: [{
124			display: true,
125			gridLines: {
126			display: false,
127			drawBorder: false
128			},
129			ticks: {
130			display: false,
131			min: 0,
132			max: 500
133			}
134			}],
135			xAxes: [{
136			stacked: false,
137			ticks: {
138			beginAtZero: true,
139			fontColor: "#9fa0a2"
140			},
141			gridLines: {
142			color: "rgba(0, 0, 0, 0)",
143			display: false
144			},
145			barPercentage: 1
146			}]
147			},
148			legend: {
149			display: false
150			},
151			elements: {
152			point: {
153			radius: 0
154			}
155			}
156			},
157			});
158			document.getElementById('sales-legend').innerHTML = SalesChart.generateLegend();
159			}
160
161			if ($("#north-america-chart").length) {
162			var areaData = {
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `areaData` already seems to be declared on line `5`. Consider using another variable name or omitting the `var` keyword. This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. Loading history...
163			labels: ["Jan", "Feb", "Mar"],
164			datasets: [{
165			data: [100, 50, 50],
166			backgroundColor: [
167			"#71c016", "#8caaff", "#248afd",
168			],
169			borderColor: "rgba(0,0,0,0)"
170			}
171			]
172			};
173			var areaOptions = {
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `areaOptions` already seems to be declared on line `34`. Consider using another variable name or omitting the `var` keyword. This check looks for variables that are declared in multiple lines. There may be several reasons for this. In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs. If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared. Loading history...
174			responsive: true,
175			maintainAspectRatio: true,
176			segmentShowStroke: false,
177			cutoutPercentage: 78,
178			elements: {
179			arc: {
180			borderWidth: 4
181			}
182			},
183			legend: {
184			display: false
185			},
186			tooltips: {
187			enabled: true
188			},
189			legendCallback: function(chart) {
190			var text = [];
191			text.push('<div class="report-chart">');
192			text.push('<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' + chart.data.datasets[0].backgroundColor[0] + '"></div><p class="mb-0">Offline sales</p></div>');
193			text.push('<p class="mb-0">22789</p>');
194			text.push('</div>');
195			text.push('<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' + chart.data.datasets[0].backgroundColor[1] + '"></div><p class="mb-0">Online sales</p></div>');
196			text.push('<p class="mb-0">94678</p>');
197			text.push('</div>');
198			text.push('<div class="d-flex justify-content-between mx-4 mx-xl-5 mt-3"><div class="d-flex align-items-center"><div class="mr-3" style="width:20px; height:20px; border-radius: 50%; background-color: ' + chart.data.datasets[0].backgroundColor[2] + '"></div><p class="mb-0">Returns</p></div>');
199			text.push('<p class="mb-0">12097</p>');
200			text.push('</div>');
201			text.push('</div>');
202			return text.join("");
203			},
204			}
205			var northAmericaChartPlugins = {
206			beforeDraw: function(chart) {
207			var width = chart.chart.width,
208			height = chart.chart.height,
209			ctx = chart.chart.ctx;
210
211			ctx.restore();
212			var fontSize = 3.125;
213			ctx.font = "600 " + fontSize + "em sans-serif";
214			ctx.textBaseline = "middle";
215			ctx.fillStyle = "#000";
216
217			var text = "63",
218			textX = Math.round((width - ctx.measureText(text).width) / 2),
219			textY = height / 2;
220
221			ctx.fillText(text, textX, textY);
222			ctx.save();
223			}
224			}
225			var northAmericaChartCanvas = $("#north-america-chart").get(0).getContext("2d");
226			var northAmericaChart = new Chart(northAmericaChartCanvas, {
227			type: 'doughnut',
228			data: areaData,
229			options: areaOptions,
230			plugins: northAmericaChartPlugins
231			});
232			document.getElementById('north-america-legend').innerHTML = northAmericaChart.generateLegend();
233			}
234
235			});
236			})(jQuery);

butcherman / Tech_Bench

Push — dev5 ( 76b71a...013a5b )

resources/js/template_files/dashboard.js A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like