Task types in Gantt

Marek

Can I create and use custom task types with different colors in the Gantt chart? I want to distinguish between different types of tasks visually. For example, red for urgent/high priority tasks and blue for low priority tasks. Can I link these task types with the task editor dialog?

SVAR_tech

You can customize the look of a task type by adding CSS rules for each task type using its id.
Example:

<script>
   import { getData } from "../data";
   import { Gantt } from "../../src/";

   const {links, scales, columns} = getData();

   const tasks = [
   {
       id: 1,
       start: new Date(2024, 3, 2),
       end: new Date(2024, 3, 17),
       text: "Project planning",
       progress: 30,
       parent: 0,
       type: "summary",
       open: true,
       details: "Outline the project's scope and resources.",
   },
   {
       id: 10,
       start: new Date(2024, 3, 2),
       end: new Date(2024, 3, 5),
       text: "Marketing analysis",
       progress: 100,
       parent: 1,
       type: "task",
       details: "Analyze market trends and competitors.",
   },
   {
       id: 11,
       start: new Date(2024, 3, 5),
       end: new Date(2024, 3, 7),
       text: "Discussions",
       progress: 100,
       parent: 1,
       type: "task",
       details: "Team discussions on project strategies.",
   },
   {
       id: 110,
       start: new Date(2024, 3, 6),
       end: new Date(2024, 3, 9),
       text: "Initial design",
       progress: 60,
       parent: 11,
       type: "urgent",
       details: "Draft initial design concepts.",
   },
   {
       id: 111,
       start: new Date(2024, 3, 9),
       text: "Presentation",
       progress: 0,
       parent: 11,
       type: "milestone",
       details: "Present initial designs to stakeholders.",
   },
   {
       id: 112,
       start: new Date(2024, 3, 7),
       end: new Date(2024, 3, 12),
       text: "Prototyping",
       progress: 10,
       parent: 11,
       type: "narrow",
   },
   {
       id: 113,
       start: new Date(2024, 3, 8),
       end: new Date(2024, 3, 17),
       text: "User testing",
       progress: 0,
       parent: 11,
       type: "progress",
   },];

   const taskTypes = [
   { id: "task", label: "Task" },
   { id: "summary", label: "Summary task" },
   { id: "milestone", label: "Milestone" },
   { id: "urgent", label: "Urgent" },
   { id: "narrow", label: "Narrow" },
   { id: "progress", label: "Progress" },
];

</script>

<div class="demo">
   <Gantt {links} {scales} {columns} {tasks} {taskTypes} />
</div>

<style>
   .demo {
       overflow: hidden;
       height: 100%;
   }
   //style rules for the "narrow" type
   .demo > :global(.wx-gantt .wx-bar.wx-task.narrow) {
       background-color: #676a81;
       color: transparent;
       height: 10px !important;
       margin-top: 10px;
       border: 1px solid #63667a;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.narrow .wx-progress-percent) {
       background-color: #1a2630;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.narrow .wx-link) {
       background-color: #384047;
       border-radius: 0px;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.narrow .wx-link .wx-inner) {
       border-radius: 0px;
   }
  
   .demo > :global(.wx-gantt .wx-progress-percent) {
       background-color: #ffc107;
   }
   //style rules for the "progress" type
   .demo > :global(.wx-gantt .wx-bar.wx-task.progress) {
       background-color: transparent;
       color: var(--wx-color-font);
       border-radius: 50px;
       border: 1px solid #00bcd4;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.progress .wx-progress-percent) {
       background-color: #00bcd4;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.progress .wx-progress-wrapper) {
       border-radius: 50px;
   }
   //style rules for the "urgent" type
   .demo > :global(.wx-gantt .wx-bar.wx-task.urgent) {
       background-color: #f49a82;
       border: 1px solid #f45e36;
   }
   .demo > :global(.wx-gantt .wx-bar.wx-task.urgent .wx-progress-percent) {
       background-color: #f45e36;
   }
</style>

MoltenLight

I am using wx-react-gantt in a React environment. I have seen this example for adding taskTypes, but it does not work for me. When I use the WIllowDark theme everything looks fine, but when I try this example all I get is white text on a black background. I put the .demo portion in the EventTimeline.css file.

I imagine I'll feel silly when I learn the solution but I'm just not seeing the issue. Thanks

import React, { useState } from 'react';
import { Gantt } from "wx-react-gantt";
import { Willow, WillowDark } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import "./EventTimeline.css"

