Visual Configuration

Source code

1
import { controlAttributes, createControl } from '@revolist/ui';
2
import { defineCustomElements } from '@revolist/revogrid/loader';
3
defineCustomElements();
4

5
import {
6
  defineGanttToolbar,
7
  GanttPlugin,
8
  GanttCalendarEditorPlugin,
9
  type ProjectSnapshot,
10
} from '@revolist/gantt';
11
import { ExportExcelPlugin, RowSelectPlugin } from '@revolist/revogrid-pro';
12
import { currentTheme } from '../composables/useRandomData';
13
import {
14
  SHOWCASE_ASSIGNMENTS,
15
  SHOWCASE_BASELINES,
16
  SHOWCASE_COLUMNS_WITH_ROW_SELECT,
17
  SHOWCASE_DEPENDENCIES,
18
  SHOWCASE_RESOURCES,
19
  SHOWCASE_TOOLBAR_COLUMNS,
20
  STANDARD_CALENDAR,
21
} from './shared/gantt-project-data';
22
import {
23
  createProductionGanttConfig,
24
  createProductionTasks,
25
  createProductionPersistence,
26
  productionError,
27
  productionSourceRows,
28
} from './GanttProductionPatternsShared';
29
import './gantt-production-patterns.css';
30

31
export function load(parentSelector: string) {
32
  const parent = document.querySelector(parentSelector);
33
  if (!parent) return () => {};
34
  const root = document.createElement('section');
35
  const controls = document.createElement('div');
36
  const status = document.createElement('p');
37
  const toolbar = document.createElement('div');
38
  const grid = document.createElement('revo-grid');
39
  const persistence = createProductionPersistence();
40
  let readOnly = false;
41
  let localized = false;
42
  let large = false;
43
  let project: ProjectSnapshot | null = null;
44
  const applyConfig = () => {
45
    grid.gantt = createProductionGanttConfig(readOnly, localized, project);
46
  };
47
  const applyProject = () => {
48
    applyConfig();
49
    grid.ganttDependencies =
50
      project?.dependencies ?? (large ? [] : SHOWCASE_DEPENDENCIES);
51
    grid.ganttCalendars = project?.calendars ?? [STANDARD_CALENDAR];
52
    grid.ganttResources = project?.resources ?? SHOWCASE_RESOURCES;
53
    grid.ganttAssignments =
54
      project?.assignments ?? (large ? [] : SHOWCASE_ASSIGNMENTS);
55
    grid.ganttBaselines =
56
      project?.baselines ?? (large ? [] : SHOWCASE_BASELINES);
57
    grid.source = project
58
      ? productionSourceRows(project)
59
      : createProductionTasks(large);
60
  };
61
  const toggle = (label: string, update: (value: boolean) => void) => {
62
    const element = document.createElement('label');
63
    const input = createControl(document, 'input', { type: 'checkbox' });
64
    input.type = 'checkbox';
65
    input.addEventListener('change', () => update(input.checked));
66
    element.append(input, document.createTextNode(label));
67
    return { element, input };
68
  };
69
  const run = async (action: () => unknown | Promise<unknown>) => {
70
    try {
71
      await action();
72
    } catch (error) {
73
      status.textContent = productionError(error);
74
    }
75
  };
76
  const button = (label: string, action: () => unknown | Promise<unknown>) => {
77
    const element = createControl(document, 'button', { type: 'button' });
78
    element.type = 'button';
79
    element.textContent = label;
80
    element.className = controlAttributes('button', { class: 'rv-btn' }).class;
81
    element.addEventListener('click', () => {
82
      void run(action);
83
    });
84
    return element;
85
  };
86
  root.className = 'gantt-production-demo';
87
  controls.className = 'gantt-production-controls';
88
  status.className = 'gantt-production-status';
89
  status.setAttribute('role', 'status');
90
  toolbar.className = 'gantt-production-toolbar';
91
  grid.className = 'gantt-production-grid';
92
  grid.theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
93
  grid.hideAttribution = true;
94
  grid.plugins = [
95
    GanttPlugin,
96
    GanttCalendarEditorPlugin,
97
    ExportExcelPlugin,
98
    RowSelectPlugin,
99
  ];
100
  grid.rowSelect = { rowOrder: true };
101
  grid.columns = [...SHOWCASE_COLUMNS_WITH_ROW_SELECT];
102
  const largeToggle = toggle('750 tasks', (value) => {
103
    large = value;
104
    project = null;
105
    applyProject();
106
  });
107
  const restore = button('Restore', async () => {
108
    project = await persistence.load();
109
    large = false;
110
    largeToggle.input.checked = false;
111
    applyProject();
112
    status.textContent =
113
      'Restored the saved project, including tasks and project collections.';
114
  });
115
  restore.disabled = true;
116
  const fileInput = createControl(document, 'input', { type: 'file' });
117
  fileInput.type = 'file';
118
  fileInput.hidden = true;
119
  fileInput.accept = '.json,application/json';
120
  fileInput.setAttribute('aria-label', 'Import JSON file');
121
  fileInput.addEventListener('change', async () => {
122
    const file = fileInput.files?.[0];
123
    if (file)
124
      await run(async () => {
125
        project = await persistence.importFile(file);
126
        large = false;
127
        largeToggle.input.checked = false;
128
        applyProject();
129
        status.textContent = `Imported ${project.tasks.length} tasks from ${file.name}.`;
130
      });
131
    fileInput.value = '';
132
  });
133
  const options = document.createElement('div');
134
  options.className = 'gantt-production-options';
135
  const actions = document.createElement('div');
136
  actions.className = 'gantt-production-actions';
137
  options.append(
138
    toggle('Read only', (value) => {
139
      readOnly = value;
140
      applyConfig();
141
    }).element,
142
    toggle('Español dates', (value) => {
143
      localized = value;
144
      applyConfig();
145
    }).element,
146
    largeToggle.element,
147
  );
148
  actions.append(
149
    fileInput,
150
    button('Import JSON', () => fileInput.click()),
151
    button('JSON', () => persistence.exportFile(grid)),
152
    button('Save', async () => {
153
      await persistence.save(grid);
154
      restore.disabled = false;
155
      status.textContent =
156
        'Saved the current edited project in browser memory.';
157
    }),
158
    restore,
159
    button('Print', () => persistence.print(grid)),
160
  );
161
  controls.append(options, actions);
162
  root.append(controls, status, toolbar, grid);
163
  parent.appendChild(root);
164
  applyProject();
165
  defineGanttToolbar(toolbar, {
166
    grid,
167
    columns: SHOWCASE_TOOLBAR_COLUMNS,
168
    controls: { baseline: true, calendars: true },
169
  });
170
  return () => {
171
    toolbar.textContent = '';
172
    grid.remove();
173
    root.remove();
174
  };
175
}

