| 1 | "use client"; |
| 2 | |
| 3 | import { type ReactNode } from "react"; |
| 4 | |
| 5 | import { |
| 6 | AREA_CHART_ELEMENT, |
| 7 | BAR_CHART_ELEMENT, |
| 8 | BOX_PLOT_CHART_ELEMENT, |
| 9 | BUBBLE_CHART_ELEMENT, |
| 10 | CANDLESTICK_CHART_ELEMENT, |
| 11 | CHORD_CHART_ELEMENT, |
| 12 | COMPOSED_CHART_ELEMENT, |
| 13 | CONE_FUNNEL_CHART_ELEMENT, |
| 14 | DONUT_CHART_ELEMENT, |
| 15 | FUNNEL_CHART_ELEMENT, |
| 16 | HEATMAP_CHART_ELEMENT, |
| 17 | HISTOGRAM_CHART_ELEMENT, |
| 18 | LINE_CHART_ELEMENT, |
| 19 | LINEAR_GAUGE_ELEMENT, |
| 20 | NIGHTINGALE_CHART_ELEMENT, |
| 21 | OHLC_CHART_ELEMENT, |
| 22 | PIE_CHART_ELEMENT, |
| 23 | PYRAMID_CHART_ELEMENT, |
| 24 | RADAR_CHART_ELEMENT, |
| 25 | RADIAL_BAR_CHART_ELEMENT, |
| 26 | RADIAL_COLUMN_CHART_ELEMENT, |
| 27 | RADIAL_GAUGE_ELEMENT, |
| 28 | RANGE_AREA_CHART_ELEMENT, |
| 29 | RANGE_BAR_CHART_ELEMENT, |
| 30 | SANKEY_CHART_ELEMENT, |
| 31 | SCATTER_CHART_ELEMENT, |
| 32 | SUNBURST_CHART_ELEMENT, |
| 33 | TREEMAP_CHART_ELEMENT, |
| 34 | WATERFALL_CHART_ELEMENT, |
| 35 | } from "@/components/notebook/presentation/editor/lib"; |
| 36 | import * as TemplatePreviews from "@/components/notebook/presentation/utils/template-previews"; |
| 37 | import { cn } from "@/lib/utils"; |
| 38 | |
| 39 | const CHART_PREVIEWS: Record<string, ReactNode> = { |
| 40 | [AREA_CHART_ELEMENT]: <TemplatePreviews.AreaChartPreview />, |
| 41 | [BAR_CHART_ELEMENT]: <TemplatePreviews.BarChartPreview />, |
| 42 | [BOX_PLOT_CHART_ELEMENT]: <TemplatePreviews.BoxPlotChartPreview />, |
| 43 | [BUBBLE_CHART_ELEMENT]: <TemplatePreviews.BubbleChartPreview />, |
| 44 | [CANDLESTICK_CHART_ELEMENT]: <TemplatePreviews.CandlestickChartPreview />, |
| 45 | [CHORD_CHART_ELEMENT]: <TemplatePreviews.ChordChartPreview />, |
| 46 | [COMPOSED_CHART_ELEMENT]: <TemplatePreviews.CombinationChartPreview />, |
| 47 | [CONE_FUNNEL_CHART_ELEMENT]: <TemplatePreviews.ConeFunnelChartPreview />, |
| 48 | [DONUT_CHART_ELEMENT]: <TemplatePreviews.DonutChartPreview />, |
| 49 | [FUNNEL_CHART_ELEMENT]: <TemplatePreviews.FunnelChartPreview />, |
| 50 | [HEATMAP_CHART_ELEMENT]: <TemplatePreviews.HeatmapChartPreview />, |
| 51 | [HISTOGRAM_CHART_ELEMENT]: <TemplatePreviews.HistogramChartPreview />, |
| 52 | [LINE_CHART_ELEMENT]: <TemplatePreviews.LineChartPreview />, |
| 53 | [LINEAR_GAUGE_ELEMENT]: <TemplatePreviews.LinearGaugeChartPreview />, |
| 54 | [NIGHTINGALE_CHART_ELEMENT]: <TemplatePreviews.NightingaleChartPreview />, |
| 55 | [OHLC_CHART_ELEMENT]: <TemplatePreviews.OHLCChartPreview />, |
| 56 | [PIE_CHART_ELEMENT]: <TemplatePreviews.PieChartPreview />, |
| 57 | [PYRAMID_CHART_ELEMENT]: <TemplatePreviews.PyramidChartPreview2 />, |
| 58 | [RADAR_CHART_ELEMENT]: <TemplatePreviews.RadarLineChartPreview />, |
| 59 | [RADIAL_BAR_CHART_ELEMENT]: <TemplatePreviews.RadialBarChartPreview />, |
| 60 | [RADIAL_COLUMN_CHART_ELEMENT]: <TemplatePreviews.RadialColumnChartPreview />, |
| 61 | [RADIAL_GAUGE_ELEMENT]: <TemplatePreviews.RadialGaugeChartPreview />, |
| 62 | [RANGE_AREA_CHART_ELEMENT]: <TemplatePreviews.RangeAreaChartPreview />, |
| 63 | [RANGE_BAR_CHART_ELEMENT]: <TemplatePreviews.RangeBarChartPreview />, |
| 64 | [SANKEY_CHART_ELEMENT]: <TemplatePreviews.SankeyChartPreview />, |
| 65 | [SCATTER_CHART_ELEMENT]: <TemplatePreviews.ScatterChartPreview />, |
| 66 | [SUNBURST_CHART_ELEMENT]: <TemplatePreviews.SunburstChartPreview />, |
| 67 | [TREEMAP_CHART_ELEMENT]: <TemplatePreviews.TreemapChartPreview />, |
| 68 | [WATERFALL_CHART_ELEMENT]: <TemplatePreviews.WaterfallChartPreview />, |
| 69 | }; |
| 70 | |
| 71 | interface ChartPreviewProps { |
| 72 | chartType: string; |
| 73 | className?: string; |
| 74 | } |
| 75 | |
| 76 | export function ChartPreview({ chartType, className }: ChartPreviewProps) { |
| 77 | const preview = CHART_PREVIEWS[chartType] ?? ( |
| 78 | <TemplatePreviews.BarChartPreview /> |
| 79 | ); |
| 80 | |
| 81 | return ( |
| 82 | <div |
| 83 | className={cn( |
| 84 | "pointer-events-none aspect-4/3 w-full overflow-hidden rounded-sm border bg-card select-none **:pointer-events-none **:select-none", |
| 85 | className, |
| 86 | )} |
| 87 | > |
| 88 | {preview} |
| 89 | </div> |
| 90 | ); |
| 91 | } |
| 92 |