Skip to content

Commit 1b08ab2

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Add interactive demos to plugin-gantt and plugin-map documentation
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 9259491 commit 1b08ab2

File tree

2 files changed

+311
-0
lines changed

2 files changed

+311
-0
lines changed

‎content/docs/plugins/plugin-gantt.mdx‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
title: "Plugin Gantt"
33
---
44

5+
import { InteractiveDemo } from '@/app/components/InteractiveDemo';
6+
import { PluginLoader } from '@/app/components/PluginLoader';
7+
58
Gantt chart component for ObjectQL data sources - visualizes project tasks, timelines, and dependencies.
69

710
## Installation
@@ -26,6 +29,178 @@ The `@object-ui/plugin-gantt` plugin provides Gantt chart visualization for Obje
2629
- **Date Ranges**: Automatic date range calculation
2730
- **Interactive**: Click handling for tasks
2831

32+
<PluginLoader plugins={['gantt']}>
33+
34+
## Interactive Examples
35+
36+
### Basic Gantt Chart
37+
38+
<InteractiveDemo
39+
schema={{
40+
type: 'object-gantt',
41+
staticData: [
42+
{
43+
id: 1,
44+
taskName: 'Design Phase',
45+
startDate: '2024-01-01',
46+
endDate: '2024-01-15',
47+
completion: 100
48+
},
49+
{
50+
id: 2,
51+
taskName: 'Development',
52+
startDate: '2024-01-16',
53+
endDate: '2024-02-28',
54+
completion: 60,
55+
dependencies: [1]
56+
},
57+
{
58+
id: 3,
59+
taskName: 'Testing',
60+
startDate: '2024-03-01',
61+
endDate: '2024-03-15',
62+
completion: 0,
63+
dependencies: [2]
64+
}
65+
],
66+
gantt: {
67+
startDateField: 'startDate',
68+
endDateField: 'endDate',
69+
titleField: 'taskName',
70+
progressField: 'completion',
71+
dependenciesField: 'dependencies'
72+
}
73+
}}
74+
title="Project Timeline with Dependencies"
75+
description="A simple project timeline showing tasks, progress, and dependencies"
76+
/>
77+
78+
### Software Development Sprint
79+
80+
<InteractiveDemo
81+
schema={{
82+
type: 'object-gantt',
83+
staticData: [
84+
{
85+
id: 1,
86+
taskName: 'Sprint Planning',
87+
startDate: '2024-01-01',
88+
endDate: '2024-01-03',
89+
completion: 100
90+
},
91+
{
92+
id: 2,
93+
taskName: 'User Authentication',
94+
startDate: '2024-01-04',
95+
endDate: '2024-01-10',
96+
completion: 100,
97+
dependencies: [1]
98+
},
99+
{
100+
id: 3,
101+
taskName: 'Dashboard UI',
102+
startDate: '2024-01-04',
103+
endDate: '2024-01-12',
104+
completion: 85,
105+
dependencies: [1]
106+
},
107+
{
108+
id: 4,
109+
taskName: 'API Integration',
110+
startDate: '2024-01-11',
111+
endDate: '2024-01-18',
112+
completion: 40,
113+
dependencies: [2]
114+
},
115+
{
116+
id: 5,
117+
taskName: 'Testing & QA',
118+
startDate: '2024-01-19',
119+
endDate: '2024-01-25',
120+
completion: 0,
121+
dependencies: [3, 4]
122+
},
123+
{
124+
id: 6,
125+
taskName: 'Deployment',
126+
startDate: '2024-01-26',
127+
endDate: '2024-01-28',
128+
completion: 0,
129+
dependencies: [5]
130+
}
131+
],
132+
gantt: {
133+
startDateField: 'startDate',
134+
endDateField: 'endDate',
135+
titleField: 'taskName',
136+
progressField: 'completion',
137+
dependenciesField: 'dependencies'
138+
}
139+
}}
140+
title="Sprint Development Timeline"
141+
description="Two-week sprint showing parallel tasks and dependencies"
142+
/>
143+
144+
### Construction Project
145+
146+
<InteractiveDemo
147+
schema={{
148+
type: 'object-gantt',
149+
staticData: [
150+
{
151+
id: 1,
152+
phase: 'Site Preparation',
153+
starts_at: '2024-02-01',
154+
ends_at: '2024-02-14',
155+
percent_done: 100
156+
},
157+
{
158+
id: 2,
159+
phase: 'Foundation',
160+
starts_at: '2024-02-15',
161+
ends_at: '2024-03-15',
162+
percent_done: 75,
163+
depends_on: [1]
164+
},
165+
{
166+
id: 3,
167+
phase: 'Framing',
168+
starts_at: '2024-03-16',
169+
ends_at: '2024-04-30',
170+
percent_done: 30,
171+
depends_on: [2]
172+
},
173+
{
174+
id: 4,
175+
phase: 'Electrical & Plumbing',
176+
starts_at: '2024-05-01',
177+
ends_at: '2024-05-31',
178+
percent_done: 0,
179+
depends_on: [3]
180+
},
181+
{
182+
id: 5,
183+
phase: 'Interior Finishing',
184+
starts_at: '2024-06-01',
185+
ends_at: '2024-07-15',
186+
percent_done: 0,
187+
depends_on: [4]
188+
}
189+
],
190+
gantt: {
191+
titleField: 'phase',
192+
startDateField: 'starts_at',
193+
endDateField: 'ends_at',
194+
progressField: 'percent_done',
195+
dependenciesField: 'depends_on'
196+
}
197+
}}
198+
title="Construction Project Phases"
199+
description="Custom field mapping for construction timeline"
200+
/>
201+
202+
</PluginLoader>
203+
29204
## Usage
30205

