gist from clipboard

    chart: {
      type: 'xrange',
      height: 250,
      // width: 1400, // Removed static width
    },
    title: {
      text: 'Highcharts X-range',
    },
    tooltip: {
      headerFormat:
        '<span style="font-size: 10px">{point.yCategory}</span><br/>',
      pointFormatter: function () {
        const from = new Date(this.x),
          to = new Date(this.x2 ?? '');
        return (
          TimeBlockGraphComponent.getFormattedTime(from) +
          ' to ' +
          TimeBlockGraphComponent.getFormattedTime(to)
        );
      },
    },
    accessibility: {
      point: {
        descriptionFormatter: function (point) {
          const ix = point.index + 1,
            category = (point as ExtendedPoint).yCategory,
            from = new Date(point.x),
            to = new Date(point.x2 ?? '');
          return (
            ix +
            '. ' +
            category +
            ', ' +
            from.toDateString() +
            ' ' +
            TimeBlockGraphComponent.getFormattedTime(from) +
            ' to ' +
            to.toDateString() +
            ' ' +
            TimeBlockGraphComponent.getFormattedTime(to) +
            '.'
          );
        },
      },
    },
    plotOptions: {
      series: {
        //minPointLength: 5, // Always show points, even when resized down
        dataLabels: {
          enabled: true,
          format: '{point.name}',
        },
        dragDrop: {
          draggableX: true,
          draggableY: true,
          dragMinY: 0,
          dragMaxY: 2,
          dragMinX: Date.UTC(2023, 11, 19),
          dragMaxX: Date.UTC(2023, 11, 20),
          liveRedraw: false,
          groupBy: 'groupId', // Group data points with the same groupId
        },
        point: {
          events: {
            // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
            dragStart: function (_e) {},
            // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
            drag: function (_e) {},
            drop: (e) => {
              // const newPoint = e.newPoint as ExtendedNewDragDropPoint;
              // const originalPoint = e.target;
              // const series = originalPoint.series,
              //   points = series.points,
              //   newDroppedX = newPoint?.x ?? e.target.x,
              //   newDroppedX2 = newPoint.x2 ?? e.target.x + 1; // Ensure x2 is always greater than x
              //
              // let adjustedX = newDroppedX;
              // let adjustedX2 = newDroppedX2;
              //
              // // Sort points by their start position
              // const sortedPoints = points.slice().sort((a, b) => a.x - b.x);
              // const currentIndex = sortedPoints.indexOf(originalPoint);
              // const leftPoint = sortedPoints[currentIndex - 1];
              // const rightPoint = sortedPoints[currentIndex + 1];
              //
              // // Adjust position to prevent overlap with the left point
              // if (leftPoint && leftPoint.x2) {
              //   if (newDroppedX < leftPoint.x2) {
              //     console.warn('Overlap on the left: ', {
              //       leftPoint,
              //       diff: newDroppedX - leftPoint.x2,
              //     });
              //     adjustedX = leftPoint.x2;
              //   }
              // }
              //
              // // Adjust position to prevent overlap with the right point
              // if (rightPoint) {
              //   if (newDroppedX2 > rightPoint.x) {
              //     console.warn('Overlap on the right: ', {
              //       rightPoint,
              //       diff: newDroppedX2 - rightPoint.x,
              //     });
              //     adjustedX2 = rightPoint.x;
              //   }
              // }
              //
              // // If adjustment is needed, update the point's position and re-render the chart
              // if (adjustedX !== newDroppedX || adjustedX2 !== newDroppedX2) {
              //   console.log(
              //     '%c%s',
              //     'color: #00a3cc',
              //     'Overlap occurred. Adjusting position:',
              //     {
              //       point: originalPoint,
              //       newDroppedX: newDroppedX,
              //       newDroppedX2: newDroppedX2,
              //       adjustedX: adjustedX,
              //       adjustedX2: adjustedX2,
              //     }
              //   );
              //
              //   const newChartOptions = { ...this.chartOptions };
              //   // eslint-disable-next-line @typescript-eslint/no-explicit-any
              //   const updatedPoint = (newChartOptions.series?.[0] as any)
              //     .data?.[currentIndex];
              //
              //   if (updatedPoint) {
              //     if (adjustedX !== newDroppedX) {
              //       updatedPoint.x = adjustedX;
              //       if (originalPoint?.x2) updatedPoint.x2 = originalPoint.x2;
              //       // or, if is a full drag operation:
              //       //adjustedX + (originalPoint.x2 - originalPoint.x);
              //     }
              //     if (adjustedX2 !== newDroppedX2) {
              //       updatedPoint.x2 = adjustedX2;
              //       if (originalPoint?.x) updatedPoint.x = originalPoint.x;
              //     }
              //
              //     this.redrawWithUpdate(newChartOptions);
              //   }
              // }
            },
          },
        },
      },
    },
    xAxis: {
      type: 'datetime',
      min: Date.UTC(2023, 11, 19),
      max: Date.UTC(2023, 11, 20),
    },
    yAxis: {
      title: {
        text: '',
      },
      categories: ['Schedule'], //, 'Development', 'Testing'
      reversed: true,
    },
    series: [
      {
        type: 'xrange',
        name: 'Project 1',
        pointPadding: 10,
        groupPadding: 0,
        borderColor: 'black',
        cursor: 'move',
        pointWidth: 80,
        borderWidth: 3,
        colorKey: 'color',
        data: [
          {
            color: 'MediumAquamarine',
            x: Date.UTC(2023, 11, 19, 0, 0, 0),
            x2: Date.UTC(2023, 11, 19, 4, 30, 0),
            y: 0,
            name: 'Driving',
            dragDrop: {
              draggableY: false,
            },
            selected: false,
          },
          {
            color: 'SteelBlue',
            x: Date.UTC(2023, 11, 19, 4, 30, 0),
            x2: Date.UTC(2023, 11, 19, 7, 30, 0),
            y: 0,
            name: 'Break',
            dragDrop: {
              draggableY: false,
            },
            selected: false,
          },
        ],
        dataLabels: {
          enabled: true,
        },
      },
    ],