1
<template>
2
  <section class="gantt-production-demo">
3
    <div class="gantt-production-controls">
4
      <div class="gantt-production-options">
5
        <label
6
          ><input v-rv-control v-model="readOnly" type="checkbox" />Read
7
          only</label
8
        >
9
        <label
10
          ><input v-rv-control v-model="localized" type="checkbox" />Español
11
          dates</label
12
        >
13
        <label
14
          ><input
15
            v-rv-control
16
            v-model="large"
17
            type="checkbox"
18
            @change="project = null"
19
          />750 tasks</label
20
        >
21
      </div>
22
      <div class="gantt-production-actions">
23
        <input
24
          v-rv-control
25
          ref="importInput"
26
          type="file"
27
          hidden
28
          accept=".json,application/json"
29
          aria-label="Import JSON file"
30
          @change="importJson"
31
        />
32
        <button
33
          v-rv-control
34
          type="button"
35
          class="rv-btn"
36
          @click="importInput?.click()"
37
        >
38
          Import JSON
39
        </button>
40
        <button
41
          v-rv-control
42
          type="button"
43
          class="rv-btn"
44
          @click="run(() => persistence.exportFile(getGrid()))"
45
        >
46
          JSON
47
        </button>
48
        <button v-rv-control type="button" class="rv-btn" @click="save">
49
          Save
50
        </button>
51
        <button
52
          v-rv-control
53
          type="button"
54
          class="rv-btn"
55
          :disabled="!hasSaved"
56
          @click="restore"
57
        >
58
          Restore
59
        </button>
60
        <button
61
          v-rv-control
62
          type="button"
63
          class="rv-btn"
64
          @click="run(() => persistence.print(getGrid()))"
65
        >
66
          Print
67
        </button>
68
      </div>
69
    </div>
70
    <p class="gantt-production-status" role="status">{{ status }}</p>
71
    <div ref="toolbarRef" class="gantt-production-toolbar"></div>
72
    <RevoGrid
73
      ref="gridRef"
74
      class="gantt-production-grid"
75
      hide-attribution
76
      :theme="isDark ? 'darkCompact' : 'compact'"
77
      :plugins="plugins"
78
      :row-select.prop="rowSelect"
79
      :source="tasks"
80
      :columns="columns"
81
      :gantt.prop="ganttConfig"
82
      :gantt-dependencies.prop="dependencies"
83
      :gantt-calendars.prop="calendars"
84
      :gantt-resources.prop="resources"
85
      :gantt-assignments.prop="assignments"
86
      :gantt-baselines.prop="baselines"
87
    />
88
  </section>
89
</template>
90

