Minor changes for Felix
This commit is contained in:
parent
ee636b87fa
commit
2998f0b3da
10 changed files with 152 additions and 25 deletions
|
@ -12,13 +12,13 @@
|
|||
</div><!--/.row-->
|
||||
<div class=row>
|
||||
<div class="col-xl-6">
|
||||
<panel-pie></panel-pie> --><!--All Purchases -->
|
||||
<panel-pie></panel-pie><!--All Purchases -->
|
||||
<!-- <div class="demo-container" ng-app="stacked-bar" ng-controller="stacked-bar">
|
||||
<div id="stacked-bar" dx-chart="chartOptions"></div>
|
||||
</div> -->
|
||||
</div><!--/.col-->
|
||||
<div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
|
||||
<div class="card">
|
||||
<div *ngIf="showCategoryDoughnutChart" class="col-xl-6">
|
||||
<div class="card">
|
||||
<!-- <body style="background-color:rgb(0,0,0);"> -->
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
|
@ -34,8 +34,7 @@
|
|||
[legend]="chartLegend"
|
||||
[chartType]="chartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)">
|
||||
</canvas>
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </body> -->
|
||||
|
@ -149,6 +148,16 @@
|
|||
<h4 class="card-title float-left mb-0">All Purchases by Category</h4>
|
||||
</div><!--/.col-->
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="barChartDataCategory"
|
||||
[labels]="barChartLabelsCategory"
|
||||
[options]="barChartOptionsCategory"
|
||||
[legend]="barChartLegendCategory"
|
||||
[chartType]="barChartTypeCategory"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
<div *ngIf="showTotalCategoryList" class="chart-wrapper">
|
||||
<ul class="icons-list">
|
||||
<!-- New loop -->
|
||||
|
|
|
@ -30,7 +30,7 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
|
||||
'bg-danger', 'bg-warning', 'bg-info'];
|
||||
|
||||
public chartType = 'polarArea';
|
||||
public chartType = 'doughnut';
|
||||
public chartLegend = true;
|
||||
public doughnutChartDataCategory: any[] = [];
|
||||
public doughnutChartLabelsCategory: string[] = [];
|
||||
|
@ -150,7 +150,9 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
this.setWeekData(result);
|
||||
this.setChartData(result.data.cat_total);
|
||||
this.totalCategoryList = result.data.cat_list;
|
||||
this.showTotalCategoryList = true;
|
||||
if (this.totalCategoryList) {
|
||||
this.showTotalCategoryList = true;
|
||||
}
|
||||
this.purchaseEssential = result.data.essentials.purchase_no_essential_total;
|
||||
this.purchaseNotEssential = result.data.essentials.purchase_no_total - this.purchaseEssential;
|
||||
this.barChartDataEssential = [
|
||||
|
|
|
@ -18,7 +18,6 @@ import { LeaderboardComponent } from './leaderboard.component';
|
|||
import { MapComponent } from './map.component';
|
||||
import { TrailMapComponent } from './trail-map.component';
|
||||
import { SuppliersComponent } from './suppliers.component';
|
||||
|
||||
// Using child path to allow for FullLayout theming
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
<tr>
|
||||
<th>Position</th>
|
||||
<th>Name</th>
|
||||
<th>Amount</th>
|
||||
<th class="js-sort-number">Gross amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
<script type="text/javascript" charset="utf8" src="/home/tomslater/Documents/FoodLoop-Web/src/sort-table.js"></script>
|
||||
<div class="animated fadeIn">
|
||||
<div class="form-group row">
|
||||
<table class="table table-striped table-hover">
|
||||
|
@ -11,23 +12,22 @@
|
|||
<tbody>
|
||||
<!-- table body - name, postcode and spend data should be presented here in cost descending order -->
|
||||
<tr recur-result *ngFor="let recur of recurList" tr.names="name" tr.recur="recur" (onClick)="recurClick($event, template)"></tr>
|
||||
<!-- <tr>
|
||||
<td>Supplier's Name</td>
|
||||
<td>Supplier's Postcode</td>
|
||||
<td>Supplier's Spend</td>
|
||||
<tr>
|
||||
<td>Bill's Building's</td>
|
||||
<td>LA13RB</td>
|
||||
<td>£34.64</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Supplier 2's Name</td>
|
||||
<td>Supplier 2's Postcode</td>
|
||||
<td>Supplier 2's Spend</td>
|
||||
<td>Sam's Snake</td>
|
||||
<td>TRY3R3</td>
|
||||
<td>£567.76</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Supplier 3's Name</td>
|
||||
<td>Supplier 3's Postcode</td>
|
||||
<td>Supplier 3's Spend</td>
|
||||
<td>Lloyds</td>
|
||||
<td>ABV134</td>
|
||||
<td>£9.00</td>
|
||||
</tr>
|
||||
</tbody> -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!--/.col-->
|
||||
|
|
|
@ -26,7 +26,7 @@ export class SuppliersComponent implements OnInit, AfterViewInit {
|
|||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
|
|
17
src/app/panels/bubble-panel.html
Normal file
17
src/app/panels/bubble-panel.html
Normal file
|
@ -0,0 +1,17 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title mb-0">Spend by company and sector</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class"chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="bubbleChartData"
|
||||
[options]="bubbleChartOptions"
|
||||
[colors]="bubbleChartColors"
|
||||
[legend]="bubbleChartLegend"
|
||||
[chartType]="bubbleChartType"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
98
src/app/panels/bubble-panel.ts
Normal file
98
src/app/panels/bubble-panel.ts
Normal file
|
@ -0,0 +1,98 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
|
||||
import { Color } from 'ng2-charts';
|
||||
|
||||
@Component({
|
||||
selector: 'app-bubble-chart',
|
||||
templateUrl: './bubble-chart.component.html',
|
||||
styleUrls: ['./bubble-chart.component.scss']
|
||||
})
|
||||
export class BubbleChartComponent implements OnInit {
|
||||
public bubbleChartOptions: ChartOptions = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 30,
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
min: 0,
|
||||
max: 30,
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
public bubbleChartType: ChartType = 'bubble';
|
||||
public bubbleChartLegend = true;
|
||||
|
||||
public bubbleChartData: ChartDataSets[] = [
|
||||
{
|
||||
data: [
|
||||
{ x: 10, y: 10, r: 10 },
|
||||
{ x: 15, y: 5, r: 15 },
|
||||
{ x: 26, y: 12, r: 23 },
|
||||
{ x: 7, y: 8, r: 8 },
|
||||
],
|
||||
label: 'Series A',
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'blue',
|
||||
hoverBackgroundColor: 'purple',
|
||||
hoverBorderColor: 'red',
|
||||
},
|
||||
];
|
||||
|
||||
public bubbleChartColors: Color[] = [
|
||||
{
|
||||
backgroundColor: [
|
||||
'red',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'pink'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
// events
|
||||
public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
|
||||
console.log(event, active);
|
||||
}
|
||||
|
||||
public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
|
||||
console.log(event, active);
|
||||
}
|
||||
|
||||
private rand(max: number) {
|
||||
return Math.trunc(Math.random() * max);
|
||||
}
|
||||
|
||||
private randomPoint(maxCoordinate: number) {
|
||||
const x = this.rand(maxCoordinate);
|
||||
const y = this.rand(maxCoordinate);
|
||||
const r = this.rand(30) + 5;
|
||||
return { x, y, r };
|
||||
}
|
||||
|
||||
public randomize(): void {
|
||||
const numberOfPoints = this.rand(5) + 5;
|
||||
const data = Array.apply(null, { length: numberOfPoints }).map(r => this.randomPoint(30));
|
||||
this.bubbleChartData[0].data = data;
|
||||
}
|
||||
}
|
|
@ -12,7 +12,7 @@ import { ChartData } from '../_interfaces/chart-data';
|
|||
|
||||
export class PiePanel implements OnInit {
|
||||
|
||||
public chartType = 'panel-pie';
|
||||
public chartType = 'doughnut';
|
||||
public chartLegend = true;
|
||||
public doughnutChartDataLocal: number[] = [];
|
||||
public doughnutChartLabelsLocal: string[] = [];
|
||||
|
|
|
@ -73,7 +73,9 @@ agm-map {
|
|||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
padding-left: 20px;
|
||||
}
|
||||
&.legend {
|
||||
text-align: center;
|
||||
|
||||
|
|
Reference in a new issue