Skip to content

Commit 8a175c7

Browse files
hotlonghotlong
committed
feat: add grid column and gap properties to dashboard schemas and implementations
1 parent 5c820b0 commit 8a175c7

5 files changed

Lines changed: 31 additions & 19 deletions

File tree

‎examples/app-crm/src/dashboards/crm.dashboard.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const CrmOverviewDashboard: Dashboard = {
2020
label: 'CRM Overview',
2121
description: 'Revenue metrics, pipeline analytics, and deal insights',
2222

23+
columns: 12,
24+
gap: 4,
2325
refreshInterval: 300,
2426

2527
header: {
@@ -151,9 +153,9 @@ export const CrmOverviewDashboard: Dashboard = {
151153
showLegend: false,
152154
showDataLabels: false,
153155
colors: ['#10B981'],
154-
xAxis: { field: 'close_date', title: 'Month', showGridLines: false },
155-
yAxis: [{ field: 'amount', title: 'Revenue', format: '$0,0', showGridLines: true }],
156-
interaction: { tooltips: true, brush: true },
156+
xAxis: { field: 'close_date', title: 'Month', showGridLines: false, logarithmic: false },
157+
yAxis: [{ field: 'amount', title: 'Revenue', format: '$0,0', showGridLines: true, logarithmic: false }],
158+
interaction: { tooltips: true, brush: true, zoom: false },
157159
},
158160
options: { dateGranularity: 'month' },
159161
},
@@ -212,8 +214,8 @@ export const CrmOverviewDashboard: Dashboard = {
212214
showLegend: false,
213215
showDataLabels: true,
214216
colors: ['#4F46E5'],
215-
xAxis: { field: 'category', title: 'Category', showGridLines: false },
216-
yAxis: [{ field: 'price', title: 'Revenue', format: '$0,0', showGridLines: true }],
217+
xAxis: { field: 'category', title: 'Category', showGridLines: false, logarithmic: false },
218+
yAxis: [{ field: 'price', title: 'Revenue', format: '$0,0', showGridLines: true, logarithmic: false }],
217219
},
218220
},
219221

