Chart improvements
Minor fixes + refresh on supplier spend chart
This commit is contained in:
parent
ade578d78b
commit
301f706365
12 changed files with 118 additions and 81 deletions
13
package-lock.json
generated
13
package-lock.json
generated
|
@ -1153,6 +1153,14 @@
|
|||
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
|
||||
"dev": true
|
||||
},
|
||||
"angular2-datetimepicker": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/angular2-datetimepicker/-/angular2-datetimepicker-1.1.1.tgz",
|
||||
"integrity": "sha1-acTZkcSKYNq4CiDYfoU5bBhfH0I=",
|
||||
"requires": {
|
||||
"font-awesome": "*"
|
||||
}
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
|
||||
|
@ -4016,6 +4024,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"font-awesome": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
|
||||
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
|
||||
},
|
||||
"for-in": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
|
||||
|
|
|
@ -33,6 +33,7 @@
|
|||
"@coreui/icons": "0.3.0",
|
||||
"ajv": "^6.10.0",
|
||||
"ajv-keywords": "^3.4.0",
|
||||
"angular2-datetimepicker": "^1.1.1",
|
||||
"chart.js": "^2.8.0",
|
||||
"chartjs-adapter-luxon": "^0.2.0",
|
||||
"core-js": "^2.6.9",
|
||||
|
|
|
@ -41,7 +41,6 @@ import { P500Component } from './pages/500.component';
|
|||
// Submodules
|
||||
import { AuthModule } from './auth/auth.module';
|
||||
import { DashboardModule } from './dashboard/dashboard.module';
|
||||
|
||||
import { ChartsModule } from 'ng2-charts';
|
||||
// import { StackedBarChartComponent } from './panels/stacked-bar.component';
|
||||
import { MoreStuffComponent } from './dashboard/more-graphs-and-tables.component';
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
<span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label>
|
||||
<div class="col-md-9">
|
||||
|
|
|
@ -42,17 +42,17 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
public doughnutChartColoursCategory: any[] = [
|
||||
{
|
||||
backgroundColor:[
|
||||
'#ffa1b5',
|
||||
'green',
|
||||
'#52afed',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'red',
|
||||
'#000000'
|
||||
'#ffa1b5',
|
||||
'#3cde52',
|
||||
'#52afed',
|
||||
'#c133e3',
|
||||
'#f7fa08',
|
||||
'#75152d',
|
||||
'#ee12ee',
|
||||
'#15eaea',
|
||||
'#eaa015',
|
||||
'#ea1515',
|
||||
'#2d4fcc'
|
||||
]
|
||||
}];
|
||||
|
||||
|
@ -121,17 +121,17 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
public barChartColoursCategory: any[] = [
|
||||
{
|
||||
backgroundColor:[
|
||||
'#ffa1b5',
|
||||
'green',
|
||||
'#52afed',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'red',
|
||||
'#000000'
|
||||
'#ffa1b5',
|
||||
'#3cde52',
|
||||
'#52afed',
|
||||
'#c133e3',
|
||||
'#f7fa08',
|
||||
'#75152d',
|
||||
'#ee12ee',
|
||||
'#15eaea',
|
||||
'#eaa015',
|
||||
'#ea1515',
|
||||
'#2d4fcc'
|
||||
]
|
||||
}];
|
||||
|
||||
|
|
|
@ -68,6 +68,7 @@
|
|||
[datasets]="doughnutChartDataCategory"
|
||||
[labels]="doughnutChartLabelsCategory"
|
||||
[options]="doughnutChartOptionsCategory"
|
||||
[colors]="doughnutChartColoursCategory"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
|
|
|
@ -84,16 +84,16 @@ export class DashboardComponent {
|
|||
{
|
||||
backgroundColor:[
|
||||
'#ffa1b5',
|
||||
'green',
|
||||
'#3cde52',
|
||||
'#52afed',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'red',
|
||||
'#000000'
|
||||
'#c133e3',
|
||||
'#f7fa08',
|
||||
'#75152d',
|
||||
'#ee12ee',
|
||||
'#15eaea',
|
||||
'#eaa015',
|
||||
'#ea1515',
|
||||
'#2d4fcc'
|
||||
]
|
||||
}];
|
||||
|
||||
|
@ -138,17 +138,17 @@ export class DashboardComponent {
|
|||
public barChartColoursCategory: any[] = [
|
||||
{
|
||||
backgroundColor:[
|
||||
'#ffa1b5',
|
||||
'green',
|
||||
'#52afed',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'red',
|
||||
'#000000'
|
||||
'#ffa1b5',
|
||||
'#3cde52',
|
||||
'#52afed',
|
||||
'#c133e3',
|
||||
'#f7fa08',
|
||||
'#75152d',
|
||||
'#ee12ee',
|
||||
'#15eaea',
|
||||
'#eaa015',
|
||||
'#ea1515',
|
||||
'#2d4fcc'
|
||||
]
|
||||
}];
|
||||
|
||||
|
|
|
@ -30,6 +30,10 @@
|
|||
<div class="col-sm-8">
|
||||
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
|
||||
</div>
|
||||
<div class="col-sm-4 hidden-sm-down">
|
||||
<input type="date" [(ngModel)]="lineChartBegin" (change)="lineChartUpdate()">
|
||||
<input type="date" [(ngModel)]="lineChartEnd" (change)="lineChartUpdate()">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<canvas baseChart
|
||||
|
@ -45,9 +49,12 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<div class="col-sm-8">
|
||||
<h4 class="card-title mb-0">Supplier Spend History</h4>
|
||||
</div>
|
||||
<div class="col-sm-4 hidden-sm-down">
|
||||
<button (click)="supplierChartUpdate()">New Suppliers</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<canvas baseChart #supplierChart
|
||||
|
|
|
@ -82,7 +82,7 @@ export class MoreStuffComponent implements OnInit {
|
|||
if (is_item_in_range) {
|
||||
graph_data.push({
|
||||
t: new Date(item.date.substring(0, 10)),
|
||||
r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
|
||||
r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
|
||||
supplier: item.seller,
|
||||
y: item.count,
|
||||
value: item.value,
|
||||
|
@ -151,8 +151,7 @@ export class MoreStuffComponent implements OnInit {
|
|||
data: [],
|
||||
label: ["Spend"],
|
||||
borderColor: 'blue',
|
||||
hoverBackgroundColor: 'blue',
|
||||
hoverBorderColor: 'blue',
|
||||
hoverBorderColor: 'black',
|
||||
radius: 5,
|
||||
},
|
||||
];
|
||||
|
@ -287,13 +286,7 @@ export class MoreStuffComponent implements OnInit {
|
|||
}
|
||||
|
||||
lineChartUpdate() {
|
||||
console.log("start_range input box: " + this.lineChartBegin.date);
|
||||
console.log("start_range : " + new Date(this.lineChartBegin));
|
||||
console.log("end_range input box: " + this.lineChartEnd);
|
||||
console.log("end_range : " + new Date(this.lineChartEnd));
|
||||
|
||||
this.loadYearSpend();
|
||||
console.log("Line chart updating...");
|
||||
this.loadYearSpend(true, (this.lineChartBegin), (this.lineChartEnd));
|
||||
|
||||
}
|
||||
|
||||
|
@ -319,6 +312,26 @@ export class MoreStuffComponent implements OnInit {
|
|||
}
|
||||
)
|
||||
}
|
||||
supplierChartUpdate() {
|
||||
this.api.loadMiscUrl('organisation/external/supplier_history').subscribe(
|
||||
result => {
|
||||
let labels = [];
|
||||
let year = [];
|
||||
let half = [];
|
||||
let quarter = [];
|
||||
result.data.map(item => {
|
||||
labels.push(item.name);
|
||||
year.push(item.year_total);
|
||||
half.push(item.half_total);
|
||||
quarter.push(item.quarter_total);
|
||||
});
|
||||
this.supplierMonthChartData[0].data = quarter.slice(0,15);
|
||||
this.supplierMonthChartData[1].data = half.slice(0,15);
|
||||
this.supplierMonthChartData[2].data = year.slice(0,15);
|
||||
this.supplierMonthChartLabels = labels.slice(0,15);
|
||||
}
|
||||
)
|
||||
}
|
||||
public supplierMonthChartData: any[] = [
|
||||
{
|
||||
data: [],
|
||||
|
|
|
@ -49,11 +49,11 @@
|
|||
</ul>
|
||||
</pagination-template>
|
||||
<select (change)="loadSuppliers(1)" [(ngModel)]="perPage">
|
||||
<option>10</option>
|
||||
<option>20</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>200</option>
|
||||
<option value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
<option value="200">200</option>
|
||||
</select>
|
||||
</div>
|
||||
<div *ngIf="!supplierListAvailable" class="card-block">
|
||||
|
|
|
@ -17,18 +17,19 @@ export class OrgPiePanel implements OnInit {
|
|||
public doughnutChartDataLocal: number[] = [];
|
||||
public doughnutChartColors: any[] = [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#ffa1b5',
|
||||
'green',
|
||||
'#52afed',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'pink'
|
||||
]
|
||||
backgroundColor:[
|
||||
'#ffa1b5',
|
||||
'#3cde52',
|
||||
'#52afed',
|
||||
'#c133e3',
|
||||
'#f7fa08',
|
||||
'#75152d',
|
||||
'#ee12ee',
|
||||
'#15eaea',
|
||||
'#eaa015',
|
||||
'#ea1515',
|
||||
'#2d4fcc'
|
||||
]
|
||||
},
|
||||
{
|
||||
borderColor: [
|
||||
|
|
|
@ -18,16 +18,17 @@ export class PiePanel implements OnInit {
|
|||
public doughnutChartLabelsLocal: string[] = [];
|
||||
public doughnutChartColors: any[] = [
|
||||
{ backgroundColor: [
|
||||
'#ffa1b5',
|
||||
'green',
|
||||
'#52afed',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'pink',
|
||||
'#ffa1b5',
|
||||
'#3cde52',
|
||||
'#52afed',
|
||||
'#c133e3',
|
||||
'#f7fa08',
|
||||
'#75152d',
|
||||
'#ee12ee',
|
||||
'#15eaea',
|
||||
'#eaa015',
|
||||
'#ea1515',
|
||||
'#2d4fcc'
|
||||
]
|
||||
},
|
||||
{ borderColor:[
|
||||
|
|
Reference in a new issue