Web SDK documentation
  1. Components
  2. ChartsComponent

File

echart/charts.component.ts

Implements

OnChanges OnInit OnDestroy

Metadata

providers { provide: NGX_ECHARTS_CONFIG, useFactory: () => ({ echarts: () => import() }) } 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
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(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
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: AlarmDetailsExtended | EventDetailsExtended)

Toggles the visibility of a series in the chart based on the provided alarm or event.

Parameters :
Name Type Optional Description
alarmOrEvent AlarmDetailsExtended | EventDetailsExtended 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.

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

Properties

activeDatapoints
Type : DatapointsGraphKPIDetails[]
Default value : []
alarms
Type : IAlarm[]
Default value : []
chart
Type : ElementRef
Decorators :
@ViewChild('chart')
CHART_VIEW_CONTEXT
Default value : CHART_VIEW_CONTEXT
chartOption$
Type : Observable<EChartsOption>
echartsInstance
Type : ECharts
events
Type : IEvent[]
Default value : []
showLoadMore
Default value : false
sliderZoomUsed
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>

  <div
    class="chart-load-more"
    *ngIf="showLoadMore"
  >
    <button
      class="btn btn-primary btn-block"
      (click)="loadMoreData()"
    >
      <i c8yIcon="restore"></i>
      {{ 'Load more' | translate }}
    </button>
  </div>

  <div
    class="e-charts--aggregated-datapoint"
    *ngIf="
      activeDatapoints.length > 1 &&
      config?.showSlider &&
      chartViewContext !== CHART_VIEW_CONTEXT.WIDGET_VIEW
    "
  >
    <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 ""