Commit 6dc2201b authored by CARRON Guilhem's avatar CARRON Guilhem
Browse files

Add info chart with Chart.js

parent cb1610e1
......@@ -6280,6 +6280,32 @@
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
"integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
},
"chart.js": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
"integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
"requires": {
"chartjs-color": "^2.1.0",
"moment": "^2.10.2"
}
},
"chartjs-color": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
"requires": {
"chartjs-color-string": "^0.6.0",
"color-convert": "^1.9.3"
}
},
"chartjs-color-string": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
"requires": {
"color-name": "^1.0.0"
}
},
"check-types": {
"version": "8.0.3",
"resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
......@@ -6499,7 +6525,6 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
......@@ -6507,8 +6532,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"colors": {
"version": "1.1.2",
......@@ -10459,6 +10483,11 @@
"minimist": "0.0.8"
}
},
"moment": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
},
"monotone-convex-hull-2d": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/monotone-convex-hull-2d/-/monotone-convex-hull-2d-1.0.1.tgz",
......
......@@ -8,13 +8,14 @@
</div>
<app-info-summary class="mobile-section"></app-info-summary>
<!-- <div class="info-section" >
<div class="info-section" >
<span class="info-title" i18n="@@dataset.info.dashboard">
Dashboard
</span>
<div class="dashboard">
<app-info-chart></app-info-chart>
</div>
</div> -->
</div>
<div class="info-section">
<span class="info-title" i18n="@@dataset.info.legalContraints">
......
<div id="divChart">
<canvas id="myChart"></canvas>
</div>
\ No newline at end of file
#divChart{
canvas{
margin:auto;
max-width: 650px;
width:100%;
max-height: 350px;
}
}
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { Chart, ChartOptions, ChartType, ChartDataSets, ChartPoint } from 'chart.js';
@Component({
selector: 'app-info-chart',
templateUrl: './info-chart.component.html',
styleUrls: ['./info-chart.component.scss']
})
export class InfoChartComponent implements OnInit {
constructor() { }
barWidth = 20;
ngOnInit(): void {
const myChart = new Chart('myChart', {
type: 'bar',
data: {
labels: ['Jan', 'Fev', 'Mars', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov'],
datasets: [
{ data: [45, 37, 60, 70, 46, 33, 59, 26, 40, 50, 55],
label: 'WMS',
backgroundColor: '#7BC0F5',
hoverBackgroundColor: '#7BC0F5',
hoverBorderColor: '#DA322F',
hoverBorderWidth: 2,
barThickness : this.barWidth,
stack: 'a',
},
{ data: [12, 37, 55, 70, 78, 33, 55, 70, 78, 33, 65],
label: 'WFS',
hoverBorderColor: '#DA322F',
hoverBorderWidth: 2,
backgroundColor: '#E5A1F1',
hoverBackgroundColor: '#E5A1F1',
barThickness : this.barWidth,
stack: 'a',
},
{ data: [58, 37, 60, 65, 46, 89, 55, 70, 78, 33, 55],
label: 'WS',
hoverBorderColor: '#DA322F',
hoverBorderWidth: 2,
backgroundColor: '#78D7D7',
hoverBackgroundColor: '#78D7D7',
barThickness : this.barWidth,
stack: 'a',
},
{ data: [36, 87, 54, 25, 10, 33, 46, 33, 59, 26, 40],
label: 'Autres',
hoverBorderColor: '#DA322F',
hoverBorderWidth: 2,
backgroundColor: '#F2C774',
hoverBackgroundColor: '#F2C774',
barThickness : this.barWidth,
stack: 'a',
},
],
},
options: {
responsive: true,
title: {
display: true,
text: 'Services utilisés',
position: 'bottom',
},
tooltips: {
mode: 'label',
xPadding: 15,
yPadding: 15,
cornerRadius: 0,
displayColors: false,
backgroundColor: '#464A57',
callbacks: {
title: (tooltipItem, data) => {
let total = 0;
// Get the total amount of requests
tooltipItem.forEach((tooltip) => {
total += tooltip.yLabel;
});
return total.toString() + ' requêtes';
},
labelTextColor: (tooltipItem, data) => {
// for each tooltiplabel get the bar color
return data.data.datasets[tooltipItem.datasetIndex].backgroundColor.toString() ;
},
},
},
legend: {
position: 'bottom',
fullWidth: false,
labels: {
boxWidth: 13,
padding: 30,
fontColor: '#000',
},
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
}],
xAxes: [{
ticks: {
beginAtZero: true,
},
gridLines: {
color: '#fff',
},
}],
},
},
});
}
}
......@@ -20,6 +20,7 @@ import { DatasetMapComponent } from './dataset-map/dataset-map.component';
import { DatasetReusesComponent } from './dataset-reuses/dataset-reuses.component';
import { DatasetTableMapComponent } from './dataset-table-map/dataset-table-map.component';
import { DatasetTableComponent } from './dataset-table/dataset-table.component';
import { InfoChartComponent } from './dataset-info/info-chart/info-chart.component';
// tslint:disable-next-line: max-line-length
export { DatasetDetailComponent, ResourceDownloadItemComponent, DatasetAPIComponent, DatasetDownloadsComponent, ResourceQueryableComponent, DatasetMapComponent, DatasetInfoComponent, DatasetTableMapComponent, DatasetTableComponent, ResourcesQueryableComponent, IconFormatComponent, DatasetDataDetailsComponent, DatasetDataDetailPropertiesComponent, DatasetReusesComponent, InfoContactComponent, InfoPartnersComponent, InfoSummaryComponent };
// tslint:disable-next-line:variable-name
......@@ -32,6 +33,7 @@ export const DatasetDetailComponents = [
InfoContactComponent,
InfoPartnersComponent,
InfoSummaryComponent,
InfoChartComponent,
DatasetDownloadsComponent,
DatasetReusesComponent,
DatasetTableMapComponent,
......
......@@ -10,9 +10,10 @@ import { DatasetDetailComponents } from './components';
import { DatasetDetailRoutingModule } from './dataset-detail-routing.module';
import { DatasetDetailResolvers } from './resolvers';
import { DatasetDetailServices } from './services';
import { InfoChartComponent } from './components/dataset-info/info-chart/info-chart.component';
@NgModule({
declarations: [...DatasetDetailComponents],
declarations: [...DatasetDetailComponents, InfoChartComponent],
imports: [
CommonModule,
DatasetDetailRoutingModule,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment