Support for View.Mode Minutes or start/end duration?

[darewreck54]

Hi,

I was wondering if it's possible to support a view mode based on minutes or based on just the duration of the total end time minus the start time of all the task?

In my case, the task duration is so short that they all look like the start and end at the same time.

Thanks,
Derek

[darewreck54]

@MaTeMaTuK or @Graeme43 I can try to add this code, but may need some pointers.

I took a look at these changes #105, but there some parts not clear to me.

Specifically, the getCalendarValuesForHour and how where the bottomValues, topPosition, topValues calculated and how you factor the scaling into place. If you could give me some guidance that would be super helpful.

How would the following change with minutes?

const getCalendarValuesForHour = () => {
    const topValues: ReactChild[] = [];
    const bottomValues: ReactChild[] = [];
    const topDefaultHeight = headerHeight * 0.5;
    const dates = dateSetup.dates;
    for (let i = 0; i < dates.length; i++) {
      const date = dates[i];
      const bottomValue = getCachedDateTimeFormat(locale, {
        hour: "numeric",
      }).format(date);

      // Not sure what bottom values are used for in gantt chart...
      bottomValues.push(
        <text
          key={date.getTime()}
          y={headerHeight * 0.8}
          x={columnWidth * (i + +rtl)}
          className={styles.calendarBottomText}
          fontFamily={fontFamily}
        >
          {bottomValue}
        </text>
      );
      if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
        const displayDate = dates[i - 1];
        const topValue = `${getLocalDayOfWeek(
          displayDate,
          locale,
          "long"
        )}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
        const topPosition = (date.getHours() - 24) / 2;
        topValues.push(
          <TopPartOfCalendar
            key={topValue + displayDate.getFullYear()}
            value={topValue}
            x1Line={columnWidth * i}
            y1Line={0}
            y2Line={topDefaultHeight}
            xText={columnWidth * (i + topPosition)}
            yText={topDefaultHeight * 0.9}
          />
        );
      }

[darewreck54]

• columnWidth is 60, so in view mode minute, this would mean minute is = 60 width
• date.getMinutes() returns 0-59, so wouldn't top position be a one to one mapping?

so

 const topPosition = (date.getHours() - 24) / 2;

I think the problem thou is that the current data can exceed the width of the whole gantt chart....which might cause the current component to crash...

Just saw this..how is this computed.

[natocTo]

I would love to see minutes view as well. Did you figure it out? Most of task I am working with are even in seconds. Hard to find library which can render it nicely.

I tried use hour view like that..

viewMode={ViewMode.Hour}
columnWidth={1000}
listCellWidth=""

Like maxium width for single hour. But it is not so great :)

[DanielChen93]

Hi @natocTo , have you find solution yet? Thanks!

[natocTo]

I ended up with own solution based on D3. It Is hardcoded in our codebade now.