octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-11-13 00:36:28 +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="{{elevation}} tui-card">
<div class="tui-card-title">Devices</div> <div class="tui-card-title">Devices</div>
<div class="tui-card-content"> <div class="tui-card-content">
<div fxLayout="row" fxLayoutAlign="space-between start"> <div fxLayout="row" fxLayoutAlign="space-between stretch">
<app-donut-chart [elementID]="chartID"></app-donut-chart> <app-donut-chart [elementID]="chartID" fxFlex="30"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="space-evenly end"> <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 *ngFor="let state of states" [state]="state.label" [count]="state.count">
</app-chart-item> </app-chart-item>
</div> </div>

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

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

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

@ -1,6 +1,8 @@
.chart-container { .chart-container {
position: relative; position: relative;
} width: 100%;
height: 100%;
}
.center { .center {
position: absolute; position: absolute;
@ -8,5 +10,5 @@
top: 40%; top: 40%;
width: 100%; width: 100%;
text-align: center; 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: { options: {
cutoutPercentage: 70, cutoutPercentage: 75,
responsive: false, responsive: true,
legend: { legend: {
display: false 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="{{elevation}} tui-card">
<div class="tui-card-title">Folders</div> <div class="tui-card-title">Folders</div>
<div class="tui-card-content"> <div class="tui-card-content">
<div fxLayout="row" fxLayoutAlign="space-between start"> <div fxLayout="row" fxLayoutAlign="space-between stretch">
<app-donut-chart [elementID]="chartID"></app-donut-chart> <app-donut-chart [elementID]="chartID" fxFlex="30"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="space-evenly end"> <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 *ngFor="let state of states" [state]="state.label" [count]="state.count">
</app-chart-item> </app-chart-item>
</div> </div>