Detailed explanation of gantt chart draggable and editable (highcharts can be used for vue and react)

<div class="hightChart-gantt">
    <div id="container"></div>
    <button @click="getData">Print current data</button>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';
import * as Highcharts from '@jsModule/highcharts/highcharts-gantt.src.js'
import dayjs from 'dayjs'
import{ WEEKS } from './constants'

// API documentation: https://api.Highcharts.com.cn/gantt/index.html
// Community address: https://forum.jianshukeji.com/tags/c/Highcharts/35/Highcharts-gantt
// Official example: https://www.highcharts.com.cn/demo/gantt/interactive-gantt

//Problems to be solved// 1. Drag interruption: User operations should be verified, but now we have not figured out how to interrupt user operations.
// Solution: The current approach is to make judgments in the drop, make prompts based on business logic, and re-render the data. It's doable, but not friendly enough.


export default defineComponent({
  name: 'hightCharts-gantt',
  components: {},
  setup () {
    const gantt = ref({});
    // The official recommendation is to use UTC time. Due to business needs, we need to keep it consistent with the database time. It depends on the storage format of the database. const data = [
      {start: '2021-6-1 0',end: '2021-6-1 18',factory: 'Huawei',material: 'P50', uid: 1, y: 0, completed: 0.35}, 
      {start: '2021-6-2 8',end: '2021-6-2 16',factory: 'Huawei',material: 'P50', uid: 2, y: 0}, 
      {start: '2021-6-3 8',end: '2021-6-4 24',factory: 'Huawei',material: 'P50', uid: 3, y: 0}, 
      {start: '2021-6-4 12',end: '2021-6-5 15',factory: 'Huawei',material: 'P50', uid: 4, y: 0}, 

      {start: '2021-6-1 8',end: '2021-6-1 12',factory: 'Xiaomi',material: 'Redmi 3', uid: 5, y: 1}, 
      {start: '2021-6-3 3',end: '2021-6-3 9',factory: 'Xiaomi',material: 'Redmi 3', uid: 6, y: 1}, 

      {start: '2021-6-1 6',end: '2021-6-1 16',factory: 'Apple',material: 'iPhone13', uid: 7, y: 2}, 
      {start: '2021-6-2 3',end: '2021-6-2 19',factory: 'Apple',material: 'iPhone13', uid: 8, y: 2}, 
      {start: '2021-6-3 8',end: '2021-6-3 17',factory: 'Apple',material: 'iPhone13', uid: 9, y: 2}, 

      {start: '2021-6-1 12',end: '2021-6-1 24',factory: 'OPPO',material: 'Reno7', uid: 10, y: 3},
      {start: '2021-6-2 5',end: '2021-6-2 18',factory: 'OPPO',material: 'Reno7', uid: 11, y: 3},
      {start: '2021-6-3 1',end: '2021-6-5 12',factory: 'OPPO',material: 'Reno7', uid: 12, y: 3},
    ];
    let newData = data.map(item => {
      item.start = dayjs(item.start).valueOf();
      item.end = dayjs(item.end).valueOf();
      return item
    });
    
    // Global configuration, need to be configured before the icon is initialized Highcharts.setOptions({
      global:
        useUTC: false // Do not use UTC time}, // All are in English by default, some Chinese translations are done here lang: {
        noData: 'No data yet',
        weekdays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        months: ['January', 'January', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
      },
    });
    const dragStart = (e) => {
    }
    const drag = (e) => {
    }
    const drop = (e) => {
      const { newPoint = {}, target = {} } = e;
      if(newPoint.y || newPoint.y === 0) {
        let list = [], tar = newData.find(item => item.y === newPoint.y && item.uid !== target.uid);
        list = newData.map(item => {
          // Current drag data if(item.uid === target.uid) {
            return {
              ...item,
              factory: tar.factory,
              material: tar.material, 
              ...newPoint
            }
          } else {
            return item
          }
        })
        gantt.value.update({
          series: [{
            data: list
          }]
        })
      }
    }
    // Select, you can pop up a window to edit some business data const handleSelect = (e) => {
      console.log('selected')
    }
    // Get the final data const getData = () => {
      let data = gantt.value.series[0].data.map(item => {
        return {
          uid: item.uid,
          factory: item.factory,
          material: item.material,
          start: item.start,
          end: item.end
        }
      })
      console.log(data)
    }


    onMounted(() => {
      try {
        gantt.value = Highcharts.ganttChart('container', {
          title:
            text: 'hightCharts Gantt chart example'
          },
          xAxis: [{
            currentDateIndicator: true,
            tickPixelInterval: 70,
            grid: {
              borderWidth: 1, // Width of the right header border cellHeight: 35, // Height of the right date header },
            labels: {
              align: 'center',
              formatter: function() {
                return `${dayjs(this.value).format('M月D')} ${WEEKS[dayjs(this.value).day()]}`;
              }
            },
          }, {
            labels: {
              align: 'center',
              formatter: function() {
                return `${dayjs(this.value).format('YYYY年M月')}`;
              }
            },
          }],
          yAxis: {
            type: 'category',
            grid: {
              enabled: true,
              borderColor: 'rgba(0,0,0,0.3)',
              borderWidth: 1,
              columns: [
                { title: { text: 'Factory' }, labels: { format: '{point.factory}' } }, 
                { title: { text: 'Model' }, labels: { format: '{point.material}' } }, 
              ]
            }
          },
          tooltip: {
            formatter: function () {
              return `<div>
               Factory: ${this.point.factory}<br/>
              Start time: ${dayjs(this.point.start).format('YYYY-MM-DD HH:mm:ss')}<br/>
              End time: ${dayjs(this.point.end).format('YYYY-MM-DD HH:mm:ss')}<br/>
              </div>`
            }
          },
          series: [{ data: newData }],
          plotOptions: {
            series: {
              animation: false, // Do not animate dependency connectors
              dragDrop: {
                draggableX: true, // horizontal drag draggableY: true, // vertical drag dragMinY: 0, // vertical drag lower limit dragMaxY: 3, // vertical drag upper limit dragPrecisionX: 3600000 // horizontal drag precision, in milliseconds},
              dataLabels: {
                enabled: true,
                format: '{point.factory}-{point.uid}',
                style: {
                  cursor: 'default',
                  pointerEvents: 'none'
                }
              },
              allowPointSelect: true,
              point: {
                events: {
                  dragStart: dragStart,
                  drag: drag,
                  drop: drop,
                  select: handleSelect
                }
              }
            }
          },
          exporting: {
            sourceWidth: 1000
          },
          credits: { // Remove the copyright information in the lower right corner enabled: false
          },
        });
      } catch (error) {
        console.log(error)
      }
    })

    return {
      gantt,
      getData
    }
  },
})
</script>

<style scoped>
.hightChart-gantt {
  overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#container {
    max-width: 1200px;
    min-width: 800px;
    height: 400px;
    margin: 1em auto;
}
</style>