resources/js/template_files/chart.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/chart.js A

↳ Parent: Project

Complexity

Total Complexity	10
Complexity/F	10

Size

Lines of Code	352
Function Count	1

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	10
eloc	242
mnd	9
bc	9
fnc	1
dl	0
loc	352
rs	10
bpm	9
cpm	10
noi	12
c	0
b	0
f	0

$(function() {
  /* ChartJS
   * -------
   * Data and config for chartjs
   */
  'use strict';
  var data = {
    labels: ["2013", "2014", "2014", "2015", "2016", "2017"],
    datasets: [{
      label: '# of Votes',
      data: [10, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1,
      fill: false
    }]
  };
  var multiLineData = {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Dataset 1',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: [
          '#587ce4'
        ],
        borderWidth: 2,
        fill: false
      },
      {
        label: 'Dataset 2',
        data: [5, 23, 7, 12, 42, 23],
        borderColor: [
          '#ede190'
        ],
        borderWidth: 2,
        fill: false
      },
      {
        label: 'Dataset 3',
        data: [15, 10, 21, 32, 12, 33],
        borderColor: [
          '#f44252'
        ],
        borderWidth: 2,
        fill: false
      }
    ]
  };
  var options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    legend: {
      display: false
    },
    elements: {
      point: {
        radius: 0
      }
    }

  };
  var doughnutPieData = {
    datasets: [{
      data: [30, 40, 30],
      backgroundColor: [
        'rgba(255, 99, 132, 0.5)',
        'rgba(54, 162, 235, 0.5)',
        'rgba(255, 206, 86, 0.5)',
        'rgba(75, 192, 192, 0.5)',
        'rgba(153, 102, 255, 0.5)',
        'rgba(255, 159, 64, 0.5)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
      'Pink',
      'Blue',
      'Yellow',
    ]
  };
  var doughnutPieOptions = {
    responsive: true,
    animation: {
      animateScale: true,
      animateRotate: true
    }
  };
  var areaData = {
    labels: ["2013", "2014", "2015", "2016", "2017"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1,
      fill: true, // 3: no fill
    }]
  };

  var areaOptions = {
    plugins: {
      filler: {
        propagate: true
      }
    }
  }

  var multiAreaData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
        label: 'Facebook',
        data: [8, 11, 13, 15, 12, 13, 16, 15, 13, 19, 11, 14],
        borderColor: ['rgba(255, 99, 132, 0.5)'],
        backgroundColor: ['rgba(255, 99, 132, 0.5)'],
        borderWidth: 1,
        fill: true
      },
      {
        label: 'Twitter',
        data: [7, 17, 12, 16, 14, 18, 16, 12, 15, 11, 13, 9],
        borderColor: ['rgba(54, 162, 235, 0.5)'],
        backgroundColor: ['rgba(54, 162, 235, 0.5)'],
        borderWidth: 1,
        fill: true
      },
      {
        label: 'Linkedin',
        data: [6, 14, 16, 20, 12, 18, 15, 12, 17, 19, 15, 11],
        borderColor: ['rgba(255, 206, 86, 0.5)'],
        backgroundColor: ['rgba(255, 206, 86, 0.5)'],
        borderWidth: 1,
        fill: true
      }
    ]
  };

  var multiAreaOptions = {
    plugins: {
      filler: {
        propagate: true
      }
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          display: false
        }
      }]
    }
  }

  var scatterChartData = {
    datasets: [{
        label: 'First Dataset',
        data: [{
            x: -10,
            y: 0
          },
          {
            x: 0,
            y: 3
          },
          {
            x: -25,
            y: 5
          },
          {
            x: 40,
            y: 5
          }
        ],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)'
        ],
        borderWidth: 1
      },
      {
        label: 'Second Dataset',
        data: [{
            x: 10,
            y: 5
          },
          {
            x: 20,
            y: -30
          },
          {
            x: -25,
            y: 15
          },
          {
            x: -10,
            y: 5
          }
        ],
        backgroundColor: [
          'rgba(54, 162, 235, 0.2)',
        ],
        borderColor: [
          'rgba(54, 162, 235, 1)',
        ],
        borderWidth: 1
      }
    ]
  }

  var scatterChartOptions = {
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom'
      }]
    }
  }
  // Get context with jQuery - using jQuery's .get() method.
  if ($("#barChart").length) {
    var barChartCanvas = $("#barChart").get(0).getContext("2d");
    // This will get the first returned node in the jQuery collection.
    var barChart = new Chart(barChartCanvas, {

      type: 'bar',
      data: data,
      options: options
    });
  }

  if ($("#lineChart").length) {
    var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
    var lineChart = new Chart(lineChartCanvas, {

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

  if ($("#linechart-multi").length) {
    var multiLineCanvas = $("#linechart-multi").get(0).getContext("2d");
    var lineChart = new Chart(multiLineCanvas, {

      type: 'line',
      data: multiLineData,
      options: options
    });
  }

  if ($("#areachart-multi").length) {
    var multiAreaCanvas = $("#areachart-multi").get(0).getContext("2d");
    var multiAreaChart = new Chart(multiAreaCanvas, {

      type: 'line',
      data: multiAreaData,
      options: multiAreaOptions
    });
  }

  if ($("#doughnutChart").length) {
    var doughnutChartCanvas = $("#doughnutChart").get(0).getContext("2d");
    var doughnutChart = new Chart(doughnutChartCanvas, {

      type: 'doughnut',
      data: doughnutPieData,
      options: doughnutPieOptions
    });
  }

  if ($("#pieChart").length) {
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas, {

      type: 'pie',
      data: doughnutPieData,
      options: doughnutPieOptions
    });
  }

  if ($("#areaChart").length) {
    var areaChartCanvas = $("#areaChart").get(0).getContext("2d");
    var areaChart = new Chart(areaChartCanvas, {

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

  if ($("#scatterChart").length) {
    var scatterChartCanvas = $("#scatterChart").get(0).getContext("2d");
    var scatterChart = new Chart(scatterChartCanvas, {

      type: 'scatter',
      data: scatterChartData,
      options: scatterChartOptions
    });
  }

  if ($("#browserTrafficChart").length) {
    var doughnutChartCanvas = $("#browserTrafficChart").get(0).getContext("2d");

    var doughnutChart = new Chart(doughnutChartCanvas, {

      type: 'doughnut',
      data: browserTrafficData,

      options: doughnutPieOptions
    });
  }
});

1			$(function() {
2			/* ChartJS
3			* -------
4			* Data and config for chartjs
5			*/
6			'use strict';
7			var data = {
8			labels: ["2013", "2014", "2014", "2015", "2016", "2017"],
9			datasets: [{
10			label: '# of Votes',
11			data: [10, 19, 3, 5, 2, 3],
12			backgroundColor: [
13			'rgba(255, 99, 132, 0.2)',
14			'rgba(54, 162, 235, 0.2)',
15			'rgba(255, 206, 86, 0.2)',
16			'rgba(75, 192, 192, 0.2)',
17			'rgba(153, 102, 255, 0.2)',
18			'rgba(255, 159, 64, 0.2)'
19			],
20			borderColor: [
21			'rgba(255,99,132,1)',
22			'rgba(54, 162, 235, 1)',
23			'rgba(255, 206, 86, 1)',
24			'rgba(75, 192, 192, 1)',
25			'rgba(153, 102, 255, 1)',
26			'rgba(255, 159, 64, 1)'
27			],
28			borderWidth: 1,
29			fill: false
30			}]
31			};
32			var multiLineData = {
33			labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
34			datasets: [{
35			label: 'Dataset 1',
36			data: [12, 19, 3, 5, 2, 3],
37			borderColor: [
38			'#587ce4'
39			],
40			borderWidth: 2,
41			fill: false
42			},
43			{
44			label: 'Dataset 2',
45			data: [5, 23, 7, 12, 42, 23],
46			borderColor: [
47			'#ede190'
48			],
49			borderWidth: 2,
50			fill: false
51			},
52			{
53			label: 'Dataset 3',
54			data: [15, 10, 21, 32, 12, 33],
55			borderColor: [
56			'#f44252'
57			],
58			borderWidth: 2,
59			fill: false
60			}
61			]
62			};
63			var options = {
64			scales: {
65			yAxes: [{
66			ticks: {
67			beginAtZero: true
68			}
69			}]
70			},
71			legend: {
72			display: false
73			},
74			elements: {
75			point: {
76			radius: 0
77			}
78			}
79
80			};
81			var doughnutPieData = {
82			datasets: [{
83			data: [30, 40, 30],
84			backgroundColor: [
85			'rgba(255, 99, 132, 0.5)',
86			'rgba(54, 162, 235, 0.5)',
87			'rgba(255, 206, 86, 0.5)',
88			'rgba(75, 192, 192, 0.5)',
89			'rgba(153, 102, 255, 0.5)',
90			'rgba(255, 159, 64, 0.5)'
91			],
92			borderColor: [
93			'rgba(255,99,132,1)',
94			'rgba(54, 162, 235, 1)',
95			'rgba(255, 206, 86, 1)',
96			'rgba(75, 192, 192, 1)',
97			'rgba(153, 102, 255, 1)',
98			'rgba(255, 159, 64, 1)'
99			],
100			}],
101
102			// These labels appear in the legend and in the tooltips when hovering different arcs
103			labels: [
104			'Pink',
105			'Blue',
106			'Yellow',
107			]
108			};
109			var doughnutPieOptions = {
110			responsive: true,
111			animation: {
112			animateScale: true,
113			animateRotate: true
114			}
115			};
116			var areaData = {
117			labels: ["2013", "2014", "2015", "2016", "2017"],
118			datasets: [{
119			label: '# of Votes',
120			data: [12, 19, 3, 5, 2, 3],
121			backgroundColor: [
122			'rgba(255, 99, 132, 0.2)',
123			'rgba(54, 162, 235, 0.2)',
124			'rgba(255, 206, 86, 0.2)',
125			'rgba(75, 192, 192, 0.2)',
126			'rgba(153, 102, 255, 0.2)',
127			'rgba(255, 159, 64, 0.2)'
128			],
129			borderColor: [
130			'rgba(255,99,132,1)',
131			'rgba(54, 162, 235, 1)',
132			'rgba(255, 206, 86, 1)',
133			'rgba(75, 192, 192, 1)',
134			'rgba(153, 102, 255, 1)',
135			'rgba(255, 159, 64, 1)'
136			],
137			borderWidth: 1,
138			fill: true, // 3: no fill
139			}]
140			};
141
142			var areaOptions = {
143			plugins: {
144			filler: {
145			propagate: true
146			}
147			}
148			}
149
150			var multiAreaData = {
151			labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
152			datasets: [{
153			label: 'Facebook',
154			data: [8, 11, 13, 15, 12, 13, 16, 15, 13, 19, 11, 14],
155			borderColor: ['rgba(255, 99, 132, 0.5)'],
156			backgroundColor: ['rgba(255, 99, 132, 0.5)'],
157			borderWidth: 1,
158			fill: true
159			},
160			{
161			label: 'Twitter',
162			data: [7, 17, 12, 16, 14, 18, 16, 12, 15, 11, 13, 9],
163			borderColor: ['rgba(54, 162, 235, 0.5)'],
164			backgroundColor: ['rgba(54, 162, 235, 0.5)'],
165			borderWidth: 1,
166			fill: true
167			},
168			{
169			label: 'Linkedin',
170			data: [6, 14, 16, 20, 12, 18, 15, 12, 17, 19, 15, 11],
171			borderColor: ['rgba(255, 206, 86, 0.5)'],
172			backgroundColor: ['rgba(255, 206, 86, 0.5)'],
173			borderWidth: 1,
174			fill: true
175			}
176			]
177			};
178
179			var multiAreaOptions = {
180			plugins: {
181			filler: {
182			propagate: true
183			}
184			},
185			elements: {
186			point: {
187			radius: 0
188			}
189			},
190			scales: {
191			xAxes: [{
192			gridLines: {
193			display: false
194			}
195			}],
196			yAxes: [{
197			gridLines: {
198			display: false
199			}
200			}]
201			}
202			}
203
204			var scatterChartData = {
205			datasets: [{
206			label: 'First Dataset',
207			data: [{
208			x: -10,
209			y: 0
210			},
211			{
212			x: 0,
213			y: 3
214			},
215			{
216			x: -25,
217			y: 5
218			},
219			{
220			x: 40,
221			y: 5
222			}
223			],
224			backgroundColor: [
225			'rgba(255, 99, 132, 0.2)'
226			],
227			borderColor: [
228			'rgba(255,99,132,1)'
229			],
230			borderWidth: 1
231			},
232			{
233			label: 'Second Dataset',
234			data: [{
235			x: 10,
236			y: 5
237			},
238			{
239			x: 20,
240			y: -30
241			},
242			{
243			x: -25,
244			y: 15
245			},
246			{
247			x: -10,
248			y: 5
249			}
250			],
251			backgroundColor: [
252			'rgba(54, 162, 235, 0.2)',
253			],
254			borderColor: [
255			'rgba(54, 162, 235, 1)',
256			],
257			borderWidth: 1
258			}
259			]
260			}
261
262			var scatterChartOptions = {
263			scales: {
264			xAxes: [{
265			type: 'linear',
266			position: 'bottom'
267			}]
268			}
269			}
270			// Get context with jQuery - using jQuery's .get() method.
271			if ($("#barChart").length) {
272			var barChartCanvas = $("#barChart").get(0).getContext("2d");
273			// This will get the first returned node in the jQuery collection.
274			var barChart = new Chart(barChartCanvas, {
			0 ignored issues – show Unused Code introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `barChart` 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...
275			type: 'bar',
276			data: data,
277			options: options
278			});
279			}
280
281			if ($("#lineChart").length) {
282			var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
283			var lineChart = new Chart(lineChartCanvas, {
			0 ignored issues – show Unused Code introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `lineChart` seems to be never used. Consider removing it. Loading history...
284			type: 'line',
285			data: data,
286			options: options
287			});
288			}
289
290			if ($("#linechart-multi").length) {
291			var multiLineCanvas = $("#linechart-multi").get(0).getContext("2d");
292			var lineChart = new Chart(multiLineCanvas, {
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `lineChart` already seems to be declared on line `283`. 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...
293			type: 'line',
294			data: multiLineData,
295			options: options
296			});
297			}
298
299			if ($("#areachart-multi").length) {
300			var multiAreaCanvas = $("#areachart-multi").get(0).getContext("2d");
301			var multiAreaChart = new Chart(multiAreaCanvas, {
			0 ignored issues – show Unused Code introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `multiAreaChart` seems to be never used. Consider removing it. Loading history...
302			type: 'line',
303			data: multiAreaData,
304			options: multiAreaOptions
305			});
306			}
307
308			if ($("#doughnutChart").length) {
309			var doughnutChartCanvas = $("#doughnutChart").get(0).getContext("2d");
310			var doughnutChart = new Chart(doughnutChartCanvas, {
			0 ignored issues – show Unused Code introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `doughnutChart` seems to be never used. Consider removing it. Loading history...
311			type: 'doughnut',
312			data: doughnutPieData,
313			options: doughnutPieOptions
314			});
315			}
316
317			if ($("#pieChart").length) {
318			var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
319			var pieChart = new Chart(pieChartCanvas, {
			0 ignored issues – show Unused Code introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `pieChart` seems to be never used. Consider removing it. Loading history...
320			type: 'pie',
321			data: doughnutPieData,
322			options: doughnutPieOptions
323			});
324			}
325
326			if ($("#areaChart").length) {
327			var areaChartCanvas = $("#areaChart").get(0).getContext("2d");
328			var areaChart = new Chart(areaChartCanvas, {
			0 ignored issues – show Unused Code introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `areaChart` seems to be never used. Consider removing it. Loading history...
329			type: 'line',
330			data: areaData,
331			options: areaOptions
332			});
333			}
334
335			if ($("#scatterChart").length) {
336			var scatterChartCanvas = $("#scatterChart").get(0).getContext("2d");
337			var scatterChart = new Chart(scatterChartCanvas, {
			0 ignored issues – show Unused Code introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `scatterChart` seems to be never used. Consider removing it. Loading history...
338			type: 'scatter',
339			data: scatterChartData,
340			options: scatterChartOptions
341			});
342			}
343
344			if ($("#browserTrafficChart").length) {
345			var doughnutChartCanvas = $("#browserTrafficChart").get(0).getContext("2d");
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `doughnutChartCanvas` already seems to be declared on line `309`. 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...
346			var doughnutChart = new Chart(doughnutChartCanvas, {
			0 ignored issues – show Comprehensibility Naming Best Practice introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `doughnutChart` already seems to be declared on line `310`. 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...
347			type: 'doughnut',
348			data: browserTrafficData,
			0 ignored issues – show Bug introduced 2019-10-19 01:56 UTC by Report Bug Copy Issue Report The variable `browserTrafficData` seems to be never declared. If this is a global, consider adding a `/** global: browserTrafficData */` 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...
349			options: doughnutPieOptions
350			});
351			}
352			});

butcherman / Tech_Bench

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

resources/js/template_files/chart.js A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like