31206
### Basic Usage with ObjectQL

‎content/docs/plugins/plugin-map.mdx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
title: "Plugin Map"
33
---
44

5+
import { InteractiveDemo } from '@/app/components/InteractiveDemo';
6+
import { PluginLoader } from '@/app/components/PluginLoader';
7+
58
Map visualization component for ObjectQL data sources - displays database records as map markers based on location data.
69

710
## Installation
@@ -26,6 +29,139 @@ The `@object-ui/plugin-map` plugin provides map visualization for ObjectQL data
2629
- **Popup/Tooltip**: Show details on marker click
2730
- **Interactive**: Click handling for markers
2831

32+
<PluginLoader plugins={['map']}>
33+
34+
## Interactive Examples
35+
36+
### Store Locations
37+
38+
<InteractiveDemo
39+
schema={{
40+
type: 'object-map',
41+
staticData: [
42+
{
43+
id: 1,
44+
name: 'San Francisco HQ',
45+
lat: 37.7749,
46+
lng: -122.4194,
47+
address: '123 Market St, San Francisco, CA'
48+
},
49+
{
50+
id: 2,
51+
name: 'Oakland Office',
52+
lat: 37.8044,
53+
lng: -122.2711,
54+
address: '456 Broadway, Oakland, CA'
55+
},
56+
{
57+
id: 3,
58+
name: 'San Jose Branch',
59+
lat: 37.3382,
60+
lng: -121.8863,
61+
address: '789 First St, San Jose, CA'
62+
}
63+
],
64+
map: {
65+
latitudeField: 'lat',
66+
longitudeField: 'lng',
67+
titleField: 'name',
68+
descriptionField: 'address',
69+
zoom: 9
70+
}
71+
}}
72+
title="Store Locator Map"
73+
description="Interactive map showing multiple store locations in the Bay Area"
74+
/>
75+
76+
### Delivery Tracking
77+
78+
<InteractiveDemo
79+
schema={{
80+
type: 'object-map',
81+
staticData: [
82+
{
83+
id: 1,
84+
driver: 'Driver A',
85+
current_lat: 37.7849,
86+
current_lng: -122.4094,
87+
destination: 'Downtown SF'
88+
},
89+
{
90+
id: 2,
91+
driver: 'Driver B',
92+
current_lat: 37.7949,
93+
current_lng: -122.3994,
94+
destination: 'Financial District'
95+
},
96+
{
97+
id: 3,
98+
driver: 'Driver C',
99+
current_lat: 37.7649,
100+
current_lng: -122.4294,
101+
destination: 'Mission District'
102+
}
103+
],
104+
map: {
105+
latitudeField: 'current_lat',
106+
longitudeField: 'current_lng',
107+
titleField: 'driver',
108+
descriptionField: 'destination',
109+
zoom: 12
110+
}
111+
}}
112+
title="Real-time Delivery Tracking"
113+
description="Track delivery drivers with custom field mapping"
114+
/>
115+
116+
### Event Venues
117+
118+
<InteractiveDemo
119+
schema={{
120+
type: 'object-map',
121+
staticData: [
122+
{
123+
id: 1,
124+
venue: 'Conference Center',
125+
latitude: 37.7833,
126+
longitude: -122.4167,
127+
info: 'Capacity: 500 people, A/V equipped'
128+
},
129+
{
130+
id: 2,
131+
venue: 'Exhibition Hall',
132+
latitude: 37.7891,
133+
longitude: -122.3894,
134+
info: 'Capacity: 1000 people, Trade show ready'
135+
},
136+
{
137+
id: 3,
138+
venue: 'Outdoor Amphitheater',
139+
latitude: 37.7694,
140+
longitude: -122.4862,
141+
info: 'Capacity: 2000 people, Open-air venue'
142+
},
143+
{
144+
id: 4,
145+
venue: 'Meeting Room Complex',
146+
latitude: 37.7750,
147+
longitude: -122.4183,
148+
info: 'Multiple rooms, Flexible configurations'
149+
}
150+
],
151+
map: {
152+
latitudeField: 'latitude',
153+
longitudeField: 'longitude',
154+
titleField: 'venue',
155+
descriptionField: 'info',
156+
zoom: 11
157+
}
158+
}}
159+
title="Event Venue Finder"
160+
description="Discover available event venues across the city"
161+
/>
162+
163+
</PluginLoader>
164+
29165
## Usage
30166

31167
### Basic Usage with ObjectQL

0 commit comments

Comments
 (0)