91
<script setup lang="ts">
92
import { vRvControl } from '@revolist/ui/vue-control';
93
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
94
import RevoGrid from '@revolist/vue3-datagrid';
95
import {
96
  defineGanttToolbar,
97
  GanttPlugin,
98
  GanttCalendarEditorPlugin,
99
  type ProjectSnapshot,
100
} from '@revolist/gantt';
101
import { ExportExcelPlugin, RowSelectPlugin } from '@revolist/revogrid-pro';
102
import { currentThemeVue } from '../composables/useRandomData';
103
import {
104
  SHOWCASE_ASSIGNMENTS,
105
  SHOWCASE_BASELINES,
106
  SHOWCASE_COLUMNS_WITH_ROW_SELECT,
107
  SHOWCASE_DEPENDENCIES,
108
  SHOWCASE_RESOURCES,
109
  SHOWCASE_TOOLBAR_COLUMNS,
110
  STANDARD_CALENDAR,
111
} from './shared/gantt-project-data';
112
import {
113
  createProductionGanttConfig,
114
  createProductionTasks,
115
  createProductionPersistence,
116
  productionError,
117
  productionSourceRows,
118
} from './GanttProductionPatternsShared';
119
import './gantt-production-patterns.css';
120
const { isDark } = currentThemeVue();
121
const plugins = [
122
  GanttPlugin,
123
  GanttCalendarEditorPlugin,
124
  ExportExcelPlugin,
125
  RowSelectPlugin,
126
];
127
const rowSelect = { rowOrder: true };
128
const columns = SHOWCASE_COLUMNS_WITH_ROW_SELECT;
129
const readOnly = ref(false);
130
const localized = ref(false);
131
const large = ref(false);
132
const project = ref<ProjectSnapshot | null>(null);
133
const status = ref('');
134
const hasSaved = ref(false);
135
const persistence = createProductionPersistence();
136
const tasks = computed(() =>
137
  project.value
138
    ? productionSourceRows(project.value)
139
    : createProductionTasks(large.value),
140
);
141
const dependencies = computed(
142
  () =>
143
    project.value?.dependencies ?? (large.value ? [] : SHOWCASE_DEPENDENCIES),
144
);
145
const calendars = computed(
146
  () => project.value?.calendars ?? [STANDARD_CALENDAR],
147
);
148
const resources = computed(
149
  () => project.value?.resources ?? SHOWCASE_RESOURCES,
150
);
151
const assignments = computed(
152
  () => project.value?.assignments ?? (large.value ? [] : SHOWCASE_ASSIGNMENTS),
153
);
154
const baselines = computed(
155
  () => project.value?.baselines ?? (large.value ? [] : SHOWCASE_BASELINES),
156
);
157
const ganttConfig = computed(() =>
158
  createProductionGanttConfig(readOnly.value, localized.value, project.value),
159
);
160
const gridRef = ref<InstanceType<typeof RevoGrid> | HTMLRevoGridElement | null>(
161
  null,
162
);
163
const importInput = ref<HTMLInputElement | null>(null);
164
const toolbarRef = ref<HTMLElement | null>(null);
165
let frame = 0;
166
function getGrid(): HTMLRevoGridElement {
167
  const value = gridRef.value as
168
    | (InstanceType<typeof RevoGrid> & { $el?: HTMLRevoGridElement })
169
    | HTMLRevoGridElement
170
    | null;
171
  const grid = value && '$el' in value ? value.$el : value;
172
  if (!(grid instanceof HTMLElement))
173
    throw new Error('The grid is still loading.');
174
  return grid as HTMLRevoGridElement;
175
}
176
async function run(action: () => unknown | Promise<unknown>) {
177
  try {
178
    await action();
179
  } catch (error) {
180
    status.value = productionError(error);
181
  }
182
}
183
async function save() {
184
  await run(async () => {
185
    await persistence.save(getGrid());
186
    hasSaved.value = true;
187
    status.value = 'Saved the current edited project in browser memory.';
188
  });
189
}
190
async function restore() {
191
  await run(async () => {
192
    project.value = await persistence.load();
193
    large.value = false;
194
    status.value =
195
      'Restored the saved project, including tasks and project collections.';
196
  });
197
}
198
async function importJson(event: Event) {
199
  const input = event.target as HTMLInputElement;
200
  const file = input.files?.[0];
201
  if (file)
202
    await run(async () => {
203
      project.value = await persistence.importFile(file);
204
      large.value = false;
205
      status.value = `Imported ${project.value.tasks.length} tasks from ${file.name}.`;
206
    });
207
  input.value = '';
208
}
209
function mountToolbar() {
210
  let grid: HTMLRevoGridElement;
211
  try {
212
    grid = getGrid();
213
  } catch {
214
    frame = requestAnimationFrame(mountToolbar);
215
    return;
216
  }
217
  if (toolbarRef.value)
218
    defineGanttToolbar(toolbarRef.value, {
219
      grid,
220
      columns: SHOWCASE_TOOLBAR_COLUMNS,
221
      controls: { baseline: true, calendars: true },
222
    });
223
}
224
onMounted(async () => {
225
  await nextTick();
226
  mountToolbar();
227
});
228
onBeforeUnmount(() => {
229
  cancelAnimationFrame(frame);
230
  if (toolbarRef.value) toolbarRef.value.textContent = '';
231
});
232
</script>

1
import {
2
  ButtonControl as UiButton,
3
  Input as UiInput,
4
} from '@revolist/ui/react-control';
5
import React, { useEffect, useMemo, useRef, useState } from 'react';
6
import { RevoGrid } from '@revolist/react-datagrid';
7
import {
8
  defineGanttToolbar,
9
  GanttPlugin,
10
  GanttCalendarEditorPlugin,
11
  type ProjectSnapshot,
12
} from '@revolist/gantt';
13
import { ExportExcelPlugin, RowSelectPlugin } from '@revolist/revogrid-pro';
14
import { currentTheme } from '../composables/useRandomData';
15
import {
16
  SHOWCASE_ASSIGNMENTS,
17
  SHOWCASE_BASELINES,
18
  SHOWCASE_COLUMNS_WITH_ROW_SELECT,
19
  SHOWCASE_DEPENDENCIES,
20
  SHOWCASE_RESOURCES,
21
  SHOWCASE_TOOLBAR_COLUMNS,
22
  STANDARD_CALENDAR,
23
} from './shared/gantt-project-data';
24
import {
25
  createProductionGanttConfig,
26
  createProductionTasks,
27
  createProductionPersistence,
28
  productionError,
29
  productionSourceRows,
30
} from './GanttProductionPatternsShared';
31
import './gantt-production-patterns.css';
32

