Our state of the art Gantt chart


Post by lfrontoura »

hi,

I have this function that creates a json so I can load it as a url in the transport:

export async function project() {
  let leadTimeLevel = "";
  let minimumOrderQty = "";
  const ItemBranchInfo = await getItemBranchInfo();
  ItemBranchInfo.forEach((element) => {
    leadTimeLevel = element["F4102_LTLV"].internalValue;
    minimumOrderQty = element["F4102_RQMN"].internalValue;
  });
  const itmAvail = await getItemAvailibility();
  const supplDetails = await getCountryCityCode();

  let json = {
    success: true,

project: {
  calendar: "general",
  startDate: "2020-04-20",
},

calendars: {
  rows: [
    {
      id: "general",
      name: "General",
      intervals: [
        {
          recurrentStartDate: "on Sat at 0:00",
          recurrentEndDate: "on Mon at 0:00",
          isWorking: false,
        },
      ],
      expanded: true,
      children: [
        {
          id: "business",
          name: "Business",
          hoursPerDay: 8,
          daysPerWeek: 5,
          daysPerMonth: 20,
          intervals: [
            {
              recurrentStartDate: "every weekday at 12:00",
              recurrentEndDate: "every weekday at 13:00",
              isWorking: false,
            },
            {
              recurrentStartDate: "every weekday at 17:00",
              recurrentEndDate: "every weekday at 08:00",
              isWorking: false,
            },
          ],
        },
        {
          id: "night",
          name: "Night shift",
          hoursPerDay: 8,
          daysPerWeek: 5,
          daysPerMonth: 20,
          intervals: [
            {
              recurrentStartDate: "every weekday at 6:00",
              recurrentEndDate: "every weekday at 22:00",
              isWorking: false,
            },
          ],
        },
      ],
    },
  ],
},

tasks: {
  rows: [
    {
      id: 1,
      name: "006002-13681 Cable M12 male 4p/M12 female (20 EA)",
      startDate: "2019-05-17",
      expanded: true,
      priority: true,
      leadTimeLevel: `${leadTimeLevel}`,
      minimumOrderQty: `${minimumOrderQty}`,
      supplierDetails: supplDetails,
      itemAvailability: itmAvail,
      children: [
        {
          id: 11,
          name:
            "OP 1001: 2289946 (Murrelektronik) - DC11000 (DC Veghel (EDC))",
          percentDone: 100,
          description: "Cable M12 male 4p/M12 female",
          startDate: "2019-05-17",
          color: "teal",
          endDate: "2019-05-24",
          cost: 200,
          line: 1,
          quantity: 50,
          status: "completed",
          rollup: "true",
          shortItmNum: "2055672",
          orderNum: "1001",
          orderType: "OP",
          leadTimeLevel: `${leadTimeLevel}`,
          minimumOrderQty: `${minimumOrderQty}`,
          supplierDetails: supplDetails,
          itemAvailability: itmAvail,
        },
        {
          id: 12,
          name:
            "ST 1001: DC11000 (DC Veghel (EDC)) - DC60000 (DC Acworth (NADC))",
          percentDone: 50,
          description: "Cable M12 male 4p/M12 female",
          startDate: "2019-05-31",
          endDate: "2019-06-07",
          cost: 1000,
          line: 5,
          quantity: 34,
          status: "open and in process",
          rollup: "true",
          shortItmNum: "2055672",
          orderNum: "1001",
          orderType: "ST",
          leadTimeLevel: `${leadTimeLevel}`,
          minimumOrderQty: `${minimumOrderQty}`,
          supplierDetails: supplDetails,
          itemAvailability: itmAvail,
        },
        {
          id: 13,
          name:
            "ST 1001 : DC60000 (DC Acworth (NADC)) - PW1404625 (Project Warehouse)",
          percentDone: 0,
          description: "Cable M12 male 4p/M12 female",
          line: 2,
          duration: 5,
          startDate: "2019-06-07",
          endDate: "2019-06-21",
          cost: 1200,
          quantity: 11,
          status: "open and editable",
          rollup: "true",
          shortItmNum: "2055672",
          orderNum: "1001",
          orderType: "ST",
          leadTimeLevel: `${leadTimeLevel}`,
          minimumOrderQty: `${minimumOrderQty}`,
          supplierDetails: supplDetails,
          itemAvailability: itmAvail,
        },
        {
          id: 14,
          name: "Requested on Site Date",
          percentDone: 0,
          startDate: "2019-06-21",
          endDate: "2019-06-21",
          cost: 5000,
          quantity: 12,
          rollup: "true",
        },
        {
          id: 15,
          name: "Promissed Delivery",
          percentDone: 0,
          startDate: "2019-06-21",
          endDate: "2019-06-21",
          cost: 5000,
          quantity: 98,
          rollup: "true",
        },
      ],
      endDate: "2019-06-21",
    },
    {
      id: 2,
      name: "006002-13687 Cable M12 male 4p/M12 female (5 EA)",
      percentDone: 60,
      startDate: "2019-05-03",
      expanded: true,
      priority: true,
      leadTimeLevel: `${leadTimeLevel}`,
      minimumOrderQty: `${minimumOrderQty}`,
      supplierDetails: supplDetails,
      itemAvailability: itmAvail,
      children: [
        {
          id: 21,
          name:
            "OP 1001: 2289946 (Murrelektronik) - DC11000 (DC Veghel (EDC))",
          percentDone: 30,
          startDate: "2019-01-23",
          endDate: "2019-01-30",
          cost: 500,
          status: "open and editable",
          quantity: 80,
          line: 3,
          description: "Cable M12 male 4p/M12",
          rollup: "true",
          shortItmNum: "2060897",
          orderNum: "1001",
          orderType: "OP",
          leadTimeLevel: `${leadTimeLevel}`,
          minimumOrderQty: `${minimumOrderQty}`,
          supplierDetails: supplDetails,
          itemAvailability: itmAvail,
        },
        {
          id: 22,
          name:
            "ST 1001: DC11000 (DC Veghel (EDC)) - DC60000 (DC Acworth (NADC))",
          percentDone: 60,
          startDate: "2019-01-30",
          endDate: "2019-01-31",
          cost: 1000,
          status: "open and in process",
          quantity: 3,
          line: 2,
          description: "Cable M12 male 4p/M12",
          rollup: "true",
          shortItmNum: "2060897",
          orderNum: "1001",
          orderType: "ST",
          leadTimeLevel: `${leadTimeLevel}`,
          minimumOrderQty: `${minimumOrderQty}`,
          supplierDetails: supplDetails,
          itemAvailability: itmAvail,
        },
        {
          id: 23,
          name:
            "ST 1001 : DC60000 (DC Acworth (NADC)) - PW1404625 (Project Warehouse)",
          percentDone: 50,
          startDate: "2019-01-31",
          endDate: "2019-02-02",
          cost: 1000,
          status: "open and in process",
          quantity: 5,
          line: 10,
          description: "Cable M12 male 4p/M12",
          rollup: "true",
          shortItmNum: "2060897",
          orderNum: "1001",
          orderType: "ST",
          leadTimeLevel: `${leadTimeLevel}`,
          minimumOrderQty: `${minimumOrderQty}`,
          supplierDetails: supplDetails,
          itemAvailability: itmAvail,
        },
        {
          id: 24,
          name: "Requested on Site Date",
          percentDone: 0,
          startDate: "2019-06-21",
          endDate: "2019-06-21",
          cost: 5000,
          quantity: 12,
          rollup: "true",
        },
        {
          id: 25,
          name: "Promissed Delivery",
          percentDone: 0,
          startDate: "2019-06-21",
          endDate: "2019-06-21",
          cost: 5000,
          quantity: 98,
          rollup: "true",
        },
      ],
      endDate: "2019-05-31",
    },
  ],

  endDate: "2019-06-21",
},

dependencies: {
  rows: [
    {
      fromTask: 11,
      toTask: 12,
    },
    {
      fromTask: 12,
      toTask: 13,
    },
    {
      fromTask: 12,
      toTask: 14,
    },
    {
      fromTask: 13,
      toTask: 15,
    },
    {
      fromTask: 21,
      toTask: 22,
    },
    {
      fromTask: 22,
      toTask: 23,
    },
    {
      fromTask: 23,
      toTask: 25,
    },
    {
      fromTask: 22,
      toTask: 23,
    },
  ],
},

resources: {
  rows: [
    { id: 1, name: "Celia", city: "Barcelona", calendar: "general" },
    { id: 2, name: "Lee", city: "London", calendar: "general" },
    { id: 3, name: "Macy", city: "New York", calendar: "general" },
    { id: 4, name: "Madison", city: "Barcelona", calendar: "general" },
    { id: 5, name: "Rob", city: "Rome", calendar: "business" },
    { id: 6, name: "Dave", city: "Barcelona", calendar: "night" },
    { id: 7, name: "Dan", city: "London", calendar: "night" },
    { id: 8, name: "George", city: "New York", calendar: "general" },
    { id: 9, name: "Gloria", city: "Rome", calendar: "general" },
    { id: 10, name: "Henrik", city: "London", calendar: "business" },
  ],
},

assignments: {
  rows: [
    { id: 1, event: 11, resource: 1 },
    { id: 2, event: 12, resource: 1 },
    { id: 3, event: 12, resource: 9 },
    { id: 4, event: 13, resource: 2 },
    { id: 5, event: 13, resource: 3 },
    { id: 6, event: 13, resource: 6 },
    { id: 7, event: 13, resource: 7 },
    { id: 8, event: 13, resource: 8 },
    { id: 9, event: 21, resource: 5 },
    { id: 10, event: 21, resource: 9 },
    { id: 11, event: 22, resource: 8 },
    { id: 12, event: 25, resource: 3 },
  ],
},
  };
  const blob = new Blob([JSON.stringify(json)], {
    type: "application/json",
  });
  const ganttconfigJson = new File([blob], "temp.json", {
    type: "application/json",
    lastModified: Date.now(),
  });
  return URL.createObjectURL(ganttconfigJson);
}

