From 13e7a02b374ccb7053c3d81a4fbceb33e76e2af5 Mon Sep 17 00:00:00 2001
From: Hadi Khazaee Asl <hadi_khazaee_asl@yahoo.com>
Date: Fri, 28 Aug 2026 21:01:54 +0330
Subject: [PATCH] last woks fo x-chart component testing ...

---
 angular.json                                  |  4 ++--
 package.json                                  |  2 ++
 polyfill-webpack.config.js                    | 14 +++++++++++++
 .../pages/components/chart/chart.page.html    |  4 ++++
 src/app/pages/components/chart/chart.page.ts  | 20 ++++++++++++++-----
 5 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 polyfill-webpack.config.js

diff --git a/angular.json b/angular.json
index 8945d8f..5efafdb 100644
--- a/angular.json
+++ b/angular.json
@@ -18,7 +18,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "outputPath": "www",
             "index": "src/index.html",
@@ -149,4 +149,4 @@
       "styleext": "scss"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 978f631..9230ca0 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "^12.1.1",
     "@angular-devkit/build-angular": "~12.1.3",
     "@angular/cdk": "^12.1.3",
     "@angular/cli": "~12.1.3",
@@ -106,6 +107,7 @@
     "ng-packagr": "^12.1.2",
     "ngx-device-detector": "^2.1.1",
     "ngx-markdown": "^12.0.1",
+    "node-polyfill-webpack-plugin": "^1.1.4",
     "ol": "^6.6.1",
     "shx": "^0.3.3",
     "typescript": "~4.3.5",
diff --git a/polyfill-webpack.config.js b/polyfill-webpack.config.js
new file mode 100644
index 0000000..64ed11a
--- /dev/null
+++ b/polyfill-webpack.config.js
@@ -0,0 +1,14 @@
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
+
+module.exports = {
+  plugins: [
+    new NodePolyfillPlugin({
+      excludeAliases: ["console"]
+    })
+  ],
+  resolve: {
+    fallback: {
+        fs: false,
+    }
+  }
+};
\ No newline at end of file
diff --git a/src/app/pages/components/chart/chart.page.html b/src/app/pages/components/chart/chart.page.html
index 7c56b7d..3847cd6 100644
--- a/src/app/pages/components/chart/chart.page.html
+++ b/src/app/pages/components/chart/chart.page.html
@@ -27,12 +27,16 @@
     class="v-card"
     [type]="'line'"
     [isInPage]="true"
+    [title]="chartTitle"
     [cardTitle]="'Chart'"
     [wrapWithCard]="true"
     [showActionBar]="true"
     [series]="chartSeries"
+    [subTitleAlign]="'start'"
+    [subTitle]="'Sub Title'"
     [options]="chartOptions"
     (chartRendered)="onChartReady()"
+    [gridColor]="ColorNames.LightShade"
     [availableActionBarItems]="availableActionBarItems"
     (actionBarActionFired)="handleActionBarActionFired($event)"
   >
diff --git a/src/app/pages/components/chart/chart.page.ts b/src/app/pages/components/chart/chart.page.ts
index a454fd9..9b142b0 100644
--- a/src/app/pages/components/chart/chart.page.ts
+++ b/src/app/pages/components/chart/chart.page.ts
@@ -6,7 +6,13 @@ import {
   XActionBarActionFiredModel,
 } from 'x-framework-components';
 import { Component } from '@angular/core';
-import { isNullOrEmptyString } from 'x-framework-core';
+import {
+  getXColorCssVariableName,
+  getXColorValue,
+  isNullOrEmptyString,
+  parseXColor,
+  XColorWithBrightness,
+} from 'x-framework-core';
 import { VPageComponent } from '../../../views/v-page/v-page.component';
 import { AppResourceIDs } from 'src/app/config/app.localization.config';
 
@@ -112,6 +118,9 @@ export class ChartPage extends VPageComponent {
     },
   ];
 
+  //
+  chartTitle = 'نمودار فروش ماهانه';
+
   //
   chartOptions: XChartOptions = {
     chart: {
@@ -227,7 +236,7 @@ export class ChartPage extends VPageComponent {
         show: false,
       },
     },
-    colors: ['#77B6EA', '#545454'],
+    // colors: ['#77B6EA', '#545454'],
     dataLabels: {
       enabled: true,
     },
@@ -238,9 +247,6 @@ export class ChartPage extends VPageComponent {
       text: 'Average High & Low Temperature',
       align: 'left',
     },
-    grid: {
-      borderColor: '#e7e7e7',
-    },
     markers: {
       size: 1,
     },
@@ -327,6 +333,10 @@ export class ChartPage extends VPageComponent {
 
   //#endregion
 
+  //
+  //#region LifeCycles ...
+  //#endregion
+
   //
   //#region UI Providers ...
   /**