33
export default function GanttProductionPatterns() {
34
  const gridRef = useRef<HTMLRevoGridElement>(null);
35
  const importInput = useRef<HTMLInputElement>(null);
36
  const toolbarRef = useRef<HTMLDivElement>(null);
37
  const [readOnly, setReadOnly] = useState(false);
38
  const [localized, setLocalized] = useState(false);
39
  const [large, setLarge] = useState(false);
40
  const [project, setProject] = useState<ProjectSnapshot | null>(null);
41
  const [status, setStatus] = useState('');
42
  const [hasSaved, setHasSaved] = useState(false);
43
  const persistence = useMemo(() => createProductionPersistence(), []);
44
  const plugins = useMemo(
45
    () => [
46
      GanttPlugin,
47
      GanttCalendarEditorPlugin,
48
      ExportExcelPlugin,
49
      RowSelectPlugin,
50
    ],
51
    [],
52
  );
53
  const rowSelect = useMemo(() => ({ rowOrder: true }), []);
54
  const columns = useMemo(() => SHOWCASE_COLUMNS_WITH_ROW_SELECT, []);
55
  const tasks = useMemo(
56
    () =>
57
      project ? productionSourceRows(project) : createProductionTasks(large),
58
    [project, large],
59
  );
60
  const gantt = useMemo(
61
    () => createProductionGanttConfig(readOnly, localized, project),
62
    [readOnly, localized, project],
63
  );
64
  const dependencies = useMemo(
65
    () => project?.dependencies ?? (large ? [] : SHOWCASE_DEPENDENCIES),
66
    [project, large],
67
  );
68
  const calendars = useMemo(
69
    () => project?.calendars ?? [STANDARD_CALENDAR],
70
    [project],
71
  );
72
  const resources = useMemo(
73
    () => project?.resources ?? SHOWCASE_RESOURCES,
74
    [project],
75
  );
76
  const assignments = useMemo(
77
    () => project?.assignments ?? (large ? [] : SHOWCASE_ASSIGNMENTS),
78
    [project, large],
79
  );
80
  const baselines = useMemo(
81
    () => project?.baselines ?? (large ? [] : SHOWCASE_BASELINES),
82
    [project, large],
83
  );
84
  function getGrid(): HTMLRevoGridElement {
85
    if (!gridRef.current) throw new Error('The grid is still loading.');
86
    return gridRef.current;
87
  }
88
  async function run(action: () => unknown | Promise<unknown>) {
89
    try {
90
      await action();
91
    } catch (error) {
92
      setStatus(productionError(error));
93
    }
94
  }
95
  async function save() {
96
    await run(async () => {
97
      await persistence.save(getGrid());
98
      setHasSaved(true);
99
      setStatus('Saved the current edited project in browser memory.');
100
    });
101
  }
102
  async function restore() {
103
    await run(async () => {
104
      setProject(await persistence.load());
105
      setLarge(false);
106
      setStatus(
107
        'Restored the saved project, including tasks and project collections.',
108
      );
109
    });
110
  }
111
  async function importJson(event: React.ChangeEvent<HTMLInputElement>) {
112
    const input = event.currentTarget;
113
    const file = input.files?.[0];
114
    if (file)
115
      await run(async () => {
116
        const imported = await persistence.importFile(file);
117
        setProject(imported);
118
        setLarge(false);
119
        setStatus(`Imported ${imported.tasks.length} tasks from ${file.name}.`);
120
      });
121
    input.value = '';
122
  }
123
  useEffect(() => {
124
    const toolbar = toolbarRef.current;
125
    if (!toolbar || !gridRef.current) return;
126
    defineGanttToolbar(toolbar, {
127
      grid: gridRef.current,
128
      columns: SHOWCASE_TOOLBAR_COLUMNS,
129
      controls: { baseline: true, calendars: true },
130
    });
131
    return () => {
132
      toolbar.textContent = '';
133
    };
134
  }, []);
135
  return (
136
    <section className="gantt-production-demo">
137
      <div className="gantt-production-controls">
138
        <div className="gantt-production-options">
139
          <label>
140
            <UiInput
141
              type="checkbox"
142
              checked={readOnly}
143
              onChange={(event) => setReadOnly(event.currentTarget.checked)}
144
            />
145
            Read only
146
          </label>
147
          <label>
148
            <UiInput
149
              type="checkbox"
150
              checked={localized}
151
              onChange={(event) => setLocalized(event.currentTarget.checked)}
152
            />
153
            Español dates
154
          </label>
155
          <label>
156
            <UiInput
157
              type="checkbox"
158
              checked={large}
159
              onChange={(event) => {
160
                setLarge(event.currentTarget.checked);
161
                setProject(null);
162
              }}
163
            />
164
            750 tasks
165
          </label>
166
        </div>
167
        <div className="gantt-production-actions">
168
          <UiInput
169
            ref={importInput}
170
            type="file"
171
            hidden
172
            accept=".json,application/json"
173
            aria-label="Import JSON file"
174
            onChange={importJson}
175
          />
176
          <UiButton
177
            type="button"
178
            className="rv-btn"
179
            onClick={() => importInput.current?.click()}
180
          >
181
            Import JSON
182
          </UiButton>
183
          <UiButton
184
            type="button"
185
            className="rv-btn"
186
            onClick={() => {
187
              void run(() => persistence.exportFile(getGrid()));
188
            }}
189
          >
190
            JSON
191
          </UiButton>
192
          <UiButton type="button" className="rv-btn" onClick={save}>
193
            Save
194
          </UiButton>
195
          <UiButton
196
            type="button"
197
            className="rv-btn"
198
            disabled={!hasSaved}
199
            onClick={restore}
200
          >
201
            Restore
202
          </UiButton>
203
          <UiButton
204
            type="button"
205
            className="rv-btn"
206
            onClick={() => {
207
              void run(() => persistence.print(getGrid()));
208
            }}
209
          >
210
            Print
211
          </UiButton>
212
        </div>
213
      </div>
214
      <p className="gantt-production-status" role="status">
215
        {status}
216
      </p>
217
      <div ref={toolbarRef} className="gantt-production-toolbar" />
218
      <RevoGrid
219
        ref={gridRef}
220
        className="gantt-production-grid"
221
        theme={currentTheme().isDark() ? 'darkCompact' : 'compact'}
222
        hideAttribution
223
        plugins={plugins}
224
        rowSelect={rowSelect}
225
        source={tasks}
226
        columns={columns}
227
        gantt={gantt}
228
        ganttDependencies={dependencies}
229
        ganttCalendars={calendars}
230
        ganttResources={resources}
231
        ganttAssignments={assignments}
232
        ganttBaselines={baselines}
233
      />
234
    </section>
235
  );
236
}

