Web SDK documentation
  1. Components
  2. ChartsComponent

File

echart/charts.component.ts

Implements

OnChanges OnInit OnDestroy

Metadata

providers ) ChartRealtimeService MeasurementRealtimeService AlarmRealtimeService EventRealtimeService ChartTypesService EchartsOptionsService YAxisService AlarmSeverityToIconPipe AlarmSeverityToLabelPipe
selector c8y-charts
standalone true
imports CommonModule CoreModule NgxEchartsModule TooltipModule PopoverModule ChartAlertsComponent AlarmsModule SelectAggregatedDatapointComponent
templateUrl ./charts.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()

Inputs

alerts
Type : DynamicComponentAlertAggregator
chartViewContext
Type : CHART_VIEW_CONTEXT
config
Type : DatapointsGraphWidgetConfig

Outputs

configChangeOnZoomOut
Type : EventEmitter
datapointOutOfSync
Type : EventEmitter
finishLoading
Type : EventEmitter
isMarkedAreaEnabled
Type : EventEmitter
timeRangeChangeOnRealtime
Type : EventEmitter
updateActiveDatapoints
Type : EventEmitter
updateAggregatedSliderDatapoint
Type : EventEmitter
updateAlarmsAndEvents
Type : EventEmitter

Methods

debounce
debounce(func: T, wait: number)
Type parameters :
  • T
Parameters :
Name Type Optional
func T No
wait number No
Returns : void
hasMarkArea
hasMarkArea(options: any)
Parameters :
Name Type Optional
options any No
Returns : boolean
isAlarmOrEventClick
isAlarmOrEventClick(params: any)
Parameters :
Name Type Optional
params any No
Returns : boolean
loadMoreData
loadMoreData()
Returns : void
ngOnChanges
ngOnChanges()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onChartClick
onChartClick(params: literal type)
Parameters :
Name Type Optional
params literal type No
Returns : void
onChartInit
onChartInit(ec: ECharts)
Parameters :
Name Type Optional
ec ECharts No
Returns : void
saveAsImage
saveAsImage()
Returns : void
toggleAlarmEventSeriesVisibility
toggleAlarmEventSeriesVisibility(alarmOrEvent: AlarmOrEventExtended)

Toggles the visibility of alarm/event series in the chart. Uses explicit legendSelect/legendUnSelect based on __hidden state. Targets specific device's series using type + deviceId.

Parameters :
Name Type Optional Description
alarmOrEvent AlarmOrEventExtended No
  • The alarm or event to toggle visibility for.
Returns : void
toggleDatapointSeriesVisibility
toggleDatapointSeriesVisibility(datapoint: DatapointsGraphKPIDetails)

Toggles the visibility of a series in the chart based on the provided datapoint. Uses explicit legendSelect/legendUnSelect based on __active state.

Parameters :
Name Type Optional Description
datapoint DatapointsGraphKPIDetails No
  • The datapoint to toggle visibility for.
Returns : void

Properties

activeDatapoints
Type : DatapointsGraphKPIDetails[]
Default value : []
Readonly AGGREGATION_INTERVAL_MAP
Type : Record<aggregationType | string>
Default value : { [aggregationType.MINUTELY]: '1m', [aggregationType.HOURLY]: '60m', [aggregationType.DAILY]: '1d' }
alarms
Type : IAlarm[]
Default value : []
chart
Type : ElementRef
Decorators :
@ViewChild('chart')
CHART_VIEW_CONTEXT
Type : unknown
Default value : CHART_VIEW_CONTEXT
chartOption$
Type : Observable<EChartsOption>
echartsInstance
Type : ECharts
events
Type : IEvent[]
Default value : []
isFetching
Type : unknown
Default value : false

Internal flag to track when chart data is being fetched
showLoadMore
Type : unknown
Default value : false 
<div class="p-relative fit-h chart-container">
  <div
    class="fit-w fit-h"
    #chart
    echarts
    [options]="chartOption$ | async"
    (chartInit)="onChartInit($event)"
  ></div>

  <c8y-chart-alerts [alerts]="alerts"></c8y-chart-alerts>

  @if (showLoadMore) {
    <div class="chart-load-more">
      <button
        class="btn btn-primary btn-block"
        [disabled]="isFetching"
        (click)="loadMoreData()"
      >
        <i c8yIcon="restore"></i>
        {{ 'Load more' | translate }}
      </button>
    </div>
  }

  @if (
    activeDatapoints.length > 1 &&
    config?.showSlider &&
    chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW
  ) {
    <div class="e-charts--aggregated-datapoint">
      <c8y-select-aggregated-datapoint
        [value]="config?.aggregatedDatapoint || activeDatapoints[0]"
        (valueChange)="updateAggregatedSliderDatapoint.emit($event)"
        [activeDatapoints]="activeDatapoints"
      ></c8y-select-aggregated-datapoint>
    </div>
  }
</div>

results matching ""

    No results matching ""