@@ -62,7 +64,7 @@
-
+
-
-
-
-
34,879
- Total Likes
-
-
-
-
-
-
- -
-
4789
- Per Post
-
- -
-
389
- Today
-
-
-
-
-
-
-
-
-
-
-
34,879
- Total Likes
-
-
-
-
-
-
- -
-
4789
- Per Post
-
- -
-
389
- Today
-
-
-
-
-
-
-
-
-
-
-
-
-
Carousel
- Support card subtitle
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
index b34e2d9..0cdfea0 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -1,14 +1,8 @@
import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
-import { BlockUI, NgBlockUI } from "ng-block-ui";
-import { ChartApiService } from "src/app/_services/chart.api";
import { BuildingService } from "../../service/monitoring-api.service";
-interface Sales {
- name: string;
- sales: string;
- receipts: string;
- due: string;
-}
+import * as chartsData from "./data";
+import { ChartOptions, ChartType, ChartDataset } from "chart.js";
@Component({
selector: "app-detail",
@@ -17,14 +11,65 @@ interface Sales {
})
export class DetailComponent {
data: any;
- chartOption: any;
- Sales: any;
- salesData: any;
- lineArea: any;
mode: string;
- ExpenseschartOption: any;
- donutChart2: any;
- public breadcrumb: any;
+ breadcrumb: any;
+ // chart
+ public barChartOptions: ChartOptions = {
+ responsive: true,
+ scales: {
+ x: {
+ stacked: true,
+ },
+ y: {
+ stacked: true,
+ },
+ },
+ };
+ public barChartLabels: string[] = [];
+ public barChartType: ChartType = "bar";
+ public barChartLegend = true;
+
+ public barChartData: ChartDataset[] = [
+ {
+ data: [],
+ label: "KWH Consumption",
+ backgroundColor: "#00a5a8",
+ borderColor: "#00a5a8",
+ pointBackgroundColor: "#00a5a8",
+ pointBorderColor: "#00a5a8",
+ pointHoverBackgroundColor: "#fff",
+ pointHoverBorderColor: "#00a5a8",
+ barPercentage: 0.5,
+ categoryPercentage: 0.5,
+ },
+ {
+ data: [],
+ label: "Water Consumption",
+ backgroundColor: "#ff4081",
+ borderColor: "#ff4081",
+ pointBackgroundColor: "#ff4081",
+ pointBorderColor: "#ff4081",
+ pointHoverBackgroundColor: "#fff",
+ pointHoverBorderColor: "#ff4081",
+ barPercentage: 0.5,
+ categoryPercentage: 0.5,
+ },
+ {
+ type: "line", // override the default type
+ data: [],
+ label: "Appointment",
+ backgroundColor: "rgba(0,255,255,0)",
+ borderColor: "#1e9ff2",
+ fill: false,
+ pointBorderColor: "#1e9ff2",
+ pointBackgroundColor: "#FFF",
+ pointBorderWidth: 2,
+ pointHoverBorderWidth: 2,
+ pointRadius: 4,
+ },
+ ];
+ //..........................
+
// integrasi
electric: any;
water: any;
@@ -32,32 +77,28 @@ export class DetailComponent {
room: any;
//......
constructor(
- private chartApiservice: ChartApiService,
private router: Router,
private route: ActivatedRoute,
- private monitoringApiService: BuildingService,
+ private monitoringApiService: BuildingService
) {}
- hitRateOptions = {
- bodyClass: ['bg-hexagons', 'pt-0'],
- headerClass: ['bg-hexagons'],
- cardClass: ['pull-up'],
- close: false,
- expand: false,
- minimize: false,
- reload: true
- };
- @BlockUI("totalReceivables") blockUITotalReceivables: NgBlockUI;
- @BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
- carouselOne = [
- '../../../assets/images/carousel/02.jpg',
- '../../../assets/images/carousel/03.jpg',
- '../../../assets/images/carousel/01.jpg'
- ];
ngOnInit() {
this.route.data.subscribe((data) => {
this.mode = data.mode;
});
+ this.breadcrumbLink();
+ this.generateChartLabelsAndData();
+
+ this.route.params.subscribe((params) => {
+ const buildingId = params["id"];
+ if (buildingId) {
+ this.fetchData(buildingId);
+ this.devicePerBuilding(buildingId);
+ }
+ });
+ }
+
+ breadcrumbLink() {
if (this.mode === "room") {
this.breadcrumb = {
mainlabel: "Detail Monitoring",
@@ -95,220 +136,42 @@ export class DetailComponent {
],
};
}
-
- this.route.params.subscribe(params => {
- const buildingId = params['id'];
- if (buildingId) {
- this.fetchData(buildingId);
- this.devicePerBuilding(buildingId);
- }
- });
-
- this.chartApiservice.getStatisticsData().subscribe(Response => {
- this.salesData = Response;
- this.getlineArea();
- });
-
- this.chartApiservice.getInvoiceData().subscribe((Response) => {
- this.data = Response;
- this.getInvoicechart();
- });
}
- getlineArea(){
- const ChartData = this.salesData;
+ generateChartLabelsAndData() {
+ const now = new Date();
+ const year = now.getFullYear();
+ const month = now.getMonth();
+ const daysInMonth = new Date(year, month + 1, 0).getDate();
- // this.lineArea = {
- // type: 'Line',
- // data: ChartData['lineArea'],
- // options: {
- // // low: 650,
- // fullwidth: true,
- // height: '80px',
- // showArea: true,
- // axisX: {
- // showGrid: false,
- // showLabel: false
- // },
- // axisY: {
- // showGrid: false,
- // showLabel: false
- // }
- // }
- // };
+ for (let day = 1; day <= daysInMonth; day++) {
+ const date = new Date(year, month, day);
+ this.barChartLabels.push(date.toISOString().split("T")[0]); // Format YYYY-MM-DD
- this.lineArea = {
- type: 'Line',
- data: ChartData['lineArea'],
- options: {
- // low: 650,
- fullwidth: true,
- height: '75px',
- showArea: true,
- axisX: {
- showGrid: false,
- showLabel: false
- },
- axisY: {
- showGrid: false,
- showLabel: false
- }
- }
- };
- }
-
- getInvoicechart() {
- this.Sales = this.data["sales"];
- this.chartOption = {
- grid: {
- x: 40,
- x2: 40,
- y: 35,
- y2: 25,
- },
-
- // Add tooltip
- tooltip: {
- trigger: "axis",
- enterable: false,
- },
-
- // Add legend
- legend: {
- data: ["Total Sales", "Total Receipts", "Total Expenses"],
- },
-
- // Add custom colors
- color: ["#3BAFDA", "#37BC9B", "#F6BB42"],
-
- // Horizontal axis
- xAxis: [
- {
- type: "category",
- data: [
- "Jan",
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
- "Sep",
- "Oct",
- "Nov",
- "Dec",
- ],
- },
- ],
-
- // Vertical axis
- yAxis: [
- {
- type: "value",
- },
- ],
-
- // Add series
- series: [
- {
- name: "Total Sales",
- type: "bar",
- data: this.data.TotalSales.TotalSales[0],
- },
- {
- name: "Total Receipts",
- type: "bar",
- data: this.data.TotalReceipts.TotalReceipts[0],
- },
- {
- name: "Total Expenses",
- type: "bar",
- data: this.data.TotalExpenses.TotalExpenses[0],
- },
- ],
- };
- this.ExpenseschartOption = {
- legend: {
- orient: "horizontal",
- x: "center",
- data: ["Internet", "Infrastructure", "Party", "Assets", "Electricity"],
- },
-
- // Add custom colors
- color: ["#FECEA8", "#FF847C", "#E84A5F", "#2A363B", "#99B898"],
-
- // Display toolbox
- toolbox: {
- show: true,
- orient: "vertical",
- },
-
- series: [
- {
- name: "Browsers",
- type: "pie",
- radius: ["50%", "70%"],
- center: ["50%", "57.5%"],
- itemStyle: {
- normal: {
- label: {
- show: true,
- },
- labelLine: {
- show: true,
- },
- },
- emphasis: {
- label: {
- show: true,
- formatter: "{b}" + "\n\n" + "{c} ({d}%)",
- position: "center",
- textStyle: {
- fontSize: "17",
- fontWeight: "500",
- },
- },
- },
- },
- data: [
- { value: 335, name: "Internet" },
- { value: 1548, name: "Infrastructure" },
- { value: 135, name: "Party" },
- { value: 234, name: "Assets" },
- { value: 650, name: "Electricity" },
- ],
- },
- ],
- };
- }
-
- reloadTotalReceivables() {
- this.blockUITotalReceivables.start("Loading..");
-
- setTimeout(() => {
- this.blockUITotalReceivables.stop();
- }, 2500);
- }
-
- reloadSalesRecieptsDues() {
- this.blockUISalesRecieptsDues.start("Loading..");
-
- setTimeout(() => {
- this.blockUISalesRecieptsDues.stop();
- }, 2500);
+ // Example data generation, replace with your actual data logic
+ this.barChartData[0].data?.push(Math.floor(Math.random() * 100));
+ this.barChartData[1].data?.push(Math.floor(Math.random() * 100));
+ this.barChartData[2].data?.push(Math.floor(Math.random() * 100));
+ }
}
//integrasi
fetchData(buildingId) {
- this.monitoringApiService.getRoomByBuildingId(buildingId).subscribe((res) => {
- this.room = res.resp.map(entry => entry.roomEntity).length;
- });
+ this.monitoringApiService
+ .getRoomByBuildingId(buildingId)
+ .subscribe((res) => {
+ this.room = res.resp.map((entry) => entry.roomEntity).length;
+ });
}
devicePerBuilding(buildingId) {
- this.monitoringApiService.listDevicePerBuilding(buildingId).subscribe((res) => {
- this.device = res.resp.reduce((sum, item) => sum + item.total_device, 0);
- });
+ this.monitoringApiService
+ .listDevicePerBuilding(buildingId)
+ .subscribe((res) => {
+ this.device = res.resp.reduce(
+ (sum, item) => sum + item.total_device,
+ 0
+ );
+ });
}
}
diff --git a/src/app/content/hemat-app/service/master-api.service.ts b/src/app/content/hemat-app/service/master-api.service.ts
new file mode 100644
index 0000000..c5b569f
--- /dev/null
+++ b/src/app/content/hemat-app/service/master-api.service.ts
@@ -0,0 +1,135 @@
+import { Injectable } from "@angular/core";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
+import { Observable } from "rxjs";
+
+@Injectable({
+ providedIn: "root",
+})
+export class MasterService {
+ constructor(private http: HttpClient) {}
+
+ getMasterListData(): Observable
{
+ const url = `https://kapi.absys.ninja/hemat/header-param/list`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.get(url, { headers });
+ }
+
+ getMasterData(page: number = 1, limit: number = 100): Observable {
+ const url = `https://kapi.absys.ninja/hemat/header-param?page=${page}&limit=${limit}`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.get(url, { headers });
+ }
+
+ postHeaderDetailParam(data: any): Observable {
+ const url = `https://kapi.absys.ninja/hemat/header-detail-param`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.post(url, data, { headers });
+ }
+ putHeaderDetailParam(data: any, id: any): Observable {
+ const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.put(url, data, { headers });
+ }
+
+ deleteHeaderDetailParam(id: any): Observable {
+ const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.delete(url, { headers });
+ }
+
+ postMasterBuildingParam(data: any): Observable {
+ const url = `https://kapi.absys.ninja/hemat/building`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.post(url, data, { headers });
+ }
+
+ getMasterBuildingData(page: number = 1, limit: number = 100): Observable {
+ const url = `https://kapi.absys.ninja/hemat/building?page=${page}&limit=${limit}`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.get(url, { headers });
+ }
+
+ getBuildingList(): Observable {
+ const url = `https://kapi.absys.ninja/hemat/building/list`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.get(url, { headers });
+ }
+
+ putMasterBuildingParam(data: any, id: any): Observable {
+ const url = `https://kapi.absys.ninja/hemat/building/${id}`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.put(url, data, { headers });
+ }
+
+ deleteMasterBuildingParam(id: any): Observable {
+ const url = `https://kapi.absys.ninja/hemat/building/${id}`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.delete(url, { headers });
+ }
+
+ postMasterRoomParam(data: any): Observable {
+ const url = `https://kapi.absys.ninja/hemat/room`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.post(url, data, { headers });
+ }
+
+ putMasterRoomParam(data: any, id: any): Observable {
+ const url = `https://kapi.absys.ninja/hemat/room/${id}`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.put(url, data, { headers });
+ }
+
+ getListRoomData(): Observable {
+ const url = `https://kapi.absys.ninja/hemat/room/list`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.get(url, { headers });
+ }
+
+ getMasterRoomData(page: number = 1, limit: number = 100): Observable {
+ const url = `https://kapi.absys.ninja/hemat/room?page=${page}&limit=${limit}`;
+ const headers = new HttpHeaders({
+ 'Content-Type': 'application/json',
+ 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+ });
+ return this.http.get(url, { headers });
+ }
+}
+
+