1
import { UiControlDirective } from '@revolist/ui/angular-control';
2
import {
3
  ChangeDetectorRef,
4
  inject,
5
  AfterViewInit,
6
  Component,
7
  ElementRef,
8
  NO_ERRORS_SCHEMA,
9
  OnDestroy,
10
  ViewChild,
11
  ViewEncapsulation,
12
} from '@angular/core';
13
import { RevoGrid } from '@revolist/angular-datagrid';
14
import {
15
  defineGanttToolbar,
16
  GanttPlugin,
17
  GanttCalendarEditorPlugin,
18
  type ProjectSnapshot,
19
} from '@revolist/gantt';
20
import { ExportExcelPlugin, RowSelectPlugin } from '@revolist/revogrid-pro';
21
import { currentTheme } from '../composables/useRandomData';
22
import {
23
  SHOWCASE_ASSIGNMENTS,
24
  SHOWCASE_BASELINES,
25
  SHOWCASE_COLUMNS_WITH_ROW_SELECT,
26
  SHOWCASE_DEPENDENCIES,
27
  SHOWCASE_RESOURCES,
28
  SHOWCASE_TOOLBAR_COLUMNS,
29
  STANDARD_CALENDAR,
30
} from './shared/gantt-project-data';
31
import {
32
  createProductionGanttConfig,
33
  createProductionTasks,
34
  createProductionPersistence,
35
  productionError,
36
  productionSourceRows,
37
} from './GanttProductionPatternsShared';
38

39
@Component({
40
  selector: 'gantt-production-patterns-grid',
41
  standalone: true,
42
  schemas: [NO_ERRORS_SCHEMA],
43
  imports: [UiControlDirective, RevoGrid],
44
  styleUrls: ['./gantt-production-patterns.css'],
45
  encapsulation: ViewEncapsulation.None,
46
  template: `<section class="gantt-production-demo">
47
    <div class="gantt-production-controls">
48
      <div class="gantt-production-options">
49
        <label
50
          ><input
51
            rvControl
52
            type="checkbox"
53
            [checked]="readOnly"
54
            (change)="setReadOnly($any($event.target).checked)"
55
          />Read only</label
56
        >
57
        <label
58
          ><input
59
            rvControl
60
            type="checkbox"
61
            [checked]="localized"
62
            (change)="setLocalized($any($event.target).checked)"
63
          />Español dates</label
64
        >
65
        <label
66
          ><input
67
            rvControl
68
            type="checkbox"
69
            [checked]="large"
70
            (change)="setLarge($any($event.target).checked)"
71
          />750 tasks</label
72
        >
73
      </div>
74
      <div class="gantt-production-actions">
75
        <input
76
          rvControl
77
          #importFile
78
          type="file"
79
          hidden
80
          accept=".json,application/json"
81
          aria-label="Import JSON file"
82
          (change)="importJson($event)"
83
        />
84
        <button
85
          rvControl
86
          type="button"
87
          class="rv-btn"
88
          (click)="importFile.click()"
89
        >
90
          Import JSON
91
        </button>
92
        <button rvControl type="button" class="rv-btn" (click)="exportJson()">
93
          JSON
94
        </button>
95
        <button rvControl type="button" class="rv-btn" (click)="save()">
96
          Save
97
        </button>
98
        <button
99
          rvControl
100
          type="button"
101
          class="rv-btn"
102
          [disabled]="!hasSaved"
103
          (click)="restore()"
104
        >
105
          Restore
106
        </button>
107
        <button rvControl type="button" class="rv-btn" (click)="print()">
108
          Print
109
        </button>
110
      </div>
111
    </div>
112
    <p class="gantt-production-status" role="status">{{ status }}</p>
113
    <div #toolbar class="gantt-production-toolbar"></div>
114
    <revo-grid
115
      #grid
116
      class="gantt-production-grid"
117
      [theme]="theme"
118
      [hideAttribution]="true"
119
      [plugins]="plugins"
120
      [rowSelect]="rowSelect"
121
      [source]="tasks"
122
      [columns]="columns"
123
      [gantt]="ganttConfig"
124
      [ganttDependencies]="dependencies"
125
      [ganttCalendars]="calendars"
126
      [ganttResources]="resources"
127
      [ganttAssignments]="assignments"
128
      [ganttBaselines]="baselines"
129
    ></revo-grid>
130
  </section>`,
131
})
132
export class GanttProductionPatternsGridComponent
133
  implements AfterViewInit, OnDestroy
