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

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,16 +22,45 @@
     ></x-markdown>
   </x-card>
 
-  <!-- Component -->
+  <!-- Simple Sample -->
-  <x-chart
+  <!-- <x-chart
     class="v-card"
-    [type]="'bar'"
+    [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,8 +1,19 @@
-import { Component, ViewChild } from '@angular/core';
+import {
-import { isNullOrEmptyString } from 'x-framework-core';
+  XChartOptions,
+  XChartSeriesType,
+  XChartActionBarItem,
+  XActionBarActionFiredModel,
+  XChartAvailableActionBarItem,
+  XChartType,
+  XChartAnnotations,
+  XChartTextAlign,
+  XChartXAxis,
+  XChartYAxis,
+} from 'x-framework-components';
+import { Component } from '@angular/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';
-import { XChartOptions, XChartSeriesType } from 'x-framework-components';
 
 @Component({
   selector: 'app-chart',
@@ -17,6 +28,49 @@ export class ChartPage extends VPageComponent {
   toolbarTitle = this.resourceProvider(this.titleRes);
   toolbarSubTitle = this.resourceProvider(AppResourceIDs.form_description);
 
+  //
+  availableActionBarItems: Array<XChartAvailableActionBarItem> = [
+    {
+      actionId: XChartActionBarItem.Pan,
+    },
+    {
+      actionId: XChartActionBarItem.ZoomIn,
+    },
+    {
+      actionId: XChartActionBarItem.ZoomOut,
+    },
+    {
+      actionId: XChartActionBarItem.ZoomSelection,
+    },
+    {
+      actionId: XChartActionBarItem.ToggleFullScreen,
+    },
+    {
+      actionId: XChartActionBarItem.Print,
+    },
+    {
+      actionId: XChartActionBarItem.ExportAsCSV,
+    },
+    {
+      actionId: XChartActionBarItem.ExportAsPNG,
+    },
+    {
+      actionId: XChartActionBarItem.ExportAsSVG,
+    },
+    {
+      actionId: XChartActionBarItem.XSelection,
+    },
+    {
+      actionId: XChartActionBarItem.YSelection,
+    },
+    {
+      actionId: XChartActionBarItem.XYSelection,
+    },
+    {
+      actionId: XChartActionBarItem.ResetChart,
+    },
+  ];
+
   readonly contentFa = `
   # ${this.toolbarTitle}
 
@@ -63,13 +117,14 @@ export class ChartPage extends VPageComponent {
     },
   ];
 
+  //
+  chartTitle = 'نمودار فروش ماهانه';
+
   //
   chartOptions: XChartOptions = {
     chart: {
-      type: 'line',
       height: 350,
       fontFamily: 'Vazirmatn, sans-serif', // فونت فارسی
-      toolbar: { show: true },
     },
     xaxis: {
       categories: [
@@ -94,6 +149,376 @@ export class ChartPage extends VPageComponent {
     tooltip: { theme: 'dark' },
     dataLabels: { enabled: false },
   };
+
+  //
+  //#region Chart Samples ...
+
+  //
+  //#region Sample 1 ...
+  // Title: Basic Line Chart
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/basic-line/
+  sample1_options = {
+    series: [
+      {
+        name: 'Sign-ups',
+        data: [210, 380, 340, 520, 480, 610, 700, 880, 820, 1040, 1180, 1520],
+      },
+    ],
+    chart: {
+      height: 350,
+      type: 'line',
+      zoom: {
+        enabled: false,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      curve: 'straight',
+    },
+    title: {
+      text: 'New Sign-ups by Month',
+      align: 'left',
+    },
+    xaxis: {
+      categories: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+      ],
+    },
+  };
+  //#endregion
+
+  //
+  //#region Sample 2 ...
+  // Title: Line with Data Labels
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/line-with-data-labels/
+  sample2_options = {
+    series: [
+      {
+        name: 'High - 2025',
+        data: [28, 29, 33, 36, 32, 32, 33],
+      },
+      {
+        name: 'Low - 2025',
+        data: [12, 11, 14, 18, 17, 13, 13],
+      },
+    ],
+    chart: {
+      height: 350,
+      type: 'line',
+      dropShadow: {
+        enabled: true,
+        color: '#000',
+        top: 18,
+        left: 7,
+        blur: 10,
+        opacity: 0.2,
+      },
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    // colors: ['#77B6EA', '#545454'],
+    dataLabels: {
+      enabled: true,
+    },
+    stroke: {
+      curve: 'smooth',
+    },
+    title: {
+      text: 'Average High & Low Temperature',
+      align: 'left',
+    },
+    markers: {
+      size: 1,
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      title: {
+        text: 'Month',
+      },
+    },
+    yaxis: {
+      title: {
+        text: 'Temperature (°C)',
+      },
+      min: 5,
+      max: 40,
+    },
+    legend: {
+      position: 'top',
+      horizontalAlign: 'right',
+      floating: true,
+      offsetY: -25,
+      offsetX: -5,
+    },
+  };
+  //#endregion
+
+  //
+  //#region Sample 3 ...
+  // Title: Zoomable Timeseries
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/
+  //#endregion
+
+  //
+  //#region Sample 4 ...
+  // Title: Line with Annotations
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/line-with-annotations/
+  //#endregion
+
+  //
+  //#region Sample 5 ...
+  // Title: Annotations with Tooltips
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/line-charts/line-with-annotation-tooltips/
+  //#endregion
+
+  //
+  //#region Sample 6 ...
+  // Title: Basic Candlestick
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/candlestick-charts/basic/
+  //#endregion
+
+  //
+  //#region Sample 7 ...
+  // Title: Candlestick + Bar
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/candlestick-charts/candlestick-bar/
+  //#endregion
+
+  //
+  //#region Sample 8 ...
+  // Title: Candlestick + Line
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/candlestick-charts/candlestick-line/
+  //#endregion
+
+  //
+  //#region Sample 9 ...
+  // Title: Slope Multi Group
+  // Description:
+  // Url: https://apexcharts.com/javascript-chart-demos/slope-charts/multi-group/
+  //#endregion
+
+  //
+  //#region Sample 10 ...
+  // Title: Color Scale
+  // Description:
+  // 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
 
   //
@@ -139,5 +564,10 @@ export class ChartPage extends VPageComponent {
     //   dissmissable: true,
     // });
   }
+
+  async handleActionBarActionFired(event: XActionBarActionFiredModel) {
+    //
+    console.log('actionBar Fired: ', event.action);
+  }
   //#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;