61 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			61 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
 | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/stats.css') }}">
 | |
|  
 | |
| <div class="stats">
 | |
|     <div>
 | |
|         <canvas id="myChart" width="800px" height="500px"></canvas>
 | |
|         <br >
 | |
|         <form method="GET">
 | |
|             <input type="radio" id="7days" name="prev_days" value=7>
 | |
|             <label for="7days">7 Days</label><br>
 | |
|             <input type="radio" id="31days" name="prev_days" value=31>
 | |
|             <label for="31days">31 Days</label><br>
 | |
|             <input type="radio" id="1year" name="prev_days" value=365>
 | |
|             <label for="1year">1 Year</label>
 | |
|             <input type="submit">
 | |
|         </form>
 | |
|     </div>
 | |
|     <div>
 | |
|         <p>Age: {{data['age']}}</p>
 | |
|         <p>Ranking: {{data['ranking']}}</p>
 | |
|         <p>Stock Level: {{data['stocklevel']}}</p>
 | |
|         <p>Total Views: {{data['views']['total']}}</p>
 | |
|     </div>
 | |
| </div>
 | |
| 
 | |
| 
 | |
| 
 | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 | |
| 
 | |
| <script>
 | |
|     const ctx = document.getElementById('myChart');
 | |
| 
 | |
|     new Chart(ctx, {
 | |
|         type: 'line',
 | |
|         data: {
 | |
|             labels: {{data['views']['headings']|safe}},
 | |
|             datasets: [{
 | |
|                 label: '# of Views',
 | |
|                 data: {{data['views']['data']}},
 | |
|                 borderWidth: 1
 | |
|             }]
 | |
|         },
 | |
|         options: {
 | |
|             scales: {
 | |
|                 y: {
 | |
|                     title: {
 | |
|                         display: true,
 | |
|                         text: "Num Views"
 | |
|                     },
 | |
|                     beginAtZero: true
 | |
|                 },
 | |
|                 x: {
 | |
|                     title: {
 | |
|                         display: true,
 | |
|                         text: "Prev Days"
 | |
|                     },
 | |
|                 }
 | |
|             }
 | |
|         }
 | |
|     });
 | |
| </script> |