+
-
-
+
+
-
$203k
-
Net Profit
+
$203k
+
Total Income
-
-
-
-
+
+
-
-
+
+
-
$550K
-
Total Revenue
+
$203k
+
Total Income
@@ -110,36 +66,7 @@
$550K
-
-
-
-
- Total Growth
-
$2,324.00
-
-
-
-
-
-
-
-
+
@@ -162,30 +89,20 @@
$1839.00
-
+
@for (list of ListGroup; track list) {
- -
+
-
{{ list.name }}
- {{ list.profit }}
+ {{ list.profit }}
{{ list.invest
- }}
@@ -195,10 +112,9 @@
-
diff --git a/src/app/demo/default/default.component.scss b/src/app/demo/default/default.component.scss
index e0bf091..7f96b18 100644
--- a/src/app/demo/default/default.component.scss
+++ b/src/app/demo/default/default.component.scss
@@ -1,6 +1,25 @@
.nav-tabs {
border-bottom: none !important;
}
-.avtar:not([class*='bg-']) {
- background: rgba(0, 0, 0, 0.15);
+body.berry-dark .nav-tabs .nav-link,
+body.berry-dark .tab-content {
+ box-shadow: none !important;
+ background: none !important;
+}
+
+.earning-card {
+ .round {
+ &.secondary-round {
+ background: #4527a0;
+ }
+ &.primary-round {
+ background: #1565c0;
+ }
+ }
+}
+
+.total-income-card {
+ .avatar {
+ background: #1565c0;
+ }
}
diff --git a/src/app/demo/default/default.component.ts b/src/app/demo/default/default.component.ts
index dd4b077..e4ff054 100644
--- a/src/app/demo/default/default.component.ts
+++ b/src/app/demo/default/default.component.ts
@@ -1,168 +1,22 @@
// Angular Import
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
// project import
import { SharedModule } from 'src/app/theme/shared/shared.module';
-
-// Bootstrap Import
-import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';
-
-// third party
-import { NgApexchartsModule } from 'ng-apexcharts';
-import ApexCharts from 'apexcharts';
-import {
- ApexAxisChartSeries,
- ApexChart,
- ChartComponent,
- ApexDataLabels,
- ApexPlotOptions,
- ApexResponsive,
- ApexXAxis,
- ApexGrid,
- ApexStroke,
- ApexTooltip
-} from 'ng-apexcharts';
-
-export type ChartOptions = {
- series: ApexAxisChartSeries;
- chart: ApexChart;
- dataLabels: ApexDataLabels;
- plotOptions: ApexPlotOptions;
- responsive: ApexResponsive[];
- xaxis: ApexXAxis;
- colors: string[];
- grid: ApexGrid;
- tooltip: ApexTooltip;
- stroke: ApexStroke;
-};
+import { BarChartComponent } from './bar-chart/bar-chart.component';
+import { BajajChartComponent } from './bajaj-chart/bajaj-chart.component';
+import { ChartDataMonthComponent } from './chart-data-month/chart-data-month.component';
@Component({
selector: 'app-default',
standalone: true,
- imports: [SharedModule, NgApexchartsModule],
+ imports: [CommonModule, SharedModule, BajajChartComponent, BarChartComponent, ChartDataMonthComponent],
templateUrl: './default.component.html',
styleUrls: ['./default.component.scss']
})
-export default class DefaultComponent implements OnInit {
- // private props
- @ViewChild('growthChart') growthChart: ChartComponent;
- chartOptions: Partial
;
- @ViewChild('bajajchart') bajajchart: ChartComponent;
- chartOptions1: Partial;
- monthChart: any;
- yearChart: any;
- colorChart = ['#673ab7'];
-
- // Constructor
- constructor() {
- this.chartOptions = {
- series: [
- {
- name: 'Investment',
- data: [35, 125, 35, 35, 35, 80, 35, 20, 35, 45, 15, 75]
- },
- {
- name: 'Loss',
- data: [35, 15, 15, 35, 65, 40, 80, 25, 15, 85, 25, 75]
- },
- {
- name: 'Profit',
- data: [35, 145, 35, 35, 20, 105, 100, 10, 65, 45, 30, 10]
- },
- {
- name: 'Maintenance',
- data: [0, 0, 75, 0, 0, 115, 0, 0, 0, 0, 150, 0]
- }
- ],
- dataLabels: {
- enabled: false
- },
- chart: {
- type: 'bar',
- height: 480,
- stacked: true,
- toolbar: {
- show: true
- }
- },
- colors: ['#90caf9', '#1e88e5', '#673ab7', '#ede7f6'],
- responsive: [
- {
- breakpoint: 480,
- options: {
- legend: {
- position: 'bottom',
- offsetX: -10,
- offsetY: 0
- }
- }
- }
- ],
- plotOptions: {
- bar: {
- horizontal: false,
- columnWidth: '50%'
- }
- },
- xaxis: {
- type: 'category',
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
- },
- grid: {
- strokeDashArray: 4
- },
- tooltip: {
- theme: 'dark'
- }
- };
- this.chartOptions1 = {
- chart: {
- type: 'area',
- height: 95,
- stacked: true,
- sparkline: {
- enabled: true
- }
- },
- colors: ['#673ab7'],
- stroke: {
- curve: 'smooth',
- width: 1
- },
-
- series: [
- {
- data: [0, 15, 10, 50, 30, 40, 25]
- }
- ]
- };
- }
-
- // Life cycle events
- ngOnInit(): void {
- setTimeout(() => {
- this.monthChart = new ApexCharts(document.querySelector('#tab-chart-1'), this.monthOptions);
- this.monthChart.render();
- }, 500);
- }
-
- // public Method
- onNavChange(changeEvent: NgbNavChangeEvent) {
- if (changeEvent.nextId === 1) {
- setTimeout(() => {
- this.monthChart = new ApexCharts(document.querySelector('#tab-chart-1'), this.monthOptions);
- this.monthChart.render();
- }, 200);
- }
-
- if (changeEvent.nextId === 2) {
- setTimeout(() => {
- this.yearChart = new ApexCharts(document.querySelector('#tab-chart-2'), this.yearOptions);
- this.yearChart.render();
- }, 200);
- }
- }
-
+export class DefaultComponent {
+ // public method
ListGroup = [
{
name: 'Bajaj Finery',
@@ -202,101 +56,26 @@ export default class DefaultComponent implements OnInit {
invest: '$210.00',
bgColor: 'bg-light-success',
icon: 'ti ti-chevron-up',
- color: 'text-success'
+ color: 'text-success',
+ space: 'pb-0'
}
];
- monthOptions = {
- chart: {
- type: 'line',
- height: 90,
- sparkline: {
- enabled: true
- }
- },
- dataLabels: {
- enabled: false
- },
- colors: ['#FFF'],
- stroke: {
- curve: 'smooth',
- width: 3
- },
- series: [
- {
- name: 'series1',
- data: [45, 66, 41, 89, 25, 44, 9, 54]
- }
- ],
- yaxis: {
- min: 5,
- max: 95
- },
- tooltip: {
- theme: 'dark',
- fixed: {
- enabled: false
- },
- x: {
- show: false
- },
- y: {
- title: {
- formatter: function (seriesName) {
- return 'Total Earning';
- }
- }
- },
- marker: {
- show: false
- }
- }
- };
-
- yearOptions = {
- chart: {
- type: 'line',
- height: 90,
- sparkline: {
- enabled: true
- }
- },
- dataLabels: {
- enabled: false
- },
- colors: ['#FFF'],
- stroke: {
- curve: 'smooth',
- width: 3
- },
- series: [
- {
- name: 'series1',
- data: [35, 44, 9, 54, 45, 66, 41, 69]
- }
- ],
- yaxis: {
- min: 5,
- max: 95
+ profileCard = [
+ {
+ style: 'bg-primary-dark text-white',
+ background: 'bg-primary',
+ value: '$203k',
+ text: 'Net Profit',
+ color: 'text-white',
+ value_color: 'text-white'
},
- tooltip: {
- theme: 'dark',
- fixed: {
- enabled: false
- },
- x: {
- show: false
- },
- y: {
- title: {
- formatter: function (seriesName) {
- return 'Total Earning';
- }
- }
- },
- marker: {
- show: false
- }
+ {
+ background: 'bg-warning',
+ avatar_background: 'bg-light-warning',
+ value: '$550K',
+ text: 'Total Revenue',
+ color: 'text-warning'
}
- };
+ ];
}
diff --git a/src/app/theme/layout/admin/configuration/configuration.component.html b/src/app/theme/layout/admin/configuration/configuration.component.html
index f6a7780..477aad9 100644
--- a/src/app/theme/layout/admin/configuration/configuration.component.html
+++ b/src/app/theme/layout/admin/configuration/configuration.component.html
@@ -1,60 +1,61 @@
-