import { Component } from '@angular/core'; import * as pdfMake from 'pdfmake/build/pdfmake'; import * as pdfFonts from 'pdfmake/build/vfs_fonts'; @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent { data = [ { "QuoteLineId": "07a00014dfa7bca7", "JobName": "DevProject 4001 - 605 - San Jose, CA, USA", "Customer": "CUSTOM INNOVATION LLC", "NameAndID": "FLX-3+0x2-M0237-L0080", "ISE": "JOHN DOE", "MasterRevLevel": "17681", "LastEdited": "04/11/25 07:41:08", "GeneralData": { "Refrigerant": "R-744", "AmbientTemp": "99", "OilType": "BSE85K", "OilGallons": "4", "ASHRAEElevation": "51", "ASHRAECoolingDB": "91.4", "ASHRAECoolingMCWB": "66.2", "ReceiverType": "Vertical", "ReceiverSize": "V16x63", "ReceiverPressureRating": "130 bar", "PowerPointRackVoltage": "208/60/3", "PowerPointRackMCAMOPDSCCR": "286/400/50K", "ControllerMfg": "Danfoss", "ControllerModel": "AK2-PC781" }, "LTSuctionGroup": { "Name": "LT Suction Group", "ID": "rack_1LT Suction Group", "EvapTemp": "-15", "TotalLoad": "75100", "Loads": [ { "ID": "Unit #1 LT Remote Manifold", "Description": "Remote Manifold", "Model": "[Remote Manifold]", "Load": "75.1", "EvapTemp": "-20", "StubSizeLiquid": "1-1/8\"", "StubSizeSuction": "1-1/8\"", "StubSizeHotGas": "5/8\"", "CircuitServiceLiquid": "Ball Valve", "CircuitServiceSuction": "Ball Valve", "CircuitServiceHotGas": "BV w/ChkBypass" }, { "ID": "Rack_1_LT_1", "Description": "Ice Cream", "Model": "O5M-NRG", "Load": "1301", "EvapTemp": "26" } ], "RequirementBTUH": "75.1K BTUH", "CapacityBTUH": "84.9K BTUH", "LoadingPercent": "113.0%", "SystemPercent": "31%", "LiquidTemperature": "38°F" }, "MTSuctionGroup": { "Name": "MT Suction Group", "ID": "rack_1MT Suction Group", "EvapTemp": "25", "TotalLoad": "170700", "Loads": [ { "ID": "Unit #1 MT Remote Manifold", "Description": "Remote Manifold", "Model": "[Remote Manifold]", "Load": "170.7", "EvapTemp": "20", "StubSizeLiquid": "1-1/8\"", "StubSizeSuction": "1-1/8\"", "StubSizeHotGas": "5/8\"", "CircuitServiceLiquid": "Ball Valve", "CircuitServiceSuction": "Ball Valve", "CircuitServiceHotGas": "BV w/ChkBypass" }, { "ID": "36A", "Description": "~8' M/D Deli", "Model": "8' ON5DMX-NRG - Deli", "Load": "9.6", "EvapTemp": "28", "ElecDefrost": { "Voltage": "120/1", "Amps": "0.5", "KW": "0.1" }, "Fans": { "Voltage": "120/1", "Amps": "0.5", "KW": "0.1" }, "Lights": { "Voltage": "120/1", "Amps": "0.0", "KW": "0.0" }, "Sweats": { "Voltage": "120/1", "Amps": "0.0", "KW": "0.0" }, "StubSizeLiquid": "", "StubSizeSuction": "", "StubSizeHotGas": "", "CircuitServiceLiquid": "None", "CircuitServiceSuction": "None", "CircuitServiceHotGas": "None" } ], "RequirementBTUH": "170.7K BTUH", "CapacityBTUH": "183.5K BTUH", "LoadingPercent": "105.4%", "SystemPercent": "69%", "LiquidTemperature": "38°F" }, "LTCompressors": [ { "SuctionGroup": "-21 Suction Group", "Position": "1", "Model": "ZOD58K3E", "FLA": "31.2", "LRA": "163", "HP": "6.0", "Capacity": "54.98", "THR": "0", "Percent": "100", "Disch": "5/8\"", "Suct": "7/8\"", "UnlNumber": "0", "HPC": "060-5243", "VFD": "134U4917" } ], "MTCompressors": [ { "SuctionGroup": "+19 Suction Group", "Position": "2", "Model": "4DTE-25K", "FLA": "92.8", "LRA": "362", "HP": "20.0", "Capacity": "131.75", "THR": "321.99", "Percent": "51", "Disch": "5/8\"", "Suct": "1-1/8\"", "UnlNumber": "0", "HPC": "071B010M", "VFD": "134U4920" }, { "SuctionGroup": "+19 Suction Group", "Position": "3", "Model": "4HTE-15K", "FLA": "59.9", "LRA": "294", "HP": "15.0", "Capacity": "71.05", "THR": "170.65", "Percent": "41", "Disch": "7/8\"", "Suct": "1-1/8\"", "UnlNumber": "0", "HPC": "071B010M", "VFD": "" } ], "Condenser": { "Mfg": "BAC", "Qty": "1", "Model": "TSDC-CO2-077-6.2", "Capacity": "715", "TD": "3", "Fans": "2", "Voltage": "208/3", "Amps": "20.6", "MOPD": "30", "FPI": "10" } } ]; constructor() { (pdfMake as any).vfs = pdfFonts.pdfMake.vfs; } generatePDF() { const docDefinition = { content: [ { text: 'Project Dashboard', style: 'header' }, { text: '\n' }, { table: { headerRows: 1, widths: ['*', '*'], body: [ [ { text: 'Project Information', style: 'tableHeader' }, { text: 'General Data', style: 'tableHeader' } ], [ { table: { body: [ ['Job Name', this.data[0].JobName], ['Customer', this.data[0].Customer], ['Name & ID', this.data[0].NameAndID], ['ISE', this.data[0].ISE], ['Master Rev Level', this.data[0].MasterRevLevel], ['Last Edited', this.data[0].LastEdited] ] } }, { table: { body: [ ['Refrigerant', this.data[0].GeneralData.Refrigerant], ['Ambient Temp', this.data[0].GeneralData.AmbientTemp], ['Oil Type', this.data[0].GeneralData.OilType], ['Oil Gallons', this.data[0].GeneralData.OilGallons], ['ASHRAE Elevation', this.data[0].GeneralData.ASHRAEElevation], ['Receiver Type', this.data[0].GeneralData.ReceiverType] ] } } ] ] } }, { text: '\n\nSuction Groups', style: 'subheader' }, { table: { headerRows: 1, widths: ['*', '*'], body: [ [ { text: 'LT Suction Group', style: 'tableHeader' }, { text: 'MT Suction Group', style: 'tableHeader' } ], [ { table: { body: [ ['Evap Temp', this.data[0].LTSuctionGroup.EvapTemp], ['Total Load', this.data[0].LTSuctionGroup.TotalLoad], ['Requirement BTUH', this.data[0].LTSuctionGroup.RequirementBTUH], ['Capacity BTUH', this.data[0].LTSuctionGroup.CapacityBTUH], ['Loading %', this.data[0].LTSuctionGroup.LoadingPercent], ['System %', this.data[0].LTSuctionGroup.SystemPercent] ] } }, { table: { body: [ ['Evap Temp', this.data[0].MTSuctionGroup.EvapTemp], ['Total Load', this.data[0].MTSuctionGroup.TotalLoad], ['Requirement BTUH', this.data[0].MTSuctionGroup.RequirementBTUH], ['Capacity BTUH', this.data[0].MTSuctionGroup.CapacityBTUH], ['Loading %', this.data[0].MTSuctionGroup.LoadingPercent], ['System %', this.data[0].MTSuctionGroup.SystemPercent] ] } } ] ] } }, { text: '\n\nCompressors', style: 'subheader' }, { table: { headerRows: 1, widths: ['*', '*'], body: [ [ { text: 'LT Compressors', style: 'tableHeader' }, { text: 'MT Compressors', style: 'tableHeader' } ], [ { table: { headerRows: 1, widths: ['*', '*', '*'], body: [ ['Model', 'Capacity', 'HP'], ...this.data[0].LTCompressors.map(comp => [ comp.Model, comp.Capacity, comp.HP ]) ] } }, { table: { headerRows: 1, widths: ['*', '*', '*'], body: [ ['Model', 'Capacity', 'HP'], ...this.data[0].MTCompressors.map(comp => [ comp.Model, comp.Capacity, comp.HP ]) ] } } ] ] } }, { text: '\n\nCondenser', style: 'subheader' }, { table: { headerRows: 1, widths: ['*', '*', '*', '*'], body: [ ['Mfg', 'Model', 'Capacity', 'Voltage'], [ this.data[0].Condenser.Mfg, this.data[0].Condenser.Model, this.data[0].Condenser.Capacity, this.data[0].Condenser.Voltage ] ] } } ], styles: { header: { fontSize: 18, bold: true, margin: [0, 0, 0, 10], alignment: 'center' }, subheader: { fontSize: 14, bold: true, margin: [0, 10, 0, 5] }, tableHeader: { bold: true, fontSize: 12, color: 'black', fillColor: '#f2f2f2' } } }; pdfMake.createPdf(docDefinition).open(); } }

