cf21ba4516
Phase 1 (Foundation): - Project restructure (presenton-main → backend/ + frontend/) - Database schema (8 new models, Alembic config, seed script) - Auth (Azure AD SSO + dev bypass, JWT sessions, AuthMiddleware) - RBAC (access_service, rbac_middleware, admin routers) - Audit logging (fire-and-forget, AuditMiddleware, admin router) - i18n (react-i18next with 5 namespace files) Phase 2 (Admin Panel & Client Management): - Admin panel shell (sidebar layout, role guard, 12 pages) - Redux admin slice with 18 async thunks - User management (role changes, deactivation) - Client management (CRUD, brand config, team management) - Brand config editor (colors, fonts, logos, voice rules) - Master deck upload & parser (PPTX → HTML → React pipeline) - Audit log viewer with filters and CSV/JSON export Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
582 lines
28 KiB
TypeScript
582 lines
28 KiB
TypeScript
/**
|
|
* Chart with Bullets Slide Layout - Enhanced with multiple chart variations
|
|
*/
|
|
|
|
import React from 'react'
|
|
import * as z from "zod";
|
|
import { IconSchema } from '../defaultSchemes';
|
|
import { RemoteSvgIcon } from '@/app/hooks/useRemoteSvgIcon';
|
|
|
|
import {
|
|
BarChart, Bar, LineChart, Line, PieChart, Pie, AreaChart, Area, ScatterChart, Scatter,
|
|
XAxis, YAxis, CartesianGrid, Cell, ResponsiveContainer, Tooltip, Legend, LabelList, ReferenceLine
|
|
} from "recharts";
|
|
|
|
export const layoutId = 'chart-with-bullets-slide'
|
|
export const layoutName = 'Chart With Bullet Cards'
|
|
export const layoutDescription = 'A split layout with title, description, and a versatile chart on the left, paired with 1-3 colored icon bullet cards on the right. Supports bar, grouped, stacked, clustered, diverging, line, area, pie, and scatter charts.'
|
|
|
|
// Color palettes
|
|
const DEFAULT_CHART_COLORS = ['#8B5CF6', '#06B6D4', '#10B981', '#F59E0B', '#EF4444', '#EC4899']
|
|
|
|
|
|
const formatComma = (value: number) => {
|
|
return value.toLocaleString('en-US');
|
|
};
|
|
|
|
// Simple data for single series charts
|
|
const simpleDataSchema = z.object({
|
|
name: z.string().meta({ description: "Data point name" }),
|
|
value: z.number().meta({ description: "Data point value" }),
|
|
});
|
|
|
|
// Multi-series data
|
|
const multiSeriesDataSchema = z.object({
|
|
name: z.string().meta({ description: "Category name" }),
|
|
values: z.any().meta({ description: "Key-value pairs for each series (object with series names as keys and numbers as values)" }),
|
|
});
|
|
|
|
// Diverging data
|
|
const divergingDataSchema = z.object({
|
|
name: z.string().meta({ description: "Category name" }),
|
|
positive: z.number().meta({ description: "Positive value" }),
|
|
negative: z.number().meta({ description: "Negative value" }),
|
|
});
|
|
|
|
// Scatter data
|
|
const scatterDataSchema = z.object({
|
|
x: z.number().meta({ description: "X coordinate" }),
|
|
y: z.number().meta({ description: "Y coordinate" }),
|
|
});
|
|
|
|
const chartWithBulletsSlideSchema = z.object({
|
|
title: z.string().min(3).max(40).default('Market Size').meta({
|
|
description: "Main title of the slide",
|
|
}),
|
|
description: z.string().min(10).max(150).default('Businesses face challenges with outdated technology and rising costs, limiting efficiency and growth in competitive markets.').meta({
|
|
description: "Description text below the title",
|
|
}),
|
|
chartData: z.object({
|
|
type: z.enum([
|
|
'bar',
|
|
'bar-horizontal',
|
|
'bar-grouped-vertical',
|
|
'bar-grouped-horizontal',
|
|
'bar-stacked-vertical',
|
|
'bar-stacked-horizontal',
|
|
'bar-clustered',
|
|
'bar-diverging',
|
|
'line',
|
|
'area',
|
|
'area-stacked',
|
|
'pie',
|
|
'donut',
|
|
'scatter'
|
|
]).default('bar'),
|
|
data: z.union([
|
|
z.array(simpleDataSchema),
|
|
z.array(multiSeriesDataSchema),
|
|
z.array(divergingDataSchema),
|
|
z.array(scatterDataSchema),
|
|
]).default([
|
|
{ name: 'Q1', value: 45 },
|
|
{ name: 'Q2', value: 72 },
|
|
{ name: 'Q3', value: 58 },
|
|
{ name: 'Q4', value: 89 },
|
|
]),
|
|
series: z.array(z.string()).optional().meta({ description: "Series names for grouped/stacked charts" }),
|
|
divergingLabels: z.tuple([z.string(), z.string()]).optional(),
|
|
colorPalette: z.enum(['vibrant', 'ocean', 'professional']).default('vibrant'),
|
|
}).default({
|
|
type: 'bar',
|
|
data: [
|
|
{ name: 'Q1', value: 45 },
|
|
{ name: 'Q2', value: 72 },
|
|
{ name: 'Q3', value: 58 },
|
|
{ name: 'Q4', value: 89 },
|
|
],
|
|
colorPalette: 'vibrant',
|
|
}),
|
|
showLegend: z.boolean().default(false).meta({
|
|
description: "Whether to show chart legend",
|
|
}),
|
|
showTooltip: z.boolean().default(true).meta({
|
|
description: "Whether to show chart tooltip",
|
|
}),
|
|
bulletPoints: z.array(z.object({
|
|
title: z.string().min(2).max(80).meta({
|
|
description: "Bullet point title",
|
|
}),
|
|
description: z.string().min(10).max(150).meta({
|
|
description: "Bullet point description",
|
|
}),
|
|
icon: IconSchema,
|
|
})).min(1).max(3).default([
|
|
{
|
|
title: 'Total Addressable Market',
|
|
description: 'Companies can use TAM to plan future expansion and investment.',
|
|
icon: {
|
|
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/chart-line-up-bold.svg',
|
|
__icon_query__: 'target market scope'
|
|
}
|
|
},
|
|
{
|
|
title: 'Serviceable Available Market',
|
|
description: 'Indicates more measurable market segments for sales efforts.',
|
|
icon: {
|
|
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/chart-line-up-bold.svg',
|
|
__icon_query__: 'pie chart analysis'
|
|
}
|
|
},
|
|
{
|
|
title: 'Serviceable Obtainable Market',
|
|
description: 'Help companies plan development strategies according to the market.',
|
|
icon: {
|
|
__icon_url__: 'https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/bold/chart-line-up-bold.svg',
|
|
__icon_query__: 'trending up growth'
|
|
}
|
|
}
|
|
]).meta({
|
|
description: "List of bullet points with colored boxes and icons",
|
|
})
|
|
})
|
|
|
|
export const Schema = chartWithBulletsSlideSchema
|
|
|
|
export type ChartWithBulletsSlideData = z.infer<typeof chartWithBulletsSlideSchema>
|
|
|
|
interface ChartWithBulletsSlideLayoutProps {
|
|
data?: Partial<ChartWithBulletsSlideData>
|
|
}
|
|
|
|
|
|
|
|
// Transform multi-series data
|
|
const transformMultiSeriesData = (data: any[], series: string[]) => {
|
|
return data.map(item => {
|
|
const result: Record<string, any> = { name: item.name };
|
|
series.forEach(s => {
|
|
result[s] = item.values?.[s] ?? 0;
|
|
});
|
|
return result;
|
|
});
|
|
};
|
|
|
|
// Transform diverging data
|
|
const transformDivergingData = (data: any[]) => {
|
|
return data.map(item => ({
|
|
name: item.name,
|
|
positive: item.positive,
|
|
negative: -Math.abs(item.negative),
|
|
}));
|
|
};
|
|
|
|
// Custom tooltip
|
|
const CustomTooltip = ({ active, payload, label }: any) => {
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<div className="bg-white/95 backdrop-blur-sm border border-gray-200 rounded-lg shadow-lg px-3 py-2"
|
|
style={{
|
|
backgroundColor: 'var(--card-color, #ffffff)',
|
|
borderColor: 'var(--stroke, #e5e7eb)',
|
|
}}
|
|
>
|
|
<p className="text-xs font-semibold text-gray-800 mb-1" style={{ color: 'var(--background-text, #111827)' }} >{label}</p>
|
|
{payload.map((entry: any, index: number) => (
|
|
<p key={index} className="text-[10px]" style={{ color: 'var(--background-text, #111827)' }}>
|
|
{entry.name}: <span className="font-medium">{entry.value?.toLocaleString()}</span>
|
|
</p>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const ChartWithBulletsSlideLayout: React.FC<ChartWithBulletsSlideLayoutProps> = ({ data: slideData }) => {
|
|
const chartData = slideData?.chartData?.data || [];
|
|
const chartType = slideData?.chartData?.type || 'bar';
|
|
const series = slideData?.chartData?.series || [];
|
|
|
|
const showLegend = slideData?.showLegend || false;
|
|
const showTooltip = slideData?.showTooltip !== false;
|
|
const bulletPoints = slideData?.bulletPoints || [];
|
|
const divergingLabels = slideData?.chartData?.divergingLabels || ['Positive', 'Negative'];
|
|
|
|
const axisProps = {
|
|
tick: { fill: 'var(--background-text, #7f8491)', fontSize: 10, fontWeight: 500 },
|
|
axisLine: { stroke: 'var(--background-text, #7f8491)' },
|
|
tickLine: { stroke: 'var(--background-text, #7f8491)' },
|
|
};
|
|
|
|
const gridProps = {
|
|
strokeDasharray: "3 3",
|
|
stroke: "var(--background-text, #7f8491)",
|
|
opacity: 0.7,
|
|
};
|
|
|
|
|
|
const graphColors = (index: number, serieColor?: string) => {
|
|
|
|
const fallback = serieColor || DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
|
|
return `var(--graph-${index}, ${fallback})`;
|
|
};
|
|
|
|
const renderChart = () => {
|
|
const renderPieLabel = (props: any) => {
|
|
const { name, percent, x, y, textAnchor } = props;
|
|
if (percent < 0.08) return null;
|
|
return (
|
|
<text x={x} y={y} textAnchor={textAnchor} fill="var(--text-body-color,#4b5563)" fontSize={10}>
|
|
{`${name} ${(percent * 100).toFixed(0)}%`}
|
|
</text>
|
|
);
|
|
};
|
|
|
|
const commonProps = {
|
|
margin: { top: 15, right: 20, left: 0, bottom: 5 },
|
|
};
|
|
|
|
switch (chartType) {
|
|
case 'bar':
|
|
return (
|
|
<BarChart data={chartData as any[]} {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
<Bar dataKey="value" radius={[6, 6, 0, 0]}>
|
|
{(chartData as any[]).map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
);
|
|
|
|
case 'bar-horizontal':
|
|
return (
|
|
<BarChart data={chartData as any[]} layout="vertical" {...commonProps} height={400}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis type="number" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis type="category" dataKey="name" {...axisProps} width={60} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
<Bar dataKey="value" radius={[0, 6, 6, 0]}>
|
|
{(chartData as any[]).map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
);
|
|
|
|
case 'bar-grouped-vertical': {
|
|
const transformedData = transformMultiSeriesData(chartData as any[], series);
|
|
return (
|
|
<BarChart data={transformedData} {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} fill={graphColors(index)} radius={[4, 4, 0, 0]} />
|
|
))}
|
|
</BarChart>
|
|
);
|
|
}
|
|
|
|
case 'bar-grouped-horizontal': {
|
|
const transformedData = transformMultiSeriesData(chartData as any[], series);
|
|
return (
|
|
<BarChart data={transformedData} layout="vertical" {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis type="number" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis type="category" dataKey="name" {...axisProps} width={60} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} fill={graphColors(index)} radius={[0, 4, 4, 0]} />
|
|
))}
|
|
</BarChart>
|
|
);
|
|
}
|
|
|
|
case 'bar-stacked-vertical': {
|
|
const transformedData = transformMultiSeriesData(chartData as any[], series);
|
|
return (
|
|
<BarChart data={transformedData} {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} stackId="stack" fill={graphColors(index)} radius={index === series.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]} />
|
|
))}
|
|
</BarChart>
|
|
);
|
|
}
|
|
|
|
case 'bar-stacked-horizontal': {
|
|
const transformedData = transformMultiSeriesData(chartData as any[], series);
|
|
return (
|
|
<BarChart data={transformedData} layout="vertical" {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis type="number" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis type="category" dataKey="name" {...axisProps} width={60} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} stackId="stack" fill={graphColors(index)} radius={index === series.length - 1 ? [0, 4, 4, 0] : [0, 0, 0, 0]} />
|
|
))}
|
|
</BarChart>
|
|
);
|
|
}
|
|
|
|
case 'bar-clustered': {
|
|
const transformedData = transformMultiSeriesData(chartData as any[], series);
|
|
return (
|
|
<BarChart data={transformedData} barGap={1} barCategoryGap="15%" {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} fill={graphColors(index)} radius={[3, 3, 0, 0]} barSize={Math.max(15, 50 / series.length)} />
|
|
))}
|
|
</BarChart>
|
|
);
|
|
}
|
|
|
|
case 'bar-diverging': {
|
|
const transformedData = transformDivergingData(chartData as any[]);
|
|
return (
|
|
<BarChart data={transformedData} layout="vertical" stackOffset="sign" {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis type="number" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis type="category" dataKey="name" {...axisProps} width={60} tickFormatter={formatComma} />
|
|
<ReferenceLine x={0} stroke="#9CA3AF" strokeWidth={1} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
<Bar dataKey="positive" name={divergingLabels[0]} fill={graphColors(0)} stackId="stack" radius={[0, 4, 4, 0]} />
|
|
<Bar dataKey="negative" name={divergingLabels[1]} fill={graphColors(3)} stackId="stack" radius={[4, 0, 0, 4]} />
|
|
</BarChart>
|
|
);
|
|
}
|
|
|
|
case 'line':
|
|
return (
|
|
<LineChart data={chartData as any[]} {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
<Line
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke={graphColors(0)}
|
|
strokeWidth={3}
|
|
dot={{ fill: graphColors(0), strokeWidth: 2, r: 4 }}
|
|
/>
|
|
</LineChart>
|
|
);
|
|
|
|
case 'area':
|
|
return (
|
|
<AreaChart data={chartData as any[]} {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
<defs>
|
|
<linearGradient id="bullets-area-gradient" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor={graphColors(0)} stopOpacity={0.4} />
|
|
<stop offset="95%" stopColor={graphColors(0)} stopOpacity={0.05} />
|
|
</linearGradient>
|
|
</defs>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke={graphColors(0)}
|
|
strokeWidth={2}
|
|
fill="url(#bullets-area-gradient)"
|
|
/>
|
|
</AreaChart>
|
|
);
|
|
|
|
case 'area-stacked': {
|
|
const transformedData = transformMultiSeriesData(chartData as any[], series);
|
|
return (
|
|
<AreaChart data={transformedData} {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Area key={s} type="monotone" dataKey={s} stackId="1" stroke={graphColors(index)} fill={graphColors(index)} fillOpacity={0.4} />
|
|
))}
|
|
</AreaChart>
|
|
);
|
|
}
|
|
|
|
case 'pie':
|
|
return (
|
|
<PieChart margin={{ top: 0, right: 0, left: 0, bottom: 0 }} height={460}>
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
<Pie
|
|
data={chartData as any[]}
|
|
outerRadius={80}
|
|
dataKey="value"
|
|
label={renderPieLabel}
|
|
>
|
|
{(chartData as any[]).map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} stroke="white" strokeWidth={2} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
);
|
|
|
|
case 'donut':
|
|
return (
|
|
<PieChart margin={{ top: 0, right: 0, left: 0, bottom: 0 }} height={460}>
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
<Pie
|
|
data={chartData as any[]}
|
|
innerRadius={40}
|
|
outerRadius={80}
|
|
dataKey="value"
|
|
label={renderPieLabel}
|
|
paddingAngle={2}
|
|
>
|
|
{(chartData as any[]).map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} stroke="white" strokeWidth={2} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
);
|
|
|
|
case 'scatter':
|
|
return (
|
|
<ScatterChart {...commonProps} height={460}>
|
|
<CartesianGrid {...gridProps} />
|
|
<XAxis dataKey="x" type="number" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis dataKey="y" type="number" {...axisProps} tickFormatter={formatComma} />
|
|
{showTooltip && <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />}
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '10px' }} />}
|
|
<Scatter data={chartData as any[]}>
|
|
{(chartData as any[]).map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} />
|
|
))}
|
|
</Scatter>
|
|
</ScatterChart>
|
|
);
|
|
|
|
default:
|
|
return <div className="flex items-center justify-center h-full text-gray-500">Unsupported chart type</div>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<div
|
|
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
|
|
style={{
|
|
fontFamily: 'var(--heading-font-family,Poppins)',
|
|
background: "var(--background-color,#ffffff)"
|
|
}}
|
|
>
|
|
{((slideData as any)?.__companyName__ || (slideData as any)?._logo_url__) && (
|
|
<div className="absolute top-0 left-0 right-0 px-8 pt-4">
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-1">
|
|
{(slideData as any)?._logo_url__ && <img src={(slideData as any)?._logo_url__} alt="logo" className="w-[60px] object-contain" />}
|
|
<span
|
|
style={{ backgroundColor: 'var(--stroke, #F0F0F0)' }}
|
|
className=' w-[2px] h-4'></span>
|
|
{(slideData as any)?.__companyName__ && <span className="text-sm font-semibold" style={{ color: 'var(--background-text, #111827)' }}>
|
|
{(slideData as any)?.__companyName__ || 'Company Name'}
|
|
</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main Content */}
|
|
<div className="flex h-full px-8 sm:px-12 lg:px-20 pt-8 pb-8">
|
|
{/* Left Section - Title, Description, Chart */}
|
|
<div className="flex-1 flex flex-col pr-8">
|
|
{/* Title */}
|
|
<h1 style={{ color: "var(--background-text,#111827)" }} className="text-[42.7px] font-bold text-gray-900 mb-4">
|
|
{slideData?.title || 'Market Size'}
|
|
</h1>
|
|
|
|
{/* Description */}
|
|
<p style={{ color: "var(--background-text,#4b5563)" }} className="text-base text-gray-700 leading-relaxed mb-4">
|
|
{slideData?.description || 'Businesses face challenges with outdated technology and rising costs, limiting efficiency and growth in competitive markets.'}
|
|
</p>
|
|
|
|
{/* Chart Container */}
|
|
<div className="flex-1 rounded-lg shadow-sm border p-2 max-h-[460px]"
|
|
|
|
style={{
|
|
borderColor: 'var(--stroke,#F8F9FA)',
|
|
backgroundColor: 'var(--card-color,#FFFFFF)'
|
|
}}
|
|
>
|
|
<ResponsiveContainer maxHeight={460} height='100%' className="">
|
|
{renderChart()}
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Section - Bullet Point Boxes */}
|
|
<div className="flex-shrink-0 w-80 flex flex-col justify-center space-y-4">
|
|
{bulletPoints.map((bullet, index) => (
|
|
<div
|
|
key={index}
|
|
className="rounded-2xl p-6 text-white"
|
|
style={{
|
|
backgroundColor: 'var(--card-color,#9333ea)'
|
|
}}
|
|
>
|
|
{/* Icon and Title */}
|
|
<div className="flex items-center space-x-3 mb-3">
|
|
<div style={{ background: "var(--primary-color,#9333ea)" }} className="w-8 h-8 rounded-lg flex items-center justify-center">
|
|
<RemoteSvgIcon
|
|
url={bullet.icon.__icon_url__}
|
|
strokeColor={"currentColor"}
|
|
className="w-5 h-5"
|
|
color="var(--primary-text,#ffffff)"
|
|
title={bullet.icon.__icon_query__}
|
|
/>
|
|
</div>
|
|
<h3 style={{ color: "var(--background-text,#ffffff)" }} className="text-lg font-semibold">
|
|
{bullet.title}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p style={{ color: "var(--background-text,#ffffff)" }} className="text-sm leading-relaxed opacity-90">
|
|
{bullet.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ChartWithBulletsSlideLayout
|