154 lines
3.3 KiB
TypeScript
154 lines
3.3 KiB
TypeScript
import { Component, ViewChild } from '@angular/core';
|
|
import { TablerIconsModule } from 'angular-tabler-icons';
|
|
import { MaterialModule } from 'src/app/material.module';
|
|
|
|
import {
|
|
ApexChart,
|
|
ChartComponent,
|
|
ApexDataLabels,
|
|
ApexLegend,
|
|
ApexStroke,
|
|
ApexTooltip,
|
|
ApexAxisChartSeries,
|
|
ApexXAxis,
|
|
ApexYAxis,
|
|
ApexGrid,
|
|
ApexPlotOptions,
|
|
ApexFill,
|
|
ApexMarkers,
|
|
ApexResponsive,
|
|
NgApexchartsModule,
|
|
} from 'ng-apexcharts';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
|
|
interface month {
|
|
value: string;
|
|
viewValue: string;
|
|
}
|
|
|
|
export interface salesOverviewChart {
|
|
series: ApexAxisChartSeries;
|
|
chart: ApexChart;
|
|
dataLabels: ApexDataLabels;
|
|
plotOptions: ApexPlotOptions;
|
|
yaxis: ApexYAxis;
|
|
xaxis: ApexXAxis;
|
|
fill: ApexFill;
|
|
tooltip: ApexTooltip;
|
|
stroke: ApexStroke;
|
|
legend: ApexLegend;
|
|
grid: ApexGrid;
|
|
marker: ApexMarkers;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-sales-overview',
|
|
imports: [MaterialModule, TablerIconsModule, NgApexchartsModule, MatButtonModule],
|
|
templateUrl: './sales-overview.component.html',
|
|
})
|
|
export class AppSalesOverviewComponent {
|
|
|
|
@ViewChild('chart') chart: ChartComponent = Object.create(null);
|
|
|
|
public salesOverviewChart!: Partial<salesOverviewChart> | any;
|
|
|
|
months: month[] = [
|
|
{ value: 'mar', viewValue: 'Sep 2025' },
|
|
{ value: 'apr', viewValue: 'Oct 2025' },
|
|
{ value: 'june', viewValue: 'Nov 2025' },
|
|
];
|
|
|
|
|
|
constructor() {
|
|
|
|
// sales overview chart
|
|
this.salesOverviewChart = {
|
|
series: [
|
|
{
|
|
name: 'Eanings this month',
|
|
data: [355, 390, 300, 350, 390, 180, 355, 390],
|
|
color: '#5D87FF',
|
|
},
|
|
{
|
|
name: 'Expense this month',
|
|
data: [280, 250, 325, 215, 250, 310, 280, 250],
|
|
color: '#49BEFF',
|
|
},
|
|
],
|
|
|
|
grid: {
|
|
borderColor: 'rgba(0,0,0,0.1)',
|
|
strokeDashArray: 3,
|
|
xaxis: {
|
|
lines: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: { horizontal: false, columnWidth: '35%', borderRadius: [4] },
|
|
},
|
|
chart: {
|
|
type: 'bar',
|
|
height: 390,
|
|
offsetX: -15,
|
|
toolbar: { show: false },
|
|
foreColor: '#adb0bb',
|
|
fontFamily: 'inherit',
|
|
sparkline: { enabled: false },
|
|
},
|
|
dataLabels: { enabled: false },
|
|
markers: { size: 0 },
|
|
legend: { show: false },
|
|
xaxis: {
|
|
type: 'category',
|
|
categories: [
|
|
'16/08',
|
|
'17/08',
|
|
'18/08',
|
|
'19/08',
|
|
'20/08',
|
|
'21/08',
|
|
'22/08',
|
|
'23/08',
|
|
],
|
|
labels: {
|
|
style: { cssClass: 'grey--text lighten-2--text fill-color' },
|
|
},
|
|
},
|
|
yaxis: {
|
|
show: true,
|
|
min: 0,
|
|
max: 400,
|
|
tickAmount: 4,
|
|
labels: {
|
|
style: {
|
|
cssClass: 'grey--text lighten-2--text fill-color',
|
|
},
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 3,
|
|
lineCap: 'butt',
|
|
colors: ['transparent'],
|
|
},
|
|
tooltip: { theme: 'light' },
|
|
|
|
responsive: [
|
|
{
|
|
breakpoint: 600,
|
|
options: {
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 3,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
}
|
|
}
|