chore: polish demo to fit the design

Author: georgi-sla

examples-standalone/personal-finance-app/package-lock.json

@@ -45,7 +45,7 @@
     "@progress/kendo-angular-utils": "18.1.1",
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.0",
-    "@progress/kendo-licensing": "^1.5.0",
+    "@progress/kendo-licensing": "^1.5.1",
     "@progress/kendo-svg-icons": "^4.0.0",
     "@progress/kendo-theme-default": "^10.2.0",
     "@progress/kendo-theme-material": "^10.3.1",

examples-standalone/personal-finance-app/package.json

@@ -4,7 +4,7 @@ import {
   importProvidersFrom,
   LOCALE_ID,
 } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withHashLocation } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import '@progress/kendo-angular-intl/locales/en/all';
@@ -16,6 +16,7 @@ import { routes } from './app.routes';
 import { Locale, localeData } from '@progress/kendo-angular-intl';
 import { CustomMessagesService } from './services/custom-messages.service';
 import { MessageService } from '@progress/kendo-angular-l10n';
+import { APP_BASE_HREF } from '@angular/common';
 
 const enData: Locale = localeData('en');
 
@@ -29,9 +30,10 @@ if (enData.numbers && enData.numbers.symbols) {
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
+    provideRouter(routes, withHashLocation()),
     importProvidersFrom([BrowserAnimationsModule]),
     { provide: LOCALE_ID, useValue: 'en-US' },
     { provide: MessageService, useClass: CustomMessagesService },
+    { provide: APP_BASE_HREF, useValue: '/personal-finance-app/' },
   ],
 };

examples-standalone/personal-finance-app/src/app/app.config.ts

@@ -24,9 +24,9 @@ <h6 class="k-h6 k-font-medium">{{customMsgService.translate('relatedTopics')}}</
         <h6 class="k-h6 k-font-medium">{{customMsgService.translate('chatWithRoby')}}</h6>
       </div>
       <div class="k-d-flex k-justify-content-center k-align-items-center">
-        <kendo-aiprompt [style.maxWidth.px]="390" [style.minWidth.px]="390" [style.maxHeight.px]="520"
-          [style.height.px]="520" #aiPrompt [promptOutputs]=" promptOutputs" [(activeView)]="activeView"
-          (promptRequest)="onPromptRequest($event)" [promptSuggestions]="promptSuggestions">
+        <kendo-aiprompt [style.maxHeight.px]="520" [style.maxWidth.px]="390" [style.height.px]="520" #aiPrompt
+          [promptOutputs]=" promptOutputs" [(activeView)]="activeView" (promptRequest)="onPromptRequest($event)"
+          [promptSuggestions]="promptSuggestions">
           <kendo-aiprompt-prompt-view></kendo-aiprompt-prompt-view>
           <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
         </kendo-aiprompt>

examples-standalone/personal-finance-app/src/app/components/ai-assistant/ai-assistant.component.html