Project Information

Job Name: {{ data[0].JobName }}

Customer: {{ data[0].Customer }}

Name & ID: {{ data[0].NameAndID }}

ISE: {{ data[0].ISE }}

Master Rev Level: {{ data[0].MasterRevLevel }}

Last Edited: {{ data[0].LastEdited }}

General Data

Refrigerant: {{ data[0].GeneralData.Refrigerant }}

Ambient Temp: {{ data[0].GeneralData.AmbientTemp }}

Oil Type: {{ data[0].GeneralData.OilType }}

Oil Gallons: {{ data[0].GeneralData.OilGallons }}

ASHRAE Elevation: {{ data[0].GeneralData.ASHRAEElevation }}

Receiver Type: {{ data[0].GeneralData.ReceiverType }}

Suction Groups

LT Suction Group

Evap Temp: {{ data[0].LTSuctionGroup.EvapTemp }}

Total Load: {{ data[0].LTSuctionGroup.TotalLoad }}

Requirement BTUH: {{ data[0].LTSuctionGroup.RequirementBTUH }}

Capacity BTUH: {{ data[0].LTSuctionGroup.CapacityBTUH }}

Loading %: {{ data[0].LTSuctionGroup.LoadingPercent }}

System %: {{ data[0].LTSuctionGroup.SystemPercent }}

