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>
671 lines
30 KiB
TypeScript
671 lines
30 KiB
TypeScript
import React from 'react';
|
|
import * as z from "zod";
|
|
import {
|
|
ResponsiveContainer,
|
|
BarChart,
|
|
Bar,
|
|
LineChart,
|
|
Line,
|
|
AreaChart,
|
|
Area,
|
|
PieChart,
|
|
Pie,
|
|
ScatterChart,
|
|
Scatter,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
Cell,
|
|
LabelList,
|
|
ReferenceLine,
|
|
} from "recharts";
|
|
|
|
export const layoutId = 'multi-chart-grid-slide';
|
|
export const layoutName = 'Title Description With Multi-Chart Grid';
|
|
export const layoutDescription = 'A flexible dashboard layout featuring a title section with description and 1-6 auto-arranged charts in a responsive grid. Supports bar (vertical, horizontal, grouped, stacked, clustered, diverging), line, area, pie, donut, and scatter charts.';
|
|
|
|
// Color palettes
|
|
const CHART_COLOR_PALETTES = ['#8B5CF6', '#06B6D4', '#10B981', '#F59E0B', '#EF4444', '#EC4899']
|
|
|
|
// Chart type enum
|
|
const ChartTypeEnum = z.enum([
|
|
'bar-vertical',
|
|
'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',
|
|
]);
|
|
|
|
// Simple data point for single series
|
|
const SimpleDataPointSchema = z.object({
|
|
name: z.string(),
|
|
value: z.number(),
|
|
});
|
|
|
|
// Multi-series data point
|
|
const MultiSeriesDataPointSchema = z.object({
|
|
name: z.string(),
|
|
values: z.any().describe("Object with series names as keys and numbers as values (e.g., { 'Product A': 45, 'Product B': 62 })"),
|
|
});
|
|
|
|
// Diverging data point
|
|
const DivergingDataPointSchema = z.object({
|
|
name: z.string(),
|
|
positive: z.number(),
|
|
negative: z.number(),
|
|
});
|
|
|
|
// Scatter data point
|
|
const ScatterDataPointSchema = z.object({
|
|
x: z.number(),
|
|
y: z.number(),
|
|
name: z.string().optional(),
|
|
});
|
|
|
|
// Individual chart schema
|
|
const ChartItemSchema = z.object({
|
|
title: z.string().max(40).describe("Chart title").default("Chart Title"),
|
|
type: ChartTypeEnum.default('bar-vertical'),
|
|
data: z.union([
|
|
z.array(SimpleDataPointSchema),
|
|
z.array(MultiSeriesDataPointSchema),
|
|
z.array(DivergingDataPointSchema),
|
|
z.array(ScatterDataPointSchema),
|
|
]).default([
|
|
{ name: 'Q1', value: 45 },
|
|
{ name: 'Q2', value: 72 },
|
|
{ name: 'Q3', value: 58 },
|
|
{ name: 'Q4', value: 89 },
|
|
]),
|
|
series: z.array(z.string()).optional().describe("Series names for grouped/stacked charts"),
|
|
colorPalette: z.enum(['vibrant', 'ocean', 'forest', 'sunset', 'professional']).default('vibrant'),
|
|
});
|
|
|
|
// Main schema
|
|
export const Schema = z.object({
|
|
title: z.string().min(3).max(50).default('Data Analytics Dashboard').meta({
|
|
description: "Heading text of the slide",
|
|
}),
|
|
description: z.string().min(10).max(200).default('Comprehensive overview of key metrics and performance indicators across multiple data dimensions.').meta({
|
|
description: "Supporting description text",
|
|
}),
|
|
charts: z.array(ChartItemSchema).min(1).max(6).default([
|
|
{
|
|
title: 'Revenue by Quarter',
|
|
type: 'bar-vertical',
|
|
data: [
|
|
{ name: 'Q1', value: 125000 },
|
|
{ name: 'Q2', value: 158000 },
|
|
{ name: 'Q3', value: 142000 },
|
|
{ name: 'Q4', value: 189000 },
|
|
],
|
|
colorPalette: 'vibrant',
|
|
},
|
|
{
|
|
title: 'Market Distribution',
|
|
type: 'donut',
|
|
data: [
|
|
{ name: 'North America', value: 35 },
|
|
{ name: 'Europe', value: 28 },
|
|
{ name: 'Asia Pacific', value: 25 },
|
|
{ name: 'Others', value: 12 },
|
|
],
|
|
colorPalette: 'ocean',
|
|
},
|
|
{
|
|
title: 'Growth Trend',
|
|
type: 'line',
|
|
data: [
|
|
{ name: 'Jan', value: 30 },
|
|
{ name: 'Feb', value: 45 },
|
|
{ name: 'Mar', value: 52 },
|
|
{ name: 'Apr', value: 48 },
|
|
{ name: 'May', value: 67 },
|
|
{ name: 'Jun', value: 82 },
|
|
],
|
|
colorPalette: 'professional',
|
|
},
|
|
{
|
|
title: 'Department Performance',
|
|
type: 'bar-horizontal',
|
|
data: [
|
|
{ name: 'Sales', value: 87 },
|
|
{ name: 'Marketing', value: 72 },
|
|
{ name: 'Engineering', value: 95 },
|
|
{ name: 'Support', value: 68 },
|
|
],
|
|
colorPalette: 'sunset',
|
|
},
|
|
{
|
|
title: 'Product Comparison',
|
|
type: 'bar-clustered',
|
|
data: [
|
|
{ name: 'Q1', values: { 'Product A': 45, 'Product B': 62 } },
|
|
{ name: 'Q2', values: { 'Product A': 58, 'Product B': 71 } },
|
|
{ name: 'Q3', values: { 'Product A': 72, 'Product B': 65 } },
|
|
],
|
|
series: ['Product A', 'Product B'],
|
|
colorPalette: 'vibrant',
|
|
},
|
|
{
|
|
title: 'Customer Feedback',
|
|
type: 'bar-diverging',
|
|
data: [
|
|
{ name: 'Quality', positive: 78, negative: 22 },
|
|
{ name: 'Service', positive: 65, negative: 35 },
|
|
{ name: 'Price', positive: 42, negative: 58 },
|
|
],
|
|
series: ['Satisfied', 'Unsatisfied'],
|
|
colorPalette: 'professional',
|
|
},
|
|
]).meta({
|
|
description: "Array of chart configurations",
|
|
}),
|
|
showLegend: z.boolean().default(true).meta({
|
|
description: "Whether to display chart legends",
|
|
}),
|
|
showGrid: z.boolean().default(true).meta({
|
|
description: "Whether to display grid lines",
|
|
}),
|
|
});
|
|
|
|
export type MultiChartGridSlideData = z.infer<typeof Schema>;
|
|
|
|
interface MultiChartGridSlideLayoutProps {
|
|
data?: Partial<MultiChartGridSlideData>;
|
|
}
|
|
|
|
// 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-[10px] 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-[9px]" style={{ color: 'var(--background-text, #111827)' }}>
|
|
{entry.name}: <span className="font-medium">{entry.value?.toLocaleString()}</span>
|
|
</p>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Mini chart renderer
|
|
const MiniChartRenderer: React.FC<{
|
|
chart: z.infer<typeof ChartItemSchema>;
|
|
showLegend: boolean;
|
|
showGrid: boolean;
|
|
}> = ({ chart, showLegend, showGrid }) => {
|
|
|
|
const data = chart.data as any[];
|
|
const series = chart.series || [];
|
|
|
|
const formatComma = (value: number) => {
|
|
return value.toLocaleString('en-US');
|
|
};
|
|
const axisProps = {
|
|
tick: { fill: 'var(--background-text, #7f8491)', fontSize: 9, 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.5,
|
|
};
|
|
|
|
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;
|
|
});
|
|
};
|
|
|
|
const transformDivergingData = (data: any[]) => {
|
|
return data.map(item => ({
|
|
name: item.name,
|
|
positive: item.positive,
|
|
negative: -Math.abs(item.negative),
|
|
}));
|
|
};
|
|
|
|
const renderPieLabel = (props: any) => {
|
|
const { percent } = props;
|
|
if (percent < 0.08) return null;
|
|
return `${(percent * 100).toFixed(0)}%`;
|
|
};
|
|
|
|
const graphColors = (index: number, serieColor?: string) => {
|
|
const fallback = serieColor || CHART_COLOR_PALETTES[index % CHART_COLOR_PALETTES.length];
|
|
return `var(--graph-${index}, ${fallback})`;
|
|
};
|
|
|
|
switch (chart.type) {
|
|
case 'bar-vertical':
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<BarChart data={data}
|
|
|
|
margin={{ top: 10, right: 10, left: -10, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
<Bar dataKey="value" radius={[4, 4, 0, 0]}
|
|
|
|
>
|
|
{data.map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} />
|
|
))}
|
|
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
|
|
case 'bar-horizontal':
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<BarChart data={data} layout="vertical" margin={{ top: 10, right: 10, left: 0, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis type="number" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis type="category" dataKey="name" {...axisProps} width={50} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
<Bar dataKey="value" radius={[0, 4, 4, 0]}>
|
|
{data.map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
|
|
case 'bar-grouped-vertical': {
|
|
const transformedData = transformMultiSeriesData(data, series);
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<BarChart data={transformedData} margin={{ top: 10, right: 10, left: -10, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '9px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} fill={graphColors(index)} radius={[3, 3, 0, 0]} />
|
|
))}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
case 'bar-grouped-horizontal': {
|
|
const transformedData = transformMultiSeriesData(data, series);
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<BarChart data={transformedData} layout="vertical" margin={{ top: 10, right: 10, left: 0, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis type="number" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis type="category" dataKey="name" {...axisProps} width={50} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '9px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} fill={graphColors(index)} radius={[0, 3, 3, 0]} />
|
|
))}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
case 'bar-stacked-vertical': {
|
|
const transformedData = transformMultiSeriesData(data, series);
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<BarChart data={transformedData} margin={{ top: 10, right: 10, left: -10, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '9px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} stackId="stack" fill={graphColors(index)} radius={index === series.length - 1 ? [3, 3, 0, 0] : [0, 0, 0, 0]} />
|
|
))}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
case 'bar-stacked-horizontal': {
|
|
const transformedData = transformMultiSeriesData(data, series);
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<BarChart data={transformedData} layout="vertical" margin={{ top: 10, right: 10, left: 0, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis type="number" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis type="category" dataKey="name" {...axisProps} width={50} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '9px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} stackId="stack" fill={graphColors(index)} radius={index === series.length - 1 ? [0, 3, 3, 0] : [0, 0, 0, 0]} />
|
|
))}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
case 'bar-clustered': {
|
|
// If no series provided, fall back to simple bar chart behavior
|
|
if (series.length === 0) {
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<BarChart data={data} barGap={2} barCategoryGap="20%" margin={{ top: 10, right: 10, left: -10, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
<Bar dataKey="value" radius={[4, 4, 0, 0]} barSize={32}>
|
|
{data.map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
const transformedData = transformMultiSeriesData(data, series);
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<BarChart data={transformedData} barGap={1} barCategoryGap="15%" margin={{ top: 10, right: 10, left: -10, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '9px' }} />}
|
|
{series.map((s: string, index: number) => (
|
|
<Bar key={s} dataKey={s} fill={graphColors(index)} radius={[3, 3, 0, 0]} barSize={Math.max(12, 40 / series.length)} />
|
|
))}
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
case 'bar-diverging': {
|
|
// Handle both formats: {positive, negative} or simple {value}
|
|
const hasDivergingFormat = data.length > 0 && ('positive' in data[0] || 'negative' in data[0]);
|
|
const transformedData = hasDivergingFormat
|
|
? transformDivergingData(data)
|
|
: data.map((item: any, idx: number) => ({
|
|
name: item.name,
|
|
positive: idx % 2 === 0 ? Math.abs(item.value) : 0,
|
|
negative: idx % 2 === 1 ? -Math.abs(item.value) : 0,
|
|
}));
|
|
const seriesLabels = chart.series || ['Positive', 'Negative'];
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<BarChart data={transformedData} layout="vertical" stackOffset="sign" margin={{ top: 10, right: 10, left: 0, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis type="number" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis type="category" dataKey="name" {...axisProps} width={50} tickFormatter={formatComma} />
|
|
<ReferenceLine x={0} stroke="#9CA3AF" strokeWidth={1} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '9px' }} />}
|
|
<Bar dataKey="positive" name={seriesLabels[0]} fill={graphColors(0)} stackId="stack" radius={[0, 3, 3, 0]} />
|
|
<Bar dataKey="negative" name={seriesLabels[1]} fill={graphColors(3)} stackId="stack" radius={[3, 0, 0, 3]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
case 'line':
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<LineChart data={data} margin={{ top: 10, right: 10, left: -10, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
<Line type="monotone" dataKey="value" stroke={graphColors(0)} strokeWidth={2} dot={{ fill: graphColors(0), r: 3 }} activeDot={{ r: 5 }} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
|
|
case 'area':
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<AreaChart data={data} margin={{ top: 10, right: 10, left: -10, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
<defs>
|
|
<linearGradient id="areaGrad" 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(#areaGrad)" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
|
|
case 'area-stacked': {
|
|
const transformedData = transformMultiSeriesData(data, series);
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<AreaChart data={transformedData} margin={{ top: 10, right: 10, left: -10, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis dataKey="name" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis {...axisProps} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
{showLegend && <Legend wrapperStyle={{ fontSize: '9px' }} />}
|
|
{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>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|
|
case 'pie':
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<PieChart margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
<Pie data={data} cx="50%" cy="50%" outerRadius="75%" dataKey="value" label={renderPieLabel} labelLine={false}>
|
|
{data.map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} stroke="white" strokeWidth={2} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
|
|
case 'donut':
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<PieChart margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
<Pie data={data} cx="50%" cy="50%" innerRadius="40%" outerRadius="75%" dataKey="value" label={renderPieLabel} labelLine={false} paddingAngle={2}>
|
|
{data.map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} stroke="white" strokeWidth={2} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
|
|
case 'scatter':
|
|
return (
|
|
<ResponsiveContainer width="100%" height="100%" maxHeight={400}>
|
|
<ScatterChart margin={{ top: 10, right: 10, left: -10, bottom: 5 }}>
|
|
{showGrid && <CartesianGrid {...gridProps} />}
|
|
<XAxis type="number" dataKey="x" {...axisProps} tickFormatter={formatComma} />
|
|
<YAxis type="number" dataKey="y" {...axisProps} tickFormatter={formatComma} />
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
|
|
<Scatter data={data}>
|
|
{data.map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={graphColors(index)} />
|
|
))}
|
|
</Scatter>
|
|
</ScatterChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
|
|
default:
|
|
return <div className="flex items-center justify-center h-full text-gray-400 text-sm">Unsupported chart type</div>;
|
|
}
|
|
};
|
|
|
|
// Grid layout calculator
|
|
const getGridLayout = (count: number): { cols: number; rows: number; className: string } => {
|
|
switch (count) {
|
|
case 1:
|
|
return { cols: 1, rows: 1, className: 'grid-cols-1' };
|
|
case 2:
|
|
return { cols: 2, rows: 1, className: 'grid-cols-2' };
|
|
case 3:
|
|
return { cols: 3, rows: 1, className: 'grid-cols-3' };
|
|
case 4:
|
|
return { cols: 2, rows: 2, className: 'grid-cols-2' };
|
|
case 5:
|
|
return { cols: 3, rows: 2, className: 'grid-cols-3' };
|
|
case 6:
|
|
return { cols: 3, rows: 2, className: 'grid-cols-3' };
|
|
default:
|
|
return { cols: 2, rows: 2, className: 'grid-cols-2' };
|
|
}
|
|
};
|
|
|
|
const MultiChartGridSlideLayout: React.FC<MultiChartGridSlideLayoutProps> = ({ data: slideData }) => {
|
|
const title = slideData?.title || 'Data Analytics Dashboard';
|
|
const description = slideData?.description || 'Comprehensive overview of key metrics and performance indicators.';
|
|
const charts = slideData?.charts || [];
|
|
const showLegend = slideData?.showLegend ?? true;
|
|
const showGrid = slideData?.showGrid ?? true;
|
|
const chartCount = charts.length;
|
|
const gridLayout = getGridLayout(chartCount);
|
|
|
|
// Calculate chart height based on count
|
|
const getChartHeight = () => {
|
|
if (chartCount <= 2) return 280;
|
|
if (chartCount <= 3) return 260;
|
|
return 180;
|
|
};
|
|
|
|
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-gradient-to-br from-slate-50 via-white to-indigo-50/30 relative z-20 mx-auto overflow-hidden"
|
|
style={{
|
|
fontFamily: "var(--heading-font-family, 'Poppins')",
|
|
background: "var(--background-color, linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #eef2ff 100%))"
|
|
}}
|
|
>
|
|
|
|
|
|
{/* Decorative elements */}
|
|
<div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-bl from-violet-100/40 to-transparent rounded-full blur-3xl" />
|
|
<div className="absolute bottom-0 left-0 w-72 h-72 bg-gradient-to-tr from-cyan-100/30 to-transparent rounded-full blur-3xl" />
|
|
|
|
{/* Company branding */}
|
|
{((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="relative h-full px-10 pt-10 pb-8 flex flex-col z-10">
|
|
{/* Header Section */}
|
|
<div className="mb-4">
|
|
<h1
|
|
className="text-[42.7px] font-bold mb-1 tracking-tight"
|
|
style={{ color: "var(--background-text, #111827)" }}
|
|
>
|
|
{title}
|
|
</h1>
|
|
<div
|
|
className="w-16 h-1 rounded-full"
|
|
style={{ backgroundColor: 'var(--primary-color, #8B5CF6)' }}
|
|
/>
|
|
<p
|
|
className="text-[16px] leading-relaxed mt-2"
|
|
style={{ color: "var(--background-text, #6B7280)" }}
|
|
>
|
|
{description}
|
|
</p>
|
|
|
|
</div>
|
|
|
|
{/* Charts Grid */}
|
|
<div className={`flex-1 grid ${gridLayout.className} gap-4 h-[525px]`}>
|
|
{charts.map((chart, index) => (
|
|
<div
|
|
key={index}
|
|
className=" backdrop-blur-sm rounded-xl border border-gray-100/80 shadow-sm flex flex-col overflow-hidden"
|
|
style={{ borderColor: 'var(--stroke,#F8F9FA)', backgroundColor: 'var(--card-color,#FFFFFF)' }}
|
|
>
|
|
{/* Chart Header */}
|
|
<div className="px-4 pt-3 pb-1">
|
|
<h3
|
|
className="text-sm font-semibold truncate"
|
|
style={{ color: "var(--background-text, #374151)" }}
|
|
>
|
|
{chart.title}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Chart Container */}
|
|
<div className="flex-1 px-2 pb-2" style={{ height: `${getChartHeight()}px` }}>
|
|
<MiniChartRenderer
|
|
chart={chart}
|
|
showLegend={showLegend && chartCount <= 4}
|
|
showGrid={showGrid}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MultiChartGridSlideLayout;
|
|
|