reactjs - How to Optimize GanttComponent Performance for Large Data Sets (200+ Rows)? - Stack Overflow

admin管理员组

文章数量:1335157

I'm using the GanttComponent (shown in the code below) to display a dataset of around 200 rows. However, it's taking approximately 15 seconds to load. While I understand that enabling enableVirtualization could improve performance, I'm exploring if there are other optimizations I can implement to reduce the loading time further.

Key Points:

• I'm rendering a Gantt chart with custom column templates.
• There are 11 additional columns (not included in the example).
• Tooltip and header customization are in use, as seen in the code.
• The dataset is provided via ref.current.dataSource.

Here’s the relevant code snippet:

const Gantt = forwardRef((props, ref) => {
  const headerTemplate = useCallback((args) => {
    switch (args.field) {
      case "name": {
        return (
          <Box
            sx={{
              alignItems: "flex-start",
              display: "flex",
              flexDirection: "row",
              gap: "10px",
              justifyContent: "space-between",
              overflow: "hidden",
            }}
          >
            <Box
              sx={{
                flex: 1,
                textOverflow: "ellipsis",
                overflow: "hidden",
              }}
            >
              {tTest("Names")}
              <br />
              &nbsp;
            </Box>
          </Box>
        );
      }
      // 11 more columns
      default:
        break;
    }
    return null;
  }, []);

  const template = useCallback((field) => (args) => {
    switch (field) {
      case "name":
        return (
          <Box
            sx={{
              alignItems: "center",
              display: "flex",
              flexDirection: "row",
              gap: "10px",
              justifyContent: "space-between",
              overflow: "hidden",
            }}
          >
            <Tooltip name={args.taskData.name}>{args.taskData.name}</Tooltip>
          </Box>
        );
      // 11 more columns
      default:
        break;
    }
    return null;
  }, []);

  const settings = useMemo(() => {
    return {
      allowSelection: false,
      columns: [
        {
          autoFit: true,
          field: "name",
          headerTemplate,
          isPrimaryKey: true,
          template: template("name"),
          visible: true,
          width: "500px",
        },
      ],
      taskFields: {
        id: "id",
        name: "name",
        startDate: "startDate",
        duration: "duration",
        progress: "progress",
        child: "child",
      },
      width: "100%",
      gridLines: "Both",
      tooltipSettings: {
        showTooltip: true,
      },
    };
  }, []);

  return (
    <Box sx={{ display: "flex", flexDirection: "row", flexGrow: 1, overflow: "hidden" }}>
      <GanttComponent {...settings}>
        <Inject services={[DayMarkers]} />
      </GanttComponent>
    </Box>
  );
});

Questions:

1. Besides enabling enableVirtualization, are there other ways to optimize the initial load performance?
2. Could the issue be related to how custom templates (header or row) are implemented?
3. Is there a more efficient way to manage such customizations or handle large datasets in GanttComponent?

Any help or suggestions from experienced users of GanttComponent would be greatly appreciated.

本文标签： reactjsHow to Optimize GanttComponent Performance for Large Data Sets (200 Rows)Stack Overflow