feat(core/reports): xlsreport chart options

gnucoop · Nov 7, 2023 · 02e3c77 · 02e3c77
1 parent 5d04351
commit 02e3c77
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 22 deletions.
diff --git a/projects/core/chart/src/chart.ts b/projects/core/chart/src/chart.ts
@@ -38,7 +38,6 @@ import {
   ChartData,
   ChartLegendLabelItem,
   ChartOptions,
-  ChartPoint,
   ChartSize,
   ChartTooltipItem,
   ChartTooltipModel,
@@ -69,7 +68,6 @@ export class AjfChartComponent implements AfterViewInit, OnChanges {
 
   private _chart: Chart | null = null;
   private _chartCanvasElement: HTMLCanvasElement | null = null;
-  private _chartTypesNeedPoints: ExtendedChartType[] = ['scatter', 'bubble'];
 
   constructor(private _el: ElementRef, private _renderer: Renderer2) {}
 
@@ -93,23 +91,14 @@ export class AjfChartComponent implements AfterViewInit, OnChanges {
     }
   }
 
-  private _fixData(chartType: ExtendedChartType, data: ChartData): ChartData {
+  private _fixData(data: ChartData): ChartData {
     const newData: ChartData = deepCopy(data);
     let maxPointsNum = 0;
     (newData.datasets || []).forEach(dataset => {
       if (dataset.label == null) {
         dataset.label = '';
       }
       maxPointsNum = Math.max(maxPointsNum, (dataset.data || []).length);
-      const datasetType = dataset.type != null ? <ExtendedChartType>dataset.type : chartType;
-      if (this._chartTypesNeedPoints.indexOf(datasetType) > -1) {
-        dataset.data = (<any[]>(dataset.data || [])).map((d, idx) => {
-          if (typeof d === 'number') {
-            return <any>{x: idx, y: d, r: d};
-          }
-          return <ChartPoint>d;
-        });
-      }
     });
     const labels = newData.labels || [];
     if (maxPointsNum > 0 && labels.length < maxPointsNum) {
@@ -168,15 +157,15 @@ export class AjfChartComponent implements AfterViewInit, OnChanges {
         const ctx = this._chartCanvasElement!.getContext('2d') as CanvasRenderingContext2D;
         this._chart = new Chart(ctx, {
           type: this.chartType,
-          data: this._fixData(this.chartType, this.data),
+          data: this._fixData(this.data),
           options: this._fixChartOptions(this.options),
         });
       }
     }
   }
 
   private _fixChartOptions(chartOptions: ChartOptions | undefined): ChartOptions {
-    const options = deepCopy(chartOptions || {}) || {};
+    const options = deepCopy(chartOptions || {});
     if (options.legendCallback) {
       const legendCallback = (
         typeof options.legendCallback === 'string'

diff --git a/projects/core/reports/src/xls-report/xls-report.ts b/projects/core/reports/src/xls-report/xls-report.ts
@@ -23,7 +23,6 @@
 import {AjfFormula, createFormula} from '@ajf/core/models';
 import {deepCopy} from '@ajf/core/utils';
 import {HttpClient} from '@angular/common/http';
-import {ChartColor} from 'chart.js';
 import {forkJoin, Observable, of} from 'rxjs';
 import {map} from 'rxjs/operators';
 import * as XLSX from 'xlsx';
@@ -38,7 +37,6 @@ import {AjfWidgetCreate, createWidget} from '../utils/widgets/create-widget';
 import {AjfWidgetType} from '../interface/widgets/widget-type';
 import {AjfTableDataset} from '../interface/dataset/table-dataset';
 import {AjfChartDataset} from '../interface/dataset/chart-dataset';
-import {AjfChartDatasetOptions} from '../interface/dataset/chart-dataset-options';
 import {AjfChartType} from '../interface/charts/chart-type';
 import {AjfWidget} from '../interface/widgets/widget';
 import {AjfReport} from '../interface/reports/report';
@@ -193,7 +191,7 @@ function _buildChart(name: string, sheet: {[key: string]: string}[]): AjfWidget
     alertAndThrow('Empty sheet for chart ' + name);
   }
   const data = sheet[0];
-  const optionsNames = ['chartType', 'title'];
+  const optionsNames = ['chartType', 'title', 'stacked', 'beginAtZeroX', 'beginAtZeroY'];
   const options: {[key: string]: string} = {};
   for (const name of optionsNames) {
     if (data[name] != null) {
@@ -260,10 +258,13 @@ function _buildChart(name: string, sheet: {[key: string]: string}[]): AjfWidget
 
     const multipleColors = type === AjfChartType.Pie ||
       type === AjfChartType.PolarArea || type === AjfChartType.Doughnut;
-    const backColor = multipleColors ? backgroundColor : backgroundColor[index];
-    const datasetOptions: AjfChartDatasetOptions = {
-      backgroundColor: backColor as ChartColor,
-    };
+    const color = multipleColors ? backgroundColor : backgroundColor[index];
+    const datasetOptions: any = {backgroundColor: color, tension: 0};
+    if (type === AjfChartType.Line && !options['stacked']) {
+      datasetOptions.backgroundColor = 'transparent';
+      datasetOptions.borderColor = color;
+      datasetOptions.pointBackgroundColor = color;
+    }
     dataset.push({
       ...createDataset({
         aggregation: {aggregation: 0},
@@ -288,10 +289,19 @@ function _buildChart(name: string, sheet: {[key: string]: string}[]): AjfWidget
         display: true,
         text: options['title'] || '',
       },
+      scales: {
+        xAxes: [{
+          ticks: {beginAtZero: options['beginAtZeroX']},
+        }],
+        yAxes: [{
+          stacked: options['stacked'],
+          ticks: {beginAtZero: options['stacked'] || options['beginAtZeroY']},
+        }],
+      },
     },
     styles: {
       ...widgetStyle,
-      ...{width: '100%', height: '100%', padding: '20px'},
+      ...{width: '100%', height: '400px', padding: '10px'},
     },
     exportable: true,
   } as AjfWidgetCreate);