| 1 | import { type TElement } from "platejs"; |
| 2 | import { createTPlatePlugin } from "platejs/react"; |
| 3 | |
| 4 | // Existing chart components |
| 5 | import AreaChartElement from "../custom-elements/area-chart"; |
| 6 | import BarGraphElement from "../custom-elements/bar-graph"; |
| 7 | // New chart components - Phase 3 |
| 8 | import BoxPlotChartElement from "../custom-elements/box-plot-chart"; |
| 9 | import BubbleChartElement from "../custom-elements/bubble-chart"; |
| 10 | import CandlestickChartElement from "../custom-elements/candlestick-chart"; |
| 11 | // New chart components - Phase 5 |
| 12 | import ChordChartElement from "../custom-elements/chord-chart"; |
| 13 | import ComposedChartElement from "../custom-elements/composed-chart"; |
| 14 | // New chart components - Phase 6 |
| 15 | import ConeFunnelChartElement from "../custom-elements/cone-funnel-chart"; |
| 16 | import DonutChartElement from "../custom-elements/donut-chart"; |
| 17 | import FunnelChartElement from "../custom-elements/funnel-chart"; |
| 18 | // New chart components - Phase 1 |
| 19 | import HeatmapChartElement from "../custom-elements/heatmap-chart"; |
| 20 | import HistogramChartElement from "../custom-elements/histogram-chart"; |
| 21 | import LineGraphElement from "../custom-elements/line-graph"; |
| 22 | // New chart components - Phase 7 |
| 23 | import LinearGaugeElement from "../custom-elements/linear-gauge"; |
| 24 | // New chart components - Phase 4 |
| 25 | import NightingaleChartElement from "../custom-elements/nightingale-chart"; |
| 26 | import OhlcChartElement from "../custom-elements/ohlc-chart"; |
| 27 | import PieChartElement from "../custom-elements/pie-chart"; |
| 28 | import PyramidChartElement from "../custom-elements/pyramid-chart"; |
| 29 | import RadarChartElement from "../custom-elements/radar-chart"; |
| 30 | import RadialBarChartElement from "../custom-elements/radial-bar-chart"; |
| 31 | import RadialColumnChartElement from "../custom-elements/radial-column-chart"; |
| 32 | import RadialGaugeElement from "../custom-elements/radial-gauge"; |
| 33 | // New chart components - Phase 2 |
| 34 | import RangeAreaChartElement from "../custom-elements/range-area-chart"; |
| 35 | import RangeBarChartElement from "../custom-elements/range-bar-chart"; |
| 36 | import SankeyChartElement from "../custom-elements/sankey-chart"; |
| 37 | import ScatterPlotElement from "../custom-elements/scatter-plot"; |
| 38 | // Static chart components - Existing |
| 39 | import AreaChartStatic from "../custom-elements/static/area-chart-static"; |
| 40 | import BarGraphStatic from "../custom-elements/static/bar-graph-static"; |
| 41 | // Static chart components - New |
| 42 | import BoxPlotChartStatic from "../custom-elements/static/box-plot-chart-static"; |
| 43 | import BubbleChartStatic from "../custom-elements/static/bubble-chart-static"; |
| 44 | import CandlestickChartStatic from "../custom-elements/static/candlestick-chart-static"; |
| 45 | import ChordChartStatic from "../custom-elements/static/chord-chart-static"; |
| 46 | import ComposedChartStatic from "../custom-elements/static/composed-chart-static"; |
| 47 | import ConeFunnelChartStatic from "../custom-elements/static/cone-funnel-chart-static"; |
| 48 | import DonutChartStatic from "../custom-elements/static/donut-chart-static"; |
| 49 | import FunnelChartStatic from "../custom-elements/static/funnel-chart-static"; |
| 50 | import HeatmapChartStatic from "../custom-elements/static/heatmap-chart-static"; |
| 51 | import HistogramChartStatic from "../custom-elements/static/histogram-chart-static"; |
| 52 | import LineGraphStatic from "../custom-elements/static/line-graph-static"; |
| 53 | import LinearGaugeStatic from "../custom-elements/static/linear-gauge-static"; |
| 54 | import NightingaleChartStatic from "../custom-elements/static/nightingale-chart-static"; |
| 55 | import OhlcChartStatic from "../custom-elements/static/ohlc-chart-static"; |
| 56 | import PieChartStatic from "../custom-elements/static/pie-chart-static"; |
| 57 | import PyramidChartStatic from "../custom-elements/static/pyramid-chart-static"; |
| 58 | import RadarChartStatic from "../custom-elements/static/radar-chart-static"; |
| 59 | import RadialBarChartStatic from "../custom-elements/static/radial-bar-chart-static"; |
| 60 | import RadialColumnChartStatic from "../custom-elements/static/radial-column-chart-static"; |
| 61 | import RadialGaugeStatic from "../custom-elements/static/radial-gauge-static"; |
| 62 | import RangeAreaChartStatic from "../custom-elements/static/range-area-chart-static"; |
| 63 | import RangeBarChartStatic from "../custom-elements/static/range-bar-chart-static"; |
| 64 | import SankeyChartStatic from "../custom-elements/static/sankey-chart-static"; |
| 65 | import ScatterPlotStatic from "../custom-elements/static/scatter-plot-static"; |
| 66 | import SunburstChartStatic from "../custom-elements/static/sunburst-chart-static"; |
| 67 | import TreemapChartStatic from "../custom-elements/static/treemap-chart-static"; |
| 68 | import WaterfallChartStatic from "../custom-elements/static/waterfall-chart-static"; |
| 69 | import SunburstChartElement from "../custom-elements/sunburst-chart"; |
| 70 | import TreemapChartElement from "../custom-elements/treemap-chart"; |
| 71 | import WaterfallChartElement from "../custom-elements/waterfall-chart"; |
| 72 | import { |
| 73 | AREA_CHART_ELEMENT, |
| 74 | BAR_CHART_ELEMENT, |
| 75 | BOX_PLOT_CHART_ELEMENT, |
| 76 | BUBBLE_CHART_ELEMENT, |
| 77 | CANDLESTICK_CHART_ELEMENT, |
| 78 | CHORD_CHART_ELEMENT, |
| 79 | COMPOSED_CHART_ELEMENT, |
| 80 | CONE_FUNNEL_CHART_ELEMENT, |
| 81 | DONUT_CHART_ELEMENT, |
| 82 | FUNNEL_CHART_ELEMENT, |
| 83 | HEATMAP_CHART_ELEMENT, |
| 84 | HISTOGRAM_CHART_ELEMENT, |
| 85 | LINE_CHART_ELEMENT, |
| 86 | LINEAR_GAUGE_ELEMENT, |
| 87 | NIGHTINGALE_CHART_ELEMENT, |
| 88 | OHLC_CHART_ELEMENT, |
| 89 | PIE_CHART_ELEMENT, |
| 90 | PYRAMID_CHART_ELEMENT, |
| 91 | RADAR_CHART_ELEMENT, |
| 92 | RADIAL_BAR_CHART_ELEMENT, |
| 93 | RADIAL_COLUMN_CHART_ELEMENT, |
| 94 | RADIAL_GAUGE_ELEMENT, |
| 95 | RANGE_AREA_CHART_ELEMENT, |
| 96 | RANGE_BAR_CHART_ELEMENT, |
| 97 | SANKEY_CHART_ELEMENT, |
| 98 | SCATTER_CHART_ELEMENT, |
| 99 | SUNBURST_CHART_ELEMENT, |
| 100 | TREEMAP_CHART_ELEMENT, |
| 101 | WATERFALL_CHART_ELEMENT, |
| 102 | } from "../lib"; |
| 103 | |
| 104 | // Available chart types for composed chart series |
| 105 | type SeriesChartType = "bar" | "line" | "area" | "scatter"; |
| 106 | |
| 107 | // Chart title configuration |
| 108 | interface ChartTitleConfig { |
| 109 | text?: string; |
| 110 | fontSize?: number; |
| 111 | color?: string; |
| 112 | } |
| 113 | |
| 114 | // Chart axis label configuration |
| 115 | interface ChartAxisLabelConfig { |
| 116 | enabled?: boolean; |
| 117 | } |
| 118 | |
| 119 | // Chart axis grid line configuration |
| 120 | interface ChartAxisGridLineConfig { |
| 121 | enabled?: boolean; |
| 122 | style?: "solid" | "dashed" | "dotted"; |
| 123 | } |
| 124 | |
| 125 | // Chart axis configuration (per-axis settings for X and Y) |
| 126 | interface ChartAxisConfig { |
| 127 | title?: string | { text?: string; enabled?: boolean }; |
| 128 | label?: ChartAxisLabelConfig; |
| 129 | gridLine?: ChartAxisGridLineConfig; |
| 130 | min?: number; |
| 131 | max?: number; |
| 132 | } |
| 133 | |
| 134 | // Chart animation configuration |
| 135 | interface ChartAnimationConfig { |
| 136 | enabled: boolean; |
| 137 | duration?: number; // in milliseconds |
| 138 | } |
| 139 | |
| 140 | // Chart legend configuration |
| 141 | interface ChartLegendConfig { |
| 142 | enabled: boolean; |
| 143 | position?: "top" | "right" | "bottom" | "left"; |
| 144 | } |
| 145 | |
| 146 | // Chart background configuration |
| 147 | interface ChartBackgroundConfig { |
| 148 | fill?: string; |
| 149 | visible?: boolean; |
| 150 | } |
| 151 | |
| 152 | // Donut inner label configuration |
| 153 | interface ChartInnerLabelConfig { |
| 154 | text: string; |
| 155 | fontWeight?: "normal" | "bold"; |
| 156 | fontSize?: number; |
| 157 | color?: string; |
| 158 | spacing?: number; |
| 159 | } |
| 160 | |
| 161 | // Donut inner circle configuration |
| 162 | interface ChartInnerCircleConfig { |
| 163 | fill?: string; |
| 164 | } |
| 165 | |
| 166 | // Gauge needle configuration |
| 167 | interface ChartNeedleConfig { |
| 168 | enabled?: boolean; |
| 169 | } |
| 170 | |
| 171 | // Gauge bar configuration |
| 172 | interface ChartBarConfig { |
| 173 | enabled?: boolean; |
| 174 | fill?: string; |
| 175 | } |
| 176 | |
| 177 | // Chart marker configuration |
| 178 | interface ChartMarkerConfig { |
| 179 | shape?: |
| 180 | | "circle" |
| 181 | | "cross" |
| 182 | | "diamond" |
| 183 | | "heart" |
| 184 | | "plus" |
| 185 | | "pin" |
| 186 | | "square" |
| 187 | | "star" |
| 188 | | "triangle"; |
| 189 | size?: number; |
| 190 | fill?: string; |
| 191 | stroke?: string; |
| 192 | } |
| 193 | |
| 194 | export type TChartNode = TElement & { |
| 195 | chartType?: |
| 196 | | "bar" |
| 197 | | "line" |
| 198 | | "pie" |
| 199 | | "scatter" |
| 200 | | "histogram" |
| 201 | | "donut" |
| 202 | | "bubble" |
| 203 | | "heatmap" |
| 204 | | "range-bar" |
| 205 | | "range-area" |
| 206 | | "waterfall" |
| 207 | | "box-plot" |
| 208 | | "candlestick" |
| 209 | | "ohlc" |
| 210 | | "nightingale" |
| 211 | | "radial-column" |
| 212 | | "sunburst" |
| 213 | | "sankey" |
| 214 | | "chord" |
| 215 | | "funnel" |
| 216 | | "cone-funnel" |
| 217 | | "pyramid" |
| 218 | | "radial-gauge" |
| 219 | | "linear-gauge"; |
| 220 | data?: unknown; |
| 221 | options?: Record<string, unknown>; |
| 222 | // Chart customization options |
| 223 | variant?: "default" | "stacked" | "donut" | "outline" | "bubble"; |
| 224 | orientation?: "vertical" | "horizontal"; // Charts that render left-to-right vs top-to-bottom |
| 225 | curveType?: "linear" | "monotone" | "step" | "natural"; |
| 226 | scatterShape?: |
| 227 | | "circle" |
| 228 | | "cross" |
| 229 | | "diamond" |
| 230 | | "heart" |
| 231 | | "plus" |
| 232 | | "pin" |
| 233 | | "square" |
| 234 | | "star" |
| 235 | | "triangle"; |
| 236 | showLegend?: boolean; |
| 237 | showGrid?: boolean; |
| 238 | showAxisLabels?: boolean; |
| 239 | innerRadius?: number; |
| 240 | disableAnimation?: boolean; |
| 241 | // Color properties |
| 242 | color?: string; // Primary color for single-color charts |
| 243 | colors?: string[]; // Array of colors for multi-color charts (pie, radial bar) |
| 244 | // Composed chart specific: map of series name to chart type |
| 245 | seriesChartTypes?: Record<string, SeriesChartType>; |
| 246 | |
| 247 | // Enhanced chart configuration options |
| 248 | title?: ChartTitleConfig; |
| 249 | subtitle?: ChartTitleConfig; |
| 250 | xAxis?: ChartAxisConfig; |
| 251 | yAxis?: ChartAxisConfig; |
| 252 | animation?: ChartAnimationConfig; |
| 253 | legend?: ChartLegendConfig; |
| 254 | background?: ChartBackgroundConfig; |
| 255 | |
| 256 | // Line/Area interpolation. Legacy values are preserved for existing slides. |
| 257 | interpolation?: "linear" | "smooth" | "step" | "step-start" | "step-end"; |
| 258 | |
| 259 | // Donut inner labels configuration |
| 260 | innerLabels?: ChartInnerLabelConfig[]; |
| 261 | innerCircle?: ChartInnerCircleConfig; |
| 262 | innerRadiusRatio?: number; |
| 263 | |
| 264 | // Gauge needle/bar configuration |
| 265 | needle?: ChartNeedleConfig; |
| 266 | bar?: ChartBarConfig; |
| 267 | |
| 268 | // Marker configuration (for scatter/bubble/line) |
| 269 | marker?: ChartMarkerConfig; |
| 270 | }; |
| 271 | |
| 272 | // ===================================================== |
| 273 | // EDITABLE CHART PLUGINS |
| 274 | // ===================================================== |
| 275 | |
| 276 | // Existing chart plugins |
| 277 | export const PieChartPlugin = createTPlatePlugin({ |
| 278 | key: PIE_CHART_ELEMENT, |
| 279 | node: { |
| 280 | isElement: true, |
| 281 | isVoid: true, |
| 282 | type: PIE_CHART_ELEMENT, |
| 283 | component: PieChartElement, |
| 284 | }, |
| 285 | }); |
| 286 | |
| 287 | export const BarChartPlugin = createTPlatePlugin({ |
| 288 | key: BAR_CHART_ELEMENT, |
| 289 | node: { |
| 290 | isElement: true, |
| 291 | isVoid: true, |
| 292 | type: BAR_CHART_ELEMENT, |
| 293 | component: BarGraphElement, |
| 294 | }, |
| 295 | }); |
| 296 | |
| 297 | export const AreaChartPlugin = createTPlatePlugin({ |
| 298 | key: AREA_CHART_ELEMENT, |
| 299 | node: { |
| 300 | isElement: true, |
| 301 | isVoid: true, |
| 302 | type: AREA_CHART_ELEMENT, |
| 303 | component: AreaChartElement, |
| 304 | }, |
| 305 | }); |
| 306 | |
| 307 | export const ScatterChartPlugin = createTPlatePlugin({ |
| 308 | key: SCATTER_CHART_ELEMENT, |
| 309 | node: { |
| 310 | isElement: true, |
| 311 | isVoid: true, |
| 312 | type: SCATTER_CHART_ELEMENT, |
| 313 | component: ScatterPlotElement, |
| 314 | }, |
| 315 | }); |
| 316 | |
| 317 | export const LineChartPlugin = createTPlatePlugin({ |
| 318 | key: LINE_CHART_ELEMENT, |
| 319 | node: { |
| 320 | isElement: true, |
| 321 | isVoid: true, |
| 322 | type: LINE_CHART_ELEMENT, |
| 323 | component: LineGraphElement, |
| 324 | }, |
| 325 | }); |
| 326 | |
| 327 | export const RadarChartPlugin = createTPlatePlugin({ |
| 328 | key: RADAR_CHART_ELEMENT, |
| 329 | node: { |
| 330 | isElement: true, |
| 331 | isVoid: true, |
| 332 | type: RADAR_CHART_ELEMENT, |
| 333 | component: RadarChartElement, |
| 334 | }, |
| 335 | }); |
| 336 | |
| 337 | export const RadialBarChartPlugin = createTPlatePlugin({ |
| 338 | key: RADIAL_BAR_CHART_ELEMENT, |
| 339 | node: { |
| 340 | isElement: true, |
| 341 | isVoid: true, |
| 342 | type: RADIAL_BAR_CHART_ELEMENT, |
| 343 | component: RadialBarChartElement, |
| 344 | }, |
| 345 | }); |
| 346 | |
| 347 | export const ComposedChartPlugin = createTPlatePlugin({ |
| 348 | key: COMPOSED_CHART_ELEMENT, |
| 349 | node: { |
| 350 | isElement: true, |
| 351 | isVoid: true, |
| 352 | type: COMPOSED_CHART_ELEMENT, |
| 353 | component: ComposedChartElement, |
| 354 | }, |
| 355 | }); |
| 356 | |
| 357 | export const TreemapChartPlugin = createTPlatePlugin({ |
| 358 | key: TREEMAP_CHART_ELEMENT, |
| 359 | node: { |
| 360 | isElement: true, |
| 361 | isVoid: true, |
| 362 | type: TREEMAP_CHART_ELEMENT, |
| 363 | component: TreemapChartElement, |
| 364 | }, |
| 365 | }); |
| 366 | |
| 367 | export const BubbleChartPlugin = createTPlatePlugin({ |
| 368 | key: BUBBLE_CHART_ELEMENT, |
| 369 | node: { |
| 370 | isElement: true, |
| 371 | isVoid: true, |
| 372 | type: BUBBLE_CHART_ELEMENT, |
| 373 | component: BubbleChartElement, |
| 374 | }, |
| 375 | }); |
| 376 | |
| 377 | export const DonutChartPlugin = createTPlatePlugin({ |
| 378 | key: DONUT_CHART_ELEMENT, |
| 379 | node: { |
| 380 | isElement: true, |
| 381 | isVoid: true, |
| 382 | type: DONUT_CHART_ELEMENT, |
| 383 | component: DonutChartElement, |
| 384 | }, |
| 385 | }); |
| 386 | |
| 387 | // New chart plugins - Phase 1: Standard Series |
| 388 | export const HistogramChartPlugin = createTPlatePlugin({ |
| 389 | key: HISTOGRAM_CHART_ELEMENT, |
| 390 | node: { |
| 391 | isElement: true, |
| 392 | isVoid: true, |
| 393 | type: HISTOGRAM_CHART_ELEMENT, |
| 394 | component: HistogramChartElement, |
| 395 | }, |
| 396 | }); |
| 397 | |
| 398 | export const HeatmapChartPlugin = createTPlatePlugin({ |
| 399 | key: HEATMAP_CHART_ELEMENT, |
| 400 | node: { |
| 401 | isElement: true, |
| 402 | isVoid: true, |
| 403 | type: HEATMAP_CHART_ELEMENT, |
| 404 | component: HeatmapChartElement, |
| 405 | }, |
| 406 | }); |
| 407 | |
| 408 | // New chart plugins - Phase 2: Range Charts |
| 409 | export const RangeBarChartPlugin = createTPlatePlugin({ |
| 410 | key: RANGE_BAR_CHART_ELEMENT, |
| 411 | node: { |
| 412 | isElement: true, |
| 413 | isVoid: true, |
| 414 | type: RANGE_BAR_CHART_ELEMENT, |
| 415 | component: RangeBarChartElement, |
| 416 | }, |
| 417 | }); |
| 418 | |
| 419 | export const RangeAreaChartPlugin = createTPlatePlugin({ |
| 420 | key: RANGE_AREA_CHART_ELEMENT, |
| 421 | node: { |
| 422 | isElement: true, |
| 423 | isVoid: true, |
| 424 | type: RANGE_AREA_CHART_ELEMENT, |
| 425 | component: RangeAreaChartElement, |
| 426 | }, |
| 427 | }); |
| 428 | |
| 429 | export const WaterfallChartPlugin = createTPlatePlugin({ |
| 430 | key: WATERFALL_CHART_ELEMENT, |
| 431 | node: { |
| 432 | isElement: true, |
| 433 | isVoid: true, |
| 434 | type: WATERFALL_CHART_ELEMENT, |
| 435 | component: WaterfallChartElement, |
| 436 | }, |
| 437 | }); |
| 438 | |
| 439 | // New chart plugins - Phase 3: Financial Charts |
| 440 | export const BoxPlotChartPlugin = createTPlatePlugin({ |
| 441 | key: BOX_PLOT_CHART_ELEMENT, |
| 442 | node: { |
| 443 | isElement: true, |
| 444 | isVoid: true, |
| 445 | type: BOX_PLOT_CHART_ELEMENT, |
| 446 | component: BoxPlotChartElement, |
| 447 | }, |
| 448 | }); |
| 449 | |
| 450 | export const CandlestickChartPlugin = createTPlatePlugin({ |
| 451 | key: CANDLESTICK_CHART_ELEMENT, |
| 452 | node: { |
| 453 | isElement: true, |
| 454 | isVoid: true, |
| 455 | type: CANDLESTICK_CHART_ELEMENT, |
| 456 | component: CandlestickChartElement, |
| 457 | }, |
| 458 | }); |
| 459 | |
| 460 | export const OhlcChartPlugin = createTPlatePlugin({ |
| 461 | key: OHLC_CHART_ELEMENT, |
| 462 | node: { |
| 463 | isElement: true, |
| 464 | isVoid: true, |
| 465 | type: OHLC_CHART_ELEMENT, |
| 466 | component: OhlcChartElement, |
| 467 | }, |
| 468 | }); |
| 469 | |
| 470 | // New chart plugins - Phase 4: Polar Charts |
| 471 | export const NightingaleChartPlugin = createTPlatePlugin({ |
| 472 | key: NIGHTINGALE_CHART_ELEMENT, |
| 473 | node: { |
| 474 | isElement: true, |
| 475 | isVoid: true, |
| 476 | type: NIGHTINGALE_CHART_ELEMENT, |
| 477 | component: NightingaleChartElement, |
| 478 | }, |
| 479 | }); |
| 480 | |
| 481 | export const RadialColumnChartPlugin = createTPlatePlugin({ |
| 482 | key: RADIAL_COLUMN_CHART_ELEMENT, |
| 483 | node: { |
| 484 | isElement: true, |
| 485 | isVoid: true, |
| 486 | type: RADIAL_COLUMN_CHART_ELEMENT, |
| 487 | component: RadialColumnChartElement, |
| 488 | }, |
| 489 | }); |
| 490 | |
| 491 | // New chart plugins - Phase 5: Hierarchical Charts |
| 492 | export const SunburstChartPlugin = createTPlatePlugin({ |
| 493 | key: SUNBURST_CHART_ELEMENT, |
| 494 | node: { |
| 495 | isElement: true, |
| 496 | isVoid: true, |
| 497 | type: SUNBURST_CHART_ELEMENT, |
| 498 | component: SunburstChartElement, |
| 499 | }, |
| 500 | }); |
| 501 | |
| 502 | export const SankeyChartPlugin = createTPlatePlugin({ |
| 503 | key: SANKEY_CHART_ELEMENT, |
| 504 | node: { |
| 505 | isElement: true, |
| 506 | isVoid: true, |
| 507 | type: SANKEY_CHART_ELEMENT, |
| 508 | component: SankeyChartElement, |
| 509 | }, |
| 510 | }); |
| 511 | |
| 512 | export const ChordChartPlugin = createTPlatePlugin({ |
| 513 | key: CHORD_CHART_ELEMENT, |
| 514 | node: { |
| 515 | isElement: true, |
| 516 | isVoid: true, |
| 517 | type: CHORD_CHART_ELEMENT, |
| 518 | component: ChordChartElement, |
| 519 | }, |
| 520 | }); |
| 521 | |
| 522 | // New chart plugins - Phase 6: Funnel Charts |
| 523 | export const FunnelChartPlugin = createTPlatePlugin({ |
| 524 | key: FUNNEL_CHART_ELEMENT, |
| 525 | node: { |
| 526 | isElement: true, |
| 527 | isVoid: true, |
| 528 | type: FUNNEL_CHART_ELEMENT, |
| 529 | component: FunnelChartElement, |
| 530 | }, |
| 531 | }); |
| 532 | |
| 533 | export const ConeFunnelChartPlugin = createTPlatePlugin({ |
| 534 | key: CONE_FUNNEL_CHART_ELEMENT, |
| 535 | node: { |
| 536 | isElement: true, |
| 537 | isVoid: true, |
| 538 | type: CONE_FUNNEL_CHART_ELEMENT, |
| 539 | component: ConeFunnelChartElement, |
| 540 | }, |
| 541 | }); |
| 542 | |
| 543 | export const PyramidChartPlugin = createTPlatePlugin({ |
| 544 | key: PYRAMID_CHART_ELEMENT, |
| 545 | node: { |
| 546 | isElement: true, |
| 547 | isVoid: true, |
| 548 | type: PYRAMID_CHART_ELEMENT, |
| 549 | component: PyramidChartElement, |
| 550 | }, |
| 551 | }); |
| 552 | |
| 553 | // New chart plugins - Phase 7: Gauge Charts |
| 554 | export const RadialGaugePlugin = createTPlatePlugin({ |
| 555 | key: RADIAL_GAUGE_ELEMENT, |
| 556 | node: { |
| 557 | isElement: true, |
| 558 | isVoid: true, |
| 559 | type: RADIAL_GAUGE_ELEMENT, |
| 560 | component: RadialGaugeElement, |
| 561 | }, |
| 562 | }); |
| 563 | |
| 564 | export const LinearGaugePlugin = createTPlatePlugin({ |
| 565 | key: LINEAR_GAUGE_ELEMENT, |
| 566 | node: { |
| 567 | isElement: true, |
| 568 | isVoid: true, |
| 569 | type: LINEAR_GAUGE_ELEMENT, |
| 570 | component: LinearGaugeElement, |
| 571 | }, |
| 572 | }); |
| 573 | |
| 574 | // ===================================================== |
| 575 | // STATIC CHART PLUGINS |
| 576 | // ===================================================== |
| 577 | |
| 578 | // Existing static plugins |
| 579 | export const PieChartStaticPlugin = createTPlatePlugin({ |
| 580 | key: PIE_CHART_ELEMENT, |
| 581 | node: { isElement: true, component: PieChartStatic }, |
| 582 | }); |
| 583 | |
| 584 | export const BarChartStaticPlugin = createTPlatePlugin({ |
| 585 | key: BAR_CHART_ELEMENT, |
| 586 | node: { isElement: true, component: BarGraphStatic }, |
| 587 | }); |
| 588 | |
| 589 | export const AreaChartStaticPlugin = createTPlatePlugin({ |
| 590 | key: AREA_CHART_ELEMENT, |
| 591 | node: { isElement: true, component: AreaChartStatic }, |
| 592 | }); |
| 593 | |
| 594 | export const ScatterChartStaticPlugin = createTPlatePlugin({ |
| 595 | key: SCATTER_CHART_ELEMENT, |
| 596 | node: { isElement: true, component: ScatterPlotStatic }, |
| 597 | }); |
| 598 | |
| 599 | export const LineChartStaticPlugin = createTPlatePlugin({ |
| 600 | key: LINE_CHART_ELEMENT, |
| 601 | node: { isElement: true, component: LineGraphStatic }, |
| 602 | }); |
| 603 | |
| 604 | export const RadarChartStaticPlugin = createTPlatePlugin({ |
| 605 | key: RADAR_CHART_ELEMENT, |
| 606 | node: { isElement: true, component: RadarChartStatic }, |
| 607 | }); |
| 608 | |
| 609 | export const RadialBarChartStaticPlugin = createTPlatePlugin({ |
| 610 | key: RADIAL_BAR_CHART_ELEMENT, |
| 611 | node: { isElement: true, component: RadialBarChartStatic }, |
| 612 | }); |
| 613 | |
| 614 | export const ComposedChartStaticPlugin = createTPlatePlugin({ |
| 615 | key: COMPOSED_CHART_ELEMENT, |
| 616 | node: { isElement: true, component: ComposedChartStatic }, |
| 617 | }); |
| 618 | |
| 619 | export const TreemapChartStaticPlugin = createTPlatePlugin({ |
| 620 | key: TREEMAP_CHART_ELEMENT, |
| 621 | node: { isElement: true, component: TreemapChartStatic }, |
| 622 | }); |
| 623 | |
| 624 | export const BubbleChartStaticPlugin = createTPlatePlugin({ |
| 625 | key: BUBBLE_CHART_ELEMENT, |
| 626 | node: { isElement: true, component: BubbleChartStatic }, |
| 627 | }); |
| 628 | |
| 629 | export const DonutChartStaticPlugin = createTPlatePlugin({ |
| 630 | key: DONUT_CHART_ELEMENT, |
| 631 | node: { isElement: true, component: DonutChartStatic }, |
| 632 | }); |
| 633 | |
| 634 | // New static plugins - Phase 1 |
| 635 | export const HistogramChartStaticPlugin = createTPlatePlugin({ |
| 636 | key: HISTOGRAM_CHART_ELEMENT, |
| 637 | node: { isElement: true, component: HistogramChartStatic }, |
| 638 | }); |
| 639 | |
| 640 | export const HeatmapChartStaticPlugin = createTPlatePlugin({ |
| 641 | key: HEATMAP_CHART_ELEMENT, |
| 642 | node: { isElement: true, component: HeatmapChartStatic }, |
| 643 | }); |
| 644 | |
| 645 | // New static plugins - Phase 2 |
| 646 | export const RangeBarChartStaticPlugin = createTPlatePlugin({ |
| 647 | key: RANGE_BAR_CHART_ELEMENT, |
| 648 | node: { isElement: true, component: RangeBarChartStatic }, |
| 649 | }); |
| 650 | |
| 651 | export const RangeAreaChartStaticPlugin = createTPlatePlugin({ |
| 652 | key: RANGE_AREA_CHART_ELEMENT, |
| 653 | node: { isElement: true, component: RangeAreaChartStatic }, |
| 654 | }); |
| 655 | |
| 656 | export const WaterfallChartStaticPlugin = createTPlatePlugin({ |
| 657 | key: WATERFALL_CHART_ELEMENT, |
| 658 | node: { isElement: true, component: WaterfallChartStatic }, |
| 659 | }); |
| 660 | |
| 661 | // New static plugins - Phase 3 |
| 662 | export const BoxPlotChartStaticPlugin = createTPlatePlugin({ |
| 663 | key: BOX_PLOT_CHART_ELEMENT, |
| 664 | node: { isElement: true, component: BoxPlotChartStatic }, |
| 665 | }); |
| 666 | |
| 667 | export const CandlestickChartStaticPlugin = createTPlatePlugin({ |
| 668 | key: CANDLESTICK_CHART_ELEMENT, |
| 669 | node: { isElement: true, component: CandlestickChartStatic }, |
| 670 | }); |
| 671 | |
| 672 | export const OhlcChartStaticPlugin = createTPlatePlugin({ |
| 673 | key: OHLC_CHART_ELEMENT, |
| 674 | node: { isElement: true, component: OhlcChartStatic }, |
| 675 | }); |
| 676 | |
| 677 | // New static plugins - Phase 4 |
| 678 | export const NightingaleChartStaticPlugin = createTPlatePlugin({ |
| 679 | key: NIGHTINGALE_CHART_ELEMENT, |
| 680 | node: { isElement: true, component: NightingaleChartStatic }, |
| 681 | }); |
| 682 | |
| 683 | export const RadialColumnChartStaticPlugin = createTPlatePlugin({ |
| 684 | key: RADIAL_COLUMN_CHART_ELEMENT, |
| 685 | node: { isElement: true, component: RadialColumnChartStatic }, |
| 686 | }); |
| 687 | |
| 688 | // New static plugins - Phase 5 |
| 689 | export const SunburstChartStaticPlugin = createTPlatePlugin({ |
| 690 | key: SUNBURST_CHART_ELEMENT, |
| 691 | node: { isElement: true, component: SunburstChartStatic }, |
| 692 | }); |
| 693 | |
| 694 | export const SankeyChartStaticPlugin = createTPlatePlugin({ |
| 695 | key: SANKEY_CHART_ELEMENT, |
| 696 | node: { isElement: true, component: SankeyChartStatic }, |
| 697 | }); |
| 698 | |
| 699 | export const ChordChartStaticPlugin = createTPlatePlugin({ |
| 700 | key: CHORD_CHART_ELEMENT, |
| 701 | node: { isElement: true, component: ChordChartStatic }, |
| 702 | }); |
| 703 | |
| 704 | // New static plugins - Phase 6 |
| 705 | export const FunnelChartStaticPlugin = createTPlatePlugin({ |
| 706 | key: FUNNEL_CHART_ELEMENT, |
| 707 | node: { isElement: true, component: FunnelChartStatic }, |
| 708 | }); |
| 709 | |
| 710 | export const ConeFunnelChartStaticPlugin = createTPlatePlugin({ |
| 711 | key: CONE_FUNNEL_CHART_ELEMENT, |
| 712 | node: { isElement: true, component: ConeFunnelChartStatic }, |
| 713 | }); |
| 714 | |
| 715 | export const PyramidChartStaticPlugin = createTPlatePlugin({ |
| 716 | key: PYRAMID_CHART_ELEMENT, |
| 717 | node: { isElement: true, component: PyramidChartStatic }, |
| 718 | }); |
| 719 | |
| 720 | // New static plugins - Phase 7 |
| 721 | export const RadialGaugeStaticPlugin = createTPlatePlugin({ |
| 722 | key: RADIAL_GAUGE_ELEMENT, |
| 723 | node: { isElement: true, component: RadialGaugeStatic }, |
| 724 | }); |
| 725 | |
| 726 | export const LinearGaugeStaticPlugin = createTPlatePlugin({ |
| 727 | key: LINEAR_GAUGE_ELEMENT, |
| 728 | node: { isElement: true, component: LinearGaugeStatic }, |
| 729 | }); |
| 730 |