v2.3.1

demos/cases/GanttPerformance.jsx

@@ -0,0 +1,52 @@
+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;