From 427292d1efcbb849f0738cb03e72c382782a919b Mon Sep 17 00:00:00 2001 From: sauravniraula Date: Mon, 4 Aug 2025 13:06:39 +0545 Subject: [PATCH] chore(classic-dark layout): adds min and max constraints to reduce overflow --- .../classic-dark/2-ChartAndMetrics.tsx | 20 +++++++------------ .../classic-dark/3-BarGraph.tsx | 6 +++--- .../classic-dark/4-Comparison.tsx | 2 +- .../classic-dark/5-Metrics.tsx | 4 ++-- .../6-BulletPointWithDescription.tsx | 6 +++--- 5 files changed, 16 insertions(+), 22 deletions(-) diff --git a/servers/nextjs/presentation-layouts/classic-dark/2-ChartAndMetrics.tsx b/servers/nextjs/presentation-layouts/classic-dark/2-ChartAndMetrics.tsx index 806dac67..c266bbe3 100644 --- a/servers/nextjs/presentation-layouts/classic-dark/2-ChartAndMetrics.tsx +++ b/servers/nextjs/presentation-layouts/classic-dark/2-ChartAndMetrics.tsx @@ -8,15 +8,15 @@ export const layoutName = 'Classic Dark Pie Chart and Metrics' export const layoutDescription = 'A modern slide with dark background, metrics on the left, and pie chart visualization on the right.' const chartDataSchema = z.object({ - name: z.string().meta({ description: "Data point name" }), + name: z.string().min(2).max(30).meta({ description: "Data point name" }), value: z.number().meta({ description: "Data point value" }), }); const pieChartAndMetricsSchema = z.object({ - title: z.string().min(3).max(100).default('Introduction to Nepal\'s Trade').meta({ + title: z.string().min(3).max(80).default('Introduction to Nepal\'s Trade').meta({ description: "Main title of the slide", }), - description: z.string().min(10).max(200).default('Nepal\'s landlocked geography heavily influences its trade, fostering reliance on India and China.').meta({ + description: z.string().min(10).max(100).default('Nepal\'s landlocked geography heavily influences its trade, fostering reliance on India and China.').meta({ description: "Description text", }), metrics: z.array(z.object({ @@ -37,13 +37,7 @@ const pieChartAndMetricsSchema = z.object({ { name: 'Other GDP', value: 50.6 }, ]).meta({ description: "Pie chart data", - }), - showLegend: z.boolean().default(true).meta({ - description: "Whether to show chart legend", - }), - showTooltip: z.boolean().default(true).meta({ - description: "Whether to show chart tooltip", - }), + }) }) const chartConfig = { @@ -70,7 +64,7 @@ interface PieChartAndMetricsLayoutProps { } const PieChartAndMetricsLayout: React.FC = ({ data: slideData }) => { - const { title, description, metrics, chartData, showLegend = true, showTooltip = true } = slideData; + const { title, description, metrics, chartData } = slideData; const CustomLegend = () => (
@@ -89,7 +83,7 @@ const PieChartAndMetricsLayout: React.FC = ({ dat const renderPieChart = () => { return ( - {showTooltip && } />} + } /> = ({ dat {renderPieChart()} - {showLegend && } +
diff --git a/servers/nextjs/presentation-layouts/classic-dark/3-BarGraph.tsx b/servers/nextjs/presentation-layouts/classic-dark/3-BarGraph.tsx index 7f73ef69..e22bb626 100644 --- a/servers/nextjs/presentation-layouts/classic-dark/3-BarGraph.tsx +++ b/servers/nextjs/presentation-layouts/classic-dark/3-BarGraph.tsx @@ -8,15 +8,15 @@ export const layoutName = 'Classic Dark Bar Graph' export const layoutDescription = 'A modern slide with dark background, gradient title, bar chart visualization, and footer text.' const barDataSchema = z.object({ - name: z.string().meta({ description: "Product name" }), + name: z.string().min(2).max(30).meta({ description: "Product name" }), value: z.number().meta({ description: "Export value in millions" }), }); const barGraphSchema = z.object({ - title: z.string().min(3).max(100).default('Export Overview: Key Products').meta({ + title: z.string().min(3).max(80).default('Export Overview: Key Products').meta({ description: "Main title of the slide", }), - description: z.string().min(10).max(150).default('Nepal\'s total exports were $1.3 billion in 2022, a 21% decrease from 2021, but showed a 47.5% YoY increase by Nov 2024.').meta({ + description: z.string().min(10).max(120).default('Nepal\'s total exports were $1.3 billion in 2022, a 21% decrease from 2021, but showed a 47.5% YoY increase by Nov 2024.').meta({ description: "Description text", }), chartData: z.array(barDataSchema).min(2).max(6).default([ diff --git a/servers/nextjs/presentation-layouts/classic-dark/4-Comparison.tsx b/servers/nextjs/presentation-layouts/classic-dark/4-Comparison.tsx index 3fa9bec6..a3db2ff1 100644 --- a/servers/nextjs/presentation-layouts/classic-dark/4-Comparison.tsx +++ b/servers/nextjs/presentation-layouts/classic-dark/4-Comparison.tsx @@ -19,7 +19,7 @@ const comparisonSectionSchema = z.object({ }); const comparisonSchema = z.object({ - title: z.string().min(3).max(100).default('Key Commodities in Focus').meta({ + title: z.string().min(3).max(80).default('Key Commodities in Focus').meta({ description: "Main title of the slide", }), comparisonSections: z.array(comparisonSectionSchema).min(2).max(2).default([ diff --git a/servers/nextjs/presentation-layouts/classic-dark/5-Metrics.tsx b/servers/nextjs/presentation-layouts/classic-dark/5-Metrics.tsx index 7e7db991..7db8fc6c 100644 --- a/servers/nextjs/presentation-layouts/classic-dark/5-Metrics.tsx +++ b/servers/nextjs/presentation-layouts/classic-dark/5-Metrics.tsx @@ -14,10 +14,10 @@ const metricItemSchema = z.object({ }); const metricsSchema = z.object({ - title: z.string().min(3).max(100).default('Top Export Destinations').meta({ + title: z.string().min(3).max(80).default('Top Export Destinations').meta({ description: "Main title of the slide", }), - description: z.string().min(10).max(200).default('Nepal exports 760 products to 132 countries, with a strong focus on regional trade.').meta({ + description: z.string().min(10).max(120).default('Nepal exports 760 products to 132 countries, with a strong focus on regional trade.').meta({ description: "Description text", }), metrics: z.array(metricItemSchema).min(2).max(6).default([ diff --git a/servers/nextjs/presentation-layouts/classic-dark/6-BulletPointWithDescription.tsx b/servers/nextjs/presentation-layouts/classic-dark/6-BulletPointWithDescription.tsx index cfcb6b32..8f6e19c5 100644 --- a/servers/nextjs/presentation-layouts/classic-dark/6-BulletPointWithDescription.tsx +++ b/servers/nextjs/presentation-layouts/classic-dark/6-BulletPointWithDescription.tsx @@ -7,12 +7,12 @@ export const layoutName = 'Classic Dark Bullet Point with Description' export const layoutDescription = 'A modern slide with dark background, image on the left (2/5), and bullet points with descriptions in boxes on the right (3/5).' const bulletPointSchema = z.object({ - title: z.string().min(3).max(80).meta({ description: "Bullet point title" }), - content: z.string().min(10).max(150).meta({ description: "Bullet point content (max 150 characters)" }), + title: z.string().min(3).max(60).meta({ description: "Bullet point title" }), + content: z.string().min(10).max(120).meta({ description: "Bullet point content (max 150 characters)" }), }); const bulletPointWithDescriptionSchema = z.object({ - title: z.string().min(3).max(100).default('Trade Policies and Challenges').meta({ + title: z.string().min(3).max(80).default('Trade Policies and Challenges').meta({ description: "Main title of the slide", }), bulletPoints: z.array(bulletPointSchema).min(2).max(3).default([