Timeline Chart using visx

[misterbit-pro]

Hello,

has anyone ever tried to create a timeline chart using visx? I thought about using a BarStackHorizontal chart because it exactly the the representation I am looking for but it seems to not fit the data structure I am getting from the backend. What I need to show is multiple resources where every resource is one row with stacked bars in the chart then. I then wanna show the resourceName on the y axis. Each resourse has a resourceEntry wich would be a bar in the stack. On the x axis I wanna show the time in hours.

Is this accomplishable with visx?

[williaster]

Hi @misterbit-pro - could you possibly share a sketch or other visual representation of what you're hoping to accomplish? "timeline chart" to me is very common but doesn't really match what you're describing so I don't quite follow.

[misterbit-pro]

Hi thx for looking into this. The company I working for has this in an older JSF web app where they used google chart's timeline chart with customizations. This looks like this:

So as you see it jas multiple bars in one row for the booked resources. The also use a grid style so the y axis I was talking about is more like a grid cell. It also has this hover event where it draws a line where you mouse cursor is currently at from the current time. The x axis is visible on the top and bottom.

[misterbit-pro]

My first prototype looks like this currently:

With this code:

import React from 'react'
import { AxisBottom, AxisLeft } from '@visx/axis'
import { Group } from '@visx/group'
import { scaleTime, scaleBand } from '@visx/scale'
import { Bar } from '@visx/shape'
import { timeFormat } from 'd3-time-format'

interface Subtask {
  id: string
  start: Date
  end: Date
}

interface Resource {
  resource: string
  subtasks: Subtask[]
}

const now = new Date()
const twoHoursAgo = new Date(now.getTime() - 2 * 60 * 60 * 1000)
const twentyFourHoursLater = new Date(now.getTime() + 22 * 60 * 60 * 1000)

const data: Resource[] = [
  {
    resource: 'Resource 1',
    subtasks: [
      {
        id: 'subtask1',
        start: new Date(now.getTime() - 1 * 60 * 60 * 1000),
        end: new Date(now.getTime() + 1 * 60 * 60 * 1000),
      },
      {
        id: 'subtask2',
        start: new Date(now.getTime() + 2 * 60 * 60 * 1000),
        end: new Date(now.getTime() + 3 * 60 * 60 * 1000),
      },
    ],
  },
  {
    resource: 'Resource 2',
    subtasks: [
      {
        id: 'subtask3',
        start: new Date(now.getTime() + 1 * 60 * 60 * 1000),
        end: new Date(now.getTime() + 2 * 60 * 60 * 1000),
      },
      {
        id: 'subtask4',
        start: new Date(now.getTime() + 4 * 60 * 60 * 1000),
        end: new Date(now.getTime() + 6 * 60 * 60 * 1000),
      },
    ],
  },
]

const timeScale = scaleTime({
  domain: [twoHoursAgo, twentyFourHoursLater],
  range: [0, 800],
})

const resourceScale = scaleBand({
  domain: data.map(d => d.resource),
  range: [0, 200], // Adjust height for fewer resources
  padding: 0.2,
})

const GanttChart: React.FC = () => {
  return (
    <svg width={900} height={300}>
      <Group top={20} left={100}>
        {data.map((resource, idx) => (
          <Group key={resource.resource} top={resourceScale(resource.resource) ?? 0}>
            {resource.subtasks.map(subtask => (
              <Bar
                key={subtask.id}
                x={timeScale(subtask.start)}
                y={0}
                width={timeScale(subtask.end) - timeScale(subtask.start)}
                height={resourceScale.bandwidth()}
                fill='steelblue'
              />
            ))}
          </Group>
        ))}
        <AxisLeft scale={resourceScale} />
        <AxisBottom
          top={resourceScale.range()[1]}
          scale={timeScale}
          tickFormat={value => timeFormat('%H:%M')(value as Date)}
          numTicks={24}
        />
      </Group>
    </svg>
  )
}

export default GanttChart

I don't know if this is a good practice or how you should do it at all but thats the only thing that worked for me currently :)