last ...

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"
     }
   }
-}
+}

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",

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,
+    }
+  }
+};

src/app/pages/components/chart/chart.page.html

@@ -22,19 +22,45 @@
     ></x-markdown>
   </x-card>
 
-  <!-- Component -->
-  <x-chart
+  <!-- Simple Sample -->
+  <!-- <x-chart
     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)"
   >
+  </x-chart> -->
+
+  <!-- Annotation Sample -->
+  <x-chart
+    class="v-card"
+    [isInPage]="true"
+    [wrapWithCard]="true"
+    [showActionBar]="true"
+    [type]="annSampleChartType"
+    [xAxis]="annSampleChartXAxis"
+    [yAxis]="annSampleChartYAxis"
+    [title]="annSampleChartTitle"
+    [series]="annSampleChartSeries"
+    (chartRendered)="onChartReady()"
+    [cardTitle]="annSampleChartTitle"
+    [gridColor]="ColorNames.LightShade"
+    [titleAlign]="annSampleChartTitleAlign"
+    [availableActionBarItems]="availableActionBarItems"
+    (actionBarActionFired)="handleActionBarActionFired($event)"
+    >
+    <!-- [annotations]="annSampleChartAnnotations" -->
   </x-chart>
+
 </v-page>

src/app/pages/components/chart/chart.page.ts

@@ -1,12 +1,17 @@
 import {
   XChartOptions,
   XChartSeriesType,
-  XChartAvailableActionBarItem,
   XChartActionBarItem,
   XActionBarActionFiredModel,
+  XChartAvailableActionBarItem,
+  XChartType,
+  XChartAnnotations,
+  XChartTextAlign,
+  XChartXAxis,
+  XChartYAxis,
 } from 'x-framework-components';
 import { Component } from '@angular/core';
-import { isNullOrEmptyString } from 'x-framework-core';
+import { isNullOrEmptyString, XOneOrManyType } from 'x-framework-core';
 import { VPageComponent } from '../../../views/v-page/v-page.component';
 import { AppResourceIDs } from 'src/app/config/app.localization.config';
 
