wehub-resource-sync
107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
/**
|
|
* Compound Chart Component System
|
|
*
|
|
* This module exports a unified Chart compound component that can render
|
|
* different chart types (bar, line, etc.) with optional features like
|
|
* zoom and legends.
|
|
*
|
|
* Note: Due to recharts' component hierarchy requirements, the Legend must be
|
|
* rendered inside the chart component (BarChart, LineChart). Use the showLegend
|
|
* prop on Chart.Bar or Chart.Line instead of Chart.Legend as a sibling.
|
|
*
|
|
* @example Simple bar chart with legend
|
|
* ```tsx
|
|
* import { Chart } from "~/components/primitives/charts/ChartCompound";
|
|
*
|
|
* <Chart.Root config={config} data={data} dataKey="day">
|
|
* <Chart.Bar stackId="a" showLegend maxLegendItems={5} />
|
|
* </Chart.Root>
|
|
* ```
|
|
*
|
|
* @example Line chart
|
|
* ```tsx
|
|
* <Chart.Root config={config} data={data} dataKey="day">
|
|
* <Chart.Line lineType="step" showLegend />
|
|
* </Chart.Root>
|
|
* ```
|
|
*
|
|
* @example Bar chart with zoom (callback-based)
|
|
* ```tsx
|
|
* function MyChart() {
|
|
* const handleZoomChange = (range: ZoomRange) => {
|
|
* // Fetch new data based on range, update state
|
|
* };
|
|
*
|
|
* return (
|
|
* <Chart.Root
|
|
* config={config}
|
|
* data={data}
|
|
* dataKey="day"
|
|
* enableZoom
|
|
* onZoomChange={handleZoomChange}
|
|
* >
|
|
* <Chart.Bar stackId="a" showLegend />
|
|
* </Chart.Root>
|
|
* );
|
|
* }
|
|
* ```
|
|
*
|
|
* @example Dashboard with synced charts (using DateRangeContext)
|
|
* ```tsx
|
|
* <DateRangeProvider defaultStartDate={start} defaultEndDate={end}>
|
|
* <DashboardControls />
|
|
*
|
|
* <Chart.Root config={config1} data={data1} dataKey="day" enableZoom onZoomChange={handleZoom1}>
|
|
* <Chart.Bar showLegend />
|
|
* </Chart.Root>
|
|
*
|
|
* <Chart.Root config={config2} data={data2} dataKey="day" enableZoom onZoomChange={handleZoom2}>
|
|
* <Chart.Line showLegend />
|
|
* </Chart.Root>
|
|
* </DateRangeProvider>
|
|
* ```
|
|
*/
|
|
|
|
import { ChartRoot } from "./ChartRoot";
|
|
import { ChartBarRenderer } from "./ChartBar";
|
|
import { ChartLineRenderer } from "./ChartLine";
|
|
import { ChartLegendCompound } from "./ChartLegendCompound";
|
|
import { ChartZoom } from "./ChartZoom";
|
|
|
|
// Re-export types
|
|
export type { ChartConfig, ChartState } from "./Chart";
|
|
export type { ZoomRange } from "./hooks/useZoomSelection";
|
|
export type { ChartRootProps } from "./ChartRoot";
|
|
export type { ChartBarRendererProps } from "./ChartBar";
|
|
export type { ChartLineRendererProps } from "./ChartLine";
|
|
export type { ChartLegendCompoundProps } from "./ChartLegendCompound";
|
|
export type { ChartZoomProps } from "./ChartZoom";
|
|
|
|
/**
|
|
* Chart compound component for building flexible, composable charts.
|
|
*
|
|
* Components:
|
|
* - `Chart.Root` - Main wrapper that provides context
|
|
* - `Chart.Bar` - Bar chart renderer (use showLegend prop for legend)
|
|
* - `Chart.Line` - Line/area chart renderer (use showLegend prop for legend)
|
|
* - `Chart.Zoom` - Optional zoom overlay (rendered internally when enableZoom is set)
|
|
*
|
|
* Note: Chart.Legend is exported for advanced use cases but should typically
|
|
* be enabled via the showLegend prop on Chart.Bar or Chart.Line.
|
|
*/
|
|
export const Chart = {
|
|
Root: ChartRoot,
|
|
Bar: ChartBarRenderer,
|
|
Line: ChartLineRenderer,
|
|
Legend: ChartLegendCompound,
|
|
Zoom: ChartZoom,
|
|
};
|
|
|
|
// Also export individual components for direct imports
|
|
export { ChartRoot, ChartBarRenderer, ChartLineRenderer, ChartLegendCompound, ChartZoom };
|
|
|
|
// Re-export context hook for advanced usage
|
|
export { useChartContext } from "./ChartContext";
|
|
export { useHasNoData, useSeriesTotal } from "./ChartRoot";
|
|
export { useZoomHandlers, ZoomTooltip } from "./ChartZoom";
|