v2.4.3

demos/cases/ProSummariesProgress.jsx

@@ -0,0 +1,131 @@
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { getData } from '../data';
+import { Gantt, Editor, getEditorItems, ContextMenu } from '../../src';
+import './ProSummariesProgress.css';
+
+function SummariesProgress({ skinSettings }) {
+  const data = useMemo(() => getData(), []);
+  const tasks = data.tasks;
+
+  const [api, setApi] = useState();
+
+  const dayDiff = (next, prev) => {
+    const d = (next - prev) / 1000 / 60 / 60 / 24;
+    return Math.ceil(Math.abs(d));
+  };
+
+  /**
+   * The formula of calculation is ∑d*p / ∑d , where "d" is task duration in days,
+   * "p" is the task progress and "∑" stands for a sum of all loaded tasks
+   */
+  function getSummaryProgress(id) {
+    const [totalProgress, totalDuration] = collectProgressFromKids(id);
+    const res = totalProgress / totalDuration;
+    return isNaN(res) ? 0 : Math.round(res);
+  }
+
+  function collectProgressFromKids(id) {
+    let totalProgress = 0,
+      totalDuration = 0;
+    const kids = api.getTask(id).data;
+
+    kids?.forEach((kid) => {
+      let duration = 0;
+      if (kid.type !== 'milestone' && kid.type !== 'summary') {
+        duration = kid.duration || dayDiff(kid.end, kid.start);
+        totalDuration += duration;
+        totalProgress += duration * kid.progress;
+      }
+
+      const [p, d] = collectProgressFromKids(kid.id);
+      totalProgress += p;
+      totalDuration += d;
+    });
+    return [totalProgress, totalDuration];
+  }
+
+  function recalcSummaryProgress(id, self) {
+    const { tasks } = api.getState();
+    const task = api.getTask(id);
+
+    if (task.type != 'milestone') {
+      const summary =
+        self && task.type === 'summary' ? id : tasks.getSummaryId(id);
+
+      if (summary) {
+        const progress = getSummaryProgress(summary);
+        api.exec('update-task', {
+          id: summary,
+          task: { progress },
+        });
+      }
+    }
+  }
+  const recalcRef = useRef(null);
+  recalcRef.current = recalcSummaryProgress;
+
+  const init = useCallback((api) => {
+    setApi(api);
+    // auto progress calculations
+    api.on('add-task', ({ id }) => {
+      recalcRef.current(id);
+    });
+    api.on('update-task', ({ id }) => {
+      recalcRef.current(id);
+    });
+
+    api.on('delete-task', ({ source }) => {
+      recalcRef.current(source, true);
+    });
+    api.on('copy-task', ({ id }) => {
+      recalcRef.current(id);
+    });
+    api.on('move-task', ({ id, source, inProgress }) => {
+      if (inProgress) return;
+
+      if (api.getTask(id).parent != source) recalcRef.current(source, true);
+      recalcRef.current(id);
+    });
+
+  }, []);
+
+  return (
+    <div className="wx-OeNgRLo4 wrapper">
+      <ContextMenu api={api}>
+        <div className="wx-OeNgRLo4 gt-cell">
+          <Gantt
+            {...skinSettings}
+            init={init}
+            tasks={tasks}
+            links={data.links}
+            scales={data.scales}
+            cellWidth={30}
+          />
+        </div>
+      </ContextMenu>
+      {api && <ConfiguredEditor api={api} />}
+    </div>
+  );
+}
+
+function ConfiguredEditor({ api }) {
+  const [editorItems, setEditorItems] = useState(getEditorItems());
+
+    // disabling progress slider for summary tasks
+    api.on('show-editor', ({ id }) => {
+      if (id) {
+        const type = api.getTask(id).type;
+        setEditorItems(
+          getEditorItems().map((ed) => ({
+            ...ed,
+            ...(ed.key == 'progress' && {
+              config: { disabled: type === 'summary' },
+            }),
+          })),
+        );
+      }
+    });
+  return <Editor api={api} items={editorItems} />;
+}
+
+export default SummariesProgress;