I call the function in a component:

useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    let projectJson = await project();
    setProjectJson(projectJson);
  }

and pass it as a props to its child component where my gantt is rendered:

export default function GanttItems(props) {

  const { projectJson } = props;

  ganttConfig.project = new ProjectModel({
    autoLoad: true,
    transport: {
      load: {
        url: projectJson
      },
    },
  });
  
return ( <div> <Dialog open={true} fullScreen disableEnforceFocus> <AppHeader title={ isEqual(props.data, {}) ? translate("Entry") : translate(`${props.data.projectNumber} ${props.data.projectActivity} (${props.data.name})`) } callbackClose={() => props.callbackClose()} classes={props.classes} /> <div id="rollupsContainer" style={{ height: "100%", marginTop: 64 }}> {projectJson ? <Panel ganttConfig={ganttConfig} /> : null} </div> </Dialog> </div> ); }

Did you change something about the GET request? Because I am not able to load it anymore. It's adding a data parameter to my BLOB and the GET doesn't work anymore. thanks

Attachments
network.PNG
network.PNG (79.02 KiB) Viewed 1006 times
error.PNG
error.PNG (17.03 KiB) Viewed 1006 times

Post by saki »

I was trying to adjust our taskeditor React example to incorporate your project generator function but there are some dependencies missing:

