syncfusion
/
ej2-showcase-angular-healthtracker
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge pull request #3 from manikandan-mariappan/master 

feature(EJ2-67745): Upgraded packages and integrated Syncfusion components
This commit is contained in:
Sivakumar 2023-01-20 18:04:03 +05:30 коммит произвёл GitHub
Родитель 5e3f5d827a f6450f4e42
Коммит 41df43dd69
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
7 изменённых файлов: 902 добавлений и 1276 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

54
package.json
Просмотреть файл

@ -14,14 +14,14 @@
},
"private": true,
"dependencies": {
"@angular/animations": "~11.0.4",
"@angular/common": "~11.0.4",
"@angular/compiler": "~11.0.4",
"@angular/core": "~11.0.4",
"@angular/forms": "~11.0.4",
"@angular/platform-browser": "~11.0.4",
"@angular/platform-browser-dynamic": "~11.0.4",
"@angular/router": "~11.0.4",
"@angular/animations": "~15.0.4",
"@angular/common": "~15.0.4",
"@angular/compiler": "~15.0.4",
"@angular/core": "~15.0.4",
"@angular/forms": "~15.0.4",
"@angular/platform-browser": "~15.0.4",
"@angular/platform-browser-dynamic": "~15.0.4",
"@angular/router": "~15.0.4",
"@syncfusion/ej2-angular-base": "*",
"@syncfusion/ej2-angular-grids": "*",
"@syncfusion/ej2-angular-popups": "*",
@ -31,28 +31,30 @@
"@syncfusion/ej2-angular-calendars": "*",
"@syncfusion/ej2-angular-dropdowns": "*",
"@syncfusion/ej2-angular-navigations": "*",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
"@syncfusion/ej2-angular-layouts": "*",
"@syncfusion/ej2-angular-notifications": "*",
"rxjs": "~7.8.0",
"tslib": "^2.4.1",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1100.4",
"@angular/cli": "~11.0.4",
"@angular/compiler-cli": "~11.0.4",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"@angular-devkit/build-angular": "~15.0.4",
"@angular/cli": "^15.0.4",
"@angular/compiler-cli": "~15.0.4",
"@types/jasmine": "~4.3.1",
"@types/node": "^18.11.18",
"codelyzer": "^6.0.2",
"jasmine-core": "~4.5.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"ts-node": "~10.9.1",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
"typescript": "^4.8.2"
},
"keywords": [
"ej2",

6
src/app/app.module.ts
Просмотреть файл

@ -7,6 +7,8 @@ import { NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs';
import { CheckBoxAllModule, RadioButtonAllModule } from '@syncfusion/ej2-angular-buttons';
import { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts';
import { MultiSelectAllModule, DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppBarModule } from '@syncfusion/ej2-angular-navigations';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';
import { DialogAllModule } from '@syncfusion/ej2-angular-popups';
import { DateRangePickerModule, DateRangePickerAllModule, DatePickerAllModule, TimePickerAllModule } from '@syncfusion/ej2-angular-calendars';
import { AppRoutingModule } from './app-routing.module';
@ -33,7 +35,9 @@ import { DashBoardService } from './dashboard/dashboard.service';
DropDownListAllModule,
NumericTextBoxAllModule,
DateRangePickerAllModule,
AccumulationChartAllModule
AccumulationChartAllModule,
AppBarModule,
SkeletonModule,
],
declarations: [
AppComponent,

169
src/app/dashboard/dashboard.component.html
Просмотреть файл

@ -1,102 +1,114 @@
<div id="container" style=" background: #FAFAFA;">
<div class="row" id="overall-title" style="cursor: default">
<p class="page-title">Health <b>Stat</b></p>
<img src="./assets/images/icons/Healthstat.png" style="padding-left: 1.5%; margin-top: 10px; float:left;">
<img src="./assets/images/icons/Profile_.png" style="padding-right: 1.5%; margin-top: 10px; float:right">
<p id="sub-title" style=" float: right">Hi, John Smith</p>
</div>
<ejs-appbar cssClass="custom-appbar">
<div>
<span class="e-avatar custom-avatar e-avatar-circle"><img src="./assets/images/icons/Healthstat.png"></span>
<p class="appbar-title"> Health <b>Stat</b> </p>
<div class="e-appbar-spacer"></div>
<p class="appbar-subtitle"> Hi, John Smith </p>
<span class="e-avatar custom-avatar e-avatar-circle"><img src="./assets/images/icons/Profile_.png"></span>
</div>
</ejs-appbar>
<div id="card-row">
<div class="row">
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 calories-valueactive" id="calories-column"
style="padding-right: 0px; padding-left: 20px">
<div class="card" id="calories" (click)="onCalClick($event)" style="max-width: 445px; background-image: linear-gradient(45deg, #F23B3B 0%, #EF9027 100%)">
<div class="card-body expense-card" id="calories-bg" style=" background-image: linear-gradient(45deg, #F23B3B 0%, #EF9027 100%); border-radius: 4px">
<div class="card-block" id="caloriescard" style="box-shadow: 0 3px 6px 2px rgba(178,30,195,0.30);">
<div class="media">
<div class="media-body text-xs-left float-right" id="calories-value" style="max-width: 445px; background-image: linear-gradient(45deg, #F23B3B 0%, #EF9027 100%); border-radius: 4px">
<h3 class="card-value" id="calories-text" style="color: #FFFFFF">13,100</h3>
<div id="foodimg"><span class="card-text" id="calories-subtitle" style="color: #FFFFFF">Calories
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 calories-valueactive card-container" id="calories-column">
<ejs-skeleton *ngIf="showCalorieSkeleton; else showCalorieCard" cssClass="card-skeleton" width="100%" height="100px" shimmerEffect="Wave"></ejs-skeleton>
<ng-template #showCalorieCard>
<div class="e-card selected" id="calories" (click)="onCalClick($event)" style="max-width: 445px; ">
<div id="calories-bg" >
<div class="card-block" id="caloriescard">
<div class="media-body" id="calories-value" style="max-width: 445px;">
<h3 class="card-value" id="calories-text"> {{calorieEaten}} </h3>
<div id="foodimg"><span class="card-text" id="calories-subtitle">Calories
Eaten</span><span id="food-img" class="icon-Food" style="font-size: 65px; margin-right: 3%; margin-bottom: 2% "></span>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 steps-value" id="step-column" style="padding-right: 0px; padding-left: 20px;">
<div class="card" id="step" (click)="onStepClick($event)" style="max-width: 445px; ">
<div class="card-body income-card" id="step-bg">
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 steps-value card-container" id="step-column">
<ejs-skeleton *ngIf="showStepSkeleton; else showStepCard" cssClass="card-skeleton" width="100%" height="100px" shimmerEffect="Wave"></ejs-skeleton>
<ng-template #showStepCard>
<div class="e-card" id="step" (click)="onStepClick($event)" style="max-width: 445px; ">
<div id="step-bg">
<div class="card-block" id="stepcard">
<div class="media">
<div class="media-body text-xs-left float-right" id="steps-value" style="max-width: 445px; background-image: null; border-radius: 4px">
<h3 class="card-value" id="steps-text">52,100</h3>
<div class="media-body" id="steps-value" style="max-width: 445px; background-image: null; border-radius: 4px">
<h3 class="card-value" id="steps-text">{{stepsTaken}}</h3>
<div id="stepimg"><span class="card-text" id="steps-subtitle">Steps
Taken</span>
<span id="steps-img" class="icon-Steps" style="font-size: 65px; margin-right: 3%; margin-bottom: 2%"></span></div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 water-value" id="water-column" style="padding-right: 0px; padding-left: 20px">
<div class="card" id="water" (click)="onWaterClick($event)" style="max-width: 445px;">
<div class="card-body balance" id="water-bg">
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 water-value card-container" id="water-column">
<ejs-skeleton *ngIf="showWaterSkeleton; else showWaterCard" cssClass="card-skeleton" width="100%" height="100px" shimmerEffect="Wave"></ejs-skeleton>
<ng-template #showWaterCard>
<div class="e-card" id="water" (click)="onWaterClick($event)" style="max-width: 445px;">
<div id="water-bg">
<div class="card-block" id="watercard" style="max-width: 445px;">
<div class="media">
<div class="media-body text-xs-left float-right" id="water-value" style="max-width: 445px; background-image: null; border-radius: 4px">
<h3 class="card-value" id="water-text">38.7 ltr</h3>
<div class="media-body" id="water-value" style="max-width: 445px; background-image: null; border-radius: 4px">
<h3 class="card-value" id="water-text">{{waterConsumed}}</h3>
<div id="waterimg"><span class="card-text" id="water-subtitle">Water Consumed</span>
<span id="water-img" class="icon-Water" style="font-size: 65px; margin-right: 3%; margin-bottom: 2%"></span></div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 sleep-value" id="sleep-column" style="padding-right: 0px; padding-left: 20px">
<div class="card" id="sleep" (click)="onSleepClick($event)" style="max-width: 445px;">
<div class="card-body transaction" id="sleep-bg">
<div class="col-xs-6 col-xl-3 col-lg-3 col-md-3 col-sm-6 sleep-value card-container" id="sleep-column">
<ejs-skeleton *ngIf="showSleepSkeleton; else showSleepCard" cssClass="card-skeleton" width="100%" height="100px" shimmerEffect="Wave"></ejs-skeleton>
<ng-template #showSleepCard>
<div class="e-card" id="sleep" (click)="onSleepClick($event)" style="max-width: 445px;">
<div id="sleep-bg">
<div class="card-block" id="sleepcard" style="max-width: 445px;" >
<div class="media">
<div class="media-body text-xs-left float-right" id="sleep-value" style="max-width: 445px; background-image: null; border-radius: 4px">
<h3 class="card-value" id="sleep-text" style="font-family: 'Roboto'; font-weight:400; color: #727272;">50
hr</h3>
<div class="media-body" id="sleep-value" style="max-width: 445px; background-image: null; border-radius: 4px">
<h3 class="card-value" id="sleep-text" style="font-family: 'Roboto'; font-weight:400; color: #727272;">{{sleepDuration}}
</h3>
<div id="sleepimg"><span class="card-text" id="sleep-subtitle">Sleep Duration</span>
<span id="sleep-img" class="icon-Sleep" style="font-size: 65px; margin-right: 4%; margin-bottom: 2%"></span></div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</div>
</div>
<div class="row" id="chart" style="background:transparent; padding-right: 0px">
<div class="line-chart-area">
<div class="col-sm-12 col-md-8" style="height: 530px; background:transparent">
<div style="padding-top: 20px; margin-bottom: 10px;">
<p id="title" style="color: #535353; cursor: default; ">Calories Consumed <span id="caloriestitle-annotation1">Daily
Average</span><span id="caloriestitle-annotation2">Today</span>
<div class="col-sm-12 col-md-8 chart-container">
<ejs-skeleton *ngIf="showLineChartSkeleton; else showLineChart" cssClass="line-chart-skeleton" width="100%" height="100%" shimmerEffect="Wave"></ejs-skeleton>
<ng-template #showLineChart [ngSwitch]="lineType">
<div class="chart-header">
<div id="chart-header-title"><p id="chart-title">Calories Consumed</p></div>
<div class="chart-header-values">
<div id="total-value" style="margin: 0px 10px;">
<span id="title-annotation"> Total </span>
<span id="value-annotation" style="color: #780508;"> 1437 Kcal </span>
</div>
<div id="average-value" style="margin: 0px 10px;">
<span id="title-annotation"> Daily Average </span>
<span id="value-annotation" style="color: #DB4247;"> 902 Kcal </span>
</div>
</div>
<div>
<p id="subtitle" style="cursor: default;"><span id="caloriessubtitle-annotation1">902 kcal</span><span
id="caloriessubtitle-annotation2">1437 kcal</span></p>
</div>
<div class="chart-padding" id="line">
<div id="line" style='display:block'>
<ejs-chart #lineChart id='balance' class='line-chart' style="width: 92%; height:400px; background: transparent; max-width: 1083px;" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [chartArea]='chartArea' [tooltip]='tooltip'
(chartMouseClick)='mouseclick($event)' (pointMove)='pointMove($event)' (loaded)='loaded($event)' [background]='background'>
</div>
<div id="line" *ngSwitchCase="'line'">
<ejs-chart #lineChart id='balance' class='line-chart' style="width: 100%; height:400px; background: transparent;" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [chartArea]='chartArea' [tooltip]='tooltip'
(chartMouseClick)='mouseclick($event)' (pointMove)='pointMove($event)' (loaded)='CalorieLoaded($event)' [background]='background'>
<e-series-collection>
<e-series type='Line' fill='#F38D36' xName='x' yName='y' width=2 [dataSource]='caloriesdata' [marker]='marker' [border]='cborder'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</div>
<div id="spline" style='display:none'>
<ejs-chart #splineChart id='spline-balance' class='line-chart' style=" width: 92%; height:400px; background: transparent; max-width: 1083px;" [primaryXAxis]='splinePrimaryXAxis' [primaryYAxis]='splinePrimaryYAxis' [chartArea]='chartArea' [tooltip]='splineTooltip'
(pointClick)='splinemouseclick($event)' (pointMove)='splinepointMove($event)' (loaded)='loaded($event)' [background]='background'>
<div id="spline" *ngSwitchCase="'spline'">
<ejs-chart #splineChart id='spline-balance' class='line-chart' style=" width: 100%; height:400px; background: transparent;" [primaryXAxis]='splinePrimaryXAxis' [primaryYAxis]='splinePrimaryYAxis' [chartArea]='chartArea' [tooltip]='splineTooltip'
(pointClick)='splinemouseclick($event)' (pointMove)='splinepointMove($event)' (loaded)='WaterLoaded($event)' [background]='background'>
<e-annotations>
<e-annotation content='<div id="waterachieved"><span id="achieved-img" class="icon-achieved" style="font-size: 30px; color: #3B61E9"></span></div>'
coordinateUnits='Point' verticalAlignment='Top' x='Thursday' y=7.5>
@ -107,9 +119,9 @@
</e-series-collection>
</ejs-chart>
</div>
<div id="column" style='display:none'>
<ejs-chart #columnChart id='column-balance' class='line-chart' style="width: 92%; height:400px; background: transparent; max-width: 1083px;" [primaryXAxis]='columnPrimaryXAxis' [primaryYAxis]='columnPrimaryYAxis' [chartArea]='chartArea' [tooltip]='columnTooltip'
(loaded)='loaded($event)' (chartMouseClick)='columnmouseclick($event)' [background]='background'>
<div id="column" *ngSwitchCase="'column'">
<ejs-chart #columnChart id='column-balance' class='line-chart' style="width: 100%; height:400px; background: transparent;" [primaryXAxis]='columnPrimaryXAxis' [primaryYAxis]='columnPrimaryYAxis' [chartArea]='chartArea' [tooltip]='columnTooltip'
(loaded)='StepLoaded($event)' (chartMouseClick)='columnmouseclick($event)' [background]='background'>
<e-annotations>
<e-annotation content='<div id="thumbs_up"><img src="./assets/images/icons/Shape.png" style="width: 30px; height: 30px"></div>'
x='Tuesday' y=9200 coordinateUnits='Point' verticalAlignment='Top'>
@ -120,24 +132,26 @@
</e-series-collection>
</ejs-chart>
</div>
<div id="bubble" style='display:none'>
<ejs-chart #bubbleChart id='bubble-balance' class='line-chart' style="width: 92%; height:400px; background: transparent; max-width: 1083px;" [primaryXAxis]='bubblePrimaryXAxis' [primaryYAxis]='bubblePrimaryYAxis' [chartArea]='chartArea' [tooltip]='bubbleTooltip'
(chartMouseClick)='bubblemouseclick($event)' (pointMove)='bubblepointMove($event)' (loaded)='loaded($event)' [background]='background'>
<div id="bubble" *ngSwitchCase="'bubble'">
<ejs-chart #bubbleChart id='bubble-balance' class='line-chart' style="width: 100%; height:400px; background: transparent;" [primaryXAxis]='bubblePrimaryXAxis' [primaryYAxis]='bubblePrimaryYAxis' [chartArea]='chartArea' [tooltip]='bubbleTooltip'
(chartMouseClick)='bubblemouseclick($event)' (pointMove)='bubblepointMove($event)' (loaded)='SleepLoaded($event)' [background]='background'>
<e-series-collection>
<e-series type='Bubble' fill='#4526A6' xName='x' yName='y' width=2 [dataSource]='bubbledata' [marker]='bubblemarker' [border]='bborder' size='size' > </e-series>
</e-series-collection>
</ejs-chart>
</div>
</ng-template>
</div>
</div>
<div class="row">
<div class="column-chart-area">
<div class="col-sm-12 col-md-4" id="pie-chart" style=" padding: 0px; height: 525px; ">
<div class="chart-padding" id="pie">
<div id="donut" style="display: block; height: 530px;">
<ejs-skeleton *ngIf="showPieChartSkeleton; else showPieChart" cssClass="pie-chart-skeleton" width="100%" height="100%" shimmerEffect="Wave"></ejs-skeleton>
<ng-template #showPieChart [ngSwitch]="pieType">
<div id="donut" style="height: 530px;" *ngSwitchCase="'donut'">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" id="pie" style=" padding: 0px;">
<div id="pie-title" style=" padding-top: 20px; margin-bottom: 6px; cursor: default; margin-left: 20px; font-family: Roboto; font-weight: 500; font-size: 20px; text-align: left; color: #1A1A1A">Sunday
Activity</div>
<div id="pie-title" style=" padding-top: 20px; margin-bottom: 6px; cursor: default; margin-left: 20px; font-family: Roboto; font-weight: 500; font-size: 20px; text-align: left; color: #1A1A1A">Macro
Nutrients</div>
<div class="column-chart" >
<ejs-accumulationchart id="account-balance" #pie style='height: 268px; margin-bottom: 0px' [legendSettings]="legendSettings" [enableAnimation]= 'enableAnimation' [background]='background'>
<e-accumulation-annotations>
@ -196,33 +210,33 @@
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="caloriesicon-column">
<div class="row" style="margin-top:40px; height: 93px; width: 100% ">
<div class="col-sm-12 Break-icon" id="Break-icon" style="border-radius: 4px; padding-top:10px; padding-right:0px; padding-left: 0px; height: 93px; text-align: center; background-image: linear-gradient(45deg, #F23B3B 0%, #EF9027 100%) ">
<div class="col-sm-12 Break-icon" id="Break-icon" (click)="onBreakClick($event)" style="border-radius: 4px; padding-top:10px; padding-right:0px; padding-left: 0px; height: 93px; text-align: center; background-image: linear-gradient(45deg, #F23B3B 0%, #EF9027 100%) ">
<span id="Breakfast" class="icon-Breakfast breakimgactive" style="font-size: 48px;"></span>
<div class="breaktextactive" id="Break-text" align="center" style="color: #FFFFFF; text-align: center">Breakfast</div>
</div>
</div>
<div class="row" style="margin-top:30px; height: 93px; width: 100% ">
<div class="col-sm-12 Lunch-icon" id="Lunch-icon" style="border-radius: 4px; padding-top:10px; text-align: center; padding-right:0px; padding-left: 0px; height: 93px;">
<div class="col-sm-12 Lunch-icon" id="Lunch-icon" (click)="onLunchClick($event)" style="border-radius: 4px; padding-top:10px; text-align: center; padding-right:0px; padding-left: 0px; height: 93px;">
<span id="Lunch" class="icon-Lunch lunchimg" style="font-size: 48px;"></span>
<div class="lunchtext" id="Lunch-text" align="center">Lunch</div>
</div>
</div>
<div class="row" style="margin-top:30px; height: 93px; width: 100% ">
<div class="col-sm-12 Dinner-icon" id="Dinner-icon" style="border-radius: 4px; padding-top:10px; text-align: center; padding-right:0px; padding-left: 0px; height: 93px; ">
<div class="col-sm-12 Dinner-icon" id="Dinner-icon" (click)="onDinnerClick($event)" style="border-radius: 4px; padding-top:10px; text-align: center; padding-right:0px; padding-left: 0px; height: 93px; ">
<span id="Dinner" class="icon-Dinner dinnerimg" style="font-size: 48px;"></span>
<div class="dinnertext" id="Dinner-text" align="center">Dinner</div>
</div>
</div>
<div class="row" style="margin-top:30px; height: 93px; width: 100% ">
<div class="col-sm-12" id="Snack-icon" style="border-radius: 4px; padding-top:10px; text-align: center; padding-right:0px; padding-left: 0px; height: 93px;">
<div class="col-sm-12" id="Snack-icon" (click)="onSnackClick($event)" style="border-radius: 4px; padding-top:10px; text-align: center; padding-right:0px; padding-left: 0px; height: 93px;">
<span id="Snack" class="icon-Snack snackimg" style="font-size: 48px;"></span>
<div class="snacktext" id="Snack-text" align="center">Snack</div>
</div>
</div>
</div>
</div>
</div>
<div id="multiple-donut" style="display: none; height:330px">
<div id="multiple-donut" style="height:330px" *ngSwitchCase="'multiple-donut'">
<div class="col-sm-12" id="pie" style=" padding:0px ">
<div id="pie-title" style=" padding-top: 20px; cursor: default; margin-bottom: 6px; margin-left: 20px; font-family: Roboto; font-weight:500; font-size: 20px; text-align: left; color: #1A1A1A">Sunday
Activity</div>
@ -275,12 +289,12 @@
</div>
</div>
</div>
<div id="polar" style="display: none">
<div id="polar" *ngSwitchCase="'polar'">
<div id="pie-title" style=" padding-top: 20px; cursor: default; margin-bottom: 6px; margin-left: 20px; font-family: Roboto; font-weight: 500; font-size: 20px; text-align: left; color: #1A1A1A">Sunday
Activity</div>
<div class="column-chart" id="water-polar" style="height:320px">
<ejs-chart #polarChart style="height:320px" [background]='background' [primaryXAxis]='polarPrimaryXAxis' [primaryYAxis]='polarPrimaryYAxis' [tooltip]='polarTooltip'
(pointClick)='polarmouseclick($event)' (pointMove)='polarpointMove($event)' (loaded)= 'polarloaded($event)' [selectedDataIndexes]= 'selectedDataIndexes' [background]='background' selectionMode='Point' [enableAnimation]='polarEnableAnimation' >
(pointClick)='polarmouseclick($event)' (pointMove)='polarpointMove($event)' [selectedDataIndexes]= 'selectedDataIndexes' [background]='background' selectionMode='Point' [enableAnimation]='polarEnableAnimation' >
<e-series-collection>
<e-series type='Polar' drawType='Column' fill='url(#gradient-polarchart)' xName='x' yName='y' width=2 [dataSource]='polarchartdata' [marker]='polarmarker' [border]='wborder' [animation]='animation'> </e-series>
</e-series-collection>
@ -289,29 +303,29 @@
<div align="Center" style="font-family: Roboto; font-weight: 500; font-size: 16px; color: #1A1A1A; letter-spacing: 0; margin-bottom: 10px; cursor: default"><b>Add
water Intake value</b></div>
<div class="row" style="height: 80px">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 water50ml-column" id="water50ml-column"
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 water50ml-column" id="water50ml-column" (click)="on50mlClick($event)"
style="background: #FFFFFF; height: 80px; margin-left:15px; margin-right: 1.7%; border: 1px solid rgba(69,69,69,0.40); border-radius: 4px; text-align:center; color: #5B5B5B">
<span id="iconml-img" class="icon-ml" style="font-size: 35px;"></span>
<div class="imgtext1" id="imgtext1">50 ml</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 water100ml-column" id="water100ml-column"
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 water100ml-column" id="water100ml-column" (click)="on100mlClick($event)"
style="background: #FFFFFF; height: 80px; margin-right: 1.7%; border: 1px solid rgba(69,69,69,0.40); border-radius: 4px; text-align:center; color: #5B5B5B">
<span id="iconml1-img" class="icon-ml1" style="font-size: 35px;"></span>
<div class="imgtext2" id="imgtext2">100 ml</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 water200ml-column" id="water200ml-column"
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 water200ml-column" id="water200ml-column" (click)="on200mlClick($event)"
style="background: #FFFFFF; height: 80px; margin-right: 1.7%; border: 1px solid rgba(69,69,69,0.40); border-radius: 4px; text-align:center; color: #5B5B5B">
<span id="iconml2-img" class="icon-ml2" style="font-size: 35px;"></span>
<div class="imgtext3" id="imgtext3">200 ml</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 water300ml-column" id="water300ml-column"
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 water300ml-column" id="water300ml-column" (click)="on300mlClick($event)"
style="background: #FFFFFF; height: 80px; border: 1px solid rgba(69,69,69,0.40); border-radius: 4px; text-align:center; color: #5B5B5B">
<span id="iconml3-img" class="icon-ml3" style="font-size: 35px;"></span>
<div class="imgtext4" id="imgtext4">300 ml</div>
</div>
</div>
</div>
<div id="semi-pie" style="display: none">
<div id="semi-pie" *ngSwitchCase="'semi-pie'">
<div class="col-sm-12" id="pie" style=" padding:0px ">
<div id="pie-title" style=" padding-top: 20px; cursor: default; margin-bottom: 6px; margin-left: 20px; font-family: Roboto; font-weight: 500; font-size: 20px; text-align: left; color: #1A1A1A">Sleep
Quality</div>
@ -358,6 +372,7 @@
</div>
</div>
</div>
</ng-template>
</div>
</div>
</div>

1201
src/app/dashboard/dashboard.component.ts
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

2
src/app/menu/menu.component.html
Просмотреть файл

@ -1,4 +1,4 @@
<div class="content container-fluid rightpane">
<div class="content rightpane">
<div class="content-wrapper">
<router-outlet></router-outlet>
</div>

741
src/assets/index.css
Просмотреть файл

@ -54,7 +54,7 @@
}
#foodimg .icon-Food {
float: right;
color: #FFFFFF
color: #999393
}
#stepimg .icon-Steps {
@ -100,16 +100,127 @@
letter-spacing: -0.08px;
text-align: center;
}
#overall-title {
background: #FFFFFF;
box-shadow: 0 2px 7px 0 rgba(0,0,0,0.16);
height: 60px;
margin-bottom: 20px
}
#container {
padding-bottom: 20px;
background: #FAFAFA !important;
background: #FAFAFA;
box-shadow: 0 2px 7px 0 rgb(0 0 0 / 16%);
margin: 5px 5px 0px 5px;
}
.e-appbar.custom-appbar{
height: auto;
width: 100%;
margin-bottom: 20px;
font-family: 'Roboto';
}
.e-avatar.custom-avatar{
background-color: transparent;
font-size: 14px;
margin: 0px 13px;
}
.e-appbar.custom-appbar p {
margin: 0;
letter-spacing: 0;
}
.e-appbar.custom-appbar .appbar-title{
font-weight: 300;
font-size: 18px;
color: #1A1A1A;
}
.e-appbar.custom-appbar .appbar-subtitle{
display: block;
font-weight: 500;
font-size: 15px;
color: #535353;
}
.card-block {
cursor:pointer;
box-shadow: 0 1px 4px 1px rgba(0,0,0,0.10);
border-radius: 4px;
}
#calories-column.card-container,
#step-column.card-container,
#water-column.card-container,
#sleep-column.card-container {
padding: 0px 0px 20px 20px;
}
.e-card.selected .card-text,
.e-card.selected .card-value,
.e-card.selected #food-img,
.e-card.selected #steps-img,
.e-card.selected #water-img,
.e-card.selected #sleep-img{
color: #FFFFFF !important;
}
.e-card.selected#calories,
.e-card.selected #calories-bg,
.e-card.selected #calories-value{
background-image: linear-gradient(45deg, #F23B3B 0%, #EF9027 100%);
border-radius: 4px;
}
.e-card.selected#step,
.e-card.selected #step-bg,
.e-card.selected #steps-value{
background-image: linear-gradient(45deg, #04AB11 0%, #7DD61D 100%);
border-radius: 4px;
}
.e-card.selected#water,
.e-card.selected #water-bg,
.e-card.selected #water-value{
background-image: linear-gradient(44deg, #2140DC 0%, #00BFD5 100%);
border-radius: 4px;
}
.e-card.selected#sleep,
.e-card.selected #sleep-bg,
.e-card.selected #sleep-value{
background-image: linear-gradient(-135deg, #2925A6 0%, #B250D1 100%) ;
border-radius: 4px;
}
.e-card.selected #caloriescard {
box-shadow: 0 3px 6px 2px rgba(178,30,195,0.30);
}
.e-card.selected #stepcard {
box-shadow: 0 3px 6px 3px rgba(66,254,19,0.20);
}
.e-card.selected #watercard {
box-shadow: 0 3px 6px 3px rgba(49,131,185,0.25);
}
.e-card.selected #sleepcard {
box-shadow: 0 3px 6px 3px rgba(71,63,204,0.20);
}
.chart-container {
height: 530px;
background-color: transparent;
padding-left: 0px;
}
.chart-header{
display: flex;
flex-direction: row;
justify-content: space-between;
font-family: 'Roboto';
letter-spacing: 0;
}
.chart-header-values{
display: flex;
}
.chart-header-values span {
display: block;
}
.chart-header #title-annotation {
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
}
.chart-header #value-annotation {
font-size: 25px;
font-weight: 700;
}
#chart-title {
font-weight: 500;
font-size: 20px;
color: #535353;
}
/* */
#water-text {
padding-left: 5%;
}
@ -144,195 +255,6 @@
margin-top: 20px;
margin-left: 10px;
}
#title {
font-family: 'Roboto';
font-weight: 500;
font-size: 20px;
color: #535353;
letter-spacing: 0;
display:block;
}
#title span {
display:block;
float:right;
}
#subtitle {
font-family: 'Roboto';
font-weight: 500;
font-size: 20px;
color: #535353;
letter-spacing: 0;
display: block;
}
#subtitle span {
display:block;
float:right;
}
#title-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-left: -1.2%;
margin-right: 9% !important;
}
#sleeptitle-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-left: -1.2%;
margin-right: 11% !important;
}
#caloriestitle-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-right: 11% !important;
}
#steptitle-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-left: -1.2%;
margin-right: 9% !important;
}
#watertitle-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-left: -1.2%;
margin-right: 13% !important;
}
#title-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
}
#watertitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
padding-left: 1.5% !important;
margin-right: 11% !important;
}
#steptitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
padding-left: 1.5% !important;
}
#sleeptitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
padding-left: 1.5% !important;
margin-right: 13% !important;
}
#caloriestitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-right: 15% !important;
}
#subtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
}
#subtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 8% !important;
}
#watersubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
margin-right: 1.7%;
}
#watersubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 7%;
}
#caloriessubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
margin-right: 3%;
}
#caloriessubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 7%
}
#sleepsubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 28px;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
margin-right: 2%
}
#sleepsubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 28px;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 7%;
}
#stepsubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700 !important;
font-size: 28px;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 7%
}
#caloriescontent {
font-family: 'Roboto';
font-weight: 400;
@ -340,33 +262,6 @@
color: #4A4A4A;
letter-spacing: -0.07px;
}
#time {
font-family: 'Roboto';
font-weight: 500;
font-weight: 500;
font-size: 49px;
color: #4A4A4A;
letter-spacing: -0.08px;
text-align: center;
height: 59px
}
#middlecontent {
font-family: 'Roboto';
font-weight: 500;
font-size: 14px;
color: #4A4A4A;
letter-spacing: -0.08px;
text-align: center;
}
#sub-title {
font-family: 'Roboto';
font-weight: 500;
font-size: 14px;
color: #1A1A1A;
letter-spacing: 0;
margin-top: 20px;
padding-right: 0.7%
}
#chart-rightarea {
background: #FFFFFF;
box-shadow: 0 1px 4px 1px rgba(0,0,0,0.10);
@ -377,6 +272,20 @@
#chart-leftarea {
margin-left: 3%;
}
#calories,#step,#water,#sleep {
border-radius: 4px;
cursor: pointer;
overflow: visible !important;
line-height: 1.42857143;
}
#calories.hidden-element-size,
#step.hidden-element-size,
#water.hidden-element-size,
#sleep.hidden-element-size {
display: block;
visibility: hidden;
position: absolute;
}
#steps-text:hover {
font-family: ''Roboto'';
font-weight: 400;
@ -396,16 +305,6 @@
#sleep-bg:hover {
background-image: 'linear-gradient(to right, #FCDE72 , #F26D6D)';
}
.card {
box-shadow: 0 1px 4px 1px rgba(0,0,0,0.10);
border-radius: 4px;
background: #FFFFFF !important;
}
.card-block {
cursor:pointer;
box-shadow: 0 1px 4px 1px rgba(0,0,0,0.10);
border-radius: 4px;
}
#pie-chart {
background: #FFFFFF;
box-shadow: 0 1px 4px 1px rgba(0,0,0,0.10);
@ -633,12 +532,7 @@ letter-spacing: 0;
box-shadow: 0 1px 4px 1px rgba(102,56,185,0.30) !important;
}
#chart {
margin-left: 3% !important;
margin-right: 0.5%;
padding-right: 0.75%;
}
.line-chart-area {
padding-right: 4.9%
margin:0% 3% !important;
}
#water50ml-column {
width: 22%;
@ -771,27 +665,77 @@ text-align: center;
.line-column-chart{
margin-bottom: 1.8rem;
}
.card{
margin-bottom: 20px;
}
@media only screen and (max-width:375px)
{
#Break-text,
#Lunch-text,
#Dinner-text,
#Snack-text {
font-size: 12px;
}
#Breakfast,
#Lunch,
#Snack,
#Dinner{
font-size: 38px;
}
}
@media only screen and (max-width:300px)
{
.column-chart-area{
margin-top: 40px;
}
}
@media (max-width: 768px)
{
.pie-chart,
.column-chart,
.line-chart{
margin-bottom: 16px;
}
.chart-container {
padding: 0px 0px 15px 10px;
}
.column-chart-area
.chart-container {
padding-left: 0;
}
}
@media only screen and (min-width: 213px) and (max-width: 500px) {
/* For portrait layouts only */
.card-value{
font-family: 'Roboto';
font-weight: 400;
font-size: 20px !important;
color: #727272;
margin-bottom: 0vw;
margin-top: 10px;
letter-spacing: 0;
#calories-column.card-container,
#step-column.card-container,
#water-column.card-container,
#sleep-column.card-container {
width: 100%;
padding: 15px;
}
.card-text {
font-family: 'Roboto';
font-weight: 400;
font-size: 15px !important;
letter-spacing: 0;
line-height: 0px !important;
.chart-container {
padding: 15px;
}
#card-row {
margin: 0;
}
.e-appbar.custom-appbar .appbar-title {
font-size: 15px;
}
.e-appbar.custom-appbar .appbar-subtitle {
display: none;
}
.chart-header{
flex-wrap: wrap;
}
#chart-header-title {
margin: auto;
}
.chart-header-values{
width: 100%;
justify-content: space-evenly;
}
#Break-text {
font-family: 'Roboto';
@ -809,186 +753,6 @@ text-align: center;
color: #CB2F1B;
letter-spacing: 0;
}
#title-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
}
#title {
font-family: 'Roboto';
font-weight: 500;
font-size: 17px;
color: #535353;
letter-spacing: 0;
display: block;
}
#subtitle {
font-family: 'Roboto';
font-weight: 500;
font-size: 20px;
color: #535353;
letter-spacing: 0;
display: block;
}
#subtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 20px !important;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 13% !important;
}
#subtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 20px !important;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
}
#steptitle-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-right: 1% !important
}
#stepsubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700 !important;
font-size: 20px !important;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
}
#watertitle-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-right: 0% !important;
}
#watertitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
}
#watersubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 17px;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
margin-right: 1.7% !important;
}
#watersubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 17px;
color: #DB4247;
letter-spacing: 0;
margin-right: 0% !important;
margin-top: -20px;
}
#caloriestitle-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-right: 0% !important;
}
#caloriestitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-right: 13%
}
#caloriessubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 15px !important;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
margin-right: 3%;
}
#caloriessubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 15px !important;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 4%;
}
#sleeptitle-annotation1 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
}
#sleeptitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
}
#sleepsubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 17px !important;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
margin-right: 2%
}
#sleepsubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 17px !important;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 12%
}
#stepsubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700 !important;
font-size: 23px;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
}
#stepsubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700 !important;
font-size: 20px;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
}
#subtitle span {
display: block;
float: right;
margin-top: -20px;
}
#title span {
display: block;
float: right;
}
.stepsimg {
width: 15vw;
}
@ -1009,113 +773,8 @@ text-align: center;
}
}
@media (max-width: 768px)
{
.pie-chart,
.column-chart,
.line-chart{
margin-bottom: 16px;
}
.line-column-chart{
margin-bottom: 1.8rem;
}
}
@media (max-width: 768px) {
.column-chart-area .chart-container {
padding-left: 0;
}
.card {
margin-bottom: 20px;
width: 100%;
}
}
@media only screen and (min-width: 1400px) and (max-width: 3400px) {
#water50ml-column {
margin-left: 20px !important;
}
#watersubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 9%;
}
#watersubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
margin-right: 4%;
}
#caloriessubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 9%;
}
#caloriessubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 26px;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
margin-right: 6%;
}
#sleepsubtitle-annotation1 {
font-family: 'Roboto';
font-weight: 700;
font-size: 28px;
color: #DB4247;
letter-spacing: 0;
margin-top: -20px;
margin-right: 8.5%;
}
#sleepsubtitle-annotation2 {
font-family: 'Roboto';
font-weight: 700;
font-size: 28px;
color: #780508;
letter-spacing: 0;
margin-top: -20px;
margin-right: 4%;
}
#caloriestitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
margin-right: 16% !important;
}
#watertitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
padding-left: 1.5% !important;
margin-right: 11.5%;
}
#sleeptitle-annotation2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 12px;
color: #1A1A1A;
letter-spacing: 0;
padding-left: 1.5% !important;
margin-right: 13% !important;
}
}

5
src/styles.css
Просмотреть файл

@ -1 +1,6 @@
/* You can add global styles to this file, and also import other style files */
@import "/node_modules/@syncfusion/ej2-base/styles/material.css";
@import '/node_modules/@syncfusion/ej2-navigations/styles/appbar/material.css';
@import '/node_modules/@syncfusion/ej2-layouts/styles/avatar/material.css';
@import '/node_modules/@syncfusion/ej2-layouts/styles/card/material.css';
@import '/node_modules/@syncfusion/ej2-notifications/styles/skeleton/material.css';