From 4d8f66f1e1189377c66b36c4f0807208fba6bc2e Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 21 May 2025 16:34:12 +0300 Subject: [PATCH 1/2] Remove excel export in fleet sample --- .../fleet-management-grid/fleet-management-grid.component.html | 1 - .../fleet-management-grid/fleet-management-grid.component.ts | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html index 33f8bb0..e62a936 100644 --- a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html +++ b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html @@ -9,7 +9,6 @@ - diff --git a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts index 972f217..d09c6fe 100644 --- a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts +++ b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; import { check, delivery, gitIssue, wrench } from '@igniteui/material-icons-extended'; -import { CloseScrollStrategy, DefaultSortingStrategy, IgxAvatarComponent, IgxBadgeComponent, IgxButtonDirective, IgxButtonModule, IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCarouselComponent, IgxCellTemplateDirective, IgxColumnComponent, IgxDividerDirective, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxIconComponent, IgxIconService, IgxLabelDirective, IgxOverlayService, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent, RelativePosition, RelativePositionStrategy, SortingDirection, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; +import { CloseScrollStrategy, DefaultSortingStrategy, IgxAvatarComponent, IgxBadgeComponent, IgxButtonDirective, IgxButtonModule, IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCarouselComponent, IgxCellTemplateDirective, IgxColumnComponent, IgxDividerDirective, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxIconComponent, IgxIconService, IgxLabelDirective, IgxOverlayService, IgxSelectComponent, IgxSelectItemComponent, IgxSlideComponent, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent, RelativePosition, RelativePositionStrategy, SortingDirection, THEME_TOKEN, ThemeToken } from 'igniteui-angular'; import { IgxCategoryChartModule, IgxDataChartInteractivityModule, IgxLegendDynamicModule, IgxPieChartModule } from 'igniteui-angular-charts'; import CAR_PHOTO_MANIFEST from '../../assets/car_photo_manifest.json'; import CAR_IMAGES from '../../assets/car_images.json'; @@ -39,7 +39,6 @@ import { BehaviorSubject } from 'rxjs'; IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, - IgxGridToolbarExporterComponent, IgxGridToolbarAdvancedFilteringComponent, IgxTabsComponent, IgxTabItemComponent, From f5961ec3f62a5e097af178eab0a93dbb9ed59919 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 21 May 2025 16:34:46 +0300 Subject: [PATCH 2/2] Chore: adjust formatting --- .../fleet-management-grid.component.html | 166 +++++++----------- .../fleet-management-grid.component.ts | 58 +++--- 2 files changed, 94 insertions(+), 130 deletions(-) diff --git a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html index e62a936..d4c19f2 100644 --- a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html +++ b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html @@ -1,16 +1,15 @@ Fleet Management - - - - - - + + + + + + @@ -35,7 +34,8 @@ - {{ cell.value }} + {{ cell.value }} @@ -52,15 +52,16 @@
-
- -
+
+ +
-
+
{{ category.label }}: @@ -86,7 +87,8 @@
- +
@@ -98,7 +100,8 @@
- +
@@ -113,8 +116,9 @@
Costs per Type - + YTD Last 3 Months @@ -123,18 +127,10 @@
- + actualLabelOuterColor="#ededed">
@@ -142,8 +138,9 @@
Costs per Meter, per Quarter - + YTD 2023 @@ -153,22 +150,12 @@
- + chartType="Area" isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false" + computedPlotAreaMarginMode="Series" xAxisLabelTextColor="#ededed" yAxisLabelTextColor="#ededed" + yAxisInterval="20" yAxisMinimumValue="0" yAxisMaximumValue="80" yAxisLabelRightMargin="15" + areaFillOpacity="100">
@@ -176,8 +163,9 @@
Fuel Costs per Month - + YTD Last 3 Months @@ -186,22 +174,11 @@
- + yAxisTitle="Costs in USD" isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false" + xAxisLabelTextColor="#ededed" yAxisLabelTextColor="#ededed" yAxisTitleTextColor="#ededed" + yAxisMinimumValue="0" xAxisMinimumGapSize="30" yAxisLabelRightMargin="7.5">
@@ -219,29 +196,13 @@
Utilization per Month
- + - +
@@ -253,11 +214,13 @@
Utilization per Month
- + - {{ cell.value }} + {{ cell.value }} Current @@ -267,16 +230,21 @@
Utilization per Month
- - - - + + + + - + @@ -303,13 +271,9 @@
{{ vehicleDetails.make }} {{ vehicleDetails.model }}Mileage: {{ vehicleDetails.mileage }} - - + + @@ -343,4 +307,4 @@
{{ driverDetails.name }}
 -
+
\ No newline at end of file diff --git a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts index d09c6fe..2a6ca89 100644 --- a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts +++ b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts @@ -124,7 +124,7 @@ export class FleetManagementGridComponent implements OnInit { @Inject(IgxIconService) private iconService: IgxIconService, @Inject(IgxOverlayService) private overlayService: IgxOverlayService, protected dataService: DataService, - @Inject(ElementRef) private hostRef: ElementRef) {} + @Inject(ElementRef) private hostRef: ElementRef) { } public ngOnInit(): void { this.iconService.addSvgIconFromText(check.name, check.value, 'imx-icons'); @@ -143,21 +143,21 @@ export class FleetManagementGridComponent implements OnInit { this.grid.sortingExpressions = [ { - dir: SortingDirection.Asc, fieldName: 'vehicleId', - ignoreCase: true, strategy: DefaultSortingStrategy.instance() + dir: SortingDirection.Asc, fieldName: 'vehicleId', + ignoreCase: true, strategy: DefaultSortingStrategy.instance() } ]; } public ngOnDestroy(): void { if (this.locationOverlayId) { - this.overlayService.detach(this.locationOverlayId); - this.locationOverlayId = null; + this.overlayService.detach(this.locationOverlayId); + this.locationOverlayId = null; } if (this.driverOverlayId) { this.overlayService.detach(this.driverOverlayId); this.driverOverlayId = null; - } + } } //handling for chart periods @@ -344,31 +344,31 @@ export class FleetManagementGridComponent implements OnInit { } //util function for adding map series - private addSeriesWith(locations:any[], brush: string) { + private addSeriesWith(locations: any[], brush: string) { const symbolSeries = new IgxGeographicSymbolSeriesComponent(); symbolSeries.dataSource = locations; - symbolSeries.latitudeMemberPath = "latitude"; - symbolSeries.longitudeMemberPath = "longitude"; - symbolSeries.markerBrush = "White"; - symbolSeries.markerOutline = brush; - symbolSeries.markerTemplate = { - measure: (measureInfo) => { - measureInfo.width = 24; - measureInfo.height = 24; - }, - render: (renderInfo) => { - const ctx = renderInfo.context; - const x = renderInfo.xPosition; - const y = renderInfo.yPosition; - - const img = new Image(); - img.src = 'location_pin.svg'; - img.onload = () => { - ctx.drawImage(img, x - 12, y - 12, 32, 32); - }; - } - } as IgDataTemplate; - this.map.series.add(symbolSeries); + symbolSeries.latitudeMemberPath = "latitude"; + symbolSeries.longitudeMemberPath = "longitude"; + symbolSeries.markerBrush = "White"; + symbolSeries.markerOutline = brush; + symbolSeries.markerTemplate = { + measure: (measureInfo) => { + measureInfo.width = 24; + measureInfo.height = 24; + }, + render: (renderInfo) => { + const ctx = renderInfo.context; + const x = renderInfo.xPosition; + const y = renderInfo.yPosition; + + const img = new Image(); + img.src = 'location_pin.svg'; + img.onload = () => { + ctx.drawImage(img, x - 12, y - 12, 32, 32); + }; + } + } as IgDataTemplate; + this.map.series.add(symbolSeries); } protected rightAlignedCellStyles = {