Failed to compile.

./src/components/project.js
  Line 4:32:   'getItemBranchInfo' is not defined    no-undef
  Line 9:26:   'getItemAvailibility' is not defined  no-undef
  Line 10:30:  'getCountryCityCode' is not defined   no-undef

Search for the keywords to learn more about each error.

Would you please modify this example so that it shows the issue and post it here so that we can analyze what is happing?


Post by lfrontoura »

Thanks for the reply, Saki. I got rid of the the functions that didn't work.

export async function project() {
  let json = {
    success: true,

project: {
  calendar: "general",
  startDate: "2020-04-20",
},

calendars: {
  rows: [
    {
      id: "general",
      name: "General",
      intervals: [
        {
          recurrentStartDate: "on Sat at 0:00",
          recurrentEndDate: "on Mon at 0:00",
          isWorking: false,
        },
      ],
      expanded: true,
      children: [
        {
          id: "business",
          name: "Business",
          hoursPerDay: 8,
          daysPerWeek: 5,
          daysPerMonth: 20,
          intervals: [
            {
              recurrentStartDate: "every weekday at 12:00",
              recurrentEndDate: "every weekday at 13:00",
              isWorking: false,
            },
            {
              recurrentStartDate: "every weekday at 17:00",
              recurrentEndDate: "every weekday at 08:00",
              isWorking: false,
            },
          ],
        },
        {
          id: "night",
          name: "Night shift",
          hoursPerDay: 8,
          daysPerWeek: 5,
          daysPerMonth: 20,
          intervals: [
            {
              recurrentStartDate: "every weekday at 6:00",
              recurrentEndDate: "every weekday at 22:00",
              isWorking: false,
            },
          ],
        },
      ],
    },
  ],
},

tasks: {
  rows: [
    {
      id: 1,
      name: "006002-13681 Cable M12 male 4p/M12 female (20 EA)",
      startDate: "2019-05-17",
      expanded: true,
      priority: true,

      children: [
        {
          id: 11,
          name:
            "OP 1001: 2289946 (Murrelektronik) - DC11000 (DC Veghel (EDC))",
          percentDone: 100,
          description: "Cable M12 male 4p/M12 female",
          startDate: "2019-05-17",
          color: "teal",
          endDate: "2019-05-24",
          cost: 200,
          line: 1,
          quantity: 50,
          status: "completed",
          rollup: "true",
          shortItmNum: "2055672",
          orderNum: "1001",
          orderType: "OP",
        },
        {
          id: 12,
          name:
            "ST 1001: DC11000 (DC Veghel (EDC)) - DC60000 (DC Acworth (NADC))",
          percentDone: 50,
          description: "Cable M12 male 4p/M12 female",
          startDate: "2019-05-31",
          endDate: "2019-06-07",
          cost: 1000,
          line: 5,
          quantity: 34,
          status: "open and in process",
          rollup: "true",
          shortItmNum: "2055672",
          orderNum: "1001",
          orderType: "ST",
        },
        {
          id: 13,
          name:
            "ST 1001 : DC60000 (DC Acworth (NADC)) - PW1404625 (Project Warehouse)",
          percentDone: 0,
          description: "Cable M12 male 4p/M12 female",
          line: 2,
          duration: 5,
          startDate: "2019-06-07",
          endDate: "2019-06-21",
          cost: 1200,
          quantity: 11,
          status: "open and editable",
          rollup: "true",
          shortItmNum: "2055672",
          orderNum: "1001",
          orderType: "ST",
        },
        {
          id: 14,
          name: "Requested on Site Date",
          percentDone: 0,
          startDate: "2019-06-21",
          endDate: "2019-06-21",
          cost: 5000,
          quantity: 12,
          rollup: "true",
        },
        {
          id: 15,
          name: "Promissed Delivery",
          percentDone: 0,
          startDate: "2019-06-21",
          endDate: "2019-06-21",
          cost: 5000,
          quantity: 98,
          rollup: "true",
        },
      ],
      endDate: "2019-06-21",
    },
    {
      id: 2,
      name: "006002-13687 Cable M12 male 4p/M12 female (5 EA)",
      percentDone: 60,
      startDate: "2019-05-03",
      expanded: true,
      priority: true,

      children: [
        {
          id: 21,
          name:
            "OP 1001: 2289946 (Murrelektronik) - DC11000 (DC Veghel (EDC))",
          percentDone: 30,
          startDate: "2019-01-23",
          endDate: "2019-01-30",
          cost: 500,
          status: "open and editable",
          quantity: 80,
          line: 3,
          description: "Cable M12 male 4p/M12",
          rollup: "true",
          shortItmNum: "2060897",
          orderNum: "1001",
          orderType: "OP",
        },
        {
          id: 22,
          name:
            "ST 1001: DC11000 (DC Veghel (EDC)) - DC60000 (DC Acworth (NADC))",
          percentDone: 60,
          startDate: "2019-01-30",
          endDate: "2019-01-31",
          cost: 1000,
          status: "open and in process",
          quantity: 3,
          line: 2,
          description: "Cable M12 male 4p/M12",
          rollup: "true",
          shortItmNum: "2060897",
          orderNum: "1001",
          orderType: "ST",
        },
        {
          id: 23,
          name:
            "ST 1001 : DC60000 (DC Acworth (NADC)) - PW1404625 (Project Warehouse)",
          percentDone: 50,
          startDate: "2019-01-31",
          endDate: "2019-02-02",
          cost: 1000,
          status: "open and in process",
          quantity: 5,
          line: 10,
          description: "Cable M12 male 4p/M12",
          rollup: "true",
          shortItmNum: "2060897",
          orderNum: "1001",
          orderType: "ST",
        },
        {
          id: 24,
          name: "Requested on Site Date",
          percentDone: 0,
          startDate: "2019-06-21",
          endDate: "2019-06-21",
          cost: 5000,
          quantity: 12,
          rollup: "true",
        },
        {
          id: 25,
          name: "Promissed Delivery",
          percentDone: 0,
          startDate: "2019-06-21",
          endDate: "2019-06-21",
          cost: 5000,
          quantity: 98,
          rollup: "true",
        },
      ],
      endDate: "2019-05-31",
    },
  ],

  endDate: "2019-06-21",
},

dependencies: {
  rows: [
    {
      fromTask: 11,
      toTask: 12,
    },
    {
      fromTask: 12,
      toTask: 13,
    },
    {
      fromTask: 12,
      toTask: 14,
    },
    {
      fromTask: 13,
      toTask: 15,
    },
    {
      fromTask: 21,
      toTask: 22,
    },
    {
      fromTask: 22,
      toTask: 23,
    },
    {
      fromTask: 23,
      toTask: 25,
    },
    {
      fromTask: 22,
      toTask: 23,
    },
  ],
},

resources: {
  rows: [
    { id: 1, name: "Celia", city: "Barcelona", calendar: "general" },
    { id: 2, name: "Lee", city: "London", calendar: "general" },
    { id: 3, name: "Macy", city: "New York", calendar: "general" },
    { id: 4, name: "Madison", city: "Barcelona", calendar: "general" },
    { id: 5, name: "Rob", city: "Rome", calendar: "business" },
    { id: 6, name: "Dave", city: "Barcelona", calendar: "night" },
    { id: 7, name: "Dan", city: "London", calendar: "night" },
    { id: 8, name: "George", city: "New York", calendar: "general" },
    { id: 9, name: "Gloria", city: "Rome", calendar: "general" },
    { id: 10, name: "Henrik", city: "London", calendar: "business" },
  ],
},

assignments: {
  rows: [
    { id: 1, event: 11, resource: 1 },
    { id: 2, event: 12, resource: 1 },
    { id: 3, event: 12, resource: 9 },
    { id: 4, event: 13, resource: 2 },
    { id: 5, event: 13, resource: 3 },
    { id: 6, event: 13, resource: 6 },
    { id: 7, event: 13, resource: 7 },
    { id: 8, event: 13, resource: 8 },
    { id: 9, event: 21, resource: 5 },
    { id: 10, event: 21, resource: 9 },
    { id: 11, event: 22, resource: 8 },
    { id: 12, event: 25, resource: 3 },
  ],
},
  };
  const blob = new Blob([JSON.stringify(json)], {
    type: "application/json",
  });
  const ganttconfigJson = new File([blob], "temp.json", {
    type: "application/json",
    lastModified: Date.now(),
  });
  return URL.createObjectURL(ganttconfigJson);
}

