Dashboard widget composition pattern using a CardWidget chrome wrapper with domain-specific Card* content components, resize tracking, and popover menus
CardWidget (chrome: title, description, popover menu, resize observer)
└── Card* (content: CardChart | CardTable | CardAvailability | CardTopologyMap | ...)
└── Visualization (ChartNew | ag-grid | custom SVG | ...)
Define CardWidget as the shared wrapper:
titleCard, widthCard, description, isDisplayIconMore, resizeItemResizeObserver on container, calls onResizeContainer callback with new dimensionsCreate domain-specific Card* components:
CardChart: receives datas, type, customChartOptions, renders ChartNew/ScatterChartCardTable: receives grid column defs + row data, renders ag-gridCardAvailability: receives availability metrics, renders status indicatorsCompose in dashboard page:
<CardWidget title={widget.title} description={widget.desc}>
<CardChart datas={widget.chartData} type={widget.chartType} />
</CardWidget>
Extension points (render props for per-instance customization):
renderTooltipIndividual — custom tooltip renderercustomChartOptions — override chart options per widgetcustomRenderNameScatter — custom scatter point labelsState management: Recoil atoms for time mode, dispatch callbacks for CRUD operations.