xpert-planner

ganttchart for Associated Terminals Dev

Demo

Install

npm install --save @micromerger/xpert-planner

Usage

import React, { useState } from 'react'
import ReactPlanner from '@micromerger/xpert-planner'

const App = () => {
  const [loading, setLoading] = useState(true)
  const [loadingJ, setLoadingJ] = useState(true)
  const [tasks, setTasks] = useState(taskData)
  const [resources, setResources] = useState(resourceData)

  const handleDragEvent = (taskDuration) => {
    console.log('updated task object after drag event', taskDuration)
    // call update task here
  }

  return (
    <div>
      <ReactPlanner
        shifts={4}
        handleDragEvent={handleDragEvent}
        tasks={tasks}
        setTasks={setTasks}
        resources={resources}
        setResources={setResources}
      />
    </div>
  )
}

Default Values

If props will not be passed then default values will be used

shifts: 4,
  tasks: [],
  resources: []

Sample Data

// Sample data for tasks
const taskData = [
  {
    id: 1,
    name: 'new vessel ',
    start: '2023-03-22T07:05:37.498Z',
    end: '2023-03-25T07:05:40.887Z',
    cranes: [
      {
        id: 1,
        start: '2023-03-22T09:39:10.019Z',
        end: '2023-03-25T09:39:14.573Z',
        status: true,
        crane_name: 'Crane 1',
        color: 'red'
      },
      {
        id: 2,
        start: '2023-03-22T09:39:40.543Z',
        end: '2023-03-25T09:39:45.581Z',
        status: true,
        crane_name: 'Crane 2',
        color: 'blue'
      },
      {
        id: 3,
        start: '2023-03-22T09:39:58.140Z',
        end: '2023-03-25T09:40:03.445Z',
        status: true,
        crane_name: 'Crane 3',
        color: 'green'
      }
    ]
  },
  {
    id: 2,
    name: 'new vessel 1',
    start: '2023-03-27T09:34:34.633Z',
    end: '2023-03-31T09:34:37.468Z',
    cranes: [
      {
        id: 4,
        start: '2023-03-27T09:40:55.216Z',
        end: '2023-03-31T09:40:58.202Z',
        status: false,
        crane_name: 'Crane 4',
        color: 'yellow'
      },
      {
        id: 5,
        start: '2023-03-27T09:41:09.633Z',
        end: '2023-03-31T09:41:12.782Z',
        status: false,
        crane_name: 'Crane 5',
        color: 'black'
      },
      {
        id: 6,
        start: '2023-03-27T09:41:22.904Z',
        end: '2023-03-31T09:41:28.564Z',
        status: false,
        crane_name: 'Crane 6',
        color: 'orange'
      }
    ]
  },
  {
    id: 3,
    name: 'new vessel 3',
    start: '2023-03-27T10:52:42.345Z',
    end: '2023-03-29T10:52:45.161Z',
    cranes: [
      {
        id: 1,
        start: '2023-03-27T10:54:26.789Z',
        end: '2023-03-29T10:54:31.374Z',
        status: true,
        crane_name: 'Crane 1',
        color: 'red'
      },
      {
        id: 2,
        start: '2023-03-27T10:53:35.151Z',
        end: '2023-03-29T10:53:52.166Z',
        status: true,
        crane_name: 'Crane 2',
        color: 'blue'
      },
      {
        id: 3,
        start: '2023-03-27T10:54:10.008Z',
        end: '2023-03-29T10:54:15.563Z',
        status: true,
        crane_name: 'Crane 3',
        color: 'green'
      }
    ]
  },
  {
    id: 4,
    name: 'new vessel 4',
    start: '2023-03-01T05:20:34.854Z',
    end: '2023-03-06T05:20:40.703Z',
    cranes: [
      {
        id: 1,
        start: '2023-03-01T05:21:01.208Z',
        end: '2023-03-06T05:21:13.800Z',
        status: true,
        crane_name: 'Crane 1',
        color: 'red'
      }
    ]
  }
]

// Sample data for resources
const resourceData = [
  {
    id: 1,
    crane_name: 'Crane 1',
    color: 'red',
    createAt: '2023-03-22T07:07:52.748Z',
    updateAt: '2023-03-22T07:07:52.748Z'
  },
  {
    id: 2,
    crane_name: 'Crane 2',
    color: 'blue',
    createAt: '2023-03-22T07:12:41.260Z',
    updateAt: '2023-03-22T07:12:41.260Z'
  },
  {
    id: 3,
    crane_name: 'Crane 3',
    color: 'green',
    createAt: '2023-03-22T07:13:36.145Z',
    updateAt: '2023-03-22T07:13:36.145Z'
  },
  {
    id: 4,
    crane_name: 'Crane 4',
    color: 'yellow',
    createAt: '2023-03-22T07:16:31.426Z',
    updateAt: '2023-03-22T07:16:31.426Z'
  },
  {
    id: 5,
    crane_name: 'Crane 5',
    color: 'black',
    createAt: '2023-03-22T07:16:43.631Z',
    updateAt: '2023-03-22T07:16:43.631Z'
  },
  {
    id: 6,
    crane_name: 'Crane 6',
    color: 'orange',
    createAt: '2023-03-22T07:16:57.717Z',
    updateAt: '2023-03-22T07:16:57.717Z'
  }
]

License

MIT © micromerger