@@ -37,11 +37,16 @@ import { CustomMessagesService } from '../../services/custom-messages.service';
 export class AiAssistantComponent {
   public customMsgService: CustomMessagesService;
 
-  public relatedTopics = relatedTopicsDataEn;
+  public relatedTopics: {
+    title: string;
+    description: string;
+    expanded: boolean;
+  }[] = [];
   public promptSuggestions: string[] = [];
   public activeView: number = 0;
   public promptOutputs: PromptOutput[] = [];
   public emailContent = '';
+
   private currentLocaleId: string = 'en-US';
   private defaultMessage = '';
   private promptData: { suggestion: string; answer: string }[] = [];
@@ -52,9 +57,14 @@ export class AiAssistantComponent {
   ) {
     this.customMsgService = this.messages as CustomMessagesService;
 
-    this.promptSuggestions = this.getPromptSuggestions(this.currentLocaleId);
-    this.defaultMessage = this.getDefaultMessage(this.currentLocaleId);
-    this.promptData = this.getPrompts(this.currentLocaleId);
+    this.promptSuggestions = this.getPromptSuggestions(
+      this.customMsgService.language
+    );
+    this.defaultMessage = this.getDefaultMessage(
+      this.customMsgService.language
+    );
+    this.promptData = this.getPrompts(this.customMsgService.language);
+    this.relatedTopics = this.getRelatedTopics(this.customMsgService.language);
 
     this.customMsgService.localeChange.subscribe(() => {
       this.currentLocaleId = this.customMsgService.language;
@@ -71,8 +81,6 @@ export class AiAssistantComponent {
       .slice()
       .find((s) => s.suggestion === ev.prompt);
 
-    console.log(response, ev.prompt);
-
     const output: PromptOutput = {
       id: guid(),
       title: ev.prompt,

examples-standalone/personal-finance-app/src/app/components/ai-assistant/ai-assistant.component.ts

@@ -3,10 +3,8 @@ <h4 class="k-h4 !k-mb-6 k-text-ellipsis">{{customMsgService.translate('analytics
 
   <div
     class="k-col-span-12 k-col-span-xl-12 k-d-flex k-flex-col k-flex-basis-0 k-flex-grow k-bg-surface-alt k-rounded-xxl k-gap-4 k-p-4 k-mb-10 k-pos-relative">
-    <div
-      class="k-pos-absolute k-z-10 k-d-flex k-d-flex-row k-justify-content-between k-align-items-center k-gap-0 k-w-100 k-left-0 k-right-0 k-px-4">
+    <div class="k-d-flex k-d-flex-row k-justify-content-between k-align-items-center k-gap-0 k-w-100 k-px-4">
       <h6 class="k-h6 k-font-medium k-align-middle k-mb-0">{{customMsgService.translate('moneyCashflow')}}</h6>
-
       <kendo-dropdownlist class="k-w-25" [data]="drillDownLevels" [value]="activeSeries"
         (valueChange)="onDrilldownLevelChange($event)" [textField]="'text'" [valueField]="'value'"
         [valuePrimitive]="false" [(value)]="defaultItem" [itemDisabled]="itemDisabled"></kendo-dropdownlist>
@@ -24,8 +22,8 @@ <h6 class="k-h6 k-font-medium k-align-middle k-mb-0">{{customMsgService.translat
           <kendo-chart-value-axis-item [labels]="valueAxisLabels">
           </kendo-chart-value-axis-item>
         </kendo-chart-value-axis>
-        <kendo-chart-legend position="top">
-          <kendo-chart-legend-item [visual]="labelsVisual" cursor="pointer">
+        <kendo-chart-legend [position]="legendPosition">
+          <kendo-chart-legend-item cursor="pointer">
           </kendo-chart-legend-item>
         </kendo-chart-legend>
         <kendo-chart-series>
@@ -63,7 +61,6 @@ <h6 class="k-h6 k-font-medium k-align-middle k-mb-0">{{customMsgService.translat
       </kendo-chart>
     </div>
   </div>
-
   <div
     class="k-col-span-12 k-col-span-xl-12 k-d-flex k-flex-col k-flex-basis-0 k-flex-grow k-bg-surface-alt k-rounded-xxl k-gap-4 k-p-4 k-mb-4">
     <div class="k-d-flex k-d-flex-col k-justify-content-between k-align-items-start k-gap-0">

examples-standalone/personal-finance-app/src/app/components/analytics/analytics.component.css

@@ -1,22 +1,13 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import {
   AxisLabelContentArgs,
   DrilldownEvent,
   KENDO_CHARTS,
-  LegendItemVisualArgs,
   ValueAxisLabels,
 } from '@progress/kendo-angular-charts';
 import { KENDO_DROPDOWNS } from '@progress/kendo-angular-dropdowns';
 import { MessageService } from '@progress/kendo-angular-l10n';
-import {
-  Element,
-  geometry,
-  Group,
-  Path,
-  Rect as RectShape,
-  Text,
-} from '@progress/kendo-drawing';
 import {
   bondsMonthlyData,
   bondsYearlyData,
@@ -28,8 +19,6 @@ import {
 import { CustomMessagesService } from '../../services/custom-messages.service';
 import { TransactionsGridComponent } from '../transactions-grid/transactions-grid.component';
 
-const { Point, Rect, Size } = geometry;
-
 @Component({
   selector: 'app-analytics',
   standalone: true,
@@ -40,23 +29,26 @@ const { Point, Rect, Size } = geometry;
     KENDO_DROPDOWNS,
   ],
   templateUrl: './analytics.component.html',
-  styleUrl: './analytics.component.css',
 })
 export class AnalyticsComponent {
   public stocksYearlyData = stocksYearlyData;
   public realEstateYearlyData = realEstateYearlyData;
   public bondsYearlyData = bondsYearlyData;
-
+  public customMsgService: CustomMessagesService;
   public stocksMonthlyData = stocksMonthlyData;
   public realEstateMonthlyData = realEstateMonthlyData;
   public bondsMonthlyData = bondsMonthlyData;
-
+  public legendPosition: 'top' | 'bottom' | 'left' | 'right' | 'custom' = 'top';
   public drilldownLevel: number = 0;
-
   public isDrilledDown = false;
   public activeSeries: string = '';
+  public defaultItem: { text: string; value: number } = {
+    text: '',
+    value: 0,
+  };
+  public drillDownLevels: { text: string; value: number }[] = [];
 
-  public customMsgService: CustomMessagesService;
+  private disabledItems: string[] = ['Month', 'Mes', 'Monat', 'Mois'];
 
   constructor(private messages: MessageService) {
     this.customMsgService = this.messages as CustomMessagesService;
@@ -73,15 +65,6 @@ export class AnalyticsComponent {
     });
   }
 
-  private disabledItems: string[] = ['Month', 'Mes', 'Monat', 'Mois'];
-
-  public defaultItem: { text: string; value: number } = {
-    text: '',
-    value: 0,
-  };
-
-  public drillDownLevels: { text: string; value: number }[] = [];
-
   public valueAxisLabels: ValueAxisLabels = {
     content: (args) => {
       return '$' + args.value / 1000 + 'k';
@@ -101,14 +84,12 @@ export class AnalyticsComponent {
     this.categoryAxisLabels = this.categoryAxisLabels.bind(this);
     this.isDrilledDown = true;
     this.activeSeries = event.series.name;
-    console.log(this.activeSeries);
 
     this.defaultItem = this.setdDefaultItem('month');
   }
 
   public onDrilldownLevelChange(event: any): void {
     this.drilldownLevel = event.value;
-    console.log(this.drilldownLevel);
 
     if (this.drilldownLevel === 0) {
       this.drilldownLevel = event.value;
@@ -121,48 +102,13 @@ export class AnalyticsComponent {
     return this.disabledItems.indexOf(itemArgs.dataItem.text) !== -1;
   };
 
-  public labelsVisual = (args: LegendItemVisualArgs): Element => {
-    const rectOptions = {
-      stroke: { width: 20, color: 'transparent' },
-      fill: { color: 'transparent' },
-    };
-    const rectGeometry = new Rect(new Point(0, 10), new Size(60, 10));
-    const rect: RectShape = new RectShape(rectGeometry, rectOptions);
-
-    const pathColor = args.options.markers.border.color;
-    const path1 = new Path({
-      stroke: {
-        color: pathColor,
-        width: 5,
-      },
-    });
-
-    path1.moveTo(0, 7).lineTo(20, 7).close();
-
-    const labelText = this.customMsgService.translate(
-      this.getLabelText(args.series.name)
-    );
-    const labelFont = args.options.labels.font;
-    const fontColor = args.options.labels.color;
-    const textOptions = { font: labelFont, fill: { color: fontColor } };
-    const text = new Text(labelText, new Point(27, 0), textOptions);
-
-    const group = new Group();
-
-    group.append(rect, path1, text);
-
-    if (!args.active) {
-      group.opacity(0.5);
-    }
-
-    return group;
-  };
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any): void {
+    this.updateLegendPosition(event.target.innerWidth);
+  }
 
-  private getLabelText(category: string): string {
-    if (category === 'Real Estate') {
-      return (category = 'realEstates');
-    }
-    return category.toLowerCase();
+  private updateLegendPosition(width: number): void {
+    this.legendPosition = width < 768 ? 'bottom' : 'top';
   }
 
   private setDrilldownLevelData(): { text: string; value: number }[] {

examples-standalone/personal-finance-app/src/app/components/analytics/analytics.component.html

@@ -7,7 +7,6 @@ import { MessageService } from '@progress/kendo-angular-l10n';
   standalone: true,
   imports: [],
   templateUrl: './footer.component.html',
-  styleUrl: './footer.component.css',
 })
 export class FooterComponent {
   public currentYear = new Date().getFullYear();

examples-standalone/personal-finance-app/src/app/components/analytics/analytics.component.ts

@@ -38,6 +38,12 @@ export class HeaderComponent {
   public suggestions: string[] = searchSuggestionsEn;
   public selectedLanguage = { locale: 'English', localeId: 'en-US' };
   public customMsgService: CustomMessagesService;
+  public translations: Array<{ locale: string; localeId: string }> = [
+    { locale: 'English', localeId: 'en-US' },
+    { locale: 'Español', localeId: 'es-ES' },
+    { locale: 'Deutsch', localeId: 'de-DE' },
+    { locale: 'Français', localeId: 'fr-FR' },
+  ];
 
   constructor(
     public messages: MessageService,
@@ -58,13 +64,6 @@ export class HeaderComponent {
     });
   }
 
-  public translations: Array<{ locale: string; localeId: string }> = [
-    { locale: 'English', localeId: 'en-US' },
-    { locale: 'Español', localeId: 'es-ES' },
-    { locale: 'Deutsch', localeId: 'de-DE' },
-    { locale: 'Français', localeId: 'fr-FR' },
-  ];
-
   public changeLanguage(item: any): void {
     this.selectedLanguage = item;
     this.customMsgService.language = item.localeId;

examples-standalone/personal-finance-app/src/app/components/footer/footer.component.css

@@ -18,16 +18,14 @@ import { MessageService } from '@progress/kendo-angular-l10n';
 })
 export class CardTripleViewComponent {
   @Input() public cardData!: OverviewCard;
-
   public customMsgService: CustomMessagesService;
-
-  constructor(public intl: IntlService, public msgService: MessageService) {
-    this.customMsgService = this.msgService as CustomMessagesService;
-  }
-
   public customCurrencyOptions: NumberFormatOptions = {
     style: 'currency',
     currencyDisplay: 'code',
     currency: 'USD',
   };
+
+  constructor(public intl: IntlService, public msgService: MessageService) {
+    this.customMsgService = this.msgService as CustomMessagesService;
+  }
 }

examples-standalone/personal-finance-app/src/app/components/footer/footer.component.ts

@@ -1,14 +1,11 @@
 <div class="k-px-15 k-px-sm-15 k-px-md-15 k-px-lg-15 k-px-xl-15 k-py-2 k-py-sm-1 k-py-md-1 k-py-lg-2 k-py-xl-2 k-pt-8">
   <h4 class="k-h4 !k-mb-6 k-text-ellipsis">{{customMsgService.translate('overview')}}</h4>
   <div class="k-d-grid k-grid-cols-12 k-gap-4 k-gap-lg-6 k-overflow-hidden">
-    <!-- CMPCTCARD-2 Start -->
     @for(card of overviewCards; track card){
     <app-card-triple-view
       class="k-col-span-12 k-col-span-md-12 k-col-span-lg-4 k-col-span-xl-4 k-d-flex k-flex-col k-flex-basis-0 k-flex-grow k-bg-surface-alt k-align-items-start k-justify-content-center k-px-4 k-py-4 k-gap-2 k-rounded-xxl"
       [cardData]="card"></app-card-triple-view>
     }
-    <!-- CMPCTCARD-2 End -->
-    <!-- DASHBRDCARD-11 Start -->
     <div
       class="k-col-span-12 k-col-span-xl-6 k-d-flex k-flex-col k-flex-basis-0 k-flex-grow k-bg-surface-alt k-rounded-xxl k-gap-4 k-p-4">
       <div class="k-d-flex k-d-flex-col k-justify-content-between k-align-items-start k-gap-0">
@@ -22,8 +19,6 @@ <h6 class="k-h6 k-font-medium">{{customMsgService.translate('savings')}}</h6>
         }
       </div>
     </div>
-    <!-- DASHBRDCARD-11 End -->
-    <!-- DASHBRDCARD-11 Start -->
     <div
       class="k-col-span-12 k-col-span-xl-6 k-d-flex k-flex-col k-flex-basis-0 k-flex-grow k-bg-surface-alt k-rounded-xxl k-gap-4 k-p-4">
       <div class="k-d-flex k-d-flex-col k-justify-content-between k-align-items-start k-gap-0">
@@ -51,7 +46,6 @@ <h6 class="k-h6 k-font-medium">{{customMsgService.translate('budgetUtilization')
         </div>
       </div>
     </div>
-    <!-- DASHBRDCARD-11 End -->
     <div
       class="k-col-span-12 k-col-span-xl-12 k-d-flex k-flex-col k-flex-basis-0 k-flex-grow k-bg-surface-alt k-rounded-xxl k-gap-4 k-p-4 k-mb-4">
       <div class="k-d-flex k-d-flex-col k-justify-content-between k-align-items-start k-gap-0">