External control

GI-Gantt chart can be controlled exernally by using normal React state management.

This enables user preferences to be saved between sessions or the ability to focus on specific elements by other UI interactions.

import { GanttChart } from "@gantt-insights/gi-gantt-react";
import { useEffect, useState } from "react";

export function Example() {
  const [columnSize, setColumnSize] = useState(50);
  const [tableSize, setTableSize] = useState(55);

  const [selectedDay, setSelectedDay] = useState<number | null>(null);
  useEffect(() => {
    if (selectedDay !== null) {
      document.querySelector(`#day-1-${selectedDay}`)?.scrollIntoView();
    }
  }, [selectedDay]);

  return (
    // eslint-disable-next-line tailwindcss/no-custom-classname
    <div className="not-content" style={{ height: 120 }}>
      <div className="flex flex-col items-end">
        <div className="flex flex-row items-center gap-2 p-2">
          <label htmlFor="col-width">Column width</label>
          <input
            id="col-width"
            className="rounded-sm border-2 border-solid border-gray-600 bg-transparent"
            type="number"
            value={columnSize}
            onChange={(e) => setColumnSize(parseFloat(e.target.value))}
          />
        </div>
        <div className="flex flex-row items-center gap-2 p-2">
          <label htmlFor="table-width">Table width</label>
          <input
            className="rounded-sm border-2 border-solid border-gray-600 bg-transparent"
            id="table-width"
            type="number"
            value={tableSize}
            onChange={(e) => setTableSize(parseFloat(e.target.value))}
          />
        </div>
        <div className="flex flex-row items-center gap-2 p-2">
          <label htmlFor="table-width">Focus on February date</label>
          <input
            className="rounded-sm border-2 border-solid border-gray-600 bg-transparent"
            id="table-width"
            type="number"
            onChange={(e) => setSelectedDay(parseFloat(e.target.value))}
          />
        </div>
      </div>

      <GanttChart
        data={[
          {
            id: "1",
            fields: {
              id: () => <>1</>,
            },
            activities: [
              {
                id: "1-1",
                from: new Date(2024, 1, 3),
                to: new Date(2024, 1, 12),
                renderElement: () => (
                  <div className="size-full p-2">
                    <div className="size-full bg-sky-400"></div>
                  </div>
                ),
              },
            ],
          },
        ]}
        dateTimeframeRenderElements={{
          day: (_year, monthIndex, day) => () => (
            <div
              id={`day-${monthIndex}-${day.toString()}`}
              style={{
                backgroundColor:
                  monthIndex === 1 && selectedDay === day
                    ? "red"
                    : "transparent",
              }}
            >
              {day}
            </div>
          ),
          month: (year, monthIndex) => () => (
            <>
              {year}-{monthIndex + 1}
            </>
          ),
        }}
        columns={[
          {
            id: "id",
            renderElement: () => <>ID</>,
            width: columnSize,
          },
        ]}
        links={[]}
        timeframes={[]}
        markers={[]}
        zoomLevel={14}
        chartStyle={{
          tableHeaderBackgroundColor: "var(--sl-color-bg-nav)",
          tableHeaderBorderSize: [1, 0, 1, 0],
          tableHeaderBorderColor: "var(--sl-color-hairline-light)",
          tableRowBackgroundColor: "transparent",
          tableRowHighlightColor: "rgba(0,0,0,0.1)",
          tableRowBorderSize: [1, 0, 1, 0],
          tableRowBorderColor: "var(--sl-color-bg-nav)",
          timelineHeaderBackgroundColor: "var(--sl-color-bg-sidebar)",
          timelineHeaderHighlightColor: "rgba(0,0,0,0.1)",
          timelineHeaderBorderSize: 1,
          timelineHeaderBorderColor: "var(--sl-color-hairline-light)",
          timelineActivityBackgroundColor: "transparent",
          timelineActivityHighlightColor: "rgba(0,0,0,0.1)",
          timelineActivityBorderSize: 1,
          timelineActivityBorderColor: "transparent",
          tableResizerColor: "transparent",
          tableResizerActiveColor: "var(--sl-color-text-invert)",
          tableResizerHoverColor: "var(--sl-color-text-accent)",
          tableResizerWidth: 2,
          fieldResizerColor: "transparent",
          fieldResizerActiveColor: "var(--sl-color-text-invert)",
          fieldResizerHoverColor: "var(--sl-color-text-accent)",
          fieldResizerWidth: 2,
          linkColor: "var(--sl-color-text-accent)",
          linkWidth: 3,
          rowHeight: 30,
        }}
        tableContainerWidth={tableSize}
      />
    </div>
  );
}