octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-11-09 23:00:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

enable chart canvas responsiveness

Browse Source
This commit is contained in:
Jesse Lucas 2020-03-29 16:38:06 -04:00
parent d67c9b66d3
commit 86141c1eef
5 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/charts/device-chart/device-chart.component.html
View File

@ -1,9 +1,9 @@
<div class="{{elevation}} tui-card">
<div class="tui-card-title">Devices</div>
<div class="tui-card-content">
<div fxLayout="row" fxLayoutAlign="space-between start">
<app-donut-chart [elementID]="chartID"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<app-donut-chart [elementID]="chartID" fxFlex="30"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="start none" fxFlex="70">
<app-chart-item *ngFor="let state of states" [state]="state.label" [count]="state.count">
</app-chart-item>
</div>

4
src/app/charts/donut-chart/donut-chart.component.html
View File

@ -1,4 +1,4 @@
<div class="chart-container">
<canvas id={{elementID}} width="100%" height="100%"></canvas>
<div class="chart-container" fxLayout="column" fxLayoutAlign="space-around">
<canvas id={{elementID}} width="100px" height="100px"></canvas>
<div class="center">{{count}}</div>
</div>

6
src/app/charts/donut-chart/donut-chart.component.scss
View File

@ -1,6 +1,8 @@
.chart-container {
position: relative;
}
width: 100%;
height: 100%;
}
.center {
position: absolute;
@ -8,5 +10,5 @@
top: 40%;
width: 100%;
text-align: center;
font-size: 18px;
font-size:1.8rem;
}

6
src/app/charts/donut-chart/donut-chart.component.ts
View File

@ -49,8 +49,8 @@ export class DonutChartComponent {
}]
},
options: {
cutoutPercentage: 70,
responsive: false,
cutoutPercentage: 75,
responsive: true,
legend: {
display: false
},
@ -62,4 +62,4 @@ export class DonutChartComponent {
}
});
}
}
}

6
src/app/charts/folder-chart/folder-chart.component.html
View File

@ -1,9 +1,9 @@
<div class="{{elevation}} tui-card">
<div class="tui-card-title">Folders</div>
<div class="tui-card-content">
<div fxLayout="row" fxLayoutAlign="space-between start">
<app-donut-chart [elementID]="chartID"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
<div fxLayout="row" fxLayoutAlign="space-between stretch">
<app-donut-chart [elementID]="chartID" fxFlex="30"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="start none" fxFlex="70">
<app-chart-item *ngFor="let state of states" [state]="state.label" [count]="state.count">
</app-chart-item>
</div>