@@ -61,6 +66,9 @@ export class ChartPage extends VPageComponent {
     {
       actionId: XChartActionBarItem.XYSelection,
     },
+    {
+      actionId: XChartActionBarItem.ResetChart,
+    },
   ];
 
   readonly contentFa = `
@@ -109,6 +117,9 @@ export class ChartPage extends VPageComponent {
     },
   ];
 
+  //
+  chartTitle = 'نمودار فروش ماهانه';
+
   //
   chartOptions: XChartOptions = {
     chart: {
@@ -224,7 +235,7 @@ export class ChartPage extends VPageComponent {
         show: false,
       },
     },
-    colors: ['#77B6EA', '#545454'],
+    // colors: ['#77B6EA', '#545454'],
     dataLabels: {
       enabled: true,
     },
@@ -235,9 +246,6 @@ export class ChartPage extends VPageComponent {
       text: 'Average High & Low Temperature',
       align: 'left',
     },
-    grid: {
-      borderColor: '#e7e7e7',
-    },
     markers: {
       size: 1,
     },
@@ -320,8 +328,197 @@ export class ChartPage extends VPageComponent {
   // Url: https://apexcharts.com/javascript-chart-demos/treemap-charts/color-scale/
   //#endregion
 
+  //
+  //#region Annotations Sample ....
+  annSampleChartType = XChartType.Line;
+  annSampleChartSeries: XChartSeriesType = [
+    {
+      name: 'فروش ماهانه',
+      data: [45, 52, 38, 65, 72, 85, 92, 88, 95, 102, 115, 125]
+    }
+  ];
+  annSampleChartAnnotations: XChartAnnotations = {
+    // خطوط افقی (محدوده‌های هدف)
+    yaxis: [
+      {
+        // خط هدف فروش
+        y: 100,
+        borderColor: '#00E396',
+        borderWidth: 2,
+        label: {
+          borderColor: '#00E396',
+          style: {
+            color: '#fff',
+            background: '#00E396',
+            fontSize: '12px',
+            fontWeight: 'bold'
+          },
+          text: 'هدف فروش: 100 میلیون'
+        }
+      },
+      {
+        // خط هشدار
+        y: 50,
+        borderColor: '#FF4560',
+        borderWidth: 2,
+        strokeDashArray: 5,
+        label: {
+          borderColor: '#FF4560',
+          style: {
+            color: '#fff',
+            background: '#FF4560',
+            fontSize: '12px'
+          },
+          text: 'حداقل فروش: 50 میلیون'
+        }
+      }
+    ],
+
+    // خطوط عمودی (رویدادهای خاص)
+    xaxis: [
+      {
+        // رویداد مهم: شروع کمپین تبلیغاتی
+        x: new Date('2024-04-01').getTime(),
+        borderColor: '#775DD0',
+        borderWidth: 2,
+        strokeDashArray: 0,
+        label: {
+          borderColor: '#775DD0',
+          style: {
+            color: '#fff',
+            background: '#775DD0',
+            fontSize: '11px',
+            fontWeight: 'bold'
+          },
+          orientation: 'horizontal',
+          text: 'شروع کمپین تبلیغاتی'
+        }
+      },
+      {
+        // محدوده زمانی خاص (جشنواره)
+        x: new Date('2024-07-01').getTime(),
+        x2: new Date('2024-07-15').getTime(),
+        fillColor: '#FEB019',
+        opacity: 0.2,
+        label: {
+          borderColor: '#FEB019',
+          style: {
+            color: '#FEB019',
+            background: '#FEB019',
+            fontSize: '11px'
+          },
+          text: 'جشنواره تابستانی'
+        }
+      },
+      {
+        // رویداد: پایان سال مالی
+        x: new Date('2024-12-31').getTime(),
+        borderColor: '#FF4560',
+        borderWidth: 3,
+        strokeDashArray: 5,
+        label: {
+          borderColor: '#FF4560',
+          style: {
+            color: '#fff',
+            background: '#FF4560',
+            fontSize: '11px',
+            fontWeight: 'bold'
+          },
+          orientation: 'horizontal',
+          text: 'پایان سال مالی'
+        }
+      }
+    ],
+
+    // نقاط مهم (Points)
+    points: [
+      {
+        // بیشترین فروش
+        x: new Date('2024-12-01').getTime(),
+        y: 125,
+        marker: {
+          size: 10,
+          fillColor: '#00E396',
+          strokeColor: '#00E396',
+          strokeWidth: 3
+        },
+        label: {
+          borderColor: '#00E396',
+          style: {
+            color: '#fff',
+            background: '#00E396',
+            fontSize: '11px',
+            fontWeight: 'bold'
+          },
+          text: 'بیشترین فروش: 125 میلیون',
+          orientation: 'horizontal'
+        }
+      },
+      {
+        // کمترین فروش
+        x: new Date('2024-03-01').getTime(),
+        y: 38,
+        marker: {
+          size: 10,
+          fillColor: '#FF4560',
+          strokeColor: '#FF4560',
+          strokeWidth: 3
+        },
+        label: {
+          borderColor: '#FF4560',
+          style: {
+            color: '#fff',
+            background: '#FF4560',
+            fontSize: '11px',
+            fontWeight: 'bold'
+          },
+          text: 'کمترین فروش: 38 میلیون',
+          orientation: 'horizontal'
+        }
+      }
+    ],
+
+    // متن‌های سفارشی
+    texts: [
+      {
+        x: 95,
+        y: 95,
+        text: 'رشد 180% در سال',
+        textAnchor: 'end',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        foreColor: '#00E396'
+      }
+    ]
+  };
+  annSampleChartXAxis: XChartXAxis = {
+    type: 'datetime',
+    labels: {
+      datetimeUTC: false
+    }
+  };
+  annSampleChartYAxis: XOneOrManyType<XChartYAxis> = [
+    {
+      title: {
+        text: 'مبلغ (میلیون تومان)'
+      },
+      labels: {
+        formatter: (val) => `${val}M`
+      }
+    }
+  ];
+  annSampleChartTitleAlign = XChartTextAlign.Center;
+  annSampleChartTitle = 'نمودار فروش سالانه با رویدادهای مهم';
+  annSampleChartStroke = {
+    curve: 'smooth',
+    width: 3
+  };
+  //#endregion
+  //#endregion
   //#endregion
 
+  //
+  //#region LifeCycles ...
   //#endregion
 
   //

src/theme/theme.scss

@@ -116,7 +116,7 @@ body {
   // white-space: pre;
   word-spacing: normal;
   word-break: normal;
-  background-color: black;
+  background-color: inherit;
 
   //
   overflow: hidden;