function EventTimeline(props) {
    console.log(props)

    const tasks = [
        {
          id: 1,
          text: "Type23_F233",
          start: new Date(2040,  0, 16,  8, 30,  0),
          end:   new Date(2040,  0, 16, 20, 30,  0),
          progress: 50,
          type: "task",
          lazy: false,
        },
        {
          id: 2,
          text: "LPD-4",
          start: new Date(2040,  0, 16,  8, 30,  0),
          end:   new Date(2040,  0, 16, 18,  0,  0),
          duration: 9.5,
          progress: 0,
          parent: 0,
          type: "task",
        },
        {
          id: 3,
          text: "LPD-4",
          start: new Date(2040,  0, 16, 18,  0,  0),
          end:   new Date(2040,  0, 16, 20, 30,  0),
          duration: 2.5,
          progress: 0,
          parent: 0,
          type: "summary",
        },
        {
            id: 4,
            text: "Type23_F237",
            start: new Date(2040,  0, 16, 10,  0,  0),
            end:   new Date(2040,  0, 17,  8, 30,  0),
            duration: 22.5,
            progress: 0,
            type: "task",
            lazy: false,
        },
        {
            id: 4,
            text: "LPD-1",
            start: new Date(2040,  0, 16,  9,  0,  0),
            end:   new Date(2040,  0, 16, 11, 30,  0),
            duration: 15.5,
            progress: 0,
            type: "project",
            lazy: false,
        },
    ];

    const taskTypes = [
        { id: "task", label: "Task" },
        { id: "summary", label: "Summary task" },
        { id: "milestone", label: "Milestone" },
        { id: "urgent", label: "Urgent" },
        { id: "narrow", label: "Narrow" },
        { id: "progress", label: "Progress" },
      ];
    
      const links = [{ id: "L1", source: 2, target: 3, type: "e2s" }];
    
      const scales = [
        { unit: "day", step: 1, format: "d" },
        { unit: "hour", step: 2, format: "HH" },
      ];

      const dayStyle = (a) => {
        const day = a.getDay() === 5 || a.getDay() === 6;
        return day ? "sday" : "";
      };

      const markers = [
        {
            start: new Date(2040,  0, 16,  20, 30,  0),
            text: "Round 2",
        },
      ];
      
      const complexScales = [
        { unit: "year", step: 1, format: "yyyy" },
        { unit: "month", step: 2, format: "MMMM yyy" },
        { unit: "week", step: 1, format: "w" },
        { unit: "day", step: 1, format: "d", css: dayStyle },
      ];
   
    //   return(
    //     <WillowDark>
    //         <Gantt 
    //             tasks={tasks} 
    //             links={links} 
    //             scales={scales}
    //             taskTypes={taskTypes}
    //             start={new Date(2040,  0, 16,  8, 30,  0)}
    //             end  ={new Date(2040,  0, 18,  8, 30,  0)}
    //             cellWidth={20}
    //         />
    //     </WillowDark>
    //   );
    // }

    return(
        <div className="demo" style={{ padding: "20px" }}>
            <Gantt 
                tasks={tasks} 
                links={links} 
                scales={scales}
                taskTypes={taskTypes}
                start={new Date(2040,  0, 16,  8, 30,  0)}
                end  ={new Date(2040,  0, 18,  8, 30,  0)}
                cellWidth={20}
            />
        </div>
      );
    }
export default EventTimeline;

tasha

Hello MoltenLight

The above example was for the Svelte Gantt Component.
To apply css styles for the React Gantt component you need to remove :global from the css rules in you EventTimeline.css file.

Please check the example: https://stackblitz.com/edit/vitejs-vite-mtxcklxm?file=src%2FGantt.jsx,src%2FEventTimeline.css

MoltenLight

Hi tasha

Thanks for the clarification! I am new to all this and knew I was missing something subtle, but didn't know what.

Thanks for the quick reply

MoltenLight

When I use your example many of the colors are different, gridlines and + signs don't show, etc. I found that by wrapping the classname div in Willow, this resolves some of the issues, but not all. By working with the css file I was able to fix a few more issues. More significantly is that for me there is no difference between Willow and WillowDark; they are both Willow. I cannot get the Dark mode to work. This is true even with no customization. I would appreciate knowing how to resolve this. Thanks
Update: I got Dark Mode to mostly work by replacing <WillowDark> with <body class="wx-willow-dark-theme">