Skip to content

Commit

Permalink
MTM-58884 Added new legend and all-around fixes.
Browse files Browse the repository at this point in the history
  • Loading branch information
Enio Sultan committed May 16, 2024
1 parent 034c3a3 commit 9fbab27
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 93 deletions.
11 changes: 2 additions & 9 deletions src/datapoints-graph/charts/charts.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,6 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy {
this.echartsInstance?.clear();
return of(null);
}
if (this.echartsInstance) {
this.echartsInstance.on('click', this.onChartClick.bind(this));
}
return of(this.getChartOptions(datapointsWithValues));
}),
tap(() => {
Expand All @@ -124,15 +121,11 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy {
this.configChangedSubject.next();
}

async ngOnInit() {
ngOnInit() {
this.alerts.setAlertGroupDismissStrategy(
'warning',
DismissAlertStrategy.TEMPORARY_OR_PERMANENT
);

if (this.echartsInstance) {
this.echartsInstance.on('click', this.onChartClick.bind(this));
}
}

ngOnDestroy() {
Expand All @@ -154,6 +147,7 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy {
this.chartRealtimeService.stopRealtime();
}
});
this.echartsInstance.on('click', this.onChartClick.bind(this));
}

onChartClick(params) {
Expand Down Expand Up @@ -370,7 +364,6 @@ export class ChartsComponent implements OnChanges, OnInit, OnDestroy {
datapointsWithValues: DatapointWithValues[]
): EChartsOption {
const timeRange = this.getTimeRange();

return this.echartsOptionsService.getChartOptions(
datapointsWithValues,
timeRange,
Expand Down
100 changes: 23 additions & 77 deletions src/datapoints-graph/charts/echarts-options.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ export class EchartsOptionsService {
const yAxis = this.yAxisService.getYAxis(datapointsWithValues, {
showSplitLines: showSplitLines.YAxis,
});
const eventTypes = events.map((event) => event.type);
const alarmTypes = alarms.map((alarm) => alarm.type);
const leftAxis = yAxis.filter((yx) => yx.position === 'left');
const gridLeft = leftAxis.length
? leftAxis.length * this.yAxisService.Y_AXIS_OFFSET
Expand Down Expand Up @@ -79,32 +77,11 @@ export class EchartsOptionsService {
snap: true,
},
backgroundColor: 'rgba(255, 255, 255, 0.9)',
formatter: this.getTooltipFormatter(events),
formatter: this.getTooltipFormatter(),
appendToBody: true,
},
legend: {
show: true,
// as data display eventTypes and alarmTypes, we need to display them in legend
data: [
...eventTypes.map((eventType) => ({
name: eventType,
icon: ICONS_MAP.EVENT,
itemStyle: {
color: events.find((event) => event.type === eventType).color,
},
})),
...alarmTypes.map((alarmType) => ({
name: alarmType,
icon: ICONS_MAP.ALARM,
itemStyle: {
color: alarms.find((alarm) => alarm.type === alarmType).color,
},
})),
],
itemHeight: 16,
textStyle: {
fontSize: 10,
},
show: false,
},
xAxis: {
min: timeRange.dateFrom,
Expand Down Expand Up @@ -166,15 +143,17 @@ export class EchartsOptionsService {
dp: any,
renderType: DatapointChartRenderType,
isMinMaxChart = false,
alarms: IEvent[] = [],
alarms: any = [],
alarmId?: string
): SeriesOption[] {
if (!alarms?.length) {
return [];
}

const alarmsByType = alarms.reduce((grouped, alarm) => {
(grouped[alarm.type] = grouped[alarm.type] || []).push(alarm);
if (!alarm.__hidden) {
(grouped[alarm.type] = grouped[alarm.type] || []).push(alarm);
}
return grouped;
}, {});

Expand All @@ -189,6 +168,11 @@ export class EchartsOptionsService {
null,
'markLineFlag',
]),
tooltip: {
formatter: (params) => {
return 'TEEEEEEEEST';
},
},
markPoint: {
showSymbol: true,
data: alarmsOfType.reduce((acc, alarm) => {
Expand Down Expand Up @@ -361,7 +345,9 @@ export class EchartsOptionsService {
}

const eventsByType = events.reduce((grouped, event) => {
(grouped[event.type] = grouped[event.type] || []).push(event);
if (!event.__hidden) {
(grouped[event.type] = grouped[event.type] || []).push(event);
}
return grouped;
}, {});

Expand Down Expand Up @@ -464,15 +450,12 @@ export class EchartsOptionsService {
};
}

private getTooltipFormatter(
events?: IEvent[]
): TooltipFormatterCallback<TopLevelFormatterParams> {
private getTooltipFormatter(): TooltipFormatterCallback<TopLevelFormatterParams> {
return (params) => {
const XAxisValue: string = params[0].data[0];
const markedLineHovered = params[0].data[2] === 'markLineFlag';
const YAxisReadings: string[] = [];
const allSeries = this.echartsInstance.getOption()
.series as SeriesOption[];
let allSeries = this.echartsInstance.getOption().series as SeriesOption[];

Check failure on line 457 in src/datapoints-graph/charts/echarts-options.service.ts

View workflow job for this annotation

GitHub Actions / Cypress tests 

'allSeries' is never reassigned. Use 'const' instead

allSeries.forEach((series: any) => {
let value: string;
if (series.id.endsWith('/min')) {
Expand Down Expand Up @@ -507,49 +490,12 @@ export class EchartsOptionsService {
if (!seriesValue) {
return;
}

if (seriesValue[1] !== null) {
value =
seriesValue[1]?.toString() +
(series.datapointUnit ? ` ${series.datapointUnit}` : '') +
`<div style="font-size: 11px">${this.datePipe.transform(
seriesValue[0]
)}</div>`;
}

if (series.markLine && markedLineHovered) {
// Get the markLine data for the current XAxisValue
const markLineData = series.markLine.data.find(
(d) => d.xAxis === XAxisValue
);
if (markLineData && events.length > 0) {
const event = events?.reduce((closestEvent, currentEvent) => {
const currentDifference = Math.abs(
new Date(currentEvent.creationTime).getTime() -
new Date(XAxisValue).getTime()
);
const closestDifference = Math.abs(
new Date(closestEvent.creationTime).getTime() -
new Date(XAxisValue).getTime()
);
return currentDifference < closestDifference
? currentEvent
: closestEvent;
});

if (event && series.id.includes(event.source.id)) {
// Add the event information to the value
value = `<div style="font-size: 11px">Event Time: ${event.time}</div>`;
value += `<div style="font-size: 11px">Event Type: ${event.type}</div>`;
value += `<div style="font-size: 11px">Event Text: ${event.text}</div>`;
value += `<div style="font-size: 11px">Event Last Updated: ${event.lastUpdated}</div>`;
}

return YAxisReadings.push(value);
}
} else if (series.markLine) {
return;
}
value =
seriesValue[1]?.toString() +
(series.datapointUnit ? ` ${series.datapointUnit}` : '') +
`<div style="font-size: 11px">${this.datePipe.transform(
seriesValue[0]
)}</div>`;
}

YAxisReadings.push(
Expand Down
1 change: 0 additions & 1 deletion src/datapoints-graph/datapoints-graph-view/chart-alarms.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
} from '@c8y/client';
import { ApiService } from '@c8y/ngx-components/api';
import { Alarm } from '../model';
import { Observable, from } from 'rxjs';

@Injectable()
export class ChartAlarmsService extends AlarmService {
Expand Down
1 change: 0 additions & 1 deletion src/datapoints-graph/datapoints-graph-view/chart-events.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
} from '@c8y/client';
import { ApiService } from '@c8y/ngx-components/api';
import { Event } from '../model';
import { Observable, from } from 'rxjs';

@Injectable()
export class ChartEventsService extends EventService {
Expand Down
82 changes: 82 additions & 0 deletions src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,88 @@
</div>
</div>
</div>
<div class="flex-grow p-t-8 d-flex a-i-start gap-8 inner-scroll p-b-4">
<div
class="c8y-datapoint-pill"
*ngFor="let alarm of alarms"
title="{{ alarm.type }} "
>
<button
type="button"
title="{{ alarm.type }} "
class="c8y-datapoint-pill__btn"
(click)="toggleAlarmEventType(alarm)"
>
<i
[c8yIcon]="
alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'
"
class="icon-14"
></i>
</button>
<div
class="c8y-datapoint-pill__label"
style="padding-top: 3px; padding-bottom: 2px"
>
<i
c8yIcon="circle"
class="m-r-4 icon-14"
[ngStyle]="{
color: alarm.color
}"
></i>
<span
class="text-truncate"
[ngClass]="{ 'text-muted': alarm.__hidden }"
>
<span class="text-truncate">
{{ alarm.type }}
</span>
</span>
</div>
</div>
</div>
<div class="flex-grow p-t-8 d-flex a-i-start gap-8 inner-scroll p-b-4">
<div
class="c8y-datapoint-pill"
*ngFor="let event of events"
title="{{ event.type }} "
>
<button
type="button"
title="{{ event.type }} "
class="c8y-datapoint-pill__btn"
(click)="toggleAlarmEventType(event)"
>
<i
[c8yIcon]="
event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'
"
class="icon-14"
></i>
</button>
<div
class="c8y-datapoint-pill__label"
style="padding-top: 3px; padding-bottom: 2px"
>
<i
c8yIcon="circle"
class="m-r-4 icon-14"
[ngStyle]="{
color: event.color
}"
></i>
<span
class="text-truncate"
[ngClass]="{ 'text-muted': event.__hidden }"
>
<span class="text-truncate">
{{ event.type }}
</span>
</span>
</div>
</div>
</div>
</div>

<c8y-charts
Expand Down
27 changes: 22 additions & 5 deletions src/datapoints-graph/datapoints-graph-view/datapoints-graph-widget-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export class DatapointsGraphWidgetViewComponent
{
events: IEvent[] = [];
alarms: IAlarm[] = [];
filteredAlarms: IAlarm[] = [];
filteredEvents: IEvent[] = [];
AGGREGATION_ICONS = AGGREGATION_ICONS;
AGGREGATION_TEXTS = AGGREGATION_TEXTS;
alerts: DynamicComponentAlertAggregator;
Expand Down Expand Up @@ -65,7 +67,9 @@ export class DatapointsGraphWidgetViewComponent
this.initForm();
this.timeControlsFormGroup.valueChanges
.pipe(takeUntil(this.destroy$))
.subscribe((value) => {
.subscribe(async (value) => {
this.alarms = await this.loadAlarms(value);
this.events = await this.loadEvents(value);
this.displayConfig = { ...this.displayConfig, ...value };
});
}
Expand Down Expand Up @@ -115,6 +119,19 @@ export class DatapointsGraphWidgetViewComponent
this.datapointsOutOfSync.set(dpMatch, true);
}

toggleAlarmEventType(AlarmOrEvent: IAlarm | IEvent) {
const alarms = this.alarms;
const typeToHide = AlarmOrEvent.type;

for (const alarm of alarms) {
if (alarm.type === typeToHide) {
alarm.__hidden = !alarm.__hidden;
}
}

this.displayConfig = { ...this.displayConfig };
}

private initForm(): void {
this.timeControlsFormGroup = this.formBuilder.group({
dateFrom: [null, [Validators.required]],
Expand All @@ -129,8 +146,8 @@ export class DatapointsGraphWidgetViewComponent

private loadEvents(timeRange): Promise<any> {
const formattedTimeRange = {
dateFrom: timeRange.dateFrom.toISOString(),
dateTo: timeRange.dateTo.toISOString(),
dateFrom: new Date(timeRange.dateFrom).toISOString(),
dateTo: new Date(timeRange.dateTo).toISOString(),
};
return this.eventsService.listEvents$(formattedTimeRange, [
{
Expand All @@ -153,8 +170,8 @@ export class DatapointsGraphWidgetViewComponent

private loadAlarms(timeRange): Promise<any> {
const formattedTimeRange = {
dateFrom: timeRange.dateFrom.toISOString(),
dateTo: timeRange.dateTo.toISOString(),
dateFrom: new Date(timeRange.dateFrom).toISOString(),
dateTo: new Date(timeRange.dateTo).toISOString(),
};
return this.alarmsService.listAlarms$(formattedTimeRange, [
{
Expand Down

0 comments on commit 9fbab27

Please sign in to comment.