Misc chart work
This commit is contained in:
parent
4181a09b96
commit
9fbe36e401
11 changed files with 48 additions and 50 deletions
|
@ -156,14 +156,14 @@
|
|||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of Employees</strong></label>
|
||||
<div class="col-md-9">
|
||||
<input type="number" class="form-control" formControlName="employee_amount" placeholder="0">
|
||||
<input type="number" class="form-control" formControlName="employee_amount" placeholder="0" min="0">
|
||||
<span class="help-block">Enter the amount of employees the organisation has for the entry month.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of local Employees</strong></label>
|
||||
<div class="col-md-9">
|
||||
<input type="number" class="form-control" formControlName="local_employee_amount" placeholder="0">
|
||||
<input type="number" class="form-control" formControlName="local_employee_amount" placeholder="0" min="0">
|
||||
<span class="help-block">Enter the amount of employees that live locally to the organisation for the entry month.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div class="animated fadeIn">
|
||||
<div class=row>
|
||||
<div class="col-md-6">
|
||||
<div *ngIf="weekList1" class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
|
@ -42,7 +42,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div *ngIf="weekList2" class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
|
@ -84,7 +84,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div *ngIf="weekList3" class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
|
@ -126,7 +126,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<div class="col-md-6">
|
||||
<div *ngIf="weekList4" class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
|
|
|
@ -17,10 +17,10 @@
|
|||
<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="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title mb-0">Spending by Category</h4>
|
||||
|
@ -31,15 +31,15 @@
|
|||
[datasets]="doughnutChartDataCategory"
|
||||
[labels]="doughnutChartLabelsCategory"
|
||||
[options]="doughnutChartOptionsCategory"
|
||||
[colors]= "doughnutChartColoursCategory"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chartType"
|
||||
(chartHover)="chartHovered($event)"
|
||||
(chartClick)="chartClicked($event)"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- </body> -->
|
||||
</div>
|
||||
</div><!--/.col-->
|
||||
<!-- </div> --><!--/.col-->
|
||||
<div *ngIf="showEssentialBarChart" class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-block">
|
||||
|
|
|
@ -35,10 +35,25 @@ export class DashboardCustomerComponent implements OnInit {
|
|||
public bootstrapColours: string[] = ['bg-primary', 'bg-secondary', 'bg-success',
|
||||
'bg-danger', 'bg-warning', 'bg-info'];
|
||||
|
||||
public chartType = 'bar';
|
||||
public chartType = 'doughnut';
|
||||
public chartLegend = true;
|
||||
public doughnutChartDataCategory: any[] = [];
|
||||
public doughnutChartLabelsCategory: string[] = [];
|
||||
public doughnutChartColoursCategory: any[] = [
|
||||
{
|
||||
backgroundColor:[
|
||||
'red',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'pink'
|
||||
]
|
||||
}];
|
||||
|
||||
public doughnutChartOptionsCategory:any = {
|
||||
tooltips: {
|
||||
|
|
|
@ -60,7 +60,7 @@
|
|||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4 class="card-title mb-0">Spending by Category</h4>
|
||||
<h4 class="card-title mb-0">Last week's spending by Category</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
|
|
|
@ -46,9 +46,9 @@ export class DashboardComponent {
|
|||
},
|
||||
{
|
||||
type: 'graph',
|
||||
name: 'sales_last_year',
|
||||
name: 'sales_last_quart',
|
||||
icon: 'icon-diamond',
|
||||
title: 'Sales Last Year',
|
||||
title: 'Sales Last Quart',
|
||||
dataType: DataType.currency,
|
||||
},
|
||||
{
|
||||
|
@ -65,8 +65,8 @@ export class DashboardComponent {
|
|||
},
|
||||
{
|
||||
type: 'graph',
|
||||
name: 'purchases_last_year;',
|
||||
title: 'Purchases Last Year',
|
||||
name: 'purchases_last_quart;',
|
||||
title: 'Purchases Last Quart',
|
||||
dataType: DataType.currency,
|
||||
},
|
||||
];
|
||||
|
|
|
@ -5,12 +5,12 @@
|
|||
<div class="col-sm-8">
|
||||
<h4 class="card-title mb-0">Supplier spend amount and number of purchases</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down" *ngIf="isBubbleChartLoaded">
|
||||
<div class="col-sm-4 hidden-sm-down" *ngIf="isBubbleChartLoaded">
|
||||
<input type="date" [(ngModel)]="bubbleChartBegin" (change)="bubbleChartUpdate()">
|
||||
<input type="date" [(ngModel)]="bubbleChartEnd" (change)="bubbleChartUpdate()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7" *ngIf="!isBubbleChartLoaded">
|
||||
<div class="col-sm-12" *ngIf="!isBubbleChartLoaded">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<div *ngIf="isBubbleChartLoaded">
|
||||
|
@ -30,10 +30,6 @@
|
|||
<div class="col-sm-8">
|
||||
<h4 class="card-title mb-0">Spend amount and number of organisations</h4>
|
||||
</div>
|
||||
<div class="col-sm-5 hidden-sm-down">
|
||||
<!-- <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>
|
||||
<canvas baseChart
|
||||
|
|
|
@ -41,7 +41,7 @@ export class MoreStuffComponent implements OnInit {
|
|||
backgroundColor: [
|
||||
'red',
|
||||
'green',
|
||||
'blue',
|
||||
'#52afed',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
|
@ -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 / 1000000) + 10 : (item.value / 100000) + 5,
|
||||
r: item.value > 1000000 ? (item.value / 100000) : (item.value / 100000) + 5,
|
||||
supplier: item.seller,
|
||||
y: item.count,
|
||||
value: item.value,
|
||||
|
@ -96,7 +96,7 @@ export class MoreStuffComponent implements OnInit {
|
|||
passed_graph_data.data.map(item => {
|
||||
graph_data.push({
|
||||
t: item.date,
|
||||
r: item.value > 1000000 ? (item.value / 1000000) + 10 : (item.value / 100000) + 5,
|
||||
r: item.value > 1000000 ? (item.value / 200000) : (item.value / 100000) + 5,
|
||||
supplier: item.seller,
|
||||
y: item.count,
|
||||
value: item.value,
|
||||
|
|
|
@ -18,30 +18,30 @@ export class OrgPiePanel implements OnInit {
|
|||
public doughnutChartColors: any[] = [
|
||||
{
|
||||
backgroundColor: [
|
||||
'red',
|
||||
'#ffa1b5',
|
||||
'green',
|
||||
'pink',
|
||||
'#52afed',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'blue'
|
||||
'pink'
|
||||
]
|
||||
},
|
||||
{
|
||||
borderColor: [
|
||||
'red',
|
||||
'green',
|
||||
'pink',
|
||||
'blue',
|
||||
'purple',
|
||||
'yellow',
|
||||
'brown',
|
||||
'magenta',
|
||||
'cyan',
|
||||
'orange',
|
||||
'blue'
|
||||
'pink'
|
||||
]
|
||||
},
|
||||
{ borderWidth: [100]
|
||||
|
|
|
@ -1,22 +1,9 @@
|
|||
<div class="card">
|
||||
<div class="card-block">
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<div class="col-12">
|
||||
<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"
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
export const environment = {
|
||||
production: false,
|
||||
apiUrl: 'https://dev.peartrade.org/api',
|
||||
apiUrl: 'https://dev.localspend.co.uk/api',
|
||||
mapApiKey: 'CHANGEME',
|
||||
enableAnalytics: false,
|
||||
analyticsKey: 'CHANGEME',
|
||||
|
|
Reference in a new issue