Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Unfished Graph sections

Browse source 
Part 2
This commit is contained in:
Tom Slater 2019-07-11 15:18:33 +01:00
parent 630beeb5d0
commit bd33f79067
9 changed files with 235 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/dashboard/add-data.component.html
View file

@ -29,8 +29,8 @@
<div class="col-md-9">
<div class="input-group">
<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>
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
</div>
</div>
<div class="form-group row">
@ -38,8 +38,8 @@
<div class="col-md-9">
<div class="input-group">
<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>
<span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
</div>
</div>
<div *ngIf="recurringPurchase" class="form-group row">

14
src/app/dashboard/dashboard-customer.component.html
View file

@ -179,21 +179,21 @@
</div>
</div>
</div><!--/.col-->
<div class="col-xl-6">
<div class="col-12">
<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>
<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]="barChartDataCategory"
[labels]="barChartLabelsCategory"
[options]="barChartOptionsCategory"
[legend]="barChartLegendCategory"
[chartType]="barChartTypeCategory"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>

76
src/app/dashboard/dashboard-customer.component.ts
View file

@ -115,6 +115,82 @@ export class DashboardCustomerComponent implements OnInit {
totalCategoryLimit: number = 10;
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
public widgetList = [
{

85
src/app/dashboard/dashboard.component.html
View file

@ -11,4 +11,89 @@
</div><!--/.col-->
</div><!--/.row-->
<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>

2
src/app/dashboard/dashboard.component.ts
View file

@ -3,6 +3,7 @@ import {Router, NavigationEnd} from "@angular/router";
import { GraphWidget } from '../widgets/graph-widget.component';
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
import { GraphPanel } from '../panels/graph-panel.component';
import { PiePanel } from '../panels/pie-panel.component';
import { DataType } from '../shared/data-types.enum';
import { environment } from '../../environments/environment';
@ -61,4 +62,5 @@ export class DashboardComponent {
});
}
}
}

30
src/app/dashboard/more-graphs-and-tables.component.html
View file

@ -1,31 +1,11 @@
<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="form-group row"> -->
<div class="card">
<div class="card-block">
<div class="row">
<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 style="display: block">
@ -35,10 +15,14 @@
[colors]="sampleBubbleChartColors"
[labels]="bubbleChartLabelsCategory"
[legend]="chartLegend"
[chartType]="chartType"> <!--bootstrapColours-->
[chartType]="chartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
<!--bootstrapColours-->
</canvas>
</div>
</div>
</div>
<!-- </div> -->
</div>
</div>

98
src/app/dashboard/more-graphs-and-tables.component.ts
View file

@ -17,8 +17,8 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
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
// @Input() public recurList: Array<RecurSupplierData>;
export class MoreStuffComponent implements OnInit {
// @Input() public recurList: Array<RecurSupplierData>;
@Output() public onClick = new EventEmitter();
@Input() public categories: any;
@ -43,10 +43,55 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
public chartType = 'bubble';
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 bubbleChartOptionsCategory:any = {
responsive: true,
scales: {
xAxes: [
{
ticks: {
min: 0,
}
}
],
yAxes: [
{
ticks: {
min: 0,
}
}
]
},
tooltips: {
callbacks: {
label: (tooltip, data) => {
@ -59,7 +104,13 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
private setChartData(dataCat: any) {
// 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
private tooltipLabelCallback(tooltipItem: any, data: any) {
@ -69,46 +120,6 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
}
// 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[] = [
{
@ -127,4 +138,3 @@ export class MoreStuffComponent implements OnInit { // if you wanna rename this
}
];
}

2
src/app/providers/org-graphs.service.ts
View file

@ -3,7 +3,7 @@ import { ApiService } from './api-service';
@Injectable()
export class OrgGraphsService {
private orgGraphUrl = '/v1/customer/graphs';
private orgGraphUrl = '/v1/organisation/graphs';
constructor(private api: ApiService) { }

1
src/scss/bootstrap/_type.scss
View file

@ -66,6 +66,7 @@ small,
.small {
font-size: $small-font-size;
font-weight: $font-weight-normal;
padding-left: 20px;
}
mark,