Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-4596: update license view

Browse Source
This commit is contained in:
Dan Percic 2022-07-12 18:21:32 +03:00
parent 10292071b0
commit 3a0bff7ae9
5 changed files with 25 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.html
View File

@ -7,6 +7,7 @@
[legendOptions]="legendOptions"
[showLegend]="legend"
[view]="[width + legendSpacing, height]"
xmlns:svg="http://www.w3.org/2000/svg"
>
<svg:g [attr.transform]="transform" class="bar-chart chart">
<svg:g
@ -62,6 +63,7 @@
ngx-combo-charts-series-vertical
></svg:g>
</svg:g>
<svg:g [attr.transform]="transform" class="line-chart chart">
<svg:g>
<svg:g *ngFor="let series of lineChart; trackBy: trackBy">
@ -76,7 +78,7 @@
[xScale]="xScaleLine"
[yScale]="yScaleLine"
ngx-charts-line-series
/>
></svg:g>
</svg:g>
<svg:g
@ -90,7 +92,7 @@
[xSet]="xSet"
[yScale]="yScaleLine"
ngx-charts-tooltip-area
/>
></svg:g>
<svg:g *ngFor="let series of lineChart">
<svg:g
@ -105,7 +107,7 @@
[xScale]="xScaleLine"
[yScale]="yScaleLine"
ngx-charts-circle-series
/>
></svg:g>
</svg:g>
</svg:g>
</svg:g>

34
apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.ts
View File

