alexandr/myoffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add project files.

Browse Source
This commit is contained in:
alexandr
2023-04-29 09:17:17 +03:00
commit 62178f1f32
493 changed files with 45863 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
MyOffice.SPA/src/app/dashboard/dashboard1/dashboard1.component.ts
+409
View File
@@ -0,0 +1,409 @@
import { Component, OnInit } from '@angular/core';
import {
ApexAxisChartSeries,
ApexChart,
ApexXAxis,
ApexDataLabels,
ApexTooltip,
ApexYAxis,
ApexPlotOptions,
ApexStroke,
ApexLegend,
ApexFill,
ApexMarkers,
ApexGrid,
ApexTitleSubtitle,
ApexResponsive,
} from 'ng-apexcharts';
export type ChartOptions = {
series: ApexAxisChartSeries;
chart: ApexChart;
xaxis: ApexXAxis;
yaxis: ApexYAxis;
stroke: ApexStroke;
tooltip: ApexTooltip;
dataLabels: ApexDataLabels;
legend: ApexLegend;
responsive: ApexResponsive[];
plotOptions: ApexPlotOptions;
fill: ApexFill;
colors: string[];
labels: string[];
markers: ApexMarkers;
grid: ApexGrid;
title: ApexTitleSubtitle;
};
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-dashboard1',
templateUrl: './dashboard1.component.html',
styleUrls: ['./dashboard1.component.scss'],
})
export class Dashboard1Component implements OnInit {
areaChartOptions!: Partial<ChartOptions>;
barChartOptions!: Partial<ChartOptions>;
earningOptions!: Partial<ChartOptions>;
performanceRateChartOptions!: Partial<ChartOptions>;
constructor() {
//constructor
}
ngOnInit() {
this.chart1();
this.chart3();
this.chart2();
this.chart4();
}
private chart1() {
this.areaChartOptions = {
series: [
{
name: 'New Clients',
data: [31, 40, 28, 51, 42, 85, 77],
},
{
name: 'Old Clients',
data: [11, 32, 45, 32, 34, 52, 41],
},
],
chart: {
height: 350,
type: 'area',
toolbar: {
show: false,
},
foreColor: '#9aa0ac',
},
colors: ['#4FC3F7', '#7460EE'],
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
},
grid: {
show: true,
borderColor: '#9aa0ac',
strokeDashArray: 1,
},
xaxis: {
type: 'datetime',
categories: [
'2018-09-19',
'2018-09-20',
'2018-09-21',
'2018-09-22',
'2018-09-23',
'2018-09-24',
'2018-09-25',
],
},
legend: {
show: true,
position: 'top',
horizontalAlign: 'center',
offsetX: 0,
offsetY: 0,
},
tooltip: {
theme: 'dark',
marker: {
show: true,
},
x: {
show: true,
},
},
};
}
private chart2() {
this.barChartOptions = {
series: [
{
name: 'New Errors',
data: [44, 55, 41, 67, 22, 43],
},
{
name: 'Bugs',
data: [13, 23, 20, 8, 13, 27],
},
{
name: 'Development',
data: [11, 17, 15, 15, 21, 14],
},
{
name: 'Payment',
data: [21, 7, 25, 13, 22, 8],
},
],
chart: {
type: 'bar',
height: 350,
foreColor: '#9aa0ac',
stacked: true,
toolbar: {
show: false,
},
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0,
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
columnWidth: '30%',
},
},
dataLabels: {
enabled: false,
},
xaxis: {
type: 'category',
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
},
legend: {
show: false,
},
grid: {
show: true,
borderColor: '#9aa0ac',
strokeDashArray: 1,
},
fill: {
opacity: 0.8,
colors: ['#E82742', '#2F3149', '#929DB0', '#CED6D3'],
},
tooltip: {
theme: 'dark',
marker: {
show: true,
},
x: {
show: true,
},
},
};
}
private chart3() {
this.earningOptions = {
series: [
{
name: '2019',
data: [15, 48, 36, 20, 40, 60, 35, 20, 16, 31, 22, 11],
},
{
name: '2018',
data: [8, 22, 60, 35, 17, 24, 48, 37, 56, 22, 32, 38],
},
],
chart: {
height: 240,
type: 'line',
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 3,
curve: 'smooth',
dashArray: [0, 8],
},
colors: ['#8793ea', '#4caf50'],
fill: {
opacity: [1, 0.5],
},
markers: {
size: 0,
hover: {
sizeOffset: 6,
},
},
xaxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
labels: {
style: {
colors: '#8e8da4',
},
},
},
yaxis: {
labels: {
style: {
colors: '#8e8da4',
},
},
},
grid: {
show: true,
borderColor: '#9aa0ac',
strokeDashArray: 1,
},
tooltip: {
theme: 'dark',
},
};
}
private chart4() {
this.performanceRateChartOptions = {
series: [
{
name: 'Bill Amount',
data: [113, 120, 130, 120, 125, 119, 126],
},
],
chart: {
height: 380,
type: 'line',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2,
},
foreColor: '#9aa0ac',
toolbar: {
show: false,
},
},
colors: ['#6777EF'],
dataLabels: {
enabled: true,
},
stroke: {
curve: 'smooth',
},
markers: {
size: 1,
},
xaxis: {
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
title: {
text: 'Weekday',
},
},
yaxis: {
title: {
text: 'Bill Amount($)',
},
},
grid: {
show: true,
borderColor: '#9aa0ac',
strokeDashArray: 1,
},
tooltip: {
theme: 'dark',
marker: {
show: true,
},
x: {
show: true,
},
},
};
}
// TODO start
tasks = [
{
id: '1',
title: 'Submit Science Homework',
done: true,
priority: 'High',
},
{
id: '2',
title: 'Request for festivle holiday',
done: false,
priority: 'High',
},
{
id: '3',
title: 'Order new java book',
done: false,
priority: 'Low',
},
{
id: '4',
title: 'Remind for lunch in hotel',
done: true,
priority: 'Normal',
},
{
id: '5',
title: 'Pay Hostel Fees',
done: false,
priority: 'High',
},
{
id: '6',
title: 'Attend Seminar On Sunday',
done: false,
priority: 'Normal',
},
{
id: '7',
title: 'Renew bus pass',
done: true,
priority: 'High',
},
{
id: '8',
title: 'Issue book in library',
done: false,
priority: 'High',
},
{
id: '9',
title: 'Project report submit',
done: false,
priority: 'Low',
},
];
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.tasks, event.previousIndex, event.currentIndex);
}
toggle(task: { done: boolean }) {
task.done = !task.done;
}
// TODO end
}