octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2025-01-28 01:18:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add title to donut chart and media queries

Browse Source
This commit is contained in:
Jesse Lucas 2020-03-30 11:54:54 -04:00
parent e5b85ff1a0
commit 933a57af7a
No known key found for this signature in database
GPG Key ID: 9810010C7FDCD3BB
7 changed files with 46 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

1
src/app/charts/device-chart/device-chart.component.ts
View File

@ -14,6 +14,7 @@ export class DeviceChartComponent implements OnInit {
chartID: string = 'devicesChart';
elevation: string = cardElevation;
states: { label: string, count: number, color: string }[] = [];
title: string = "Devices";
constructor(private deviceService: DeviceService) { }

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

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

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

@ -6,9 +6,38 @@
.center {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
font-size:1.8rem;
top: 0; left: 0; bottom: 0; right: 0;
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
}
.count {
font-size: calc(1rem + 0.625vw);
}
.title {
font-size: calc(0.5rem + 0.625vw);
display:none;
}
@media (max-width: 640px) {
}
@media (min-width: 640px) and (max-width: 1000px) {
.title {
display:none;
font-size: calc(0.35rem + 0.625vw);
}
.count {
font-size: calc(1.35rem + 0.625vw);
}
}
@media (min-width:1000px) {
.title {
display: inline;
}
}

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

@ -9,6 +9,7 @@ import { tooltip } from '../tooltip'
})
export class DonutChartComponent {
@Input() elementID: string;
@Input() title: number;
count: number;
private canvas: any;

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

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

1
src/app/charts/folder-chart/folder-chart.component.ts
View File

@ -14,6 +14,7 @@ export class FolderChartComponent implements OnInit {
chartID: string = 'foldersChart';
states: { label: string, count: number, color: string }[] = [];
elevation: string = cardElevation;
title: string = "Folders";
constructor(private folderService: FolderService) { }