npm package: @micromerger/xpert-planner
Description: ganttchart for Associated Terminals Dev
Author: micromerger
Latest version: 1.1.7

# xpert-planner

> ganttchart for Associated Terminals Dev

[![NPM](https://img.shields.io/npm/v/react-planner-ganttchart-mm.svg)](https://www.npmjs.com/package/react-planner-ganttchart-mm) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Demo

![ezgif com-gif-maker](https://user-images.githubusercontent.com/64144024/213673265-ef364eee-d7ab-4130-b1c0-e866634efac4.gif)

## Install

```bash
npm install --save @micromerger/xpert-planner
```

## Usage

```jsx
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

```table
shifts: 4,
  tasks: [],
  resources: []
```

## Sample Data

```jsx
// 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](https://github.com/micromerger)