diff --git a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.html b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.html
deleted file mode 100644
index b21969ad9..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.scss b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.ts
index 43aaad22d..5aa4f2d24 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/google-chart.component.ts
@@ -1,36 +1,43 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { ChartType } from 'angular-google-charts';
+import { ChartType, Column, Row } from 'angular-google-charts';
import { TranslateService } from '@ngx-translate/core';
-import { GoogleChartData } from './models';
+import ComboChartOptions = google.visualization.ComboChartOptions;
@Component({
selector: 'redaction-google-chart',
- templateUrl: './google-chart.component.html',
- styleUrls: ['./google-chart.component.scss'],
+ template: ` `,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GoogleChartComponent {
- @Input() data: GoogleChartData;
+ @Input() data: Row[];
- readonly options = {
- fontName: 'Inter',
- fontSize: 13,
- vAxis: {
- title: this._translateService.instant('license-info-screen.chart.pages-per-month'),
- },
- seriesType: 'bars',
- vAxes: {
- 1: {
- title: this._translateService.instant('license-info-screen.chart.total-pages'),
- },
- },
- series: { 1: { type: 'line', targetAxisIndex: 1 }, 2: { type: 'line', targetAxisIndex: 1 } },
- colors: ['#0389ec', '#dd4d50', '#5ce594'],
- legend: { position: 'top' },
- };
+ readonly options: ComboChartOptions;
+ readonly columns: Column[];
readonly type = ChartType.ComboChart;
- readonly width = 1000;
- readonly height = 300;
- constructor(private readonly _translateService: TranslateService) {}
+ constructor(translateService: TranslateService) {
+ const pagesPerMonth = translateService.instant('license-info-screen.chart.pages-per-month');
+ const totalPages = translateService.instant('license-info-screen.chart.total-pages');
+ const cumulative = translateService.instant('license-info-screen.chart.cumulative');
+
+ this.options = {
+ fontName: 'Inter',
+ fontSize: 13,
+ vAxis: { title: pagesPerMonth },
+ seriesType: 'bars',
+ vAxes: { 1: { title: totalPages } },
+ series: { 1: { type: 'line', targetAxisIndex: 1 }, 2: { type: 'line', targetAxisIndex: 1 } },
+ colors: ['#0389ec', '#dd4d50', '#5ce594'],
+ legend: { position: 'top' },
+ };
+
+ this.columns = ['abc', pagesPerMonth, totalPages, cumulative];
+ }
}
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/models.ts b/apps/red-ui/src/app/modules/admin/screens/license/google-chart/models.ts
deleted file mode 100644
index f0bd08dfb..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/license/google-chart/models.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type GoogleChartData = [string, number, number, number][];
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.html b/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.html
deleted file mode 100644
index 495e9e2c0..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.scss b/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.ts
index 4729044e3..7be6657de 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.ts
@@ -6,16 +6,13 @@ import { LicenseService } from '../services/license.service';
import { IDateRange } from '../utils/date-range';
import { ILicense } from '../utils/license';
import { switchMap, tap } from 'rxjs/operators';
-import { LoadingService } from '@iqser/common-ui';
-import { generateDateRanges, isCurrentMonth, toDate } from '../utils/functions';
-import { GoogleChartData } from '../google-chart/models';
-
-const monthNames = dayjs.monthsShort();
+import { List, LoadingService } from '@iqser/common-ui';
+import { generateDateRanges, isCurrentMonth, toDate, verboseDate } from '../utils/functions';
+import { Row } from 'angular-google-charts';
@Component({
selector: 'redaction-license-chart',
- templateUrl: './license-chart.component.html',
- styleUrls: ['./license-chart.component.scss'],
+ template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LicenseChartComponent {
@@ -26,12 +23,12 @@ export class LicenseChartComponent {
get #chartData$() {
return this._licenseService.selectedLicense$.pipe(
tap(() => this._loadingService.start()),
- switchMap(license => this.#chartData(license)),
+ switchMap(license => this.#getLicenseData(license)),
tap(() => this._loadingService.stop()),
);
}
- async #chartData(license: ILicense): Promise {
+ async #getLicenseData(license: ILicense): Promise {
const startDate = dayjs(license.validFrom);
const endDate = dayjs(license.validUntil);
const startMonth: number = startDate.month();
@@ -40,31 +37,36 @@ export class LicenseChartComponent {
const dateRanges = generateDateRanges(startMonth, startYear, endDate.month() as number, endDate.year() as number);
const reports = await this.#getReports(dateRanges);
+ return this.#mapRangesToReports(dateRanges, reports);
+ }
+
+ #mapRangesToReports(dateRanges: List, reports: List): Row[] {
let cumulativePages = 0;
+ const processingPages = this._licenseService.processingPages;
return dateRanges.map((range, index) => [
- `${monthNames[range.startMonth]} ${range.startYear}`,
+ verboseDate(range),
reports[index].numberOfAnalyzedPages,
- this._licenseService.totalLicensedNumberOfPages,
+ processingPages,
(cumulativePages += reports[index].numberOfAnalyzedPages),
]);
}
- #getReports(dateRanges: IDateRange[]) {
- const reports = dateRanges.map(dateRange => {
- const startMonth = dateRange.startMonth + 1;
- const endMonth = dateRange.endMonth + 1;
+ #getReports(dateRanges: List) {
+ const reports = dateRanges.map(range => {
+ const startMonth = range.startMonth + 1;
+ const endMonth = range.endMonth + 1;
- const key = `${startMonth}.${dateRange.startYear}-${endMonth}.${dateRange.endYear}`;
+ const key = `${startMonth}.${range.startYear}-${endMonth}.${range.endYear}`;
const existingReport = this._licenseService.storedReports[key];
if (existingReport) {
return existingReport;
}
- const startDate = toDate(startMonth, dateRange.startYear);
- const endDate = toDate(endMonth, dateRange.endYear);
+ const startDate = toDate(startMonth, range.startYear);
+ const endDate = toDate(endMonth, range.endYear);
const requestedReport = this._licenseService.getReport({ startDate, endDate });
- return requestedReport.then(report => this.#storeReportIfNotCurrentMonth(dateRange, report, key));
+ return requestedReport.then(report => this.#storeReportIfNotCurrentMonth(range, report, key));
});
return Promise.all(reports);
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
index 262cd147b..1d749b7c5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
@@ -30,7 +30,7 @@ export class LicenseScreenComponent implements OnInit {
totalInfo: ILicenseReport = {};
unlicensedInfo: ILicenseReport = {};
analysisPercentageOfLicense = 100;
- totalLicensedNumberOfPages = this.licenseService.totalLicensedNumberOfPages;
+ totalLicensedNumberOfPages = this.licenseService.processingPages;
constructor(
readonly configService: ConfigService,
@@ -89,7 +89,7 @@ export class LicenseScreenComponent implements OnInit {
}
licenseChanged(license: ILicense) {
- this.totalLicensedNumberOfPages = this.licenseService.totalLicensedNumberOfPages;
+ this.totalLicensedNumberOfPages = this.licenseService.processingPages;
return this.loadLicenseData(license);
}
}
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/services/license.service.ts b/apps/red-ui/src/app/modules/admin/screens/license/services/license.service.ts
index 2984ef327..047497f4e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/services/license.service.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/services/license.service.ts
@@ -22,7 +22,7 @@ export class LicenseService extends GenericService {
return this.selectedLicense$.value;
}
- get totalLicensedNumberOfPages() {
+ get processingPages() {
const processingPagesFeature = this.selectedLicense$.value.features.find(f => f.name === 'processingPages');
return Number(processingPagesFeature.value ?? '0');
}
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/utils/functions.ts b/apps/red-ui/src/app/modules/admin/screens/license/utils/functions.ts
index 4e445c7ae..ea346cb6c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/utils/functions.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/utils/functions.ts
@@ -39,3 +39,7 @@ export function isCurrentMonth(month: number, year: number) {
return month === currentMonth && year === currentYear;
}
+
+const monthNames = dayjs.monthsShort();
+
+export const verboseDate = (range: IDateRange) => `${monthNames[range.startMonth]} ${range.startYear}`;
diff --git a/package.json b/package.json
index ab1ba1d10..b95d9b7f1 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
"@nrwl/jest": "13.9.5",
"@nrwl/linter": "13.9.5",
"@nrwl/workspace": "13.9.5",
+ "@types/google.visualization": "^0.0.68",
"@types/jest": "27.4.1",
"@types/lodash-es": "^4.17.6",
"@types/node": "17.0.23",
diff --git a/yarn.lock b/yarn.lock
index f8b12fb0f..19ce5dcba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2298,6 +2298,11 @@
resolved "https://registry.yarnpkg.com/@types/google.visualization/-/google.visualization-0.0.58.tgz#eb2aa3cf05d63a9b42ff5cfcab1fc0594fb45a0e"
integrity sha512-ldwrhRvqSlrCYjHELGZNNMP8m5oPLBb6iU7CfKF2C/YpgRTlHihqsrL5M293u0GL7mKfjm0AjSIgEE2LU8fuTw==
+"@types/google.visualization@^0.0.68":
+ version "0.0.68"
+ resolved "https://registry.yarnpkg.com/@types/google.visualization/-/google.visualization-0.0.68.tgz#773e908c02e08dffe689844f0972dd481516e704"
+ integrity sha512-LkLniL1TYykhz+ZdRof3Bi8cp1OhqoK11Tj1RM2bPtGVBNexQ0eRnOrOWcWTdi80Sz9DzJ4JIG2rTlSJBVV58w==
+
"@types/graceful-fs@^4.1.2":
version "4.1.5"
resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"