53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import { useState, useEffect, useMemo, useRef } from 'react';
|
|
import { getGeneratedData, complexScales } from '../data';
|
|
import { Gantt } from '../../src/';
|
|
import { Button } from '@svar-ui/react-core';
|
|
import './GanttPerformance.css';
|
|
|
|
function GanttPerformance(props) {
|
|
const { skinSettings } = props;
|
|
|
|
const count = 1000;
|
|
const years = 3;
|
|
const data = useMemo(() => getGeneratedData('', count, years), []);
|
|
|
|
const [start, setStart] = useState(null);
|
|
const outAreaRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (start && outAreaRef.current) {
|
|
outAreaRef.current.innerHTML = new Date() - start;
|
|
}
|
|
}, [start]);
|
|
|
|
return (
|
|
<div className="wx-KB3Eoqwm rows">
|
|
<div className="wx-KB3Eoqwm row">
|
|
{start ? (
|
|
<>
|
|
1 000 tasks ({years} years ) rendered in{' '}
|
|
<span ref={outAreaRef}></span> ms
|
|
</>
|
|
) : (
|
|
<Button type="primary" onClick={() => setStart(new Date())}>
|
|
Press me to render Gantt chart with 1 000 tasks
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{start ? (
|
|
<div className="wx-KB3Eoqwm gtcell">
|
|
<Gantt
|
|
{...skinSettings}
|
|
tasks={data.tasks}
|
|
links={data.links}
|
|
scales={complexScales}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default GanttPerformance;
|