MT Suction Group

Evap Temp: {{ data[0].MTSuctionGroup.EvapTemp }}

Total Load: {{ data[0].MTSuctionGroup.TotalLoad }}

Requirement BTUH: {{ data[0].MTSuctionGroup.RequirementBTUH }}

Capacity BTUH: {{ data[0].MTSuctionGroup.CapacityBTUH }}

Loading %: {{ data[0].MTSuctionGroup.LoadingPercent }}

System %: {{ data[0].MTSuctionGroup.SystemPercent }}

Compressors

LT Compressors

Model	Capacity	HP
{{ comp.Model }}	{{ comp.Capacity }}	{{ comp.HP }}

MT Compressors

Model	Capacity	HP
{{ comp.Model }}	{{ comp.Capacity }}	{{ comp.HP }}

Condenser

Mfg	Model	Capacity	Voltage
{{ data[0].Condenser.Mfg }}	{{ data[0].Condenser.Model }}	{{ data[0].Condenser.Capacity }}	{{ data[0].Condenser.Voltage }}

.dashboard-container { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; color: #333; .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; h1 { color: #2c3e50; font-size: 28px; margin: 0; } .export-btn { background-color: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.3s; &:hover { background-color: #2980b9; } } } .dashboard-content { display: grid; grid-template-columns: 1fr; gap: 20px; } .card { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; transition: transform 0.3s, box-shadow 0.3s; &:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } h2 { color: #2c3e50; margin-top: 0; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; } h3 { color: #3498db; margin-top: 0; margin-bottom: 15px; } } .info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; .info-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; .label { font-weight: 600; color: #555; } .value { color: #333; } } } .suction-groups, .compressors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; @media (max-width: 768px) { grid-template-columns: 1fr; } } table { width: 100%; border-collapse: collapse; margin-top: 15px; th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f8f9fa; font-weight: 600; color: #2c3e50; } tr:hover { background-color: #f5f5f5; } } } import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DashboardComponent } from './dashboard.component'; @NgModule({ declarations: [ DashboardComponent ], imports: [ CommonModule ], exports: [ DashboardComponent ] }) export class DashboardModule { } import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { DashboardModule } from './dashboard/dashboard.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DashboardModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

.app-container { padding: 20px; background-color: #f5f7fa; min-height: 100vh; }