134
{
135
  private readonly changeDetector = inject(ChangeDetectorRef);
136
  @ViewChild('grid', { read: ElementRef })
137
  gridRef!: ElementRef<HTMLRevoGridElement>;
138
  @ViewChild('toolbar', { read: ElementRef })
139
  toolbarRef!: ElementRef<HTMLElement>;
140
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
141
  plugins = [
142
    GanttPlugin,
143
    GanttCalendarEditorPlugin,
144
    ExportExcelPlugin,
145
    RowSelectPlugin,
146
  ];
147
  rowSelect = { rowOrder: true };
148
  columns = SHOWCASE_COLUMNS_WITH_ROW_SELECT;
149
  calendars = [STANDARD_CALENDAR];
150
  resources = [...SHOWCASE_RESOURCES];
151
  assignments = [...SHOWCASE_ASSIGNMENTS];
152
  baselines = [...SHOWCASE_BASELINES];
153
  readOnly = false;
154
  localized = false;
155
  large = false;
156
  tasks = createProductionTasks();
157
  dependencies = SHOWCASE_DEPENDENCIES;
158
  project: ProjectSnapshot | null = null;
159
  status = '';
160
  hasSaved = false;
161
  private persistence = createProductionPersistence();
162
  ganttConfig = createProductionGanttConfig();
163
  private refresh() {
164
    this.ganttConfig = createProductionGanttConfig(
165
      this.readOnly,
166
      this.localized,
167
      this.project,
168
    );
169
  }
170
  private refreshProject() {
171
    this.tasks = this.project
172
      ? productionSourceRows(this.project)
173
      : createProductionTasks(this.large);
174
    this.dependencies = [
175
      ...(this.project?.dependencies ??
176
        (this.large ? [] : SHOWCASE_DEPENDENCIES)),
177
    ];
178
    this.calendars = [...(this.project?.calendars ?? [STANDARD_CALENDAR])];
179
    this.resources = [...(this.project?.resources ?? SHOWCASE_RESOURCES)];
180
    this.assignments = [
181
      ...(this.project?.assignments ??
182
        (this.large ? [] : SHOWCASE_ASSIGNMENTS)),
183
    ];
184
    this.baselines = [
185
      ...(this.project?.baselines ?? (this.large ? [] : SHOWCASE_BASELINES)),
186
    ];
187
    this.refresh();
188
  }
189
  private getGrid(): HTMLRevoGridElement {
190
    const grid = this.gridRef?.nativeElement;
191
    if (!grid) throw new Error('The grid is still loading.');
192
    return grid;
193
  }
194
  private async run(action: () => unknown | Promise<unknown>) {
195
    try {
196
      await action();
197
    } catch (error) {
198
      this.status = productionError(error);
199
    } finally {
200
      this.changeDetector.markForCheck();
201
    }
202
  }
203
  setReadOnly(value: boolean) {
204
    this.readOnly = value;
205
    this.refresh();
206
  }
207
  setLocalized(value: boolean) {
208
    this.localized = value;
209
    this.refresh();
210
  }
211
  setLarge(value: boolean) {
212
    this.large = value;
213
    this.project = null;
214
    this.refreshProject();
215
  }
216
  exportJson() {
217
    return this.run(() => this.persistence.exportFile(this.getGrid()));
218
  }
219
  print() {
220
    return this.run(() => this.persistence.print(this.getGrid()));
221
  }
222
  save() {
223
    return this.run(async () => {
224
      await this.persistence.save(this.getGrid());
225
      this.hasSaved = true;
226
      this.status = 'Saved the current edited project in browser memory.';
227
    });
228
  }
229
  restore() {
230
    return this.run(async () => {
231
      this.project = await this.persistence.load();
232
      this.large = false;
233
      this.refreshProject();
234
      this.status =
235
        'Restored the saved project, including tasks and project collections.';
236
    });
237
  }
238
  async importJson(event: Event) {
239
    const input = event.target as HTMLInputElement;
240
    const file = input.files?.[0];
241
    if (file)
242
      await this.run(async () => {
243
        this.project = await this.persistence.importFile(file);
244
        this.large = false;
245
        this.refreshProject();
246
        this.status = `Imported ${this.project.tasks.length} tasks from ${file.name}.`;
247
      });
248
    input.value = '';
249
  }
250
  ngAfterViewInit() {
251
    defineGanttToolbar(this.toolbarRef.nativeElement, {
252
      grid: this.gridRef.nativeElement,
253
      columns: SHOWCASE_TOOLBAR_COLUMNS,
254
      controls: { baseline: true, calendars: true },
255
    });
256
  }
257
  ngOnDestroy() {
258
    if (this.toolbarRef?.nativeElement)
259
      this.toolbarRef.nativeElement.textContent = '';
260
  }
261
}

