Настройка диаграммы Ганта React Js - PullRequest
Новая
       53

Настройка диаграммы Ганта React Js

0 голосов
/ 14 июля 2020

Я работаю над интеграцией диаграммы Ганта в React JS. Я использовал эту библиотеку frappe-gantt-react .

Вот мой код ниже. 

import React,{Component} from 'react';
import { FrappeGantt } from 'frappe-gantt-react';

import moment from 'moment';

class GantChart3 extends Component {
    constructor(props){
        super(props);
        this.state={
            mode:'Quarter Day',
            formComponent:[],
            selectedTask:{},
            tasks:[]
        }
    }


onClickHandler = (task)=>{
    console.log('task : '+JSON.stringify(task));
}

  onGanttChartTimeChange = (SelectedTask, start, end) => {
    var localStartTime  = moment.utc(start).toDate();
    var localEndTime  = moment.utc(end).toDate();
    localStartTime = moment(localStartTime).format('YYYY-MM-DD HH:mm:ss');
    localEndTime = moment(localEndTime).format('YYYY-MM-DD HH:mm:ss');
    let task = this.state.tasks.filter(tasks=>tasks.id===SelectedTask.id);
    let index = this.state.tasks.findIndex(task=>task.id===SelectedTask.id);
       if(task !== undefined){
          task[0].start=localStartTime;
          task[0].end=localEndTime;
        let taskTemp =[...this.state.tasks];
        taskTemp.splice(index,1,task[0]);
        this.setState({
          tasks:taskTemp,
          selectedTask:task[0]
        });
      }
  };

  async componentDidMount(){
      let tasks1 = [{
        id: 'Task_1',
        name: 'Redesign website',
        start: '2016-12-28 13:30:00',
        end: '2016-12-31 14:30:00',
        progress: 20,
        dependencies: ''
        },
        {
          id: 'Task_2',
          name: 'Coding',
          start: '2017-01-05 15:30:00',
          end: '2017-01-10 16:30:00',
          progress: 99,
          dependencies: ''
          },{
            id: 'Task_3',
            name: 'Testing',
            start: '2016-12-28 13:30:00',
            end: '2016-12-31 14:30:00',
            progress: 35,
            dependencies: ''
            },
            {
              id: 'Task_4',
              name: 'deployment',
              start: '2016-12-28 15:30:00',
              end: '2016-12-31 16:30:00',
              progress: 60,
              dependencies: ''
              }
        ];
        this.setState({
          tasks:tasks1
        });
  }
   
render(){


      let frappeComponent = '';
      if (this.state.tasks !== undefined && this.state.tasks.length>0){
        frappeComponent = <FrappeGantt
        tasks={this.state.tasks}
        viewMode={this.state.mode}
        onClick={task => this.onClickHandler(task)}
        onDateChange={(task, start, end) => this.onGanttChartTimeChange(task, start, end)}
        onProgressChange={(task, progress) => console.log(task, progress)}
        onTasksChange={tasks => console.log(tasks)}
    />
      }
     

 return(
    <div>
    {frappeComponent}
        
    </div>
 );
}
}

export default GantChart3;

import React from 'react';
import GanttChart3 from './components/GanttChart3';

function App() {
  return (
    <div>
    <GanttChart3/>
  </div>
  );
}

export default App;

Приведенный выше код отображается, как показано ниже.

Вопрос 1. Поддерживаются следующие режимы просмотра: Четверть дня, Полдня, День, Неделя, Месяц . В заголовке мне нужно отображать дату в 1-часовом формате. Может кто подскажет, как это сделать?

Вопрос 2. Мне нужно вывести несколько столбцов в левую часть этого графика. Может кто подскажет, как это сделать?

Заранее спасибо.

...