Я строю горизонтальную временную диаграмму, где каждая горизонтальная полоса и ее ширина представляют промежуток времени, который потребуется этапу для завершения на основе даты начала и даты окончания sh. Каждый прямоугольник за этими столбцами представляет месяц за этот промежуток времени.
Я ищу помощь в поиске решения, как наиболее точно преобразовать время между начальной и конечной датой sh в%, чтобы я мог точно отобразить эта временная шкала в моем горизонтальном календаре с прокруткой.
Мои данные (даты) будут поступать из объекта JSON, и я планировал использовать data-fns для манипулирования датами по мере необходимости. В настоящее время я использую React. js с Typescript.
Если это вообще сбивает с толку, пожалуйста, не стесняйтесь задавать мне дополнительные вопросы. Спасибо за ваше время!
Вот скриншот того, как выглядит временная шкала в настоящее время. Он прокручивает стрелку влево и вправо, щелкая в этом направлении: Снимок экрана компонента временной шкалы
Вот фрагмент кода моего родительского компонента:
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 = () => {
const [width, setWidth] = useState(0);
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
const getScrollTarget = (node: any, direction: string): number => {
if (direction === "right") {
if (width < node.scrollWidth) {
setWidth(width + 305);
return width + 305;
} else {
return width;
}
} else {
if (width !== 0) {
setWidth(width - 305);
return width - 305;
}
}
return 0;
};
const ref = useRef(null);
const scrollTo = useSmoothScroll("x", ref);
return (
<React.Fragment>
<ProgressBarCom />
<div
style={{
display: "flex",
justifyContent: "center",
marginTop: "11rem"
}}
>
<IconButton
iconProps={{
iconName: "ChevronLeft",
styles: {
root: {
fontSize: "3.5rem",
opacity: "30%",
selectors: {
":hover": {
opacity: "100%"
}
}
}
}
}}
role="button"
onClick={() =>
scrollTo(getScrollTarget(ref.current, "left"), { duration: 800 })
}
style={{
marginTop: "12rem",
color: "grey",
position: "relative",
left: 39
}}
/>
<div
style={{
//display: "flex",
overflowX: "hidden",
width: "75%"
//margin: "7rem auto"
}}
ref={ref}
>
<div>
<div style={{ width: "6000px", display: "flex" }}>
{months.map((month, index) => {
return (
<div
style={{
// display: "flex",
// flexDirection: "column",
//alignItems: "center",
background: index % 2 === 0 ? "#EDEBE9" : "#E5E5E5",
height: "26.8125rem",
width: "15.4375rem",
border: "solid .05rem grey"
}}
>
<p
style={{
borderBottom: "1px solid grey",
width: "75%",
fontFamily: "Segoe UI",
fontSize: ".8rem",
lineHeight: "14px",
fontWeight: "bold",
fontVariantCaps: "all-small-caps",
textAlign: "center",
margin: "0 auto"
//marginTop: ".5rem"
}}
>
{month}
</p>
{index === 0 && (
<Bar
title="BOP"
date="2/07"
width={119}
color="#F78C20"
/>
)}
{index === 1 && (
<Bar
title="ASR"
date="3/22"
width={259}
color="#5F308F"
/>
)}
{index === 2 && (
<div
style={{
position: "relative",
left: "89%",
top: "25%"
}}
>
<Bar
title="EMV"
date="12/22"
width={900}
color="#5F308F"
/>
<div
style={{
display: "flex",
position: "relative",
left: "47%",
top: "88%"
}}
>
<label>EV1</label>
<span
className="dot"
style={{
margin: ".35rem 0 0 .3rem",
height: "8px",
width: " 8px",
backgroundColor: "black",
borderRadius: "95%",
display: "inline-block"
}}
></span>
<div
style={{
width: "18rem",
//height: "1rem",
borderBottom: "black 1px dotted",
alignSelf: "center"
}}
></div>
<span
className="dot"
style={{
margin: ".35rem 0 0 .1rem",
height: "8px",
width: " 8px",
backgroundColor: "black",
borderRadius: "95%",
display: "inline-block"
}}
></span>
</div>
</div>
)}
</div>
);
})}
</div>
</div>
</div>
<IconButton
iconProps={{
iconName: "ChevronRight",
styles: {
root: {
fontSize: "3.5rem",
opacity: "30%",
selectors: {
":hover": {
opacity: "100%"
}
}
}
}
}}
role="button"
onClick={() =>
scrollTo(getScrollTarget(ref.current, "right"), { duration: 800 })
}
style={{
marginTop: "12rem",
color: "grey",
position: "relative",
right: 39
}}
/>
</div>
</React.Fragment>
);
};