1
import {
2
  exportProjectSnapshot,
3
  parseProjectSnapshotJson,
4
  type GanttPluginConfig,
5
  type GanttTaskSourceRow,
6
  type ProjectSnapshot,
7
} from '@revolist/gantt';
8
type ISODateString = import('@revolist/gantt').TaskEntity['startDate'];
9
import { getGanttScheduleSnapshot } from './recipes/current-schedule-snapshot';
10
import { ProjectSnapshotRestAdapter } from './recipes/rest-adapter';
11
import { printGanttContainer } from './recipes/print-pdf-recipe';
12
import {
13
  SHOWCASE_ASSIGNMENTS,
14
  SHOWCASE_BASELINES,
15
  SHOWCASE_DEPENDENCIES,
16
  SHOWCASE_GANTT_CONFIG,
17
  SHOWCASE_RESOURCES,
18
  SHOWCASE_TASKS,
19
  STANDARD_CALENDAR,
20
} from './shared/gantt-project-data';
21

22
export function createProductionGanttConfig(
23
  readOnly = false,
24
  localized = false,
25
  project?: ProjectSnapshot | null,
26
): GanttPluginConfig {
27
  return {
28
    ...SHOWCASE_GANTT_CONFIG,
29
    ...(project
30
      ? {
31
          id: project.id,
32
          name: project.name,
33
          version: project.version,
34
          currency: project.currency,
35
          timeZone: project.timeZone,
36
          primaryCalendarId: project.primaryCalendarId,
37
          updatedAt: project.updatedAt,
38
          durationSettings: project.durationSettings,
39
          calendars: project.calendars,
40
        }
41
      : {}),
42
    allowTaskCreate: true,
43
    taskCreateRow: true,
44
    readOnly,
45
    labels: localized
46
      ? {
47
          taskMode: { auto: 'Automática', manual: 'Manual' },
48
          workflowStatus: {
49
            'not-started': 'Sin iniciar',
50
            'in-progress': 'En curso',
51
            done: 'Finalizada',
52
            blocked: 'Bloqueada',
53
          },
54
        }
55
      : undefined,
56
    dateFormats: localized
57
      ? {
58
          locale: 'es-ES',
59
          table: { dateStyle: 'medium' },
60
          tooltip: { dateStyle: 'long' },
61
        }
62
      : undefined,
63
    visuals: {
64
      ...SHOWCASE_GANTT_CONFIG.visuals,
65
      showBaseline: true,
66
      showTaskLabels: true,
67
      timeRanges: [
68
        {
69
          id: 'release-window',
70
          startDate: '2026-02-16',
71
          endDate: '2026-02-20',
72
          label: 'Release window',
73
          color: '#8b5cf633',
74
        },
75
      ],
76
      milestoneLines: [
77
        {
78
          id: 'go-live',
79
          date: '2026-02-27',
80
          label: 'Go live',
81
          color: '#e11d48',
82
        },
83
      ],
84
      taskMarkerHook: (task) =>
85
        task.deadlineDate
86
          ? [
87
              {
88
                id: `deadline-${task.id}`,
89
                date: task.deadlineDate,
90
                label: 'Deadline',
91
              },
92
            ]
93
          : [],
94
      taskBarColorHook: ({ row }) =>
95
        row.id === SHOWCASE_TASKS[1].id
96
          ? { barColor: '#64748b', className: 'gantt-production-locked' }
97
          : undefined,
98
      taskTooltipFields: [
99
        'startDate',
100
        'endDate',
101
        'duration',
102
        'percentDone',
103
        'assignees',
104
      ],
105
    },
106
  } as GanttPluginConfig;
107
}
108

109
export function createProductionTasks(large = false): GanttTaskSourceRow[] {
110
  if (!large) {
111
    return SHOWCASE_TASKS.map((task, index) => ({
112
      ...task,
113
      ...(index === 1 ? { locked: true } : {}),
114
    })) as GanttTaskSourceRow[];
115
  }
116

117
  return Array.from({ length: 750 }, (_, index) => {
118
    const day = 2 + (index % 20);
119
    return {
120
      id: `large-${index + 1}`,
121
      name: `Virtualized task ${index + 1}`,
122
      startDate: `2026-02-${String(day).padStart(2, '0')}` as ISODateString,
123
      duration: 1 + (index % 5),
124
      durationUnit: 'day',
125
      percentDone: (index * 7) % 101,
126
      taskMode: 'manual',
127
      locked: index % 17 === 0,
128
    } satisfies GanttTaskSourceRow;
129
  });
130
}
131

132
export function productionSourceRows(
133
  project: ProjectSnapshot,
134
): GanttTaskSourceRow[] {
135
  return project.tasks.map((task) => ({
136
    ...task,
137
    durationUnit: task.durationUnit ?? 'hour',
138
    percentDone: task.progressPercent,
139
    taskMode: task.manuallyScheduled ? 'manual' : 'auto',
140
  }));
141
}
142

143
export async function getProductionProject(
144
  grid: HTMLRevoGridElement,
145
): Promise<ProjectSnapshot> {
146
  return getGanttScheduleSnapshot(grid);
147
}
148