Post by pmiklashevich »

Hello,

I was able to reproduce the issue with our demo. AjaxTransport.sendRequest was changed. We added this code:

shouldUseBodyForRequestData(packCfg, method, paramName) {
    return !(method === 'HEAD' || method === 'GET') && !paramName;
}

sendRequest(config) {
    .......
    // transfer package in the request body for some types of HTTP requests
    if (me.shouldUseBodyForRequestData(transportConfig, requestConfig.method, paramName)) {
        requestConfig.body = data;

        // for requests having body we set Content-Type to 'application/json' by default
        requestConfig.headers = requestConfig.headers || {};
        requestConfig.headers['Content-Type'] = requestConfig.headers['Content-Type'] || 'application/json';
    }
    else {
        // when we don't use body paramName is mandatory so fallback to 'data' as name
        paramName = paramName || 'data';

        requestConfig.params[paramName] = data;
    }
    .........
}

Basically it means that for GET and HEAD requests paramName is mandatory.
Since you're using GET request and just hardcoded response in your BLOB, you don't need to send params.
You can easily remove them in beforeSend listener:

const project = new ProjectModel({
    listeners : {
        beforeSend({ params }) {
            Reflect.deleteProperty(params, 'data');
        }
    },
    transport : {
        load : {
            // url : '../_datasets/launch-saas.json'
            url : getUrl()
        }
    }
});

I hope this will help you to solve the issue.

Cheers!

Pavlo Miklashevych
Sr. Frontend Developer


Post by lfrontoura »

Thanks for the help, Pavel. It works now!


Post Reply