app api

src/app/app.component.ts

@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NgxEchartsDirective, provideEcharts } from 'ngx-echarts';
 import { ConsultancyComponent } from './components';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, NgxEchartsDirective],
+  imports: [RouterOutlet, NgxEchartsDirective, HttpClientModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
   providers: [

src/app/components.ts

-import { Component } from "@angular/core";
+import { Component, EventEmitter, OnInit, Output, SimpleChanges } from "@angular/core";
 import { EChartsOption } from 'echarts';
 import { NgxEchartsModule } from 'ngx-echarts';
 import * as echarts from 'echarts';
+import { HttpClient, HttpClientModule, HttpHeaders } from "@angular/common/http";
 
 export interface Service {
   id: number;
   title: string;
   description: string;
-  dataModel : any;
-  dataSoure : any;
+  dataModel: any;
+  dataSoure: any;
+  api: string;
 }
 
 export enum ServiceTypes {
   consultancy, // 0
   trainings, // 1
   engineering, // 2
+  statistic, //3
 }
 
 @Component({
@@ -23,12 +26,11 @@ export enum ServiceTypes {
   imports: [NgxEchartsModule],
   template: `
   <div>{{model}}</div>
-    <div echarts [options]="chartOption" class="demo-chart"></div>
+    <div echarts [options]="model" class="demo-chart"></div>
   `,
 })
 export class ConsultancyComponent {
-  model: any
-  chartOption: EChartsOption = {
+  model: any = {
     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -50,12 +52,11 @@ export class ConsultancyComponent {
   standalone: true,
   imports: [NgxEchartsModule],
   template: `
-    <div echarts [options]="chartOption" class="demo-chart"></div>
+    <div echarts [options]="model" class="demo-chart"></div>
   `,
 })
 export class SoftwareEngineeringComponent {
-  model: any
-  chartOption: EChartsOption = {
+  model: any = {
     legend: {},
     tooltip: {},
     dataset: {
@@ -84,12 +85,11 @@ export class SoftwareEngineeringComponent {
   imports: [NgxEchartsModule],
   template: `
     <div>{{model}}</div>
-    <div echarts [options]="chartOption" class="demo-chart"></div>
+    <div echarts [options]="model" class="demo-chart"></div>
   `,
 })
 export class TrainingsComponent {
-  model: any
-  chartOption: EChartsOption = {
+  model: any = {
     legend: {},
     tooltip: {},
     dataset: {
@@ -140,3 +140,42 @@ export class TrainingsComponent {
 
 
 }
+
+
+@Component({
+  selector: 'statistic',
+  standalone: true,
+  imports: [NgxEchartsModule],
+  template: `
+    <div echarts [options]="model" class="demo-chart"></div>
+  `,
+})
+export class StatisticComponent {
+
+  model: any = {
+    legend: {},
+    tooltip: {},
+    dataset: {
+      dimensions: ['product', '2015', '2016', '2017'],
+      source: [
+        { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
+        { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
+        { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
+        { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
+      ]
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+  };
+
+  constructor(private http: HttpClient) {
+
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/services-factory.ts

@@ -2,13 +2,14 @@ import {
   ConsultancyComponent,
   ServiceTypes,
   SoftwareEngineeringComponent,
+  StatisticComponent,
   TrainingsComponent,
 } from './components';
 import { Type } from '@angular/core';
 
 export type ServiceComponentType = ConsultancyComponent
   | TrainingsComponent
-  | SoftwareEngineeringComponent;
+  | SoftwareEngineeringComponent | StatisticComponent;
 
 export const servicesComponentFactory:
   Record<ServiceTypes, Type<ServiceComponentType>>
@@ -16,4 +17,6 @@ export const servicesComponentFactory:
   [ServiceTypes.consultancy]: ConsultancyComponent,
   [ServiceTypes.trainings]: TrainingsComponent,
   [ServiceTypes.engineering]: SoftwareEngineeringComponent,
+  [ServiceTypes.statistic]: StatisticComponent,
+
 };

src/app/services/services.component.ts

@@ -4,42 +4,55 @@ import { Observable, Subject, from, mergeMap, of, switchMap, takeUntil, tap } fr
 import { ComponentHostDirective } from '../directives/component-host.directive';
 import { ServiceComponentType, servicesComponentFactory } from '../services-factory';
 import { Service, ServiceTypes } from '../components';
+import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
 
 @Component({
   selector: 'app-services',
   standalone: true,
-  imports: [ComponentHostDirective],
+  imports: [ComponentHostDirective, HttpClientModule],
   templateUrl: './services.component.html',
   styleUrls: ['./services.component.scss'],
 })
 export class ServicesComponent implements OnInit {
   @Input() id?: number;
   @Output() valueChange: EventEmitter<Service> = new EventEmitter<Service>();
+
   componentList: Service[] = [{
     id: 0,
     title: "11111",
     description: "111",
     dataModel: "ss",
-    dataSoure: "sss"
+    dataSoure: "sss",
+    api: ""
   },
   {
     id: 1,
     title: "222",
     description: "222",
     dataModel: "ss",
-    dataSoure: "sss"
+    dataSoure: "sss",
+    api: ""
   },
   {
     id: 2,
     title: "3333",
     description: "33333",
     dataModel: "ss",
-    dataSoure: "sss"
+    dataSoure: "sss",
+    api: ""
+  },
+  {
+    id: 3,
+    title: "4444",
+    description: "4444",
+    dataModel: "4444",
+    dataSoure: "4444",
+    api: "https://hrplus.myhr.co.th/hr/taapi/leave/statistic?yearId=2024"
   }]
 
   @ViewChild(ComponentHostDirective, { static: true }) componentHost!: ComponentHostDirective;
 
-  constructor(private readonly route: ActivatedRoute) { }
+  constructor(private readonly route: ActivatedRoute, private http: HttpClient) { }
 
   destroy: Subject<void> = new Subject<void>();
 
@@ -84,8 +97,24 @@ export class ServicesComponent implements OnInit {
     const { instance } = viewContainerRef.createComponent<ServiceComponentType>(
       servicesComponentFactory[service.id as ServiceTypes]
     );
-    instance.model = service.dataModel;
-    this.valueChange.emit(service);
+    if (service.api!="") {
+      const options = {
+        headers: new HttpHeaders({
+          "Authorization": "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzY2hlbWEiOiJkYm8iLCJlbmNvZGUiOiIyIiwic3ViIjoiQXV0aCIsImNvbXBhbnlOYW1lIjoi4Lia4Lij4Li04Lip4Lix4LiXIOC4oeC4suC4ouC5gOC4reC4iuC4reC4suC4o-C5jCDguIjguLPguIHguLHguJQiLCJkYk5hbWUiOiJIUlBsdXMiLCJyb2xlcyI6WyJVU0VSIl0sIndvcmthcmVhIjoiTk9ORSIsImlzcyI6IkNvbXB1dGVyIFNjaWVuY2UgQ29ycG9yYXRpb24gTGltaXRlZCIsInptbG9naW4iOiJmYWxzZSIsInJvbGVfbGV2ZWwiOiIiLCJlbXBsb3llZWlkIjoiMjAxODAyMTAiLCJicmFuY2giOiIxMDAiLCJlbXBfcG9zaXRpb24iOiJQLVJELTIyMDEiLCJ1c2VyX3JvbGUiOiIiLCJ1aWQiOiIyMDE4MDIxMCIsImNvbXBhbnlpZCI6IjEwMCIsImFjdG9yaWQiOiIyMDE4MDIxMCIsImxhbmciOiJ0aCIsImFkIjoiZmFsc2UiLCJmaXJzdGxvZ2luIjoiZmFsc2UiLCJ1cmxfbXlociI6Imh0dHA6Ly9ocnBsdXMubXloci5jby50aC9ociIsImFwcF9uYW1lIjoibXlociIsInJlZ2lvbmFsbHR5IjoiRU5HIiwidG9rZW5femVlbWUiOiIiLCJ1c2VyX2xldmVsIjoiRW1wLVVzZXIiLCJmdWxsbmFtZSI6IuC4meC4suC4ouC4iuC4meC4sOC4iuC4seC4oiAg4LmC4Lit4LiU4Lie4Li04Lih4Lie4LmMIiwiY29taWQiOiIiLCJqb2IiOiJKLVJELTIyMDEiLCJ1c2VyIjoiQ2hhbmFjaGFpLm8iLCJ6bV91c2VyIjoiIiwidXNlcm5hbWUiOiJjaGFuYWNoYWkubyIsIm1lbWJlcmlkIjoiIn0.5BgyoT-lLs9qFDj3iIizzYNeA0vWd9nTU8QHpzxMF7A",
+        }),
+      };
+      this.http.get(service.api, options).subscribe(result => {
+        service.dataModel = result
+        this.valueChange.emit(service);
+      })
+    } else {
+      service.dataModel = instance.model
+      this.valueChange.emit(service);
+    }
+
+    // instance.model = service.dataModel;
+
+
 
   }
 

src/app/setting-widget/setting-widget.component.html

 <div id="loginform" style="background-color: gray;">
   <div class="position-relative overflow-hidden radial-gradient min-vh-100 w-100">
     <div class="position-relative z-index-5" style="z-index: 5 !important;">
-      <div class="row justify-content-center align-items-center ">
+      <div class="row p-4">
         <div class="col-xl-7 col-xxl-8">
           <div class="card">
             <app-services [id]="widjetId" (valueChange)="onValueChange($event)"></app-services>
@@ -32,7 +32,7 @@
                     Please enter a Username
                   </div>
                 </div>
-                <div class="alert alert-danger" style="word-break: break-all;">{{model?.dataModel}}</div>
+                <div class="alert alert-danger" style="word-break: break-all;">{{model | json}}</div>
                 <button type="submit" class="btn btn-primary w-100 py-8 mb-4 rounded-2">Save</button>
                 <button type="submit" class="btn btn-success w-100 py-8 mb-4 rounded-2">Preview</button>
               </form>

src/app/setting-widget/setting-widget.component.ts

@@ -11,9 +11,10 @@ import { Service } from '../components';
   styleUrls: ['./setting-widget.component.css']
 })
 export class SettingWidgetComponent implements OnInit {
-  model?: Service
+  widgetModel?: Service
   widjetId = 0
   dataSoure: string = "";
+  model : string = "";
   constructor() { }
 
   ngOnInit() {
@@ -21,8 +22,9 @@ export class SettingWidgetComponent implements OnInit {
 
   onValueChange(value: Service) {
     console.log("value",value)
-    this.model = value
-    this.dataSoure = this.model.dataSoure
+    this.widgetModel = value
+    this.dataSoure = value.api
+    this.model = value.dataModel
   }
 
 }