149
export function downloadProductionSnapshot(project: ProjectSnapshot): void {
150
  const href = URL.createObjectURL(
151
    new Blob([exportProjectSnapshot(project, { space: 2 })], {
152
      type: 'application/json',
153
    }),
154
  );
155
  const link = document.createElement('a');
156
  link.href = href;
157
  link.download = 'gantt-project.json';
158
  link.click();
159
  setTimeout(() => URL.revokeObjectURL(href), 0);
160
}
161

162
/** A real REST recipe with an injected browser-memory transport; no server is contacted. */
163
export function createProductionPersistence() {
164
  let savedJson: string | undefined;
165
  const adapter = new ProjectSnapshotRestAdapter({
166
    url: '/example/project',
167
    fetchImpl: (async (_input, init) => {
168
      if (init?.method === 'PUT') {
169
        savedJson = String(init.body);
170
        return new Response(null, { status: 204 });
171
      }
172
      return new Response(savedJson ?? 'No saved project', {
173
        status: savedJson ? 200 : 404,
174
      });
175
    }) as typeof fetch,
176
  });
177
  return {
178
    save: async (grid: HTMLRevoGridElement) =>
179
      adapter.save(await getProductionProject(grid)),
180
    load: () => adapter.load(),
181
    importFile: async (file: Pick<File, 'text'>): Promise<ProjectSnapshot> => {
182
      const parsed = parseProjectSnapshotJson(await file.text());
183
      if (parsed.ok === false) throw new Error(parsed.error);
184
      return parsed.project;
185
    },
186
    exportFile: async (grid: HTMLRevoGridElement) =>
187
      downloadProductionSnapshot(await getProductionProject(grid)),
188
    print: (grid: HTMLRevoGridElement) => {
189
      const result = printGanttContainer(grid.parentElement, {
190
        cleanupDelayMs: 60_000,
191
        hideSelectors: [
192
          '.gantt-production-controls',
193
          '.gantt-production-status',
194
          '.gantt-production-toolbar',
195
          '.gantt-toolbar',
196
          '.rgContextMenu',
197
        ],
198
        metadata: { title: grid.gantt?.name ?? 'Project schedule' },
199
      });
200
      if (!result.ok) throw new Error('The print preview could not be opened.');
201
    },
202
  };
203
}
204

205
export function productionError(error: unknown): string {
206
  return error instanceof Error ? error.message : 'The operation failed.';
207
}

gantt.visuals controls overlays and rendering hooks:

percentDoneMode selects the project-wide number, bar (default), or circle rendering for the managed % Done task-table column using the shared Pro progress renderers. An authored { prop: 'percentDone', mode: '...' } column overrides it.
showBaseline, baselineId
showCriticalPath
showTaskLabels
projectLineDate, showTodayLine, milestoneLines
timeRanges, shadeNonWorkingTime
taskMarkerHook, taskBarColorHook, taskBarContentHook
taskTooltipFields, taskTooltipHook

Use taskTooltipFields when you only need to choose which built-in fields appear in task-bar tooltips:

1
grid.gantt = {
2
  ...project,
3
  visuals: {
4
    taskTooltipFields: [
5
      'name',
6
      'startDate',
7
      'endDate',
8
      { field: 'percentDone', label: 'Complete' },
9
      'assignees',
10
    ],
11
  },
12
};

taskTooltipFields is an ordered array. Each entry can be a field id string or an object with a field and optional label:

1
type GanttTaskTooltipField =
2
  | GanttTaskTooltipFieldId
3
  | { field: GanttTaskTooltipFieldId; label?: string };

Object entries let you rename a built-in line. Set label: '' to render only the value without a Label: prefix.

1
visuals: {
2
  taskTooltipFields: [
3
    { field: 'name', label: '' },
4
    { field: 'percentDone', label: 'Done' },
5
  ],
6
}

Supported built-in fields:

Field	Tooltip output
`summary`	Task name and completion percent, for example `Design - 50%`.
`name`	Task name.
`percentDone`	Completion percent.
`taskType`	Human-readable task type.
`status`	Human-readable task status.
`startDate`	Scheduled start date, formatted with `gantt.dateFormats.tooltip`.
`endDate`	Scheduled end date, formatted with `gantt.dateFormats.tooltip`.
`duration`	Formatted task duration in its retained or project-selected unit.
`taskMode`	`Auto Scheduled` or `Manually Scheduled`.
`schedulingWarnings`	Scheduling warnings joined into one line; skipped when empty.
`cost`	Formatted task cost; skipped when empty.
`assignees`	Comma-separated assignee names; skipped when empty.

When taskTooltipFields is omitted, Gantt keeps the default tooltip: summary, taskType, status, startDate, endDate, duration, taskMode, schedulingWarnings, cost, and assignees. An empty array intentionally renders an empty tooltip.

taskTooltipHook has priority over taskTooltipFields and can replace the whole tooltip string:

1
visuals: {
2
  taskTooltipFields: ['name'],
3
  taskTooltipHook: ({ row }) => `${row.name}\n${row.status}`,
4
}

Return null or undefined from taskTooltipHook to fall back to taskTooltipFields or the default tooltip. Use the hook for custom row metadata that is not part of the built-in field list.

Type source: packages/gantt/src/gantt/grid/gantt-plugin.types.ts. Rendering sources: features/timeline-background/*, grid/gantt-column-type.ts.

Visual Configuration

Task tooltip API