Chart Components

/**
 * Main ECharts timeseries chart component
 * Renders interactive time series visualizations with full feature support
 * @param props - Transformed chart properties
 * @returns Rendered chart component
 */
function EchartsTimeseries(props: TimeseriesChartTransformedProps): JSX.Element;

import EchartsTimeseries from "@superset-ui/plugin-chart-echarts";

<EchartsTimeseries
  formData={formData}
  height={400}
  width={800}
  echartOptions={echartOptions}
  groupby={['category']}
  labelMap={labelMap}
  selectedValues={selectedValues}
  setDataMask={setDataMask}
  // ... other props
/>

/**
 * Chart properties interface for component initialization
 */
interface EchartsTimeseriesChartProps extends BaseChartProps<EchartsTimeseriesFormData> {
  /** Form data configuration */
  formData: EchartsTimeseriesFormData;
}

interface BaseChartProps<T extends PlainObject> extends ChartProps<T> {
  /** Query result data */
  queriesData: ChartDataResponseResult[];
}

/**
 * Base ECharts component for chart rendering
 * Handles ECharts instance management and event handling
 */
function Echart(props: EchartsProps): JSX.Element;

interface EchartsProps {
  /** Chart height in pixels */
  height: number;
  /** Chart width in pixels */
  width: number;
  /** ECharts configuration options */
  echartOptions: EChartsCoreOption;
  /** Chart event handlers */
  eventHandlers?: EventHandlers;
  /** ZRender event handlers */
  zrEventHandlers?: EventHandlers;
  /** Selected values for cross-filtering */
  selectedValues?: Record<number, string>;
  /** Force clear chart flag */
  forceClear?: boolean;
  /** Component references */
  refs: Refs;
}

/**
 * ECharts instance handler for programmatic control
 */
interface EchartsHandler {
  /** Get the underlying ECharts instance */
  getEchartInstance: () => EChartsType | undefined;
}

/**
 * Component references for chart interaction
 */
type Refs = {
  /** Reference to ECharts handler */
  echartRef?: Ref<EchartsHandler>;
  /** Reference to container div element */
  divRef?: RefObject<HTMLDivElement>;
};

/**
 * Event handlers for chart interactions
 */
type EventHandlers = Record<string, { (props: any): void }>;

/**
 * Cross-filtering functionality
 */
interface CrossFilteringConfig {
  /** Groupby columns for filtering */
  groupby: QueryFormColumn[];
  /** Label mapping for display */
  labelMap: Record<string, string[]>;
  /** Selected values state */
  selectedValues: Record<number, string>;
  /** Data mask setter */
  setDataMask: SetDataMaskHook;
  /** Control value setter */
  setControlValue?: HandlerFunction;
  /** Enable cross-filter emission */
  emitCrossFilters?: boolean;
}

/**
 * Context menu handler
 */
type ContextMenuHandler = (
  clientX: number,
  clientY: number,
  filters?: ContextMenuFilters
) => void;

/**
 * Legend state management
 */
interface LegendState {
  /** Currently selected legend items */
  selectedLegend: Record<string, boolean>;
}

type LegendStateHandler = (state: LegendState) => void;

/**
 * Extra controls component for advanced chart customization
 * Provides additional UI controls for chart configuration
 */
function ExtraControls(props: {
  formData: EchartsTimeseriesFormData;
  onControlValueChange: (controlName: string, value: any) => void;
}): JSX.Element;

/**
 * Series focus handler for highlighting
 */
type SeriesFocusHandler = (series: string | null) => void;

/**
 * Tooltip configuration for rich content display
 */
interface TooltipConfig {
  /** Enable rich tooltip display */
  richTooltip: boolean;
  /** Tooltip time format */
  tooltipTimeFormat?: string;
  /** Show total values */
  showTooltipTotal?: boolean;
  /** Show percentage values */
  showTooltipPercentage?: boolean;
}