Unfished Graph sections
Part 2
This commit is contained in:
parent
630beeb5d0
commit
bd33f79067
9 changed files with 235 additions and 77 deletions
|
@ -29,8 +29,8 @@
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="checkbox" class="mr-auto" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()">
|
<input type="checkbox" class="mr-auto" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()">
|
||||||
|
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
|
@ -38,8 +38,8 @@
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="checkbox" class="mr-auto" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
|
<input type="checkbox" class="mr-auto" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
|
||||||
|
<span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="recurringPurchase" class="form-group row">
|
<div *ngIf="recurringPurchase" class="form-group row">
|
||||||
|
|
|
@ -179,21 +179,21 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
<div class="col-xl-6">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<h4 class="card-title float-left mb-0">Spend by company and industrial sector</h4>
|
<h4 class="card-title float-left mb-0">Spend by company and Industrial sector</h4>
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
<div class="chart-wrapper">
|
<div class="chart-wrapper">
|
||||||
<canvas baseChart class="chart"
|
<canvas baseChart class="chart"
|
||||||
[datasets]="barChartDataCategory"
|
[datasets]="lineChartData"
|
||||||
[labels]="barChartLabelsCategory"
|
[labels]="lineChartLabels"
|
||||||
[options]="barChartOptionsCategory"
|
[options]="lineChartOptions"
|
||||||
[legend]="barChartLegendCategory"
|
[legend]="lineChartLegend"
|
||||||
[chartType]="barChartTypeCategory"
|
[chartType]="lineChartType"
|
||||||
(chartHover)="chartHovered($event)"
|
(chartHover)="chartHovered($event)"
|
||||||
(chartClick)="chartClicked($event)"></canvas>
|
(chartClick)="chartClicked($event)"></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -115,6 +115,82 @@ export class DashboardCustomerComponent implements OnInit {
|
||||||
totalCategoryLimit: number = 10;
|
totalCategoryLimit: number = 10;
|
||||||
totalCategoryList: any[]=[];
|
totalCategoryList: any[]=[];
|
||||||
|
|
||||||
|
public lineChartData: ChartDataSets[] = [
|
||||||
|
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
|
||||||
|
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
|
||||||
|
{ data: [180, 480, 770, 90, 1000, 270, 400], label: 'Series C', yAxisID: 'y-axis-1' }
|
||||||
|
];
|
||||||
|
public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
|
||||||
|
public lineChartOptions: (ChartOptions & { annotation: any }) = {
|
||||||
|
responsive: true,
|
||||||
|
scales: {
|
||||||
|
// We use this empty structure as a placeholder for dynamic theming.
|
||||||
|
xAxes: [{}],
|
||||||
|
yAxes: [
|
||||||
|
{
|
||||||
|
id: 'y-axis-0',
|
||||||
|
position: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'y-axis-1',
|
||||||
|
position: 'right',
|
||||||
|
gridLines: {
|
||||||
|
color: 'rgba(255,0,0,0.3)',
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
fontColor: 'red',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
annotation: {
|
||||||
|
annotations: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
mode: 'vertical',
|
||||||
|
scaleID: 'x-axis-0',
|
||||||
|
value: 'March',
|
||||||
|
borderColor: 'orange',
|
||||||
|
borderWidth: 2,
|
||||||
|
label: {
|
||||||
|
enabled: true,
|
||||||
|
fontColor: 'orange',
|
||||||
|
content: 'LineAnno'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
public lineChartColors: Color[] = [
|
||||||
|
{ // grey
|
||||||
|
backgroundColor: 'rgba(148,159,177,0.2)',
|
||||||
|
borderColor: 'rgba(148,159,177,1)',
|
||||||
|
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointHoverBackgroundColor: '#fff',
|
||||||
|
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||||
|
},
|
||||||
|
{ // dark grey
|
||||||
|
backgroundColor: 'rgba(77,83,96,0.2)',
|
||||||
|
borderColor: 'rgba(77,83,96,1)',
|
||||||
|
pointBackgroundColor: 'rgba(77,83,96,1)',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointHoverBackgroundColor: '#fff',
|
||||||
|
pointHoverBorderColor: 'rgba(77,83,96,1)'
|
||||||
|
},
|
||||||
|
{ // red
|
||||||
|
backgroundColor: 'rgba(255,0,0,0.3)',
|
||||||
|
borderColor: 'red',
|
||||||
|
pointBackgroundColor: 'rgba(148,159,177,1)',
|
||||||
|
pointBorderColor: '#fff',
|
||||||
|
pointHoverBackgroundColor: '#fff',
|
||||||
|
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
public lineChartLegend = true;
|
||||||
|
public lineChartType = 'line';
|
||||||
|
|
||||||
|
|
||||||
// Graph widgets
|
// Graph widgets
|
||||||
public widgetList = [
|
public widgetList = [
|
||||||
{
|
{
|
||||||
|
|
|
@ -11,4 +11,89 @@
|
||||||
</div><!--/.col-->
|
</div><!--/.col-->
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
<panel-graph></panel-graph>
|
<panel-graph></panel-graph>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-block">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 class="card-title float-left mb-0">Spend by company and Industrial sector</h4>
|
||||||
|
</div><!--/.col-->
|
||||||
|
</div><!--/.row-->
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<canvas baseChart class="chart"
|
||||||
|
[datasets]="lineChartData"
|
||||||
|
[labels]="lineChartLabels"
|
||||||
|
[options]="lineChartOptions"
|
||||||
|
[legend]="lineChartLegend"
|
||||||
|
[chartType]="lineChartType"
|
||||||
|
(chartHover)="chartHovered($event)"
|
||||||
|
(chartClick)="chartClicked($event)"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=row>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-block">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-block">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 class="card-title mb-0">No. of Essential Purchases</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<canvas baseChart class="chart"
|
||||||
|
[datasets]="barChartDataEssential"
|
||||||
|
[labels]="barChartLabelsEssential"
|
||||||
|
[options]="barChartOptionsEssential"
|
||||||
|
[chartType]="barChartTypeEssential"
|
||||||
|
(chartHover)="chartHovered($event)"
|
||||||
|
(chartClick)="chartClicked($event)"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!--/.col-->
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-block">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h4 class="card-title mb-0">Weekly Spending by Category</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-wrapper">
|
||||||
|
<canvas baseChart class="chart"
|
||||||
|
[datasets]="doughnutChartDataCategory"
|
||||||
|
[labels]="doughnutChartLabelsCategory"
|
||||||
|
[options]="doughnutChartOptionsCategory"
|
||||||
|
[legend]="chartLegend"
|
||||||
|
[chartType]="chartType"
|
||||||
|
(chartHover)="chartHovered($event)"
|
||||||
|
(chartClick)="chartClicked($event)"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-6">
|
||||||
|
<panel-pie></panel-pie>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,6 +3,7 @@ import {Router, NavigationEnd} from "@angular/router";
|
||||||
import { GraphWidget } from '../widgets/graph-widget.component';
|
import { GraphWidget } from '../widgets/graph-widget.component';
|
||||||
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
|
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
|
||||||
import { GraphPanel } from '../panels/graph-panel.component';
|
import { GraphPanel } from '../panels/graph-panel.component';
|
||||||
|
import { PiePanel } from '../panels/pie-panel.component';
|
||||||
import { DataType } from '../shared/data-types.enum';
|
import { DataType } from '../shared/data-types.enum';
|
||||||
import { environment } from '../../environments/environment';
|
import { environment } from '../../environments/environment';
|
||||||
|
|
||||||
|
@ -61,4 +62,5 @@ export class DashboardComponent {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,31 +1,11 @@
|
||||||
<script src="node_modules/chart.js/src/chart.js"></script>
|
<script src="node_modules/chart.js/src/chart.js"></script>
|
||||||
<!--
|
|
||||||
<div class="form-group row">
|
|
||||||
<div class="card-block">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<h4 class="card-title mb-0">Spend by Industrial Sector</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="display: block">
|
|
||||||
<canvas baseChart
|
|
||||||
[datasets]="sampleBubbleChartData"
|
|
||||||
[options]="sampleBubbleChartOptions"
|
|
||||||
[colors]="sampleBubbleChartColors"
|
|
||||||
[legend]="sampleBubbleChartLegend"
|
|
||||||
[chartType]="sampleBubbleChartType">
|
|
||||||
</canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>-->
|
|
||||||
<div class="animated fadeIn">
|
<div class="animated fadeIn">
|
||||||
<!-- <div class="form-group row"> -->
|
<!-- <div class="form-group row"> -->
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<h4 class="card-title mb-0">Spend by Region</h4>
|
<h4 class="card-title mb-0">Spend by Company Type</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: block">
|
<div style="display: block">
|
||||||
|
@ -35,7 +15,11 @@
|
||||||
[colors]="sampleBubbleChartColors"
|
[colors]="sampleBubbleChartColors"
|
||||||
[labels]="bubbleChartLabelsCategory"
|
[labels]="bubbleChartLabelsCategory"
|
||||||
[legend]="chartLegend"
|
[legend]="chartLegend"
|
||||||
[chartType]="chartType"> <!--bootstrapColours-->
|
[chartType]="chartType"
|
||||||
|
(chartHover)="chartHovered($event)"
|
||||||
|
(chartClick)="chartClicked($event)">
|
||||||
|
|
||||||
|
<!--bootstrapColours-->
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,8 +17,8 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
|
||||||
@Component({
|
@Component({
|
||||||
templateUrl: 'more-graphs-and-tables.component.html',
|
templateUrl: 'more-graphs-and-tables.component.html',
|
||||||
})
|
})
|
||||||
export class MoreStuffComponent implements OnInit { // if you wanna rename this, replace in all files 'MoreStuffComponent' with desired name and 'more-graphs-and-tables.component' with another desired name
|
export class MoreStuffComponent implements OnInit {
|
||||||
// @Input() public recurList: Array<RecurSupplierData>;
|
// @Input() public recurList: Array<RecurSupplierData>;
|
||||||
@Output() public onClick = new EventEmitter();
|
@Output() public onClick = new EventEmitter();
|
||||||
@Input() public categories: any;
|
@Input() public categories: any;
|
||||||
|
|
||||||
|
@ -43,10 +43,55 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
|
||||||
|
|
||||||
public chartType = 'bubble';
|
public chartType = 'bubble';
|
||||||
public chartLegend = true;
|
public chartLegend = true;
|
||||||
public bubbleChartDataCategory: any[] = [];
|
public bubbleChartDataCategory: any[] = [
|
||||||
|
{
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: [
|
||||||
|
{ x: 10, y: 2, r: 10 },
|
||||||
|
{ x: 15, y: 1, r: 15 },
|
||||||
|
{ x: 26, y: 7, r: 23 },
|
||||||
|
{ x: 5, y: 8, r: 8 },
|
||||||
|
],
|
||||||
|
label: ["Series B"],
|
||||||
|
backgroundColor: 'green',
|
||||||
|
borderColor: 'blue',
|
||||||
|
hoverBackgroundColor: 'purple',
|
||||||
|
hoverBorderColor: 'red',
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
public bubbleChartLabelsCategory: string[] = [];
|
public bubbleChartLabelsCategory: string[] = [];
|
||||||
|
|
||||||
public bubbleChartOptionsCategory:any = {
|
public bubbleChartOptionsCategory:any = {
|
||||||
|
responsive: true,
|
||||||
|
scales: {
|
||||||
|
xAxes: [
|
||||||
|
{
|
||||||
|
ticks: {
|
||||||
|
min: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxes: [
|
||||||
|
{
|
||||||
|
ticks: {
|
||||||
|
min: 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
tooltips: {
|
tooltips: {
|
||||||
callbacks: {
|
callbacks: {
|
||||||
label: (tooltip, data) => {
|
label: (tooltip, data) => {
|
||||||
|
@ -59,7 +104,13 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
|
||||||
private setChartData(dataCat: any) {
|
private setChartData(dataCat: any) {
|
||||||
// now we just need some data and it will display!
|
// now we just need some data and it will display!
|
||||||
}
|
}
|
||||||
|
public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
|
||||||
|
console.log(event, active);
|
||||||
|
}
|
||||||
|
|
||||||
|
public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
|
||||||
|
console.log(event, active);
|
||||||
|
}
|
||||||
// functions
|
// functions
|
||||||
|
|
||||||
private tooltipLabelCallback(tooltipItem: any, data: any) {
|
private tooltipLabelCallback(tooltipItem: any, data: any) {
|
||||||
|
@ -70,46 +121,6 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
|
||||||
|
|
||||||
// SAMPLE chart data
|
// SAMPLE chart data
|
||||||
|
|
||||||
public sampleBubbleChartOptions: ChartOptions = {
|
|
||||||
responsive: true,
|
|
||||||
scales: {
|
|
||||||
xAxes: [
|
|
||||||
{
|
|
||||||
ticks: {
|
|
||||||
min: 0,
|
|
||||||
max: 30,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
yAxes: [
|
|
||||||
{
|
|
||||||
ticks: {
|
|
||||||
min: 0,
|
|
||||||
max: 30,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
public sampleBubbleChartType: ChartType = 'bubble';
|
|
||||||
public sampleBubbleChartLegend = true;
|
|
||||||
|
|
||||||
public sampleBubbleChartData: 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 sampleBubbleChartColors: Color[] = [
|
public sampleBubbleChartColors: Color[] = [
|
||||||
{
|
{
|
||||||
backgroundColor: [
|
backgroundColor: [
|
||||||
|
@ -127,4 +138,3 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { ApiService } from './api-service';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class OrgGraphsService {
|
export class OrgGraphsService {
|
||||||
private orgGraphUrl = '/v1/customer/graphs';
|
private orgGraphUrl = '/v1/organisation/graphs';
|
||||||
|
|
||||||
constructor(private api: ApiService) { }
|
constructor(private api: ApiService) { }
|
||||||
|
|
||||||
|
|
|
@ -66,6 +66,7 @@ small,
|
||||||
.small {
|
.small {
|
||||||
font-size: $small-font-size;
|
font-size: $small-font-size;
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
mark,
|
mark,
|
||||||
|
|
Reference in a new issue