@c8y/ngx-components/fesm2022/c8y-ngx-components-echart.mjs.map

Angular modules for Cumulocity IoT applications

{"version":3,"file":"c8y-ngx-components-echart.mjs","sources":["../../echart/models/datapoints-graph-widget.model.ts","../../echart/models/chart.model.ts","../../echart/models/svg-icons.model.ts","../../echart/services/y-axis.service.ts","../../echart/services/chart-types.service.ts","../../echart/services/echarts-options.service.ts","../../echart/services/chart-realtime.service.ts","../../echart/chart-alerts/chart-alerts.component.ts","../../echart/chart-alerts/chart-alerts.component.html","../../echart/services/chart-events.service.ts","../../echart/services/chart-alarms.service.ts","../../echart/services/chart-helpers.service.ts","../../echart/select-aggregated-datapoint/select-aggregated-datapoint.component.ts","../../echart/select-aggregated-datapoint/select-aggregated-datapoint.component.html","../../echart/charts.component.ts","../../echart/charts.component.html","../../echart/c8y-ngx-components-echart.ts"],"sourcesContent":["import {\n  AXIS_TYPES,\n  CHART_LINE_TYPES,\n  CHART_RENDER_TYPES,\n  KPIDetails\n} from '@c8y/ngx-components/datapoint-selector';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { aggregationType, AlarmStatusType, IMeasurement, ISeries, Severity } from '@c8y/client';\nimport type { BarSeriesOption, LineSeriesOption, ScatterSeriesOption } from 'echarts';\nimport { AlarmDetails, EventDetails } from '@c8y/ngx-components/alarm-event-selector';\nimport { TooltipFormatterCallback } from 'echarts/types/src/util/types';\nimport { TopLevelFormatterParams } from 'echarts/types/src/component/tooltip/TooltipModel';\nimport {\n  DateTimeContext,\n  GlobalContextDisplayMode,\n  RefreshOption,\n  TimeInterval\n} from '@c8y/ngx-components/global-context';\n\nexport type DatapointsGraphKPIDetails = KPIDetails & {\n  lineType?: DatapointLineType;\n  renderType?: DatapointChartRenderType;\n};\n\nexport type DatapointsGraphWidgetConfig = {\n  activeAlarmTypesOutOfRange?: string[];\n  aggregatedDatapoint?: DatapointsGraphKPIDetails;\n  alarmsEventsConfigs?: AlarmOrEventExtended[];\n  datapoints?: DatapointsGraphKPIDetails[] | null;\n  dataPointLegendDisplay?: string | null;\n  date?: DateTimeContext;\n  dateFrom?: Date | string | null;\n  dateTo?: Date | string | null;\n  displayAggregationSelection?: boolean | null;\n  displayDateSelection?: boolean | null;\n  displayMarkedLine?: boolean;\n  displayMarkedPoint?: boolean;\n  mergeMatchingDatapoints?: boolean;\n  forceMergeDatapoints?: boolean;\n  realtime?: boolean | null;\n  showLabelAndUnit?: boolean;\n  showSlider?: boolean | null;\n  sliderChange?: boolean | null;\n  xAxisSplitLines?: boolean | null;\n  yAxisSplitLines?: boolean | null;\n  interval?: TimeInterval;\n  dateTimeContext?: DateTimeContext;\n  aggregation?: aggregationType | null;\n  refreshOption?: RefreshOption;\n  isAutoRefreshEnabled?: boolean;\n  isRealtimeEnabled?: boolean;\n  displayMode?: GlobalContextDisplayMode;\n  refreshInterval?: number;\n  numberOfDecimalPlaces?: number;\n};\n\nexport type GraphDisplayOptions = {\n  displayMarkedLine: boolean;\n  displayMarkedPoint: boolean;\n  mergeMatchingDatapoints: boolean;\n  forceMergeDatapoints: boolean;\n  showLabelAndUnit: boolean;\n  showSlider: boolean;\n  showOnlyAlarmsOrEvents?: boolean;\n  numberOfDecimalPlaces?: number;\n  sliderPositionMode?: 'compact' | 'default';\n};\n\nexport type AlarmDetailsExtended = AlarmDetails & {\n  __hidden?: boolean;\n  __severity?: SeverityType[];\n  __status?: AlarmStatusType[];\n};\n\nexport type EventDetailsExtended = EventDetails & {\n  __hidden?: boolean;\n};\n\n/**\n * @description: Extended AlarmOrEvent type which includes properties from the incoming alarms/events. This interface can be used when the expected data can be either events or alarms.\n */\nexport type AlarmOrEventExtended = AlarmDetailsExtended | EventDetailsExtended;\n\nexport type DatapointsGraphWidgetTimeProps = Partial<\n  Pick<DatapointsGraphWidgetConfig, 'interval' | 'dateFrom' | 'dateTo' | 'aggregation' | 'realtime'>\n>;\n\nexport enum DATE_SELECTION_EXTENDED {\n  CONFIG = 'config',\n  DASHBOARD_CONTEXT = 'dashboard_context'\n}\n\ntype DatapointApiValues = ISeries['values'];\nexport interface DpWithValues extends DatapointsGraphKPIDetails {\n  values: DatapointApiValues;\n}\n\ntype DataPointValues = {\n  min: number;\n  max: number;\n};\nexport type DpValuesItem = {\n  time: number;\n  values: DataPointValues[];\n};\n\nexport interface LegendDisplayOptionItem {\n  value: string;\n  label: string;\n}\n\nexport const LEGEND_DISPLAY_OPTIONS: LegendDisplayOptionItem[] = [\n  { value: 'auto', label: gettext('Auto') },\n  { value: 'dropdown', label: gettext('Show in dropdown as list') },\n  { value: 'legend', label: gettext('Show in legend') }\n];\n\nexport interface MarkPointData {\n  coord: [string, number | DataPointValues | null];\n  name: string;\n  itemType: string;\n  itemStyle: { color: string };\n  symbol?: string; // Symbol to display for the mark point (reference to ICONS_MAP)\n  symbolSize?: number;\n}\n\nexport interface MarkLineData {\n  xAxis: string | undefined;\n  itemType: string;\n  label: {\n    show: boolean;\n    formatter: TooltipFormatterCallback<TopLevelFormatterParams> | string;\n  };\n  itemStyle: { color: string };\n}\n\nexport interface TimeContextProps {\n  temporaryUserSelectedFromDate?: string;\n  temporaryUserSelectedToDate?: string;\n  currentDateContextFromDate?: string;\n  currentDateContextToDate?: string;\n  realtime?: boolean;\n  currentDateContextInterval?: 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'custom';\n  aggregation?: aggregationType | null;\n}\n\nexport type DatapointLineType = (typeof CHART_LINE_TYPES)[number]['val'];\nexport type EchartsSeriesOptions = LineSeriesOption | ScatterSeriesOption | BarSeriesOption;\n\nexport type DatapointAxisType = (typeof AXIS_TYPES)[number]['val'];\n\nexport type DatapointChartRenderType = (typeof CHART_RENDER_TYPES)[number]['val'];\n\nexport const REALTIME_TEXTS = {\n  ACTIVE: gettext('Realtime active'),\n  INACTIVE: gettext('Realtime inactive')\n} as const;\n\nexport const PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH = {\n  EVENTS: {\n    DATA_EXPLORER_AND_GRAPH: 'data-explorer-and-graph'\n  },\n  COMPONENTS: {\n    DATA_EXPLORER_DETAILS: 'data-explorer-details'\n  },\n  ACTIONS: {\n    DATA_EXPLORER_CONFIG_INIT: 'data-explorer-config-init',\n    DATA_EXPLORER_CONFIG_CHANGE: 'data-explorer-config-change',\n    DATA_GRAPH_WIDGET_CONFIG: 'data-graph-widget-config'\n  }\n};\n\nexport type DateString = string;\nexport type SeriesValue = [DateString, number];\n\nexport type DatapointRealtimeMeasurements = {\n  measurement: IMeasurement;\n  datapoint: DatapointsGraphKPIDetails;\n};\n\nexport type YAxisOptions = {\n  showSplitLines: boolean;\n  mergeMatchingDatapoints: boolean;\n  forceMergeDatapoints: boolean;\n  showLabelAndUnit: boolean;\n};\n\nexport interface SeriesDatapointInfo {\n  datapointId?: string;\n  datapointLabel?: string;\n  datapointUnit?: string;\n}\n\nexport const SEVERITY_LABELS = {\n  CRITICAL: gettext('Critical`alarm`') as 'CRITICAL',\n  MAJOR: gettext('Major`alarm`') as 'MAJOR',\n  MINOR: gettext('Minor`alarm`') as 'MINOR',\n  WARNING: gettext('Warning`alarm`') as 'WARNING'\n} as const;\n\nexport type SeverityType = keyof typeof Severity;\n\nexport interface SelectableDatapoint {\n  type: 'ALARM' | 'DATAPOINT' | 'EVENT';\n  original: KPIDetails | AlarmDetailsExtended | EventDetailsExtended;\n}\n","import { ECBasicOption, TooltipFormatterCallback } from 'echarts/types/src/util/types';\nimport { MarkLineData, MarkPointData, SeriesValue } from './datapoints-graph-widget.model';\nimport { TopLevelFormatterParams } from 'echarts/types/src/component/tooltip/TooltipModel';\n\n/**\n * @param typeOfSeries is used for formatter to distinguish between events/alarms series\n * @param isDpTemplateSelected is used to distinguish if the series have a specific dp template selected. E.g. for case when a device has 2 measurements and 2 series are created for each measurement\n * @param id is used to distinguish between series\n * @param data is used to store the data for the series\n * @param itemStyle is used to set the color of the series\n */\ninterface ModifiedCustomSeriesOptions extends echarts.EChartsOption {\n  typeOfSeries?: 'alarm' | 'event' | null;\n  isDpTemplateSelected?: boolean;\n  id: string;\n  data: SeriesValue[];\n  itemStyle: { color: string };\n}\n\nexport interface customSeriesMarkLineData {\n  data: MarkLineData[];\n}\n\nexport interface customSeriesMarkPointData {\n  data: MarkPointData[];\n}\n\nexport type CustomSeriesOptions = Omit<ModifiedCustomSeriesOptions, 'tooltip'>;\nexport interface EchartsCustomOptions extends ECBasicOption {\n  tooltip: {\n    formatter: TooltipFormatterCallback<TopLevelFormatterParams> | string;\n  }[];\n}\n\nexport interface MeasurementSeries {\n  min: number | null;\n  max: number | null;\n}\n\nexport enum CHART_VIEW_CONTEXT {\n  WIDGET_VIEW = 'widget_view',\n  WIDGET_CONFIG = 'widget_config',\n  DATAPOINT_EXPLORER = 'datapoint_explorer'\n}\n","enum ICONS {\n  ALARM = 'path://M18.375 15.8462L20.4423 17.9135V18.9231H4V17.9135L6.06731 15.8462V10.75C6.06731 9.14744 6.47596 7.75321 7.29327 6.56731C8.11058 5.38141 9.24038 4.61218 10.6827 4.25962V3.53846C10.6827 3.12179 10.8269 2.76122 11.1154 2.45673C11.4038 2.15224 11.7724 2 12.2212 2C12.6699 2 13.0385 2.15224 13.3269 2.45673C13.6154 2.76122 13.7596 3.12179 13.7596 3.53846V4.25962C15.2019 4.61218 16.3317 5.38141 17.149 6.56731C17.9663 7.75321 18.375 9.14744 18.375 10.75V15.8462ZM12.2212 22C11.6442 22 11.1554 21.8077 10.7548 21.4231C10.3542 21.0385 10.1538 20.5577 10.1538 19.9808H14.2885C14.2885 20.5256 14.0801 20.9984 13.6635 21.399C13.2468 21.7997 12.766 22 12.2212 22Z',\n  EVENT = 'path://M97.3013 63L128.939 95.1315C79.296 134.335 47.7653 191.526 47.7653 255.276C47.7653 319.027 79.296 376.218 128.917 415.421L97.28 447.574C37.76 400.552 0 331.93 0 255.276C0 178.622 37.76 110.001 97.3013 63ZM414.72 63C474.24 110.001 512 178.622 512 255.276C512 331.93 474.24 400.552 414.72 447.574L383.083 415.421C432.704 376.218 464.235 319.027 464.235 255.276C464.235 191.526 432.704 134.335 383.083 95.1315L414.72 63ZM160.405 127.092L192 159.181C162.24 182.681 143.317 217.013 143.317 255.276C143.317 293.539 162.219 327.871 192 351.372L160.405 383.461C120.725 352.119 95.552 306.379 95.552 255.276C95.552 204.174 120.725 158.433 160.405 127.092ZM351.595 127.092C391.296 158.433 416.448 204.174 416.448 255.276C416.448 306.379 391.275 352.119 351.595 383.461L320 351.372C349.781 327.871 368.683 293.539 368.683 255.276C368.683 217.013 349.781 182.703 320 159.181L351.595 127.092ZM256 192.722C291.505 192.722 320.287 221.504 320.287 257.009C320.287 292.514 291.505 321.296 256 321.296C220.495 321.296 191.713 292.514 191.713 257.009C191.713 221.504 220.495 192.722 256 192.722Z',\n  ACKNOWLEDGED = 'path://M10.4795 2H13.4807V4.18054C14.1215 4.35248 14.7155 4.61821 15.2626 4.97773C15.8097 5.35287 16.2864 5.79836 16.6928 6.31419C17.0993 6.81438 17.4119 7.3771 17.6307 8.00234C17.8652 8.62759 17.9824 9.29191 17.9824 9.99531V13.7702L16.9742 12.762V12.7855L9.72919 5.54045C9.74482 5.54045 9.75264 5.54045 9.75264 5.54045L9.00234 4.79015C9.22118 4.64947 9.45565 4.53224 9.70574 4.43845C9.95584 4.34467 10.2138 4.25869 10.4795 4.18054V2ZM4.4068 3.03165L21.4291 20.0305L19.9988 21.4373L17.5604 18.9988H13.6917C13.7855 19.1551 13.8558 19.3193 13.9027 19.4912C13.9496 19.6475 13.973 19.8195 13.973 20.007C13.973 20.5541 13.7776 21.0231 13.3869 21.4138C12.9961 21.8046 12.5272 22 11.9801 22C11.4174 22 10.9406 21.8046 10.5498 21.4138C10.159 21.0231 9.96366 20.5541 9.96366 20.007C9.96366 19.8195 9.9871 19.6475 10.034 19.4912C10.0809 19.3193 10.1512 19.1551 10.245 18.9988H3.96131V17.9906L5.97773 15.9977V9.99531C5.97773 9.60453 6.00899 9.22939 6.07151 8.86987C6.14967 8.51036 6.25127 8.15866 6.37632 7.81477L3 4.43845L4.4068 3.03165Z',\n  CLEARED = 'path://M9.09375 19.5977C9.09375 20.2617 9.32812 20.8281 9.79688 21.2969C10.2786 21.7656 10.8516 22 11.5156 22C12.1927 22 12.7656 21.7656 13.2344 21.2969C13.7161 20.8281 13.957 20.2617 13.957 19.5977H9.09375ZM16.8672 10.418C16.3203 10.5091 15.7995 10.6784 15.3047 10.9258C14.8229 11.1732 14.3867 11.4922 13.9961 11.8828C13.5013 12.3776 13.1172 12.944 12.8438 13.582C12.5833 14.2201 12.4531 14.8841 12.4531 15.5742C12.4531 16.0299 12.5052 16.4727 12.6094 16.9023C12.7266 17.332 12.8958 17.7422 13.1172 18.1328H3V16.375C4.04167 16.0495 4.74479 15.3919 5.10938 14.4023C5.47396 13.4128 5.76693 12.3385 5.98828 11.1797C6.20964 10.0208 6.48958 8.88802 6.82812 7.78125C7.16667 6.6875 7.83724 5.85417 8.83984 5.28125C9.11328 5.125 9.32812 4.91667 9.48438 4.65625C9.64062 4.38281 9.71875 4.08984 9.71875 3.77734C9.71875 3.28255 9.88802 2.86589 10.2266 2.52734C10.5781 2.17578 11.0013 2 11.4961 2C11.9909 2 12.4076 2.17578 12.7461 2.52734C13.0977 2.86589 13.2734 3.28255 13.2734 3.77734C13.2734 4.08984 13.3516 4.38281 13.5078 4.65625C13.6771 4.91667 13.8984 5.125 14.1719 5.28125C15.0443 5.78906 15.6562 6.51172 16.0078 7.44922C16.3724 8.38672 16.6589 9.3763 16.8672 10.418ZM11.4961 4.48047C11.6914 4.48047 11.8607 4.41536 12.0039 4.28516C12.1471 4.14193 12.2188 3.97266 12.2188 3.77734C12.2188 3.56901 12.1471 3.39974 12.0039 3.26953C11.8607 3.1263 11.6914 3.05469 11.4961 3.05469C11.3008 3.05469 11.1315 3.1263 10.9883 3.26953C10.8451 3.39974 10.7734 3.56901 10.7734 3.77734C10.7734 3.97266 10.8451 4.14193 10.9883 4.28516C11.1315 4.41536 11.3008 4.48047 11.4961 4.48047ZM16.9062 17.6055L19.9922 14.5195L19.2305 13.7773L16.9062 16.1016L15.8906 15.0859L15.1289 15.8477L16.9062 17.6055ZM17.5312 11.8633C18.5599 11.8633 19.4388 12.2279 20.168 12.957C20.8971 13.6862 21.2617 14.5651 21.2617 15.5938C21.2617 16.6224 20.8971 17.5013 20.168 18.2305C19.4388 18.9596 18.5599 19.3242 17.5312 19.3242C16.5026 19.3242 15.6237 18.9596 14.8945 18.2305C14.1654 17.5013 13.8008 16.6224 13.8008 15.5938C13.8008 14.5651 14.1654 13.6862 14.8945 12.957C15.6237 12.2279 16.5026 11.8633 17.5312 11.8633Z',\n  MINOR = 'path://M21.9787 11.9894L11.9894 22L2 11.9894L11.9894 2L21.9787 11.9894ZM12.9052 16.5474V14.7157H11.0735V16.5474H12.9052ZM12.9052 12.9052V7.45261H11.0735V12.9052H12.9052Z',\n  MAJOR = 'path://M12.8936 13.8936V10.234H11.1064V13.8936H12.8936ZM12.8936 17.5106V15.6809H11.1064V17.5106H12.8936ZM2 20.234L12 3L22 20.234H2Z',\n  CRITICAL = 'path://M12.0117 22C10.6362 22 9.3388 21.7343 8.11958 21.2028C6.90035 20.687 5.83744 19.9758 4.93083 19.0692C4.02423 18.1626 3.31301 17.0996 2.79719 15.8804C2.26573 14.6768 2 13.3794 2 11.9883C2 10.6127 2.26573 9.31536 2.79719 8.09613C3.31301 6.89254 4.02423 5.83744 4.93083 4.93083C5.83744 4.02423 6.90035 3.3052 8.11958 2.77374C9.3388 2.25791 10.6362 2 12.0117 2C13.3873 2 14.6846 2.25791 15.9039 2.77374C17.1231 3.3052 18.186 4.02423 19.0926 4.93083C19.9992 5.83744 20.7104 6.89254 21.2263 8.09613C21.7577 9.31536 22.0234 10.6127 22.0234 11.9883C22.0234 13.3794 21.7577 14.6768 21.2263 15.8804C20.7104 17.0996 19.9992 18.1626 19.0926 19.0692C18.186 19.9758 17.1231 20.687 15.9039 21.2028C14.6846 21.7343 13.3873 22 12.0117 22ZM13.0199 6.99414H11.0035V12.9965H13.0199V6.99414ZM13.0199 14.9894H11.0035V17.0059H13.0199V14.9894Z',\n  WARNING = 'path://M12 2C13.3772 2 14.6761 2.25822 15.8967 2.77465C17.1174 3.29108 18.1815 4.00313 19.0892 4.9108C19.9969 5.81847 20.7089 6.88263 21.2254 8.10329C21.7418 9.32394 22 10.6228 22 12C22 13.3772 21.7418 14.6761 21.2254 15.8967C20.7089 17.1174 19.9969 18.1815 19.0892 19.0892C18.1815 19.9969 17.1174 20.7089 15.8967 21.2254C14.6761 21.7418 13.3772 22 12 22C10.6228 22 9.32394 21.7418 8.10329 21.2254C6.88263 20.7089 5.81847 19.9969 4.9108 19.0892C4.00313 18.1815 3.29108 17.1174 2.77465 15.8967C2.25822 14.6761 2 13.3772 2 12C2 10.6228 2.25822 9.32394 2.77465 8.10329C3.29108 6.88263 4.00313 5.81847 4.9108 4.9108C5.81847 4.00313 6.88263 3.29108 8.10329 2.77465C9.32394 2.25822 10.6228 2 12 2Z'\n}\n\nexport const ICONS_MAP = {\n  ALARM: ICONS.ALARM,\n  EVENT: ICONS.EVENT,\n  ACKNOWLEDGED: ICONS.ACKNOWLEDGED,\n  CLEARED: ICONS.CLEARED,\n  MINOR: ICONS.MINOR,\n  MAJOR: ICONS.MAJOR,\n  CRITICAL: ICONS.CRITICAL,\n  WARNING: ICONS.WARNING\n};\n","import { Injectable } from '@angular/core';\nimport { DatapointAxisType, DpWithValues, YAxisOptions } from '../models';\nimport type { YAXisOption } from 'echarts/types/src/coord/cartesian/AxisModel';\nimport { AppStateService } from '@c8y/ngx-components';\n\n@Injectable()\nexport class YAxisService {\n  Y_AXIS_OFFSET = 48;\n  private intlNumberFormatCompliantLocale: string;\n\n  constructor(private appStateService: AppStateService) {\n    this.intlNumberFormatCompliantLocale = this.appStateService.state.lang.replace('_', '-');\n  }\n\n  getYAxis(\n    datapointsWithValues: DpWithValues[],\n    YAxisOptions: YAxisOptions\n  ): YAXisOption[] | YAXisOption {\n    const YAxisPlacement: Map<DpWithValues, { position: DatapointAxisType; offset: number }> =\n      this.getYAxisPlacement(datapointsWithValues);\n\n    if (YAxisOptions.forceMergeDatapoints) {\n      const firstDp = datapointsWithValues[0];\n      const unit = firstDp?.unit ? `[${firstDp.unit}]` : '';\n      return {\n        name: unit,\n        nameLocation: 'middle',\n        nameGap: 25,\n        type: 'value',\n        animation: true,\n        axisLabel: {\n          fontSize: 10,\n          show: true\n        },\n        axisLine: {\n          show: true,\n          lineStyle: {\n            color: '#6f7079'\n          },\n          onZero: false\n        },\n        splitLine: {\n          show: YAxisOptions.showSplitLines\n        },\n        axisTick: {\n          show: true\n        },\n        axisPointer: {\n          show: false,\n          label: {\n            show: false\n          }\n        }\n      };\n    }\n    const matchingDpSet = new Set<DpWithValues>();\n    const firstOccurrence = new Set<DpWithValues>();\n\n    return datapointsWithValues.map((dp, index) => {\n      const isDefined = (value: number | undefined) => value !== null && value !== undefined;\n      const isMatchingDp = (dp1: DpWithValues, dp2: DpWithValues) =>\n        dp1.min === dp2.min &&\n        dp1.max === dp2.max &&\n        isDefined(dp1.min) &&\n        isDefined(dp1.max) &&\n        isDefined(dp2.min) &&\n        isDefined(dp2.max);\n\n      const matchingDpRange = datapointsWithValues.some(\n        (dp2, index2) => isMatchingDp(dp, dp2) && index2 < index\n      );\n\n      const anyMatchingDp = datapointsWithValues.some(\n        (dp2, index2) => isMatchingDp(dp, dp2) && index2 !== index\n      );\n\n      if (\n        anyMatchingDp &&\n        !matchingDpRange &&\n        YAxisOptions.mergeMatchingDatapoints &&\n        !firstOccurrence.has(dp)\n      ) {\n        firstOccurrence.add(dp);\n      }\n\n      if (firstOccurrence.has(dp)) {\n        datapointsWithValues.forEach(dp2 => {\n          if (isMatchingDp(dp, dp2)) {\n            matchingDpSet.add(dp2);\n          }\n        });\n      }\n\n      return {\n        name: YAxisOptions.showLabelAndUnit\n          ? YAxisOptions.mergeMatchingDatapoints\n            ? firstOccurrence.has(dp)\n              ? Array.from(matchingDpSet)\n                  .map(dp => `{${dp.__target?.id}|${dp.unit}}`)\n                  .join(' /')\n              : matchingDpRange\n                ? ''\n                : `${dp.label} [${dp.unit}]`\n            : `${dp.label} [${dp.unit}]`\n          : '',\n        nameLocation: 'middle',\n        nameGap: 25,\n        nameTextStyle: {\n          // add rich text to support multiple colors for different dp units\n          rich: {\n            ...Array.from(matchingDpSet).reduce((acc, dp) => {\n              const accKey = `${dp.__target?.id}`;\n              acc[accKey] = {\n                color: dp.color\n              };\n              return acc;\n            }, {})\n          }\n        },\n        type: 'value',\n        animation: true,\n        axisLine: {\n          show: matchingDpRange && YAxisOptions.mergeMatchingDatapoints ? false : true,\n          lineStyle: {\n            color: firstOccurrence.has(dp) ? '#6f7079' : dp.color\n          },\n          onZero: false\n        },\n        axisLabel: {\n          fontSize: 10,\n          show: !matchingDpRange || !YAxisOptions.mergeMatchingDatapoints,\n          formatter: val => {\n            if (dp.min != undefined && dp.max != undefined) {\n              const range = dp.max - dp.min;\n              const decimalPlaces = this.getDecimalPlaces(range);\n              return val.toFixed(decimalPlaces);\n            }\n\n            return new Intl.NumberFormat(this.intlNumberFormatCompliantLocale, {\n              notation: 'compact',\n              compactDisplay: 'short'\n            }).format(val);\n          }\n        },\n        splitLine: {\n          show: YAxisOptions.showSplitLines && !matchingDpRange,\n          lineStyle: { color: dp.color, opacity: 0.4, type: 'dashed' }\n        },\n        position: YAxisPlacement.get(dp)?.position,\n        offset: YAxisPlacement.get(dp)?.offset,\n        axisTick: {\n          show: !matchingDpRange || !YAxisOptions.mergeMatchingDatapoints\n        },\n        axisPointer: {\n          show: false,\n          label: {\n            show: false\n          }\n        },\n        ...(dp.min && { min: dp.min }),\n        ...(dp.max && { max: dp.max })\n      };\n    });\n  }\n\n  private getDecimalPlaces(num: number): number {\n    const numStr = num.toString();\n    const decimalIndex = numStr.indexOf('.');\n    if (decimalIndex === -1) {\n      return 0;\n    }\n    return numStr.length - decimalIndex - 1;\n  }\n\n  private getYAxisPlacement(\n    datapointsWithValues: DpWithValues[]\n  ): Map<DpWithValues, { position: DatapointAxisType; offset: number }> {\n    const YAxisPositions = new Map<DpWithValues, { position: DatapointAxisType }>();\n\n    datapointsWithValues.forEach(dp => {\n      const position = this.getYAxisPosition(dp, datapointsWithValues);\n      YAxisPositions.set(dp, { position });\n    });\n\n    const dpLeft = datapointsWithValues.filter(dp => YAxisPositions.get(dp).position === 'left');\n    const dpRight = datapointsWithValues.filter(dp => YAxisPositions.get(dp).position === 'right');\n\n    const YAxisPlacement = new Map<DpWithValues, { position: DatapointAxisType; offset: number }>();\n    YAxisPositions.forEach(({ position }, key) => {\n      const offset = (position === 'left' ? dpLeft : dpRight).indexOf(key) * this.Y_AXIS_OFFSET;\n      YAxisPlacement.set(key, { position: position, offset });\n    });\n\n    return YAxisPlacement;\n  }\n\n  private getYAxisPosition(\n    datapoint: DatapointAxisType,\n    datapointsWithValues: DpWithValues[]\n  ): DatapointAxisType {\n    if (datapoint.yAxisType) {\n      return datapoint.yAxisType;\n    }\n    const currentIndex = datapointsWithValues.indexOf(datapoint);\n    const otherIndexLeft = datapointsWithValues.findIndex(\n      dp => dp !== datapoint && (!dp.yAxisType || dp.yAxisType === 'left')\n    );\n    if (otherIndexLeft > -1 && otherIndexLeft < currentIndex) {\n      return 'right';\n    } else {\n      return 'left';\n    }\n  }\n}\n","import { Injectable } from '@angular/core';\nimport { DatapointChartRenderType, DpWithValues, EchartsSeriesOptions } from '../models';\nimport type { BarSeriesOption, LineSeriesOption } from 'echarts';\n\nfunction assertUnreachable(_: never): never {\n  throw new Error('Case unreachable.');\n}\n\n@Injectable()\nexport class ChartTypesService {\n  private RENDER_TYPE_SYMBOL: Record<\n    Exclude<DatapointChartRenderType, 'area'>,\n    Partial<LineSeriesOption>\n  > = {\n    min: { symbol: 'triangle', symbolRotate: 0 },\n    max: { symbol: 'triangle', symbolRotate: 180 }\n  };\n  getSeriesOptions(\n    { lineType, color }: DpWithValues,\n    isMinMaxChart = false,\n    renderType: DatapointChartRenderType\n  ): EchartsSeriesOptions {\n    switch (lineType) {\n      case 'points':\n        return this.pointsSeriesOption(color, isMinMaxChart, renderType);\n      case 'linePoints':\n        return this.linePointsSeriesOption(color, isMinMaxChart, renderType);\n      case 'bars':\n        return this.barsSeriesOption(color, isMinMaxChart, renderType);\n      case 'step-before':\n        return this.stepBeforeSeriesOption(color, isMinMaxChart, renderType);\n      case 'step-after':\n        return this.stepAfterSeriesOption(color, isMinMaxChart, renderType);\n      case 'line':\n      case undefined:\n        return this.lineSeriesOption(color, isMinMaxChart, renderType);\n    }\n    return assertUnreachable(lineType);\n  }\n\n  private pointsSeriesOption(\n    color: string,\n    isMinMaxChart: boolean,\n    renderType: DatapointChartRenderType\n  ): LineSeriesOption {\n    const baseOption = this.linePointsSeriesOption(color, isMinMaxChart, renderType);\n    return {\n      ...baseOption,\n      lineStyle: { opacity: 0 }\n    };\n  }\n\n  private lineSeriesOption(\n    color: string,\n    isMinMaxChart: boolean,\n    renderType: DatapointChartRenderType\n  ): LineSeriesOption {\n    let baseOption: LineSeriesOption = {\n      type: 'line',\n      lineStyle: {\n        color: color,\n        width: 1,\n        type: 'solid'\n      },\n      itemStyle: {\n        color: color\n      },\n      emphasis: {\n        scale: 1.2,\n        itemStyle: {\n          color: color\n        }\n      },\n      showSymbol: false,\n      symbolSize: 4 // symbol is visible on hover\n    };\n    if (isMinMaxChart) {\n      baseOption = {\n        ...baseOption,\n        ...this.RENDER_TYPE_SYMBOL[renderType],\n        symbolSize: 8\n      };\n    }\n    return baseOption;\n  }\n\n  private linePointsSeriesOption(\n    color: string,\n    isMinMaxChart: boolean,\n    renderType: DatapointChartRenderType\n  ): LineSeriesOption {\n    const baseOption = this.lineSeriesOption(color, isMinMaxChart, renderType);\n    return {\n      ...baseOption,\n      showSymbol: true\n    };\n  }\n\n  private barsSeriesOption(\n    color: string,\n    isMinMaxChart: boolean,\n    renderType: DatapointChartRenderType\n  ): BarSeriesOption {\n    const baseOption: BarSeriesOption = {\n      type: 'bar',\n      barMinWidth: 1,\n      barMaxWidth: 20,\n      itemStyle: {\n        color\n      }\n    };\n    if (isMinMaxChart) {\n      baseOption.itemStyle.opacity = renderType === 'max' ? 0.6 : 1.0;\n    }\n    return baseOption;\n  }\n\n  private stepBeforeSeriesOption(\n    color: string,\n    isMinMaxChart: boolean,\n    renderType: DatapointChartRenderType\n  ): LineSeriesOption {\n    const baseOption = this.lineSeriesOption(color, isMinMaxChart, renderType);\n    return { ...baseOption, step: 'start' };\n  }\n\n  private stepAfterSeriesOption(\n    color: string,\n    isMinMaxChart: boolean,\n    renderType: DatapointChartRenderType\n  ): LineSeriesOption {\n    const baseOption = this.lineSeriesOption(color, isMinMaxChart, renderType);\n    return { ...baseOption, step: 'end' };\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Injectable } from '@angular/core';\nimport { DatePipe } from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport * as echarts from 'echarts';\nimport type { EChartsOption, SeriesOption, ECharts } from 'echarts';\nimport {\n  DatapointChartRenderType,\n  DpWithValues,\n  DateString,\n  DpValuesItem,\n  MarkLineData,\n  MarkPointData,\n  SeriesDatapointInfo,\n  SeriesValue,\n  GraphDisplayOptions\n} from '../models';\nimport { YAxisService } from './y-axis.service';\nimport { ChartTypesService } from './chart-types.service';\nimport type { CallbackDataParams, TooltipFormatterCallback } from 'echarts/types/src/util/types';\nimport type { TopLevelFormatterParams } from 'echarts/types/src/component/tooltip/TooltipModel';\nimport { AlarmStatus, IAlarm, IEvent, SeverityType } from '@c8y/client';\nimport { ICONS_MAP } from '../models/svg-icons.model';\nimport { CustomSeriesOptions } from '../models/chart.model';\nimport { Router } from '@angular/router';\nimport { AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe } from '@c8y/ngx-components/alarms';\nimport { Interval, INTERVALS } from '@c8y/ngx-components/interval-picker';\nimport { TranslateService } from '@ngx-translate/core';\nimport { TimeInterval } from '@c8y/ngx-components/global-context';\n\ntype TooltipPositionCallback = (\n  point: [number, number], // position of mouse in chart [X, Y]; 0,0 is top left corner\n  _: any, // tooltip data\n  dom: HTMLElement | unknown, // tooltip element\n  __: any, // valid only when mouse is on graphic elements; not relevant in our case\n  size: {\n    contentSize: [number, number]; // size of tooltip\n    viewSize: [number, number]; // size of the chart\n  } | null // size of chart\n) => Partial<Record<'top' | 'bottom' | 'left' | 'right', number>>;\n\nconst INDEX_HTML = '/index.html';\n\n@Injectable()\nexport class EchartsOptionsService {\n  echartsInstance: ECharts | undefined;\n  private TOOLTIP_WIDTH = 300;\n  private tooltipPositionCallback: TooltipPositionCallback | undefined;\n\n  constructor(\n    private datePipe: DatePipe,\n    private yAxisService: YAxisService,\n    private chartTypesService: ChartTypesService,\n    private severityIconPipe: AlarmSeverityToIconPipe,\n    private severityLabelPipe: AlarmSeverityToLabelPipe,\n    private translate: TranslateService,\n    private router: Router\n  ) {}\n\n  getChartOptions(\n    datapointsWithValues: DpWithValues[],\n    timeRange: { dateFrom: string; dateTo: string; interval: TimeInterval },\n    showSplitLines: { YAxis: boolean; XAxis: boolean },\n    events: IEvent[],\n    alarms: IAlarm[],\n    displayOptions: GraphDisplayOptions,\n    selectedTimeRange?: { dateFrom: string; dateTo: string; interval: Interval['id'] } | null,\n    aggregatedDatapoint?: DpWithValues,\n    sliderZoomUsed = false\n  ): EChartsOption {\n    const yAxis = this.yAxisService.getYAxis(datapointsWithValues, {\n      showSplitLines: showSplitLines.YAxis,\n      mergeMatchingDatapoints: displayOptions.mergeMatchingDatapoints,\n      forceMergeDatapoints: displayOptions.forceMergeDatapoints,\n      showLabelAndUnit: displayOptions.showLabelAndUnit\n    });\n    const leftAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'left') : [];\n    const gridLeft = leftAxis.length ? leftAxis.length * this.yAxisService.Y_AXIS_OFFSET : 32;\n    const rightAxis = Array.isArray(yAxis) ? yAxis.filter(yx => yx.position === 'right') : [];\n    const gridRight = rightAxis.length ? rightAxis.length * this.yAxisService.Y_AXIS_OFFSET : 16;\n    const selectedLanguage = this.translate.currentLang;\n    let intervalInMs = this.calculateExtendedIntervalInMs(\n      selectedTimeRange?.interval || timeRange.interval || 'hours',\n      selectedTimeRange || timeRange\n    );\n    if (sliderZoomUsed) {\n      intervalInMs = this.calculateExtendedIntervalInMs(timeRange.interval || 'hours', timeRange);\n    }\n    if (displayOptions.showOnlyAlarmsOrEvents) {\n      return {\n        xAxis: {\n          min: timeRange.dateFrom,\n          max: timeRange.dateTo,\n          type: 'time'\n        },\n        yAxis: {\n          show: false\n        },\n        tooltip: {\n          trigger: 'axis',\n          // intended empty for now. Later we can add a tooltip for more info on the hovered alarm/event\n          formatter: () => ''\n        },\n        series: this.createAlarmEventTypeSeries(alarms, events)\n      };\n    }\n    return {\n      grid: {\n        containLabel: true, // axis labels are taken into account to calculate graph grid\n        left: gridLeft,\n        top: 16,\n        right: gridRight,\n        bottom: 68\n      },\n      dataZoom: [\n        {\n          type: 'inside',\n          // TODO: use 'none' only when this bug is fixed https://github.com/apache/echarts/issues/17858\n          filterMode: datapointsWithValues.some(dp => dp.lineType === 'bars') ? 'filter' : 'none',\n          zoomOnMouseWheel: true,\n          startValue: selectedTimeRange\n            ? selectedTimeRange.dateFrom.valueOf()\n            : timeRange.dateFrom.valueOf(),\n          endValue: selectedTimeRange\n            ? selectedTimeRange.dateTo.valueOf()\n            : timeRange.dateTo.valueOf()\n        },\n        {\n          type: 'slider',\n          show: displayOptions.showSlider,\n          bottom: 8,\n          realtime: false,\n          left: displayOptions.sliderPositionMode === 'compact' ? '64px' : '64px',\n          right: displayOptions.sliderPositionMode === 'compact' ? '172px' : '64px',\n          labelFormatter(_value, valueStr) {\n            // TODO: Enio please check why valueStr can be empty\n            if (valueStr === '') {\n              return;\n            }\n            const locale = selectedLanguage?.replace('_', '-');\n            const date = new Date(valueStr);\n\n            const datePart = new Intl.DateTimeFormat(locale, {\n              year: 'numeric',\n              month: 'short',\n              day: '2-digit'\n            }).format(date);\n\n            const timePart = new Intl.DateTimeFormat(locale, {\n              hour: '2-digit',\n              minute: '2-digit',\n              second: '2-digit'\n            }).format(date);\n\n            return `${datePart}\\n${timePart}`;\n          },\n          textStyle: {\n            fontSize: 9,\n            lineHeight: 14\n          }\n        }\n      ], // on realtime, 'none' will cause extending chart line to left edge of the chart\n      animation: false,\n      toolbox: {\n        show: true,\n        itemSize: 0, // toolbox is needed for zooming in action, but we provide our own buttons\n        feature: {\n          dataZoom: {\n            yAxisIndex: 'none'\n          }\n        }\n      },\n      tooltip: {\n        trigger: 'axis',\n        axisPointer: {\n          type: 'cross',\n          snap: true\n        },\n        backgroundColor: 'var(--c8y-root-component-background-default)',\n        borderColor: 'var(--c8y-root-component-border-color)',\n        formatter: this.getTooltipFormatter(displayOptions),\n        appendToBody: true,\n        position: this.tooltipPosition(),\n        transitionDuration: 0\n      },\n      legend: {\n        show: false\n      },\n      xAxis: {\n        min: aggregatedDatapoint\n          ? Object.keys(aggregatedDatapoint.values)\n              .map(date => new Date(date).valueOf())\n              .sort((a, b) => a - b)[0]\n          : new Date(timeRange.dateFrom).valueOf() - intervalInMs,\n        max: timeRange.dateTo,\n        type: 'time',\n        animation: false,\n        axisPointer: {\n          label: {\n            show: false\n          }\n        },\n        axisLine: {\n          // align X axis to 0 of Y axis of datapoint with lineType 'bars'\n          onZeroAxisIndex: datapointsWithValues.findIndex(dp => dp.lineType === 'bars')\n        },\n        axisLabel: {\n          hideOverlap: true,\n          borderWidth: 2, // as there is no margin for labels spacing, transparent border is a workaround\n          borderColor: 'transparent',\n          formatter: value => {\n            const date = new Date(value);\n            const locale = selectedLanguage?.replace('_', '-');\n\n            const isStartOfMinute = date.getSeconds() === 0;\n            const isStartOfDay =\n              date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0;\n            const isStartOfYear = date.getMonth() === 0 && date.getDate() === 1 && isStartOfDay;\n\n            let options: Intl.DateTimeFormatOptions;\n\n            // Case 1: Tick is start of year\n            // Shows only the year, e.g. \"2025\"\n            if (isStartOfYear) {\n              options = { year: 'numeric' };\n            }\n\n            // Case 2: Tick is start of day\n            // Shows abbreviated month and day, e.g. \"Jan 13\"\n            else if (isStartOfDay) {\n              options = { month: 'short', day: 'numeric' };\n            }\n            // Case 3: Tick is start of minute\n            // Shows hour and minute, e.g. \"14:30\" (format depends on locale)\n            else if (isStartOfMinute) {\n              options = { hour: 'numeric', minute: '2-digit' };\n            }\n            // Case 4: Interval is 1 minute or less\n            // Shows seconds, e.g. \":45\"\n            else {\n              options = { second: '2-digit' };\n            }\n\n            return new Intl.DateTimeFormat(locale, options).format(date);\n          }\n        },\n        splitLine: {\n          show: showSplitLines.XAxis,\n          lineStyle: { opacity: 0.8, type: 'dashed', width: 2 }\n        }\n      },\n      yAxis,\n      series: [\n        this.getAggregatedSeries(aggregatedDatapoint || null, displayOptions),\n        ...this.getChartSeries(datapointsWithValues, events, alarms, displayOptions)\n      ]\n    };\n  }\n\n  calculateExtendedIntervalInMs(interval: TimeInterval, selectedTimeRange): number {\n    let intervalInMs = INTERVALS.find(i => i.id === interval).timespanInMs;\n\n    switch (interval) {\n      case 'minutes':\n        intervalInMs = INTERVALS.find(i => i.id === interval).timespanInMs * 60;\n        break;\n      case 'hours':\n        intervalInMs = INTERVALS.find(i => i.id === interval).timespanInMs * 24;\n        break;\n      case 'days':\n        intervalInMs = INTERVALS.find(i => i.id === interval).timespanInMs * 28;\n        break;\n      case 'weeks':\n        intervalInMs = INTERVALS.find(i => i.id === interval).timespanInMs * 12;\n        break;\n      case 'months':\n        intervalInMs = INTERVALS.find(i => i.id === interval).timespanInMs * 12;\n        break;\n      case 'custom':\n        intervalInMs =\n          (new Date(selectedTimeRange.dateTo).valueOf() -\n            new Date(selectedTimeRange.dateFrom).valueOf()) *\n          12;\n        break;\n      default:\n        intervalInMs = INTERVALS.find(i => i.id === (interval as any)).timespanInMs;\n        break;\n    }\n\n    return intervalInMs;\n  }\n\n  getAggregatedSeries(\n    aggregatedDatapoint: DpWithValues,\n    displayOptions: GraphDisplayOptions\n  ): SeriesOption {\n    const series: SeriesOption[] = [];\n    const renderType: DatapointChartRenderType = aggregatedDatapoint?.renderType || 'min';\n    const idx = 0;\n\n    if (renderType === 'area') {\n      series.push(\n        this.getSingleSeries(aggregatedDatapoint, 'min', idx, true, displayOptions, 'aggr')\n      );\n      series.push(\n        this.getSingleSeries(aggregatedDatapoint, 'max', idx, true, displayOptions, 'aggr')\n      );\n    } else {\n      series.push(\n        this.getSingleSeries(aggregatedDatapoint, renderType, idx, false, displayOptions, 'aggr')\n      );\n    }\n\n    series.forEach((s: any) => {\n      s.datapointId = 'aggregated';\n      s.typeOfSeries = 'fake';\n      s.itemStyle = {\n        ...s.itemStyle,\n        opacity: 0\n      };\n      s.lineStyle = {\n        ...s.lineStyle,\n        opacity: 0\n      };\n    });\n\n    return series[0];\n  }\n\n  /**\n   * This method is used to get the series for alarms and events.\n   * @param dp - The data point.\n   * @param renderType - The render type.\n   * @param isMinMaxChart - If the chart is min max chart.\n   * @param items - All alarms or events which should be displayed on the chart.\n   * @param itemType - The item type.\n   * @param id - The id of the device\n   */\n  getAlarmOrEventSeries(\n    dp: DpWithValues,\n    renderType: DatapointChartRenderType,\n    isMinMaxChart = false,\n    items: IAlarm[] | IEvent[] = [],\n    itemType: 'alarm' | 'event' = 'alarm',\n    displayOptions: GraphDisplayOptions = {\n      displayMarkedLine: true,\n      displayMarkedPoint: true,\n      mergeMatchingDatapoints: false,\n      forceMergeDatapoints: false,\n      showLabelAndUnit: false,\n      showSlider: false\n    },\n    id?: string | number,\n    idx?: number,\n    realtime?: boolean\n  ): CustomSeriesOptions[] {\n    if (!items.length) {\n      return [];\n    }\n\n    if (!displayOptions.displayMarkedLine && !displayOptions.displayMarkedPoint) {\n      return [];\n    }\n\n    //filter items that are not __hidden\n    const filteredItems: IAlarm[] | IEvent[] = items.filter(item => !item['__hidden']);\n    const itemsByType = this.groupByType(filteredItems, 'type');\n    const isAlarm = itemType === 'alarm';\n\n    return Object.entries(itemsByType).flatMap(\n      ([type, itemsOfType]: [string, (IAlarm | IEvent)[]]) => {\n        // Main series data\n        const mainData = itemsOfType.map(item => [item.creationTime, null, 'markLineFlag']);\n        // Is a specific datapoint template selected for this alarm/event type?\n        let isDpTemplateSelected = false;\n\n        // MarkPoint data\n        const markPointData = itemsOfType.reduce<MarkPointData[]>((acc, item) => {\n          isDpTemplateSelected =\n            item['selectedDatapoint'] &&\n            dp['__target'] &&\n            item['selectedDatapoint']['fragment'] === dp['fragment'] &&\n            item['selectedDatapoint']['series'] === dp['series'] &&\n            item['selectedDatapoint']['target'] === dp['__target']['id'];\n          if (dp.__target?.id === item.source.id) {\n            const isCleared = isAlarm && item.status === AlarmStatus.CLEARED;\n            const isEvent = !isAlarm;\n            return acc.concat(this.createMarkPoint(item, dp, isCleared, isEvent, realtime));\n          } else {\n            if (!item.creationTime) {\n              return [];\n            }\n            return acc.concat([\n              {\n                coord: [item.creationTime, null],\n                name: item.type,\n                itemType: item.type,\n                itemStyle: { color: item['color'] }\n              }\n            ]);\n          }\n        }, []);\n\n        // Construct series with markPoint\n        const seriesWithMarkPoint = {\n          id: `${type}/${dp.__target?.id}+${id ? id : ''}-markPoint`,\n          name: `${type}-markPoint`,\n          typeOfSeries: itemType,\n          data: mainData,\n          isDpTemplateSelected,\n          position: 'bottom',\n          silent: true,\n          markPoint: {\n            showSymbol: true,\n            symbolKeepAspect: true,\n            data: markPointData\n          },\n          yAxisIndex: idx,\n          ...this.chartTypesService.getSeriesOptions(dp, isMinMaxChart, renderType)\n        };\n\n        const markLineData = this.createMarkLine(itemsOfType, itemType);\n\n        // Construct series with markLine\n        const seriesWithMarkLine = {\n          id: `${type}/${dp.__target?.id}+${id ? id : ''}-markLine`,\n          name: `${type}-markLine`,\n          typeOfSeries: itemType,\n          isDpTemplateSelected,\n          data: mainData,\n          markLine: {\n            showSymbol: false,\n            symbol: ['none', 'none'], // no symbol at the start/end of the line\n            data: markLineData\n          },\n          ...this.chartTypesService.getSeriesOptions(dp, isMinMaxChart, renderType)\n        };\n\n        //depending on the options return only the required series\n        if (displayOptions.displayMarkedLine && displayOptions.displayMarkedPoint) {\n          return [seriesWithMarkLine, seriesWithMarkPoint];\n        } else if (displayOptions.displayMarkedLine) {\n          return [seriesWithMarkLine];\n        } else if (displayOptions.displayMarkedPoint) {\n          return [seriesWithMarkPoint];\n        } else {\n          return null;\n        }\n      }\n    ) as CustomSeriesOptions[];\n  }\n\n  /**\n   * This method is used to get tooltip formatter for alarms and events.\n   * @param tooltipParams - The tooltip parameters.\n   * @param params - The parameters data.\n   * @param allEvents - All events.\n   * @param allAlarms - All alarms.\n   * @returns The formatted string for the tooltip.\n   */\n  getTooltipFormatterForAlarmAndEvents(\n    tooltipParams: CallbackDataParams,\n    params: { data: { itemType: string } },\n    allEvents: IEvent[],\n    allAlarms: IAlarm[],\n    displayOptions: GraphDisplayOptions\n  ): string {\n    if (!Array.isArray(tooltipParams)) {\n      return '';\n    }\n    const XAxisValue: string = tooltipParams[0].data[0];\n    const YAxisReadings: string[] = [];\n    const allSeries = this.echartsInstance?.getOption()['series'] as CustomSeriesOptions[];\n\n    // filter out alarm and event series\n    const allDataPointSeries = allSeries.filter(\n      series => series['typeOfSeries'] !== 'alarm' && series['typeOfSeries'] !== 'event'\n    );\n\n    this.processSeries(allDataPointSeries, XAxisValue, YAxisReadings, displayOptions);\n\n    // find event and alarm of the same type as the hovered markedLine or markedPoint\n    const event = allEvents.find(e => e.type === params.data.itemType);\n    const alarm = allAlarms.find(a => a.type === params.data.itemType);\n\n    let value = '';\n    if (event) {\n      value = this.processEvent(event, XAxisValue);\n    }\n\n    if (alarm) {\n      this.processAlarm(alarm).then(alarmVal => {\n        value = alarmVal;\n        YAxisReadings.push(value);\n        const options = this.echartsInstance?.getOption() as EChartsOption;\n        if (!options.tooltip || !Array.isArray(options.tooltip)) {\n          return;\n        }\n        const updatedOptions: Partial<SeriesOption> = {\n          tooltip: options['tooltip'][0]\n        };\n\n        if (!updatedOptions.tooltip) {\n          return;\n        }\n        updatedOptions.tooltip.formatter = `<div style=\"width: ${this.TOOLTIP_WIDTH}px\">${YAxisReadings.join('')}</div>`;\n        updatedOptions.tooltip.transitionDuration = 0;\n        updatedOptions.tooltip.position = this.tooltipPosition();\n        this.echartsInstance?.setOption(updatedOptions);\n        return;\n      });\n    }\n    YAxisReadings.push(value);\n\n    return `<div style=\"width: 300px\">${YAxisReadings.join('')}</div>`;\n  }\n\n  /**\n   * Creates the series for alarms and events by their type.\n   * @param alarms - The list of alarms.\n   * @param events - The list of events.\n   * @returns The series options for the chart.\n   */\n  createAlarmEventTypeSeries(alarms: IAlarm[], events: IEvent[]): SeriesOption[] {\n    const series: SeriesOption[] = [];\n    let yValue = 10;\n\n    // Group alarms and events by type\n    const alarmTypes = Array.from(new Set(alarms.map(a => a.type)));\n    const eventTypes = Array.from(new Set(events.map(e => e.type)));\n\n    // Alarms by type\n    for (const type of alarmTypes) {\n      const alarmsOfType = alarms.filter(a => a.type === type);\n      // Background circle series\n      series.push({\n        type: 'scatter',\n        name: `${type}-circle`,\n        data: alarmsOfType.map(a => [a.creationTime, yValue]),\n        symbol: 'circle',\n        symbolSize: 24,\n        itemStyle: {\n          color: alarmsOfType[0]?.color || '#EE6666'\n        },\n        z: 2\n      });\n\n      // Foreground icon series\n      series.push({\n        type: 'scatter',\n        name: `${type}-icon`,\n        data: alarmsOfType.map(a => {\n          const isCleared = a.status === AlarmStatus.CLEARED;\n          return {\n            value: [isCleared ? a.lastUpdated : a.creationTime, yValue],\n            itemStyle: { color: 'white' },\n            symbol: isCleared ? ICONS_MAP.CLEARED : ICONS_MAP[a.severity as SeverityType],\n            symbolSize: 16\n          };\n        }),\n        z: 3\n      });\n\n      // If alarm is cleared, also show the cleared icon at lastUpdated\n      alarmsOfType.forEach(a => {\n        if (a.status === AlarmStatus.CLEARED && a.lastUpdated !== a.creationTime) {\n          series.push({\n            type: 'scatter',\n            name: `${type}-cleared-circle`,\n            data: [[a.lastUpdated, yValue]],\n            symbol: 'circle',\n            symbolSize: 24,\n            itemStyle: {\n              color: a.color || '#EE6666'\n            },\n            z: 2\n          });\n          series.push({\n            type: 'scatter',\n            name: `${type}-cleared-icon`,\n            data: [\n              {\n                value: [a.lastUpdated, yValue],\n                itemStyle: { color: 'white' },\n                symbol: ICONS_MAP.CLEARED,\n                symbolSize: 16\n              }\n            ],\n            z: 3\n          });\n        }\n      });\n\n      yValue += 10;\n    }\n\n    // Events by type\n    for (const type of eventTypes) {\n      const eventsOfType = events.filter(e => e.type === type);\n      // Background circle series\n      series.push({\n        type: 'scatter',\n        name: `${type}-circle`,\n        data: eventsOfType.map(e => [e.creationTime, yValue]),\n        symbol: 'circle',\n        symbolSize: 24,\n        itemStyle: {\n          color: eventsOfType[0]?.color || '#6f6cd0'\n        },\n        z: 2\n      });\n\n      // Foreground icon series\n      series.push({\n        type: 'scatter',\n        name: `${type}-icon`,\n        data: eventsOfType.map(e => ({\n          value: [e.creationTime, yValue],\n          itemStyle: { color: 'white' },\n          symbol: ICONS_MAP.EVENT,\n          symbolSize: 16\n        })),\n        z: 3\n      });\n\n      yValue += 10;\n    }\n\n    return series;\n  }\n\n  private tooltipPosition(): TooltipPositionCallback {\n    let lastPositionOfTooltip: Partial<Record<'top' | 'bottom' | 'left' | 'right', number>> = {};\n    if (this.tooltipPositionCallback) {\n      return this.tooltipPositionCallback;\n    }\n\n    this.tooltipPositionCallback = (\n      point: [number, number], // position of mouse in chart [X, Y]; 0,0 is top left corner\n      _: any, // tooltip data\n      dom: HTMLElement | unknown, // tooltip element\n      __: any,\n      size: {\n        contentSize: [number, number]; // size of tooltip\n        viewSize: [number, number];\n      } | null // size of chart\n    ) => {\n      const offset = 10;\n      const [mouseX, mouse