‎examples/app-crm/src/dashboards/executive.dashboard.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ export const ExecutiveDashboard: Dashboard = {
1616
label: 'Executive Overview',
1717
description: 'High-level revenue, customer, and pipeline KPIs for leadership',
1818

19+
columns: 12,
20+
gap: 4,
1921
refreshInterval: 300, // 5 minutes
2022

2123
header: {
@@ -157,8 +159,8 @@ export const ExecutiveDashboard: Dashboard = {
157159
showLegend: false,
158160
showDataLabels: false,
159161
colors: ['#10B981'],
160-
xAxis: { field: 'close_date', title: 'Month', showGridLines: false },
161-
yAxis: [{ field: 'amount', title: 'Revenue', format: '$0,0', showGridLines: true }],
162+
xAxis: { field: 'close_date', title: 'Month', showGridLines: false, logarithmic: false },
163+
yAxis: [{ field: 'amount', title: 'Revenue', format: '$0,0', showGridLines: true, logarithmic: false }],
162164
interaction: { tooltips: true, zoom: false, brush: true },
163165
},
164166
options: { dateGranularity: 'month' },
@@ -219,8 +221,8 @@ export const ExecutiveDashboard: Dashboard = {
219221
showLegend: false,
220222
showDataLabels: true,
221223
colors: ['#8B5CF6'],
222-
xAxis: { field: 'created_date', title: 'Month', showGridLines: false },
223-
yAxis: [{ field: 'count', title: 'New accounts', showGridLines: true }],
224+
xAxis: { field: 'created_date', title: 'Month', showGridLines: false, logarithmic: false },
225+
yAxis: [{ field: 'count', title: 'New accounts', showGridLines: true, logarithmic: false }],
224226
},
225227
options: { dateGranularity: 'month' },
226228
},

‎examples/app-crm/src/dashboards/sales.dashboard.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -177,12 +177,12 @@ export const SalesDashboard: Dashboard = {
177177
showLegend: false,
178178
showDataLabels: false,
179179
colors: ['#10B981'],
180-
xAxis: { field: 'close_date', title: 'Month', showGridLines: false },
181-
yAxis: [{ field: 'amount', title: 'Revenue', format: '$0,0', showGridLines: true }],
180+
xAxis: { field: 'close_date', title: 'Month', showGridLines: false, logarithmic: false },
181+
yAxis: [{ field: 'amount', title: 'Revenue', format: '$0,0', showGridLines: true, logarithmic: false }],
182182
annotations: [
183183
{ type: 'line', axis: 'y', value: 100000, label: 'Quota', style: 'dashed', color: '#F59E0B' },
184184
],
185-
interaction: { tooltips: true, brush: true },
185+
interaction: { tooltips: true, brush: true, zoom: false },
186186
},
187187
options: { dateGranularity: 'month' },
188188
},
@@ -205,8 +205,8 @@ export const SalesDashboard: Dashboard = {
205205
showLegend: false,
206206
showDataLabels: true,
207207
colors: ['#4F46E5'],
208-
xAxis: { field: 'amount', title: 'Pipeline value', format: '$0,0', showGridLines: true },
209-
yAxis: [{ field: 'owner', title: 'Owner', showGridLines: false }],
208+
xAxis: { field: 'amount', title: 'Pipeline value', format: '$0,0', showGridLines: true, logarithmic: false },
209+
yAxis: [{ field: 'owner', title: 'Owner', showGridLines: false, logarithmic: false }],
210210
},
211211
},
212212
{

‎examples/app-crm/src/dashboards/service.dashboard.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export const ServiceDashboard: Dashboard = {
1515
label: 'Customer Service',
1616
description: 'Case load, SLA health, and resolution performance',
1717

18+
columns: 12,
19+
gap: 4,
1820
refreshInterval: 60, // 1 minute — service desks need fresh numbers
1921

2022
header: {
@@ -189,8 +191,8 @@ export const ServiceDashboard: Dashboard = {
189191
showLegend: false,
190192
showDataLabels: true,
191193
colors: ['#8B5CF6'],
192-
xAxis: { field: 'origin', title: 'Channel', showGridLines: false },
193-
yAxis: [{ field: 'count', title: 'Cases', showGridLines: true }],
194+
xAxis: { field: 'origin', title: 'Channel', showGridLines: false, logarithmic: false },
195+
yAxis: [{ field: 'count', title: 'Cases', showGridLines: true, logarithmic: false }],
194196
},
195197
},
196198

@@ -211,9 +213,9 @@ export const ServiceDashboard: Dashboard = {
211213
showLegend: false,
212214
showDataLabels: false,
213215
colors: ['#0EA5E9'],
214-
xAxis: { field: 'created_date', title: 'Day', showGridLines: false },
215-
yAxis: [{ field: 'count', title: 'Cases opened', showGridLines: true }],
216-
interaction: { tooltips: true, brush: true },
216+
xAxis: { field: 'created_date', title: 'Day', showGridLines: false, logarithmic: false },
217+
yAxis: [{ field: 'count', title: 'Cases opened', showGridLines: true, logarithmic: false }],
218+
interaction: { tooltips: true, brush: true, zoom: false },
217219
},
218220
options: { dateGranularity: 'day' },
219221
},

‎packages/spec/src/ui/dashboard.zod.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,12 @@ export const DashboardSchema = z.object({
253253
/** Collection of widgets */
254254
widgets: z.array(DashboardWidgetSchema).describe('Widgets to display'),
255255

256+
/** Grid column count — defaults to 12 for a standard 12-column grid */
257+
columns: z.number().int().min(1).max(24).optional().describe('Number of grid columns (default 12)'),
258+
259+
/** Grid gap in Tailwind spacing units (e.g. 4 = 1rem) */
260+
gap: z.number().int().min(0).optional().describe('Grid gap in Tailwind spacing units'),
261+
256262
/** Auto-refresh */
257263
refreshInterval: z.number().optional().describe('Auto-refresh interval in seconds'),
258264

0 commit comments

Comments
 (0)