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..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,17 +1,15 @@ Fleet Management - - - - - - - + + + + + + @@ -36,7 +34,8 @@ - {{ cell.value }} + {{ cell.value }} @@ -53,15 +52,16 @@
-
- -
+
+ +
-
+
{{ category.label }}: @@ -87,7 +87,8 @@
- +
@@ -99,7 +100,8 @@
- +
@@ -114,8 +116,9 @@
Costs per Type - + YTD Last 3 Months @@ -124,18 +127,10 @@
- + actualLabelOuterColor="#ededed">
@@ -143,8 +138,9 @@
Costs per Meter, per Quarter - + YTD 2023 @@ -154,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">
@@ -177,8 +163,9 @@
Fuel Costs per Month - + YTD Last 3 Months @@ -187,22 +174,11 @@
- + yAxisTitle="Costs in USD" isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false" + xAxisLabelTextColor="#ededed" yAxisLabelTextColor="#ededed" yAxisTitleTextColor="#ededed" + yAxisMinimumValue="0" xAxisMinimumGapSize="30" yAxisLabelRightMargin="7.5">
@@ -220,29 +196,13 @@
Utilization per Month
- + - +
@@ -254,11 +214,13 @@
Utilization per Month
- + - {{ cell.value }} + {{ cell.value }} Current @@ -268,16 +230,21 @@
Utilization per Month
- - - - + + + + - + @@ -304,13 +271,9 @@
{{ vehicleDetails.make }} {{ vehicleDetails.model }}Mileage: {{ vehicleDetails.mileage }} - - + + @@ -344,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 972f217..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 @@ -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, @@ -125,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'); @@ -144,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 @@ -345,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 = {