@ -1,14 +1,4 @@
import {
Component,
ContentChild,
EventEmitter,
HostListener,
Input,
Output,
TemplateRef,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import { Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';
import { curveLinear } from 'd3-shape';
import { scaleBand, scaleLinear, scalePoint, scaleTime } from 'd3-scale';
@ -18,12 +8,12 @@ import {
Color,
ColorHelper,
LegendPosition,
LineSeriesComponent,
Orientation,
ScaleType,
Series,
StringOrNumberOrDate,
ViewDimensions,
} from '@swimlane/ngx-charts';
import { ILineChartSeries } from './models';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
@ -55,7 +45,7 @@ export class ComboChartComponent extends BaseChartComponent {
@Input() roundDomains = false;
@Input() colorSchemeLine: Color;
@Input() autoScale;
@Input() lineChart: ILineChartSeries[];
@Input() lineChart: Series[];
@Input() yLeftAxisScaleFactor: any;
@Input() yRightAxisScaleFactor: any;
@Input() rangeFillOpacity: number;
@ -63,9 +53,6 @@ export class ComboChartComponent extends BaseChartComponent {
@Input() noBarWhenZero = true;
@Output() activate = new EventEmitter<{ value; entries: unknown[] }>();
@Output() deactivate = new EventEmitter<{ value; entries: unknown[] }>();
@ContentChild('tooltipTemplate') tooltipTemplate: TemplateRef<unknown>;
@ContentChild('seriesTooltipTemplate') seriesTooltipTemplate: TemplateRef<unknown>;
@ViewChild(LineSeriesComponent) lineSeriesComponent: LineSeriesComponent;
dims: ViewDimensions;
xScale: any;
yScale: any;
@ -84,7 +71,7 @@ export class ComboChartComponent extends BaseChartComponent {
xDomainLine;
yDomainLine;
seriesDomain;
combinedSeries: ILineChartSeries[];
combinedSeries: Series[];
xSet;
filteredDomain;
hoveredVertical;
@ -205,7 +192,7 @@ export class ComboChartComponent extends BaseChartComponent {
}
getXDomainLine(): any[] {
let values: number[] = [];
let values: StringOrNumberOrDate[] = [];
for (const results of this.lineChart) {
for (const d of results.series) {
@ -219,13 +206,13 @@ export class ComboChartComponent extends BaseChartComponent {
let domain = [];
if (this.scaleType === 'time') {
const min = Math.min(...values);
const max = Math.max(...values);
const min = Math.min(...(values as number[]));
const max = Math.max(...(values as number[]));
domain = [min, max];
} else if (this.scaleType === 'linear') {
values = values.map(v => Number(v));
const min = Math.min(...values);
const max = Math.max(...values);
const min = Math.min(...(values as number[]));
const max = Math.max(...(values as number[]));
domain = [min, max];
} else {
domain = values;
@ -292,7 +279,6 @@ export class ComboChartComponent extends BaseChartComponent {
getYScaleLine(domain, height): any {
const scale = scaleLinear().range([height, 0]).domain(domain);
return this.roundDomains ? scale.nice() : scale;
}

11
apps/red-ui/src/app/modules/admin/screens/license/combo-chart/models.ts
View File

@ -1,11 +0,0 @@
export interface ISeries {
name: number;
value: number;
min: number;
max: number;
}
export interface ILineChartSeries {
name: string;
series: ISeries[];
}

16
apps/red-ui/src/app/modules/admin/screens/license/license-chart/license-chart.component.ts
View File

@ -2,13 +2,13 @@ import { Component } from '@angular/core';
import { ComboBarScheme, LICENSE_STORAGE_KEY, LineChartScheme } from '../utils/constants';
import dayjs from 'dayjs';
import { IDateRange, ILicense, ILicenseReport } from '@red/domain';
import { LicenseService } from '../../../../../services/license.service';
import { LicenseService } from '@services/license.service';
import { switchMap, tap } from 'rxjs/operators';
import { List, LoadingService } from '@iqser/common-ui';
import { generateDateRanges, isCurrentMonth, toDate, verboseDate } from '../utils/functions';
import { TranslateService } from '@ngx-translate/core';
import { ILineChartSeries } from '../combo-chart/models';
import { Observable } from 'rxjs';
import { Series } from '@swimlane/ngx-charts';
@Component({
selector: 'redaction-license-chart',
@ -18,7 +18,7 @@ export class LicenseChartComponent {
readonly lineChartScheme = LineChartScheme;
readonly comboBarScheme = ComboBarScheme;
lineChartSeries$ = this.#licenseChartSeries$;
readonly lineChartSeries$ = this.#licenseChartSeries$;
barChart = [];
constructor(
@ -27,7 +27,7 @@ export class LicenseChartComponent {
private readonly _loadingService: LoadingService,
) {}
get #licenseChartSeries$(): Observable<ILineChartSeries[]> {
get #licenseChartSeries$(): Observable<Series[]> {
return this._licenseService.selectedLicense$.pipe(
tap(() => this._loadingService.start()),
switchMap(license => this.#getLicenseData(license)),
@ -35,7 +35,7 @@ export class LicenseChartComponent {
);
}
async #getLicenseData(license: ILicense): Promise<ILineChartSeries[]> {
async #getLicenseData(license: ILicense): Promise<Series[]> {
const startDate = dayjs(license.validFrom);
const endDate = dayjs(license.validUntil);
const startMonth: number = startDate.month();
@ -47,7 +47,7 @@ export class LicenseChartComponent {
return this.#mapRangesToReports(startMonth, startYear, dateRanges, reports);
}
#mapRangesToReports(month: number, year: number, dateRanges: List<IDateRange>, reports: List<ILicenseReport>): ILineChartSeries[] {
#mapRangesToReports(month: number, year: number, dateRanges: List<IDateRange>, reports: List<ILicenseReport>): Series[] {
return [
{
name: this._translateService.instant('license-info-screen.chart.total-pages'),
@ -120,9 +120,11 @@ export class LicenseChartComponent {
}
#totalLicensedPagesSeries(dateRanges: List<IDateRange>) {
const processingPages = this._licenseService.processingPages;
return dateRanges.map(dateRange => ({
name: verboseDate(dateRange),
value: this._licenseService.processingPages,
value: processingPages,
}));
}
}

2
apps/red-ui/src/app/modules/admin/screens/license/license-select/license-select.component.ts
View File

@ -1,5 +1,5 @@
import { Component, EventEmitter, Output } from '@angular/core';
import { LicenseService } from '../../../../../services/license.service';
import { LicenseService } from '@services/license.service';
import { ILicense } from '@red/domain';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { map, tap } from 'rxjs/operators';