I am in the process of creating a unique horizontal timeline chart that visually represents the time span of milestones based on their start and finish dates. Each bar on the timeline corresponds to a milestone, and each rectangle behind the bars signifies a month within that time frame.
I need assistance with accurately converting the time between the start and finish date into a percentage value so that I can display the timeline bar correctly on my horizontally scrollable calendar component.
The data (dates) will be sourced from a JSON object, and my plan is to utilize data-fns for any necessary date manipulations. Currently, I am working with React.js along with Typescript for this project.
If you find this information perplexing, please feel free to ask me for further clarification. Thank you for taking the time!
To give you an idea of what the timeline currently looks like, here's a screenshot: Screenshot of the timeline component
Here is a snippet of code from my parent component:import React from "react";
import useSmoothScroll from "use-smooth-scroll";
import { useRef, useState } from "react";
import { IconButton } from "office-ui-fabric-react";
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
import { ProgressBarCom } from "./ProgressBarCom";
import { Bar } from "./Bar";
initializeIcons();
export const TheSchedule: React.FC = () => {
// Code snippet continues...
};