Work on date picker function on bubble chart
This commit is contained in:
Tom Slater
parent
c206a394d2
commit
d550bf5e12
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -7136,6 +7136,14 @@
|
|||
"resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.0.0.tgz",
|
||||
"integrity": "sha512-5TTFP9s3wfiRychGcdyvpCvvxtxW1Nf2Dqmk2YBzuIhHHLT6gRq1Fsic4lYrtAUwmy0PSLhOY/XW/saYKlrSJw=="
|
||||
},
|
||||
"ngx-daterangepicker-material": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/ngx-daterangepicker-material/-/ngx-daterangepicker-material-2.1.8.tgz",
|
||||
"integrity": "sha512-nSS/M2CQnUSfzZwy+V5mcnE+tjqwmr+HusIDYmiE1zNARG7gkEzYWBmXIOxsC1Dx9snA3NMpqqXj2NitIhyHig==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"ngx-pagination": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-4.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
"ng2-charts": "^2.3.0",
|
||||
"ng2-validation-manager": "0.5.3",
|
||||
"ngx-bootstrap": "^5.0.0",
|
||||
"ngx-daterangepicker-material": "^2.1.8",
|
||||
"ngx-pagination": "^4.0.0",
|
||||
"popper.js": "^1.15.0",
|
||||
"rxjs": "6.5.2",
|
||||
|
|
|
|||
|
|
@ -22,8 +22,21 @@
|
|||
<!-- <body style="background-color:rgb(0,0,0);"> -->
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title mb-0">Weekly Spending by Category</h4>
|
||||
<div class="col-7">
|
||||
<h4 class="card-title mb-0">Spending by Category</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
|
|
@ -44,9 +57,22 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-7">
|
||||
<h4 class="card-title mb-0">No. of Essential Purchases</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
|
|
@ -64,9 +90,22 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-8">
|
||||
<h4 class="card-title float-left mb-0">Your Purchases by Category</h4>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-4 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
<div class="animated fadeIn">
|
||||
<snippet-bar-org></snippet-bar-org>
|
||||
<div class="row">
|
||||
|
|
@ -16,9 +17,22 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-7">
|
||||
<h4 class="card-title mb-0">No. of Essential Purchases</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
|
|
@ -36,9 +50,22 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-7">
|
||||
<h4 class="card-title float-left mb-0">All Organisation Purchases by Category</h4>
|
||||
</div><!--/.col-->
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
|
|
@ -58,8 +85,21 @@
|
|||
<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 class="col-7">
|
||||
<h4 class="card-title mb-0">Spending by Category</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export class DashboardComponent {
|
|||
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
|
||||
'bg-danger', 'bg-warning', 'bg-info'];
|
||||
|
||||
public chartType = 'pie';
|
||||
public chartType = 'doughnut';
|
||||
public chartLegend = true;
|
||||
public doughnutChartDataCategory: any[] = [];
|
||||
public doughnutChartLabelsCategory: string[] = [];
|
||||
|
|
|
|||
|
|
@ -6,17 +6,8 @@
|
|||
<h4 class="card-title mb-0">Spend amount and number of purchases by supplier name</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<input type="date" id="bubbleChartBegin" name="bubbleChartBegin" [(ngModel="bubbleChartBegin")] (ngModelChange)="bubbleChartUpdate">
|
||||
<input type="date" id="bubbleChartEnd" name="bubbleChartEnd" [(ngModel="bubbleChartEnd")] (ngModelChange)="bubbleChartUpdate">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -37,17 +28,8 @@
|
|||
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<input type="date" id="yearSpendChartBegin" name="yearSpendChartBegin" ng-model="yearSpendChartBegin" ng-change="yearSpendChartBegin">
|
||||
<input type="date" id="yearSpendChartEnd" name="yearSpendChartEnd" ng-model="yearSpendChartEnd" ng-change="yearSpendChartEnd">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export class MoreStuffComponent implements OnInit {
|
|||
result.data.map(item => {
|
||||
graph_data.push({
|
||||
t: item.date,
|
||||
r: (item.value / 100000) + 5,
|
||||
r: (item.value / 100000) + 4,
|
||||
supplier: item.seller,
|
||||
y: item.count,
|
||||
value: item.value,
|
||||
|
|
@ -75,6 +75,7 @@ export class MoreStuffComponent implements OnInit {
|
|||
borderColor: 'blue',
|
||||
hoverBackgroundColor: 'blue',
|
||||
hoverBorderColor: 'blue',
|
||||
radius: 5,
|
||||
},
|
||||
];
|
||||
public supplierBubbleChartLabels: string[] = [];
|
||||
|
|
|
|||
|
|
@ -1,9 +1,22 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-7">
|
||||
<h4 class="card-title mb-0">All Purchases by Type</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@ export class OrgPiePanel implements OnInit {
|
|||
'orange',
|
||||
'blue'
|
||||
]
|
||||
},
|
||||
{ borderWidth: [10]
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,22 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-7">
|
||||
<h4 class="card-title mb-0">All Purchases by Category</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<div class="btn-toolbar float-right" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-3" data-toggle="buttons" aria-label="First group">
|
||||
<select>
|
||||
<option value="Day">Day</option>
|
||||
<option value="Week">Week</option>
|
||||
<option value="Month">Month</option>
|
||||
<option value="Year">Year</option>
|
||||
<option value="All Time">All Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<canvas baseChart class="chart"
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ export class PiePanel implements OnInit {
|
|||
public doughnutChartLabelsLocal: string[] = [];
|
||||
public doughnutChartColors: any[] = [
|
||||
{ backgroundColor: [
|
||||
'red',
|
||||
'#ffa1b5',
|
||||
'green',
|
||||
'blue',
|
||||
'#52afed',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
|
|
@ -42,6 +42,8 @@ export class PiePanel implements OnInit {
|
|||
'orange',
|
||||
'pink'
|
||||
]
|
||||
},
|
||||
{ borderWidth: [10]
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
Reference in a new issue