Our state of the art Gantt chart


Post by rahulranjan »

Here is the code
// import { SechduleService } from './sechdule.service';
import { Component, OnInit, ElementRef } from '@angular/core';
import { Gantt, ProjectModel, Panel, WidgetHelper, CrudManager, GlobalEvents, Toast, DomHelper } from 'bryntum-gantt';
import ganttToolbar from './ganttToolbar';
import { Renderer2 } from '@angular/core';
import ganttConfig from './ganttConfig';
import Task from './Task.js';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'AngularBrytum';
  private elementRef: ElementRef;
  constructor(element: ElementRef, private render: Renderer2) {
    this.elementRef = element;
  }

  async ngOnInit() {
    //let info = await this.service.loadWbsData('BkO0wRXI4');
    const project = new ProjectModel({
      autoLoad: true,
      transport: {
        load: {
          method: 'GET',
          disableCaching: false,
          url: 'https://localhost:8028/ganttServer/load.php',
          paramName: 'q'
        },
        sync: {
          url: 'https://localhost:8028/ganttServer/sync.php'
        }
      }

      // tasksData: info.data.tasks.rows,
      // resourcesData: info.data.resources.rows,
      // assignmentsData: info.data.assignments.rows,
      // dependenciesData: info.data.dependencies.rows,
    });

    // For View Present Check https://www.bryntum.com/docs/gantt/#Scheduler/preset/PresetManager
    //weekAndMonth weekDateAndMonth  monthAndYear  year 
    const gantt = new Gantt({
      project: project,
      ...ganttConfig,
      viewPreset: 'weekAndMonth',
    });
    const panel = new Panel({
      appendTo: this.elementRef.nativeElement.firstElementChild,
      widgets: [
        gantt
      ],
      tbar: {
        items: [
          ganttToolbar(gantt),
          {
            type: 'widget',
            cls: 'label-theme',
            // html: 'select Theme:'
          },
          {
            type: 'buttonGroup',
            items: ['Summarize Data', 'Schedule Check', 'Resource Monthly Spread', 'Upload'].map(name => {
              return {
                type: 'button',
                id: name.toLowerCase(),
                color: 'b-blue',
                text: name,
                onAction({ source: button }) {
                  WidgetHelper.toast('No Operation For Now Just for Demo Purpose');
                }
              };
            })
          },
          {
            type: 'buttonGroup',
            items: ['Stockholm', 'Light', 'Dark', 'Material', 'Default'].map(name => {
              return {
                type: 'button',
                id: name.toLowerCase(),
                color: 'b-blue',
                text: name,
                pressed: DomHelper.themeInfo.name === name,
                enableToggle: true,
                toggleGroup: 'theme',
                onAction({ source: button }) {
                  DomHelper.setTheme(button.text.toLowerCase());
                }
              };
            })
          }
        ]
      },
    });
    GlobalEvents.on({
      theme: function theme(themeChangeEvent) {
        WidgetHelper.getById(themeChangeEvent.theme).pressed = true;
      }
    });
    // project.load().then(() => {
    //   console.log('Project Loaded')
    // });
  }
}
Last edited by rahulranjan on Mon May 20, 2019 11:32 am, edited 1 time in total.

Post by mats »

Please never post code without using CODE tags

Post by rahulranjan »

Okay Edited and placed the section in code

Post by pmiklashevich »

You ask about the same thing in a different way in different topics. Duplicated: viewtopic.php?f=52&t=11180

Pavlo Miklashevych
Sr. Frontend Developer


Post by rahulranjan »

Achieved It Thanks a lot

Post Reply