Skip to content

Commit 940267d

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Complete UI category examples (add report and widget examples)
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent c14bd2f commit 940267d

File tree

4 files changed

+849
-0
lines changed

4 files changed

+849
-0
lines changed

‎examples/ui/metadata-examples/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ These are **configuration examples** (not implementations) showing how to define
1212
- **page.examples.ts** - 9 page layouts: Record, Home, App, and Utility pages
1313
- **app.examples.ts** - 7 applications: Simple to comprehensive apps with hierarchical navigation
1414
- **theme.examples.ts** - 7 themes: Light, dark, colorful, minimal, and WCAG AAA compliant
15+
- **report.examples.ts** - 12 examples: Tabular, Summary, Matrix reports with charts and filtering
16+
- **widget.examples.ts** - 20 examples: Field widget props for text, number, date, selection, and custom widgets
1517

1618
## Usage
1719

‎examples/ui/metadata-examples/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@ export * from './dashboard.examples';
1212
export * from './page.examples';
1313
export * from './app.examples';
1414
export * from './theme.examples';
15+
export * from './report.examples';
16+
export * from './widget.examples';

‎examples/ui/metadata-examples/src/report.examples.ts‎

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
// @ts-nocheck
2+
import { Report } from '@objectstack/spec/ui';
3+
4+
/**
5+
* Report Examples - Demonstrating ObjectStack Report Protocol
6+
*
7+
* Reports define data analysis and visualization configurations.
8+
* Inspired by Salesforce Reports and ServiceNow Reporting.
9+
*/
10+
11+
// ============================================================================
12+
// TABULAR REPORTS (Simple Lists)
13+
// ============================================================================
14+
15+
/**
16+
* Example 1: Simple Tabular Report
17+
* Basic list of records with selected columns
18+
* Use Case: Quick data review, export to CSV
19+
*/
20+
export const AllContactsReport: Report = {
21+
name: 'all_contacts',
22+
label: 'All Contacts',
23+
description: 'Complete list of all contacts in the system',
24+
objectName: 'contact',
25+
type: 'tabular',
26+
columns: [
27+
{ field: 'full_name', label: 'Name' },
28+
{ field: 'email' },
29+
{ field: 'phone' },
30+
{ field: 'account_name', label: 'Company' },
31+
{ field: 'created_at', label: 'Created' },
32+
],
33+
};
34+
35+
/**
36+
* Example 2: Tabular Report with Filtering
37+
* Filtered list showing specific records
38+
* Use Case: Active opportunities, hot leads
39+
*/
40+
export const ActiveOpportunitiesReport: Report = {
41+
name: 'active_opportunities',
42+
label: 'Active Opportunities',
43+
objectName: 'opportunity',
44+
type: 'tabular',
45+
columns: [
46+
{ field: 'name', label: 'Opportunity Name' },
47+
{ field: 'account_name', label: 'Account' },
48+
{ field: 'amount', label: 'Value' },
49+
{ field: 'stage', label: 'Stage' },
50+
{ field: 'close_date', label: 'Close Date' },
51+
{ field: 'probability', label: 'Probability %' },
52+
],
53+
filter: {
54+
$and: [
55+
{ field: 'stage', operator: 'ne', value: 'Closed Won' },
56+
{ field: 'stage', operator: 'ne', value: 'Closed Lost' },
57+
],
58+
},
59+
};
60+
61+
// ============================================================================
62+
// SUMMARY REPORTS (Grouped Data)
63+
// ============================================================================
64+
65+
/**
66+
* Example 3: Summary Report with Row Grouping
67+
* Data grouped by a single field with aggregations
68+
* Use Case: Sales by rep, cases by status
69+
*/
70+
export const OpportunitiesByStageReport: Report = {
71+
name: 'opportunities_by_stage',
72+
label: 'Opportunities by Stage',
73+
objectName: 'opportunity',
74+
type: 'summary',
75+
columns: [
76+
{ field: 'name', label: 'Opportunity Name' },
77+
{ field: 'amount', label: 'Amount', aggregate: 'sum' },
78+
{ field: 'id', label: 'Count', aggregate: 'count' },
79+
],
80+
groupingsDown: [
81+
{ field: 'stage', sortOrder: 'asc' },
82+
],
83+
};
84+
85+
/**
86+
* Example 4: Multi-Level Summary Report
87+
* Data grouped by multiple fields
88+
* Use Case: Sales by region and rep, cases by priority and assigned to
89+
*/
90+
export const SalesByRegionAndRepReport: Report = {
91+
name: 'sales_by_region_rep',
92+
label: 'Sales by Region and Rep',
93+
objectName: 'opportunity',
94+
type: 'summary',
95+
columns: [
96+
{ field: 'amount', label: 'Total Amount', aggregate: 'sum' },
97+
{ field: 'amount', label: 'Average Deal', aggregate: 'avg' },
98+
{ field: 'id', label: 'Count', aggregate: 'count' },
99+
],
100+
groupingsDown: [
101+
{ field: 'region', sortOrder: 'asc' },
102+
{ field: 'owner_name', sortOrder: 'asc' },
103+
],
104+
filter: {
105+
field: 'stage',
106+
operator: 'eq',
107+
value: 'Closed Won',
108+
},
109+
};
110+
111+
/**
112+
* Example 5: Summary Report with Date Grouping
113+
* Data grouped by date fields with granularity
114+
* Use Case: Trends over time, monthly/quarterly analysis
115+
*/
116+
export const MonthlyRevenueReport: Report = {
117+
name: 'monthly_revenue',
118+
label: 'Monthly Revenue Trend',
119+
objectName: 'opportunity',
120+
type: 'summary',
121+
columns: [
122+
{ field: 'amount', label: 'Total Revenue', aggregate: 'sum' },
123+
{ field: 'amount', label: 'Average Deal Size', aggregate: 'avg' },
124+
{ field: 'id', label: 'Deals Closed', aggregate: 'count' },
125+
],
126+
groupingsDown: [
127+
{ field: 'close_date', sortOrder: 'desc', dateGranularity: 'month' },
128+
],
129+
filter: {
130+
field: 'stage',
131+
operator: 'eq',
132+
value: 'Closed Won',
133+
},
134+
};
135+
136+
// ============================================================================
137+
// MATRIX REPORTS (Two-Dimensional Grouping)
138+
// ============================================================================
139+
140+
/**
141+
* Example 6: Matrix Report
142+
* Data grouped by rows AND columns
143+
* Use Case: Sales by product and quarter, cases by status and priority
144+
*/
145+
export const SalesByProductAndQuarterReport: Report = {
146+
name: 'sales_by_product_quarter',
147+
label: 'Sales by Product and Quarter',
148+
objectName: 'opportunity',
149+
type: 'matrix',
150+
columns: [
151+
{ field: 'amount', label: 'Total Revenue', aggregate: 'sum' },
152+
{ field: 'id', label: 'Deals', aggregate: 'count' },
153+
],
154+
groupingsDown: [
155+
{ field: 'product_name', sortOrder: 'asc' },
156+
],
157+
groupingsAcross: [
158+
{ field: 'close_date', sortOrder: 'asc', dateGranularity: 'quarter' },
159+
],
160+
filter: {
161+
field: 'stage',
162+
operator: 'eq',
163+
value: 'Closed Won',
164+
},
165+
};
166+
167+
// ============================================================================
168+
// REPORTS WITH CHARTS
169+
// ============================================================================
170+
171+
/**
172+
* Example 7: Report with Bar Chart
173+
* Tabular/summary report with embedded visualization
174+
* Use Case: Visual sales pipeline, case analysis
175+
*/
176+
export const PipelineByStageWithChartReport: Report = {
177+
name: 'pipeline_by_stage_chart',
178+
label: 'Sales Pipeline by Stage',
179+
objectName: 'opportunity',
180+
type: 'summary',
181+
columns: [
182+
{ field: 'amount', label: 'Total Value', aggregate: 'sum' },
183+
{ field: 'id', label: 'Opportunities', aggregate: 'count' },
184+
],
185+
groupingsDown: [
186+
{ field: 'stage', sortOrder: 'asc' },
187+
],
188+
chart: {
189+
type: 'bar',
190+
title: 'Pipeline Value by Stage',
191+
showLegend: true,
192+
xAxis: 'stage',
193+
yAxis: 'amount',
194+
},
195+
};
196+
197+
/**
198+
* Example 8: Report with Pie Chart
199+
* Summary report with pie chart visualization
200+
* Use Case: Distribution analysis, win/loss breakdown
201+
*/
202+
export const LeadSourceDistributionReport: Report = {
203+
name: 'lead_source_distribution',
204+
label: 'Lead Source Distribution',
205+
objectName: 'lead',
206+
type: 'summary',
207+
columns: [
208+
{ field: 'id', label: 'Lead Count', aggregate: 'count' },
209+
],
210+
groupingsDown: [
211+
{ field: 'lead_source', sortOrder: 'desc' },
212+
],
213+
chart: {
214+
type: 'pie',
215+
title: 'Leads by Source',
216+
showLegend: true,
217+
xAxis: 'lead_source',
218+
yAxis: 'id',
219+
},
220+
};
221+
222+
/**
223+
* Example 9: Report with Line Chart
224+
* Time-series trend analysis
225+
* Use Case: Growth trends, historical analysis
226+
*/
227+
export const QuarterlyGrowthTrendReport: Report = {
228+
name: 'quarterly_growth_trend',
229+
label: 'Quarterly Revenue Growth',
230+
objectName: 'opportunity',
231+
type: 'summary',
232+
columns: [
233+
{ field: 'amount', label: 'Revenue', aggregate: 'sum' },
234+
{ field: 'id', label: 'Deals', aggregate: 'count' },
235+
],
236+
groupingsDown: [
237+
{ field: 'close_date', sortOrder: 'asc', dateGranularity: 'quarter' },
238+
],
239+
filter: {
240+
field: 'stage',
241+
operator: 'eq',
242+
value: 'Closed Won',
243+
},
244+
chart: {
245+
type: 'line',
246+
title: 'Revenue Trend Over Time',
247+
showLegend: true,
248+
xAxis: 'close_date',
249+
yAxis: 'amount',
250+
},
251+
};
252+
253+
/**
254+
* Example 10: Report with Funnel Chart
255+
* Conversion analysis through stages
256+
* Use Case: Sales funnel, conversion tracking
257+
*/
258+
export const SalesFunnelReport: Report = {
259+
name: 'sales_funnel',
260+
label: 'Sales Funnel Analysis',
261+
objectName: 'opportunity',
262+
type: 'summary',
263+
columns: [
264+
{ field: 'id', label: 'Opportunities', aggregate: 'count' },
265+
{ field: 'amount', label: 'Total Value', aggregate: 'sum' },
266+
],
267+
groupingsDown: [
268+
{ field: 'stage', sortOrder: 'asc' },
269+
],
270+
chart: {
271+
type: 'funnel',
272+
title: 'Sales Funnel',
273+
showLegend: false,
274+
xAxis: 'stage',
275+
yAxis: 'id',
276+
},
277+
};
278+
279+
// ============================================================================
280+
// ADVANCED REPORTS
281+
// ============================================================================
282+
283+
/**
284+
* Example 11: Complex Filtered Report
285+
* Multiple filter conditions with AND/OR logic
286+
* Use Case: Targeted analysis with complex criteria
287+
*/
288+
export const HighValueOpportunitiesReport: Report = {
289+
name: 'high_value_opportunities',
290+
label: 'High-Value Opportunities (>$100K)',
291+
objectName: 'opportunity',
292+
type: 'tabular',
293+
columns: [
294+
{ field: 'name', label: 'Opportunity' },
295+
{ field: 'account_name', label: 'Account' },
296+
{ field: 'amount', label: 'Value' },
297+
{ field: 'stage', label: 'Stage' },
298+
{ field: 'owner_name', label: 'Owner' },
299+
{ field: 'close_date', label: 'Close Date' },
300+
],
301+
filter: {
302+
$and: [
303+
{ field: 'amount', operator: 'gte', value: 100000 },
304+
{
305+
$or: [
306+
{ field: 'stage', operator: 'eq', value: 'Negotiation' },
307+
{ field: 'stage', operator: 'eq', value: 'Proposal' },
308+
],
309+
},
310+
],
311+
},
312+
};
313+
314+
/**
315+
* Example 12: Report with Multiple Aggregations
316+
* Various aggregate functions on different columns
317+
* Use Case: Statistical analysis, performance metrics
318+
*/
319+
export const SalesPerformanceReport: Report = {
320+
name: 'sales_performance',
321+
label: 'Sales Rep Performance',
322+
objectName: 'opportunity',
323+
type: 'summary',
324+
columns: [
325+
{ field: 'id', label: 'Total Deals', aggregate: 'count' },
326+
{ field: 'amount', label: 'Total Revenue', aggregate: 'sum' },
327+
{ field: 'amount', label: 'Average Deal', aggregate: 'avg' },
328+
{ field: 'amount', label: 'Largest Deal', aggregate: 'max' },
329+
{ field: 'amount', label: 'Smallest Deal', aggregate: 'min' },
330+
],
331+
groupingsDown: [
332+
{ field: 'owner_name', sortOrder: 'desc' },
333+
],
334+
filter: {
335+
field: 'stage',
336+
operator: 'eq',
337+
value: 'Closed Won',
338+
},
339+
};

0 commit comments

Comments
 (0)