<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing subscription renewals statistics for our technology business for year-to-date.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Subscription Renewals YTD",
"value": "1,245",
"description": "Number of subscriptions renewed this year",
"trend": {
"value": 8.3,
"isPositive": true
},
"icon": "renew"
}
}<|eot_id|>
Reward: 0.3384818697035433
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for market share in retail for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Market Share - December",
"value": "25.4%",
"description": "Retail market share for December",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "bar-chart"
}
}<|eot_id|>
Reward: 0.11735268126941834
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for uptime percentage in insurance for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime (Last 7 Days)",
"value": "99.98%",
"description": "System uptime percentage over the past week",
"trend": {
"value": 0.02,
"isPositive": true
},
"icon": "clock"
}
}<|eot_id|>
Reward: 0.2930141737855011
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for app downloads in retail for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "App Downloads",
"value": "15,230",
"description": "Retail app downloads in June",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "download"
}
}<|eot_id|>
Reward: -0.28974578390186245
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for customer satisfaction in healthcare for Q3 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Satisfaction",
"value": "89%",
"description": "Patient satisfaction score for Q3 2023",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: -0.0006373501578545993
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a healthcare dashboard showing conversion rate during February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Conversion Rate",
"value": "75%",
"description": "Patient conversion rate in February",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "user-check"
}
}<|eot_id|>
Reward: -0.14935748851664254
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a hospitality dashboard showing conversion rate during last 30 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Conversion Rate",
"value": "15.2%",
"description": "Conversion rate over the last 30 days",
"trend": {
"value": 1.8,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.09603925596325658
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for error rate in our insurance analytics for August.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Error Rate",
"value": "2.4%",
"description": "Error rate in insurance analytics for August",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "exclamation-triangle"
}
}<|eot_id|>
Reward: -0.26419408608617223
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays net promoter score for our transportation platform for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Net Promoter Score (December)",
"value": "45",
"description": "Customer satisfaction score for December",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: 0.19700786951655214
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for app downloads in our marketing analytics for April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "App Downloads (April)",
"value": "15,230",
"description": "Total app downloads in April",
"trend": {
"value": 8.7,
"isPositive": true
},
"icon": "download",
"className": "app-downloads-metric"
}
}<|eot_id|>
Reward: 0.3759032431212541
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a media dashboard showing session duration during this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Session Duration",
"value": "3m 45s",
"description": "Average session duration this quarter",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "clock",
"className": "session-duration-card"
}
}<|eot_id|>
Reward: -0.4393609340349447
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for delivery time in our entertainment analytics for April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Delivery Time",
"value": "2h 15m",
"description": "Average delivery time for April",
"trend": {
"value": -5.0,
"isPositive": false
},
"icon": "clock"
}
}<|eot_id|>
Reward: 0.23863967288245747
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays app downloads for our retail platform for this month.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "App Downloads",
"value": "15,230",
"description": "Downloads this month",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "download",
"className": "retail-platform-metrics"
}
}<|eot_id|>
Reward: 0.35574784265830806
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a media dashboard showing active users during Q3 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users (Q3 2023)",
"value": "1,250,000",
"description": "Number of active users during Q3 2023",
"trend": {
"value": 4.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.02028327575153599
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for average order value in insurance for March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Order Value",
"value": "$1,250",
"description": "Average insurance order value for March",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: 0.4100411620031763
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing market share statistics for our real estate business for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Market Share (June)",
"value": "25%",
"description": "Our company's share of the real estate market in June",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.2602965258547606
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays delivery time for our hospitality platform for September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Delivery Time (September)",
"value": "25 min",
"description": "Average delivery time for September",
"trend": {
"value": -5,
"isPositive": false
},
"icon": "clock"
}
}<|eot_id|>
Reward: 0.010450746204828332
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays customer acquisition cost for our finance platform for January.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost",
"value": "$1,250",
"description": "January",
"trend": {
"value": -5.0,
"isPositive": false
},
"icon": "credit-card"
}
}<|eot_id|>
Reward: -0.024458064241788757
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing subscription renewals statistics for our telecommunications business for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Subscription Renewals (Dec)",
"value": "1,250",
"description": "Number of subscriptions renewed in December",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "refresh"
}
}<|eot_id|>
Reward: 0.4334858749216539
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a insurance dashboard showing error rate during October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Error Rate",
"value": "2.3%",
"description": "Error rate during October",
"trend": {
"value": -0.4,
"isPositive": false
},
"icon": "exclamation-triangle",
"className": "error-rate-card"
}
}<|eot_id|>
Reward: 0.40337166348512266
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a real estate dashboard showing retention rate during Q2 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Retention Rate Q2 2023",
"value": "85.4%",
"description": "Customer retention during Q2 2023",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "repeat"
}
}<|eot_id|>
Reward: -0.18361167507089704
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a energy dashboard showing bounce rate during November.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Bounce Rate",
"value": "45.3%",
"description": "Bounce rate during November",
"trend": {
"value": -2.1,
"isPositive": false
},
"icon": "trending-down"
}
}<|eot_id|>
Reward: 0.08560002350623697
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays click-through rate for our media platform for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Click-Through Rate",
"value": "5.2%",
"description": "Media platform CTR for June",
"trend": {
"value": 0.8,
"isPositive": true
},
"icon": "cursor-click"
}
}<|eot_id|>
Reward: 0.03564400400607448
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for churn rate in our agriculture analytics for this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate",
"value": "5.2%",
"description": "Customer churn rate this quarter",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "trending-down"
}
}<|eot_id|>
Reward: 0.42675050244710866
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing active users statistics for our social media business for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users (Last 7 Days)",
"value": "8,432",
"description": "Number of active users this week",
"trend": {
"value": 5.3,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.4096183340052182
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing active users statistics for our finance business for year-to-date.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users (YTD)",
"value": "8,450",
"description": "Number of active users this year-to-date",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.1417606402939171
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a social media dashboard showing customer support tickets during Q1 2024.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Support Tickets (Q1 2024)",
"value": "1,245",
"description": "Customer support tickets during Q1 2024",
"trend": {
"value": -5.2,
"isPositive": false
},
"icon": "ticket",
"className": "support-tickets-card"
}
}<|eot_id|>
Reward: 0.2530645534372501
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a telecommunications dashboard showing customer acquisition cost during March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost (March)",
"value": "$3,200",
"description": "Average cost to acquire a customer in March",
"trend": {
"value": -5.0,
"isPositive": false
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.08366735630436328
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing operational costs statistics for our manufacturing business for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Operational Costs",
"value": "$45,678",
"description": "Costs incurred in October",
"trend": {
"value": -3.2,
"isPositive": false
},
"icon": "factory",
"className": "operational-costs"
}
}<|eot_id|>
Reward: 0.41067259221277386
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays revenue for our transportation platform for last 24 hours.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Revenue (Last 24h)",
"value": "$3,245",
"description": "Revenue generated in the last 24 hours",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: 0.2368932144936472
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a e-commerce dashboard showing return on investment during April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Return on Investment (ROI) - April",
"value": "15.2%",
"description": "ROI for April",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "chart-line",
"className": "roi-metric"
}
}<|eot_id|>
Reward: 0.17743931873411622
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a real estate dashboard showing click-through rate during January.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Click-Through Rate",
"value": "2.5%",
"description": "January 2024",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "chart-line"
}
}<|eot_id|>
Reward: -0.30106161666784703
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a hospitality dashboard showing average order value during September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Order Value",
"value": "$85.40",
"description": "Average order value for September",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "chart-line"
}
}<|eot_id|>
Reward: -0.498996597633103
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a marketing dashboard showing retention rate during this month.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Retention Rate",
"value": "75.4%",
"description": "Customer retention this month",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "retention"
}
}<|eot_id|>
Reward: 0.43410320162608895
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a media dashboard showing operational costs during March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Operational Costs",
"value": "$45,670",
"description": "Operational expenses for March",
"trend": {
"value": 3.2,
"isPositive": false
},
"icon": "currency",
"className": "cost-metric"
}
}<|eot_id|>
Reward: 0.20875954526002294
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for bounce rate in e-commerce for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Bounce Rate",
"value": "45.3%",
"description": "Bounce rate for December",
"trend": {
"value": -2.1,
"isPositive": false
},
"icon": "trending-down"
}
}<|eot_id|>
Reward: -0.2891927123675049
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing employee productivity statistics for our hospitality business for April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Employee Productivity",
"value": "87%",
"description": "Average task completion rate for April",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.4143832591013237
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a finance dashboard showing uptime percentage during June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime Percentage (June)",
"value": "99.98%",
"description": "System uptime during June",
"trend": {
"value": 0.02,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.1654479370974249
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays page views for our media platform for February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Page Views (February)",
"value": "1,234,567",
"description": "Total page views for February",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "eye"
}
}<|eot_id|>
Reward: 0.11155638648465349
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing customer acquisition cost statistics for our energy business for September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost",
"value": "$1,250",
"description": "Average cost per new customer in September",
"trend": {
"value": -8.2,
"isPositive": false
},
"icon": "dollar",
"className": "acquisition-cost-september"
}
}<|eot_id|>
Reward: -0.2958564633433822
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for market share in our education analytics for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Market Share",
"value": "23.7%",
"description": "Education analytics - October",
"trend": {
"value": 1.8,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.18499960150182637
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for net promoter score in our telecommunications analytics for November.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Net Promoter Score",
"value": "45",
"description": "Customer satisfaction for November",
"trend": {
"value": 2.5,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: -0.1282594764611994
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for churn rate in our marketing analytics for this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate",
"value": "5.2%",
"description": "Customer churn rate for this quarter",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "trending-down"
}
}<|eot_id|>
Reward: 0.4328615431672884
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for uptime percentage in e-commerce for March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime (March)",
"value": "99.98%",
"description": "E-commerce site uptime for March",
"trend": {
"value": 0.02,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.27770439446528694
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for active users in our technology analytics for this year.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users",
"value": "150,000",
"description": "Active users this year",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.14932038089765987
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for engagement rate in our e-commerce analytics for this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate",
"value": "3.2%",
"description": "Customer engagement this quarter",
"trend": {
"value": -0.5,
"isPositive": false
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.47390948059506377
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for active users in our real estate analytics for Q3 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users",
"value": "5,432",
"description": "Active users in Q3 2023",
"trend": {
"value": 8.3,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.09077536355140448
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for delivery time in telecommunications for Q1 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Delivery Time",
"value": "3.4 days",
"description": "Average delivery time for telecommunications orders in Q1 2023",
"trend": {
"value": -0.2,
"isPositive": false
},
"icon": "clock"
}
}<|eot_id|>
Reward: 0.26625608074975715
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a insurance dashboard showing engagement rate during this month.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate",
"value": "45.3%",
"description": "User engagement this month",
"trend": {
"value": 2.1,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.42719779405621794
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays market share for our e-commerce platform for August.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Market Share",
"value": "25.4%",
"description": "E-commerce platform for August",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "pie-chart"
}
}<|eot_id|>
Reward: -0.2718564622427436
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing inventory turnover statistics for our transportation business for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Inventory Turnover (Last 7 Days)",
"value": "3.2",
"description": "Average number of times inventory was sold and replaced over the last week",
"trend": {
"value": 5.0,
"isPositive": true
},
"icon": "truck"
}
}<|eot_id|>
Reward: -0.47338542745211853
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays net promoter score for our finance platform for September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Net Promoter Score",
"value": "45",
"description": "Customer Satisfaction for September",
"trend": {
"value": 2.5,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: 0.4774560473976288
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a e-commerce dashboard showing delivery time during February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Delivery Time (Feb)",
"value": "3.4 days",
"description": "Average delivery time for orders in February",
"trend": {
"value": -0.2,
"isPositive": false
},
"icon": "truck",
"className": "delivery-time-metric"
}
}<|eot_id|>
Reward: 0.4652967371171213
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a energy dashboard showing operational costs during last 24 hours.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Operational Costs (Last 24h)",
"value": "$3,450",
"description": "Energy operational expenses over the past 24 hours",
"trend": {
"value": -2.3,
"isPositive": false
},
"icon": "tool"
}
}<|eot_id|>
Reward: -0.31859702745877183
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for conversion rate in insurance for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Conversion Rate",
"value": "5.2%",
"description": "Insurance conversion rate for July",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "chart-line"
}
}<|eot_id|>
Reward: 0.49885504375087697
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for operational costs in our hospitality analytics for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Operational Costs",
"value": "$78,900",
"description": "Operational costs for July",
"trend": {
"value": -3.2,
"isPositive": false
},
"icon": "expenses"
}
}<|eot_id|>
Reward: -0.3523730939072014
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for revenue in our hospitality analytics for last 24 hours.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Revenue (Last 24h)",
"value": "$8,760",
"description": "Total revenue in the past 24 hours",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: 0.14877263290938392
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing delivery time statistics for our transportation business for September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Delivery Time",
"value": "3h 45m",
"description": "Average delivery duration for September",
"trend": {
"value": -5.2,
"isPositive": false
},
"icon": "clock",
"className": "delivery-time-statistics"
}
}<|eot_id|>
Reward: 0.2509238465541157
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing website traffic statistics for our media business for Q4 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Website Traffic Q4 2023",
"value": "1,234,567",
"description": "Total visits in Q4 2023",
"trend": {
"value": 8.4,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.1676467246676282
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a retail dashboard showing customer satisfaction during February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Satisfaction - February",
"value": "85%",
"description": "Customer satisfaction score for February",
"trend": {
"value": 2.5,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: -0.3034449087471035
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays conversion rate for our technology platform for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Conversion Rate",
"value": "4.8%",
"description": "Conversion rate for October",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "charts"
}
}<|eot_id|>
Reward: -0.4626213799774256
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for inventory turnover in transportation for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Inventory Turnover",
"value": "5.2",
"description": "Transportation inventory turnover for June",
"trend": {
"value": 3.1,
"isPositive": true
},
"icon": "truck"
}
}<|eot_id|>
Reward: -0.15982890565560204
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a finance dashboard showing customer acquisition cost during May.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost",
"value": "$4,350",
"description": "Average cost per customer in May",
"trend": {
"value": -8.2,
"isPositive": false
},
"icon": "money-bill"
}
}<|eot_id|>
Reward: 0.30408469260032944
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing retention rate statistics for our technology business for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Retention Rate (Last 7 Days)",
"value": "85.4%",
"description": "Customer retention over the past week",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "retention"
}
}<|eot_id|>
Reward: 0.12764408431323992
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for bounce rate in our retail analytics for Q3 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Bounce Rate",
"value": "42.3%",
"description": "Q3 2023 Retail Bounce Rate",
"trend": {
"value": -1.2,
"isPositive": false
},
"icon": "chart-line"
}
}<|eot_id|>
Reward: 0.04152912396567354
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for uptime percentage in telecommunications for February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime (February)",
"value": "99.98%",
"description": "Uptime percentage for telecommunications network in February",
"trend": {
"value": 0.02,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.43536814546927316
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for average order value in our real estate analytics for February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Order Value",
"value": "$245,000",
"description": "Average property transaction value in February",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "chart-line"
}
}<|eot_id|>
Reward: 0.12803814673847425
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for customer satisfaction in healthcare for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Satisfaction",
"value": "85%",
"description": "Patient satisfaction score for June",
"trend": {
"value": 2.0,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: -0.14475941390250313
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing churn rate statistics for our social media business for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate",
"value": "5.2%",
"description": "Customer churn rate for June",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "refresh"
}
}<|eot_id|>
Reward: -0.11694391187469688
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a retail dashboard showing profit margin during May.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Profit Margin",
"value": "8.75%",
"description": "Profit margin for May",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.48616844171631257
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a media dashboard showing engagement rate during March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate",
"value": "5.8%",
"description": "Engagement rate for March",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "graph-line",
"className": "engagement-metric"
}
}<|eot_id|>
Reward: -0.021194145415895038
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays employee productivity for our social media platform for January.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Employee Productivity",
"value": "85%",
"description": "Productivity for January",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.4700767075866976
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for market share in marketing for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Market Share - December",
"value": "25.6%",
"description": "Market share for December",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "bar-chart"
}
}<|eot_id|>
Reward: -0.0879724169457674
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for active users in retail for this month.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users",
"value": "8,450",
"description": "Number of active retail users this month",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.10885927047823063
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for active users in our insurance analytics for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users (Last 7 Days)",
"value": "8,432",
"description": "Number of users active in the past week",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.151160464015493
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for employee productivity in agriculture for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Employee Productivity (Last 7 Days)",
"value": "85%",
"description": "Average productivity of employees in agriculture over the past week",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "plant"
}
}<|eot_id|>
Reward: -0.49371221387094844
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for churn rate in insurance for this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate",
"value": "5.2%",
"description": "Customer retention this quarter",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "trending-down"
}
}<|eot_id|>
Reward: 0.18607062442874056
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays bounce rate for our media platform for September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Bounce Rate",
"value": "45.3%",
"description": "Bounce rate for September",
"trend": {
"value": -2.1,
"isPositive": false
},
"icon": "area-chart"
}
}<|eot_id|>
Reward: 0.4175243770023488
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing user growth statistics for our real estate business for November.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "User Growth",
"value": "1,200",
"description": "New users in November",
"trend": {
"value": 8.3,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.2174447807214639
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a technology dashboard showing click-through rate during Q1 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Click-Through Rate",
"value": "4.2%",
"description": "Q1 2023 performance",
"trend": {
"value": 0.5,
"isPositive": true
},
"icon": "click",
"className": "ctr-metric"
}
}<|eot_id|>
Reward: -0.2680088158619821
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a real estate dashboard showing subscription renewals during last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Subscription Renewals",
"value": "45",
"description": "Renewals in the last 7 days",
"trend": {
"value": 5.3,
"isPositive": true
},
"icon": "repeat"
}
}<|eot_id|>
Reward: -0.29817362628088706
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for profit margin in education for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Profit Margin",
"value": "18.7%",
"description": "Profit margin for December in education sector",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "percent",
"className": "profit-margin-december"
}
}<|eot_id|>
Reward: 0.3893669386427976
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays user growth for our e-commerce platform for year-to-date.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "User Growth",
"value": "3,250",
"description": "Year-to-date new users",
"trend": {
"value": 8.4,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.17537480792318205
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for employee productivity in our manufacturing analytics for this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Employee Productivity",
"value": "85%",
"description": "Average productivity in manufacturing this quarter",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.2786654077357642
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for inventory turnover in our entertainment analytics for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Inventory Turnover (June)",
"value": "8.4",
"description": "Average times inventory was sold and replaced in June",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "sync"
}
}<|eot_id|>
Reward: 0.2625338219974068
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for session duration in our transportation analytics for this year.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Session Duration",
"value": "35 mins",
"description": "Average session duration this year",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "clock"
}
}<|eot_id|>
Reward: -0.2508022183526435
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing uptime percentage statistics for our retail business for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime Percentage",
"value": "99.95%",
"description": "Retail business uptime for June",
"trend": {
"value": 0.05,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.32090788610610443
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing delivery time statistics for our transportation business for Q1 2024.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Delivery Time",
"value": "3.4 days",
"description": "Average delivery time in Q1 2024",
"trend": {
"value": -0.2,
"isPositive": false
},
"icon": "clock",
"className": "delivery-time-metric"
}
}<|eot_id|>
Reward: -0.4556649887040438
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for app downloads in our media analytics for Q3 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "App Downloads",
"value": "1,234,567",
"description": "Q3 2023 total downloads",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "download"
}
}<|eot_id|>
Reward: -0.16589179356461936
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for churn rate in our insurance analytics for February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate",
"value": "5.2%",
"description": "Customer churn for February",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "trending-down",
"className": "churn-rate-card"
}
}<|eot_id|>
Reward: 0.026825599897741803
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing churn rate statistics for our media business for April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate",
"value": "5.2%",
"description": "Churn rate for April",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "trending-down"
}
}<|eot_id|>
Reward: -0.0772610202581756
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing website traffic statistics for our manufacturing business for this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Website Traffic",
"value": "75,000",
"description": "Total visitors this quarter",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.3611453159235988
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for subscription renewals in our real estate analytics for September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Subscription Renewals",
"value": "1,250",
"description": "Renewals for September",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "refresh",
"className": "subscription-renewals"
}
}<|eot_id|>
Reward: -0.12869382315786948
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for sales growth in insurance for March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Sales Growth - March",
"value": "15%",
"description": "Increase in insurance sales for March",
"trend": {
"value": 15,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.047838941624626985
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing customer acquisition cost statistics for our telecommunications business for Q1 2024.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost (Q1 2024)",
"value": "$45.78",
"description": "Average cost per new customer in Q1 2024",
"trend": {
"value": 5.2,
"isPositive": false
},
"icon": "credit-card",
"className": "acquisition-cost"
}
}<|eot_id|>
Reward: 0.13438870578804762
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for operational costs in education for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Operational Costs (June)",
"value": "$1,250,000",
"description": "Operational expenses for June in the education sector",
"trend": {
"value": -2.3,
"isPositive": false
},
"icon": "expenses",
"className": "operational-costs-june"
}
}<|eot_id|>
Reward: -0.2875708689381793
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for customer support tickets in our technology analytics for this year.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Support Tickets",
"value": "1,245",
"description": "Customer support tickets received this year",
"trend": {
"value": 5.2,
"isPositive": false
},
"icon": "tickets"
}
}<|eot_id|>
Reward: -0.15084667162357512
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for average order value in our social media analytics for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Order Value",
"value": "$45.67",
"description": "Average order value for July",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "shopping-cart",
"className": "social-media-metric"
}
}<|eot_id|>
Reward: 0.3672301610802785
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing delivery time statistics for our hospitality business for this year.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Delivery Time",
"value": "30 mins",
"description": "Average delivery time for orders in 2023",
"trend": {
"value": 5.0,
"isPositive": false
},
"icon": "clock",
"className": "delivery-time-stat"
}
}<|eot_id|>
Reward: 0.33701236852518346
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays net promoter score for our finance platform for this year.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Net Promoter Score",
"value": "45",
"description": "Customer satisfaction this year",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: 0.4213945580470905
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays session duration for our marketing platform for May.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Session Duration",
"value": "5m 23s",
"description": "Average session length for May",
"trend": {
"value": 4.2,
"isPositive": true
},
"icon": "clock"
}
}<|eot_id|>
Reward: 0.16549652478363108
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for net promoter score in retail for April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Net Promoter Score",
"value": "45",
"description": "Customer satisfaction indicator for April",
"trend": {
"value": 2.0,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: -0.11608059873620769
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing return on investment statistics for our telecommunications business for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Return on Investment (ROI) - July",
"value": "8.7%",
"description": "ROI for telecommunications business in July",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.01018058433164748
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for customer acquisition cost in agriculture for this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost",
"value": "$45,000",
"description": "Cost to acquire a new customer in agriculture this quarter",
"trend": {
"value": -5.2,
"isPositive": false
},
"icon": "wallet",
"className": "agriculture-metric"
}
}<|eot_id|>
Reward: -0.047014573699911466
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays sales growth for our real estate platform for this month.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Sales Growth",
"value": "8.2%",
"description": "This month's sales increase",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.4285284080477415
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays retention rate for our transportation platform for Q3 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Retention Rate",
"value": "78.4%",
"description": "Customer retention for Q3 2023",
"trend": {
"value": -2.1,
"isPositive": false
},
"icon": "refresh"
}
}<|eot_id|>
Reward: -0.0790178838106671
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for customer acquisition cost in our energy analytics for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost",
"value": "$1,250",
"description": "CAC in the last 7 days",
"trend": {
"value": -8.3,
"isPositive": false
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.42674539808588563
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a insurance dashboard showing click-through rate during Q4 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Click-Through Rate",
"value": "3.2%",
"description": "Q4 2023 Click-Through Rate",
"trend": {
"value": 0.4,
"isPositive": true
},
"icon": "click"
}
}<|eot_id|>
Reward: 0.4431632502560049
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays app downloads for our technology platform for Q4 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "App Downloads",
"value": "1,250,000",
"description": "Downloads in Q4 2023",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "download"
}
}<|eot_id|>
Reward: -0.08680482861743655
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing engagement rate statistics for our transportation business for Q2 2024.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate Q2 2024",
"value": "45.3%",
"description": "Customer engagement rate for transportation services in Q2 2024",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.16672943916760596
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing market share statistics for our marketing business for Q3 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Market Share Q3 2023",
"value": "25.4%",
"description": "Percentage of market share in Q3 2023",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.1205659097214673
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a real estate dashboard showing engagement rate during March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate",
"value": "75.8%",
"description": "Engagement rate during March",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "thumbs-up"
}
}<|eot_id|>
Reward: 0.42331668890217455
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a transportation dashboard showing employee productivity during September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Employee Productivity (September)",
"value": "95%",
"description": "Average productivity rate for the month",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.25618299354204466
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for uptime percentage in our entertainment analytics for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime Percentage",
"value": "99.95%",
"description": "Uptime for December",
"trend": {
"value": 0.05,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.20525215421523935
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for error rate in social media for March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Error Rate",
"value": "2.3%",
"description": "Error rate for social media in March",
"trend": {
"value": -0.5,
"isPositive": false
},
"icon": "error"
}
}<|eot_id|>
Reward: -0.07421873560733871
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays uptime percentage for our manufacturing platform for April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime (April)",
"value": "99.8%",
"description": "Platform uptime for April",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.12146892179139945
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays customer acquisition cost for our education platform for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost",
"value": "$1,250",
"description": "Cost per new student in October",
"trend": {
"value": -5.2,
"isPositive": false
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.3753079786564951
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a transportation dashboard showing engagement rate during Q1 2024.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate",
"value": "45.7%",
"description": "User engagement during Q1 2024",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "traffic-light"
}
}<|eot_id|>
Reward: 0.2324928643264249
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for customer satisfaction in our media analytics for May.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Satisfaction",
"value": "85%",
"description": "Customer satisfaction score for May",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "smile",
"className": "satisfaction-metric"
}
}<|eot_id|>
Reward: -0.3461091599719677
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for uptime percentage in our education analytics for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime Percentage",
"value": "99.8%",
"description": "Uptime for December",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.2923942300692336
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays conversion rate for our energy platform for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Conversion Rate",
"value": "5.2%",
"description": "Conversion rate for July",
"trend": {
"value": 0.8,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.2089544272940983
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for average order value in our energy analytics for May.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Order Value",
"value": "$75.50",
"description": "Average order value for energy sales in May",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: -0.49836379335653624
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for app downloads in insurance for Q1 2024.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "App Downloads",
"value": "1,245",
"description": "Insurance app downloads in Q1 2024",
"trend": {
"value": 8.7,
"isPositive": true
},
"icon": "download"
}
}<|eot_id|>
Reward: -0.0891400751034015
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays delivery time for our finance platform for August.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Delivery Time",
"value": "2.5 days",
"description": "Average delivery time for August",
"trend": {
"value": -0.1,
"isPositive": false
},
"icon": "clock"
}
}<|eot_id|>
Reward: 0.007718675204126391
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing return on investment statistics for our media business for Q2 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Return on Investment (ROI) Q2 2023",
"value": "125%",
"description": "ROI for media business in Q2 2023",
"trend": {
"value": 8.4,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.29128078042764227
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays customer acquisition cost for our hospitality platform for Q1 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost",
"value": "$45.67",
"description": "Q1 2023 average cost per customer",
"trend": {
"value": 3.2,
"isPositive": false
},
"icon": "money-bill"
}
}<|eot_id|>
Reward: -0.13239616126404374
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing conversion rate statistics for our e-commerce business for year-to-date.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Conversion Rate",
"value": "3.75%",
"description": "Year-to-date conversion rate for e-commerce",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.14338844629644354
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a marketing dashboard showing website traffic during last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Website Traffic (Last 7 Days)",
"value": "12,345",
"description": "Total visits over the past week",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "globe",
"className": "website-traffic-card"
}
}<|eot_id|>
Reward: -0.20812455346536296
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays session duration for our retail platform for August.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Session Duration",
"value": "00:05:30",
"description": "Average session duration for August",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "clock"
}
}<|eot_id|>
Reward: 0.36351306462531396
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a energy dashboard showing revenue during April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Revenue for April",
"value": "$45,678",
"description": "Total revenue generated in April",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: 0.41061005557309393
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for error rate in our technology analytics for November.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Error Rate",
"value": "2.3%",
"description": "Error rate for November",
"trend": {
"value": -0.5,
"isPositive": false
},
"icon": "exclamation-triangle"
}
}<|eot_id|>
Reward: -0.1848001954927646
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing page views statistics for our education business for Q1 2024.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Page Views Q1 2024",
"value": "1,234,567",
"description": "Total page views for Q1 2024 in our education business",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "eye"
}
}<|eot_id|>
Reward: 0.15511392124749968
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a manufacturing dashboard showing user growth during July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "User Growth",
"value": "1,250",
"description": "User registrations in July",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.3979850350015277
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for profit margin in our healthcare analytics for year-to-date.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Profit Margin",
"value": "18.7%",
"description": "Year-to-date profit margin in healthcare analytics",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.48781788181930064
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays customer satisfaction for our healthcare platform for April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Satisfaction",
"value": "4.8/5",
"description": "Average rating for April",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "smile",
"className": "healthcare-metric"
}
}<|eot_id|>
Reward: 0.4134102415602816
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for market share in our marketing analytics for May.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Market Share (May)",
"value": "25.4%",
"description": "Market share in May",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.32380970310717894
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for website traffic in our manufacturing analytics for January.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Website Traffic",
"value": "15,230",
"description": "January Visitors",
"trend": {
"value": 8.4,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.48878172219967675
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing churn rate statistics for our technology business for this year.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate",
"value": "8.2%",
"description": "Customer churn rate for 2023",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "trending-down"
}
}<|eot_id|>
Reward: -0.2890937166814883
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for average order value in technology for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Order Value",
"value": "$1,250",
"description": "Average order value in December",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "dollar",
"className": "tech-metric"
}
}<|eot_id|>
Reward: -0.3280524057033878
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing revenue statistics for our transportation business for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Revenue (Last 7 Days)",
"value": "$8,750",
"description": "Transportation revenue over the past week",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: -0.39985561768312283
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a hospitality dashboard showing session duration during February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Session Duration",
"value": "3m 45s",
"description": "Average session duration in February",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "clock"
}
}<|eot_id|>
Reward: -0.4349081600341864
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a manufacturing dashboard showing uptime percentage during May.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime Percentage (May)",
"value": "99.2%",
"description": "Production uptime during May",
"trend": {
"value": 0.5,
"isPositive": true
},
"icon": "clock"
}
}<|eot_id|>
Reward: -0.1044043614225254
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for average order value in our finance analytics for Q3 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Order Value",
"value": "$1,250.75",
"description": "Average order value for Q3 2023",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: 0.3539878452334354
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for customer lifetime value in our media analytics for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Lifetime Value",
"value": "$8,750",
"description": "Average LTV for July",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: -0.27059303156913983
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing retention rate statistics for our retail business for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Retention Rate",
"value": "85.4%",
"description": "Customer retention for June",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.3992563287080294
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays retention rate for our insurance platform for Q1 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Retention Rate (Q1 2023)",
"value": "85.4%",
"description": "Customer retention rate for Q1 2023",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "trend-up"
}
}<|eot_id|>
Reward: -0.3368817343330145
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for user growth in finance for February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "User Growth",
"value": "1,250",
"description": "Number of new users in February",
"trend": {
"value": 8.4,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.29640600727784017
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a healthcare dashboard showing click-through rate during July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Click-Through Rate (July)",
"value": "3.5%",
"description": "Patient engagement in July",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "click"
}
}<|eot_id|>
Reward: -0.33422409980297985
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for customer support tickets in transportation for year-to-date.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Support Tickets",
"value": "1,234",
"description": "Customer support tickets YTD in transportation",
"trend": {
"value": 5.8,
"isPositive": false
},
"icon": "support",
"className": "support-tickets-metric"
}
}<|eot_id|>
Reward: -0.17517495897235813
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for delivery time in our hospitality analytics for September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Delivery Time",
"value": "25 min",
"description": "Average delivery time in September",
"trend": {
"value": -2.0,
"isPositive": false
},
"icon": "clock",
"className": "delivery-time-metric"
}
}<|eot_id|>
Reward: 0.2756489340309223
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing churn rate statistics for our finance business for last 24 hours.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate",
"value": "2.3%",
"description": "Customer churn over the last 24 hours",
"trend": {
"value": -0.2,
"isPositive": false
},
"icon": "exit"
}
}<|eot_id|>
Reward: 0.35409507317342237
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for uptime percentage in insurance for this month.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime Percentage",
"value": "99.98%",
"description": "Insurance system availability for this month",
"trend": {
"value": 0.02,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.3086649338337656
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing customer satisfaction statistics for our technology business for November.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Satisfaction (November)",
"value": "92%",
"description": "Percentage of satisfied customers this month",
"trend": {
"value": 1.5,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: -0.24704511560037412
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for bounce rate in our energy analytics for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Bounce Rate",
"value": "45.3%",
"description": "Customer bounce rate in July",
"trend": {
"value": -2.1,
"isPositive": false
},
"icon": "trending-down"
}
}<|eot_id|>
Reward: -0.44338048334757174
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for churn rate in marketing for year-to-date.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate (YTD)",
"value": "8.2%",
"description": "Customer churn rate for the year-to-date",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "trending-down"
}
}<|eot_id|>
Reward: -0.4696641349227971
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for error rate in insurance for last 24 hours.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Error Rate",
"value": "2.4%",
"description": "Errors in insurance transactions over last 24 hours",
"trend": {
"value": -0.2,
"isPositive": false
},
"icon": "warning"
}
}<|eot_id|>
Reward: 0.05608642729561841
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a telecommunications dashboard showing operational costs during last 24 hours.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Operational Costs (Last 24h)",
"value": "$3,250",
"description": "Total operational costs in the past 24 hours",
"trend": {
"value": -5.2,
"isPositive": false
},
"icon": "dollar"
}
}<|eot_id|>
Reward: -0.3323499320027097
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing engagement rate statistics for our social media business for August.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate",
"value": "4.8%",
"description": "Average engagement rate for August",
"trend": {
"value": 0.5,
"isPositive": true
},
"icon": "trend-up"
}
}<|eot_id|>
Reward: -0.16399983360269588
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a insurance dashboard showing market share during August.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Market Share (August)",
"value": "25.4%",
"description": "Insurance market share for August",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "pie-chart",
"className": "market-share-card"
}
}<|eot_id|>
Reward: 0.1383312214938609
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for engagement rate in our hospitality analytics for Q4 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate",
"value": "75%",
"description": "Customer engagement in Q4 2023",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.4250637210352566
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing subscription renewals statistics for our retail business for this year.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Subscription Renewals",
"value": "1,250",
"description": "Renewals received this year",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "refresh"
}
}<|eot_id|>
Reward: 0.26304524614471547
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing user growth statistics for our e-commerce business for year-to-date.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "User Growth (YTD)",
"value": "15,230",
"description": "Total new users this year",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.46025853205545075
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays customer satisfaction for our real estate platform for August.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Satisfaction (August)",
"value": "92%",
"description": "Average satisfaction score for August",
"trend": {
"value": 1.8,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: -0.22383975577258153
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a agriculture dashboard showing user growth during last 30 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "User Growth (Last 30 Days)",
"value": "1,200",
"description": "Number of new users onboarded",
"trend": {
"value": 8.3,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.07031939684454858
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for engagement rate in our entertainment analytics for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate",
"value": "5.2%",
"description": "Last 7 days engagement",
"trend": {
"value": 1.3,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.18633483925577354
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing customer acquisition cost statistics for our real estate business for this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Acquisition Cost",
"value": "$45,000",
"description": "Cost to acquire a new customer this quarter",
"trend": {
"value": -8.3,
"isPositive": false
},
"icon": "dollar",
"className": "acquisition-cost"
}
}<|eot_id|>
Reward: 0.43111870397601515
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for engagement rate in our entertainment analytics for Q2 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Engagement Rate",
"value": "4.8%",
"description": "User engagement in Q2 2023",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "trend-up"
}
}<|eot_id|>
Reward: 0.33135970086576616
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for active users in real estate for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users (July)",
"value": "1,245",
"description": "Number of active users on real estate platform in July",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.48271641951890853
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays revenue for our insurance platform for February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$45,300",
"description": "Revenue for February",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: -0.22697147752837998
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays app downloads for our hospitality platform for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "App Downloads",
"value": "1,250",
"description": "December downloads for the hospitality platform",
"trend": {
"value": 8.3,
"isPositive": true
},
"icon": "downloads"
}
}<|eot_id|>
Reward: 0.32906772723819167
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for error rate in our insurance analytics for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Error Rate",
"value": "2.3%",
"description": "Errors detected in October",
"trend": {
"value": -0.2,
"isPositive": false
},
"icon": "warning"
}
}<|eot_id|>
Reward: 0.45870688029785334
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for revenue in our e-commerce analytics for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$78,540",
"description": "October total revenue",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "dollar"
}
}<|eot_id|>
Reward: -0.25442236867302215
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing conversion rate statistics for our manufacturing business for September.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Conversion Rate",
"value": "92.5%",
"description": "Manufacturing conversion rate for September",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.18727174111349276
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a hospitality dashboard showing customer satisfaction during last 24 hours.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Satisfaction",
"value": "85%",
"description": "Satisfaction score in the last 24 hours",
"trend": {
"value": 2.0,
"isPositive": true
},
"icon": "smile"
}
}<|eot_id|>
Reward: -0.18476073466428844
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays click-through rate for our manufacturing platform for this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Click-Through Rate",
"value": "2.3%",
"description": "CTR for manufacturing platform this quarter",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "click",
"className": "ctr-metric"
}
}<|eot_id|>
Reward: 0.024807863326974378
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a real estate dashboard showing return on investment during this quarter.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Return on Investment",
"value": "8.75%",
"description": "ROI for the current quarter",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.18970471299866554
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a telecommunications dashboard showing conversion rate during Q3 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Conversion Rate",
"value": "3.8%",
"description": "Customer conversion rate during Q3 2023",
"trend": {
"value": 0.5,
"isPositive": true
},
"icon": "percentage"
}
}<|eot_id|>
Reward: -0.35329746558014885
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for active users in transportation for last 7 days.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users",
"value": "3,450",
"description": "Active users in transportation (Last 7 days)",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.13305220064686196
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Design a metric component that displays page views for our finance platform for November.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Page Views",
"value": "125,000",
"description": "Page views for November",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "eye"
}
}<|eot_id|>
Reward: -0.12069989778477419
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing retention rate statistics for our healthcare business for November.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Retention Rate",
"value": "86%",
"description": "Retention rate for November",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "heartbeat"
}
}<|eot_id|>
Reward: -0.3522032034895184
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for customer lifetime value in entertainment for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Customer Lifetime Value",
"value": "$1,250",
"description": "Average customer lifetime value in entertainment for October",
"trend": {
"value": 8.3,
"isPositive": true
},
"icon": "money-bag"
}
}<|eot_id|>
Reward: 0.048925560607891994
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for delivery time in agriculture for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Delivery Time",
"value": "5.2 days",
"description": "Average delivery time in October",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "truck"
}
}<|eot_id|>
Reward: -0.4232199799763279
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing delivery time statistics for our media business for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Delivery Time (October)",
"value": "3.2 days",
"description": "Average delivery time for media content",
"trend": {
"value": -0.4,
"isPositive": false
},
"icon": "clock",
"className": "delivery-time-stat"
}
}<|eot_id|>
Reward: 0.21264866734544086
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for uptime percentage in real estate for Q2 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Uptime Q2 2023",
"value": "99.8%",
"description": "System uptime percentage for Q2 2023",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: 0.38130110893419866
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
I need a metric card showing active users statistics for our healthcare business for October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users",
"value": "1,254",
"description": "Active users in October",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.07098229095259345
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a insurance dashboard showing operational costs during Q1 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Operational Costs",
"value": "$1,250,000",
"description": "Q1 2023 operational expenses",
"trend": {
"value": -5.0,
"isPositive": false
},
"icon": "cash"
}
}<|eot_id|>
Reward: 0.086529011108059
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for session duration in our retail analytics for April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Session Duration",
"value": "3m 45s",
"description": "Average session duration in April",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "clock"
}
}<|eot_id|>
Reward: -0.3573692653349798
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for subscription renewals in manufacturing for June.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Subscription Renewals",
"value": "1,250",
"description": "Renewals in June for manufacturing sector",
"trend": {
"value": -5.0,
"isPositive": false
},
"icon": "sync"
}
}<|eot_id|>
Reward: 0.14934456389971107
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for churn rate in media for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Churn Rate",
"value": "5.2%",
"description": "Media churn rate for July",
"trend": {
"value": -0.3,
"isPositive": false
},
"icon": "trending-down",
"className": "churn-rate-media-july"
}
}<|eot_id|>
Reward: 0.214951608235884
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for average order value in transportation for February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Average Order Value (Transportation - February)",
"value": "$1,250",
"description": "Average order value in transportation for February",
"trend": {
"value": 3.2,
"isPositive": true
},
"icon": "shopping-cart"
}
}<|eot_id|>
Reward: -0.19315057843934946
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a entertainment dashboard showing active users during October.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users",
"value": "15,230",
"description": "Active users in October",
"trend": {
"value": 8.4,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: 0.09855739482697545
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for sales growth in finance for year-to-date.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Sales Growth (YTD)",
"value": "8.4%",
"description": "Year-to-date sales increase",
"trend": {
"value": 8.4,
"isPositive": true
},
"icon": "trending-up"
}
}<|eot_id|>
Reward: -0.45719210297014945
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a transportation dashboard showing app downloads during Q1 2023.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "App Downloads Q1 2023",
"value": "1,250,000",
"description": "Total app downloads during Q1 2023",
"trend": {
"value": 8.3,
"isPositive": true
},
"icon": "downloads"
}
}<|eot_id|>
Reward: 0.4325971227984894
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Provide a metric card JSON for active users in our telecommunications analytics for July.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Active Users",
"value": "1,245",
"description": "Active users in July",
"trend": {
"value": 5.2,
"isPositive": true
},
"icon": "users"
}
}<|eot_id|>
Reward: -0.49182052742565896
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a energy dashboard showing market share during March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Market Share (March)",
"value": "35.7%",
"description": "Energy market share in March",
"trend": {
"value": 2.3,
"isPositive": true
},
"icon": "trending-up",
"className": "energy-market-share"
}
}<|eot_id|>
Reward: 0.20215263761756352
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a technology dashboard showing page views during April.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Page Views",
"value": "150,000",
"description": "Page views in April",
"trend": {
"value": 8.2,
"isPositive": true
},
"icon": "eye"
}
}<|eot_id|>
Reward: -0.14113816023063352
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a e-commerce dashboard showing error rate during March.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Error Rate",
"value": "2.3%",
"description": "Error rate during March",
"trend": {
"value": -0.2,
"isPositive": false
},
"icon": "error",
"className": "error-rate-metric"
}
}<|eot_id|>
Reward: -0.2243894226923966
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for return on investment in e-commerce for December.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Return on Investment",
"value": "8.75%",
"description": "E-commerce ROI for December",
"trend": {
"value": 1.2,
"isPositive": true
},
"icon": "trend-up"
}
}<|eot_id|>
Reward: 0.14983341921568294
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Create a metric card for customer support tickets in entertainment for this year.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Support Tickets (Entertainment)",
"value": "1,234",
"description": "Tickets received this year",
"trend": {
"value": 5.8,
"isPositive": false
},
"icon": "support"
}
}<|eot_id|>
Reward: 0.36142393752834834
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
You are an AI specialized in generating JSON data for a MetricCard React component.
Your task is to create a JSON object following this structure:
{
"componentType": "metricCard",
"props": {
"title": "Revenue",
"value": "$12,345",
"description": "Total revenue this month",
"trend": {
"value": 12.5,
"isPositive": true
},
"icon": "dollar"
}
}
Required properties:
- componentType: Must be exactly "metricCard"
- props.title: The metric name/label
- props.value: The metric value (formatted appropriately)
Optional properties:
- props.description: Additional context about the metric
- props.trend: An object with 'value' (percentage) and 'isPositive' (boolean)
- props.icon: Name of the icon (e.g., "dollar", "users", "trending-up")
- props.className: CSS class name for custom styling
IMPORTANT:
1. Ensure the generated JSON is valid
2. Format numeric values appropriately (add commas, currency symbols, or percentage signs as needed)
3. Use appropriate icons based on the metric type
4. Make sure trend values and descriptions are realistic
You will receive a query describing what kind of metric is needed. Generate the appropriate JSON response.<|eot_id|><|start_header_id|>user<|end_header_id|>
Generate a JSON output for a marketing dashboard showing click-through rate during February.<|eot_id|><|start_header_id|>assistant<|end_header_id|>
{
"componentType": "metricCard",
"props": {
"title": "Click-Through Rate",
"value": "3.5%",
"description": "February campaign click-through rate",
"trend": {
"value": 0.2,
"isPositive": true
},
"icon": "cursor-click"
}
}<|eot_id|>
Reward: -0.12705051449502713