function Monitor () {
  const { chartDataByParameter, treshholdRangeData } = useTable()
  const [zoomState, setZoomState] = useState({})

  const handleZoomChange = (newZoomState) => {
    setZoomState(newZoomState)
  }

  return 
          <ChartComponent dataProps={chartDataByParameter} rangeData={treshholdRangeData} zoomState={zoomState} onZoomChange={handleZoomChange} />
}

export default Monitor

function ChartComponent ({ dataProps, rangeData, zoomState, onZoomChange }) {
  const chartRef = useRef(null)

  useEffect(() => {
    setIsChartLoading(false)
    if (chartRef.current && chartRef.current.kendoChart) {
      chartRef.current.kendoChart.setOptions({
        categoryAxis: {
          min: zoomState.xAxis.min,
          max: zoomState.xAxis.max
        },
        valueAxis: {
          min: zoomState.valueAxis.min,
          max: zoomState.valueAxis.max
        }
      })
    }
  }, [dataProps])

  const handleZoom = (event) => {
    const newZoomState = {
      xAxis: {
        min: event.axisRanges?.xAxis?.min,
        max: event.axisRanges?.xAxis?.max
      },
      valueAxis: {
        min: event.axisRanges?.valueAxis?.min,
        max: event.axisRanges?.valueAxis?.max
      }
    }
    onZoomChange(newZoomState)
  }

  const colors = ['#718ad5', '#424242', '#ffe162', '#4cd180', '#8634b7']
  const categoryAxisMaxDivisions = 10


  return (
<div style={{ height: '55vh, width: '100%' }}>
      {(dataProps && dataProps.length > 0) || (rangeData && rangeData.length > 0)
        ? (
        <Chart
          ref={chartRef}
          style={{ height: '100%', width: '100%' }}
          pannable={true}
          zoomable={true}
          transitions={false}
          className='custom-chart'
          onZoom={handleZoom}
        >
          <ChartLegend position="top" />
          <ChartCategoryAxis>
            <ChartCategoryAxisItem name="xAxis" maxDivisions={categoryAxisMaxDivisions} visible={false} />
            <ChartCategoryAxisItem name="xAxis2" maxDivisions={categoryAxisMaxDivisions} />
          </ChartCategoryAxis>
          <ChartSeries>
            {dataProps.map((item, index) => (
              <ChartSeriesItem
                key={index}
                type="line"
                data={item}
                field="value"
                categoryField="category"
                name={item[0].parameter}
                style="smooth"
                color={item[0].parameter === 'Anomalies' ? '#d75d5d' : colors[index]}
                width={item[0].parameter === 'Anomalies' ? 0 : 2}
                legendItem={item[0].parameter === 'Anomalies' ? customLegendItem : customLegendItem2}
                tooltip={{ visible: true, render: lineTooltipRender }}
              />
            ))}
            {rangeData.length > 0 && (
              <ChartSeriesItem
                type="rangeArea"
                data={rangeData}
                fromField="min"
                toField="max"
                categoryField="Datetime"
                name="Anomaly sensitivity"
                color='#80cf63'
              >
                <ChartTooltip render={rangeTooltipRender} />
              </ChartSeriesItem>
            )}
          </ChartSeries>
          <ChartValueAxis>
            <ChartValueAxisItem
              name="valueAxis"
              axisCrossingValue={[0, Number.NEGATIVE_INFINITY]}
              labels={{ format: (value) => value.toFixed(2) }}
            />
          </ChartValueAxis>
        </Chart>
          )
        : (
        <div style={{ height: chartHeight, width: '100%' }}></div>
          )}
    </div>
  )
}
}

const MemoizedChartComponent = React.memo(ChartComponent)
export default MemoizedChartComponent

License activation failed for @progress/kendo-react-intl
No license found.
See https://www.telerik.com/kendo-react-ui/components/my-license/ for more information.

stages:
- stage: Test
  displayName: Test
  jobs:
  - job: Test
    displayName: Perform tests
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '18.x'
      displayName: 'Install Node.js'

    - script: |
        npm ci
      displayName: 'Install dependencies'
...
    
    - script: |
        npx kendo-ui-license activate
      displayName: "Activate Kendo UI License"

    - script: |
        npm run build
      displayName: 'Build'

(INFO) Kendo UI: KENDO_UI_LICENSE environment variable not set
(INFO) Kendo UI: Reading license from "/agent/_work/2/s/kendo-ui-license.txt"...
(INFO) Kendo UI: License imported successfully.