Composite Charts

/**
 * DualAxes chart component for comparing different scales
 * @param props - DualAxes configuration extending G2Plot DualAxesOptions
 * @returns React component
 */
function DualAxes(props: DualAxesConfig): JSX.Element;

interface DualAxesConfig extends DualAxesOptions, ContainerConfig<DualAxesOptions> {
  chartRef?: ChartRefConfig;
}

import { DualAxes } from "@ant-design/charts";

const DualAxesExample = () => {
  const data = [
    { time: '2019-03', value: 350, count: 800 },
    { time: '2019-04', value: 900, count: 600 },
    { time: '2019-05', value: 300, count: 400 },
    { time: '2019-06', value: 450, count: 380 },
    { time: '2019-07', value: 470, count: 220 },
  ];

  const config = {
    data: [data, data],
    xField: 'time',
    yField: ['value', 'count'],
    geometryOptions: [
      {
        geometry: 'column',
        color: '#5B8FF9',
      },
      {
        geometry: 'line',
        color: '#5AD8A6',
      },
    ],
  };

  return <DualAxes {...config} />;
};

/**
 * Mix chart component for combining multiple chart types
 * @param props - Mix configuration extending G2Plot MixOptions
 * @returns React component
 */
function Mix(props: MixConfig): JSX.Element;

interface MixConfig extends MixOptions, ContainerConfig<MixOptions> {
  chartRef?: ChartRefConfig;
}

import { Mix } from "@ant-design/charts";

const MixExample = () => {
  const data = [
    { time: '1991', value: 3, count: 10 },
    { time: '1992', value: 4, count: 4 },
    { time: '1993', value: 3.5, count: 5 },
    { time: '1994', value: 5, count: 5 },
    { time: '1995', value: 4.9, count: 4.9 },
    { time: '1996', value: 6, count: 35 },
    { time: '1997', value: 7, count: 7 },
    { time: '1998', value: 9, count: 1 },
    { time: '1999', value: 13, count: 20 },
  ];

  const config = {
    tooltip: {
      shared: true,
    },
    plots: [
      {
        type: 'column',
        options: {
          data: data.slice(0, 4),
          xField: 'time',
          yField: 'value',
          colorField: 'time',
        },
      },
      {
        type: 'line',
        options: {
          data,
          xField: 'time',
          yField: 'count',
          color: '#FF6B3B',
        },
      },
    ],
  };

  return <Mix {...config} />;
};

/**
 * MultiView chart component (alias for Mix)
 * @param props - MultiView configuration extending G2Plot MixOptions
 * @returns React component
 */
function MultiView(props: MixConfig): JSX.Element;

import { MultiView } from "@ant-design/charts";

// MultiView has the same API as Mix
const MultiViewExample = () => {
  // Same configuration as Mix example
  const config = {
    // ... same configuration
  };

  return <MultiView {...config} />;
};

/**
 * Facet chart component for multi-dimensional data analysis
 * @param props - Facet configuration extending G2Plot FacetOptions
 * @returns React component
 */
function Facet(props: FacetConfig): JSX.Element;

interface FacetConfig extends FacetOptions, ContainerConfig<FacetOptions> {
  chartRef?: ChartRefConfig;
}

import { Facet } from "@ant-design/charts";

const FacetExample = () => {
  const data = [
    { gender: 'Male', type: 'A', value: 10 },
    { gender: 'Male', type: 'B', value: 20 },
    { gender: 'Male', type: 'C', value: 15 },
    { gender: 'Female', type: 'A', value: 12 },
    { gender: 'Female', type: 'B', value: 18 },
    { gender: 'Female', type: 'C', value: 25 },
  ];

  const config = {
    data,
    fields: ['gender'],
    type: 'rect',
    cols: 2,
    eachView: (view, facet) => {
      return {
        type: 'column',
        options: {
          data: facet.data,
          xField: 'type',
          yField: 'value',
          color: '#5B8FF9',
        },
      };
    },
  };

  return <Facet {...config} />;
};

interface DualAxesOptions {
  /** Data for both series */
  data: [any[], any[]];
  /** X-axis field */
  xField: string;
  /** Y-axis fields for both series */
  yField: [string, string];
  /** Geometry options for both series */
  geometryOptions?: GeometryOption[];
}

interface GeometryOption {
  /** Chart type (line, column, area, etc.) */
  geometry: string;
  /** Series color */
  color?: string;
  /** Additional options */
  [key: string]: any;
}

interface MixOptions {
  /** Tooltip configuration */
  tooltip?: {
    shared?: boolean;
    [key: string]: any;
  };
  /** Array of plot configurations */
  plots: PlotConfig[];
}

interface PlotConfig {
  /** Chart type */
  type: string;
  /** Chart options */
  options: {
    data: any[];
    xField: string;
    yField: string;
    [key: string]: any;
  };
}

interface FacetOptions {
  /** Data for faceting */
  data: any[];
  /** Fields to facet by */
  fields: string[];
  /** Facet type */
  type: 'rect' | 'mirror' | 'matrix' | 'circle' | 'tree';
  /** Number of columns */
  cols?: number;
  /** Number of rows */
  rows?: number;
  /** Configuration for each sub-plot */
  eachView: (view: any, facet: any) => any;
}