Specialized Charts

/**
 * Stock chart component for financial data
 * @param props - Stock configuration extending G2Plot StockOptions
 * @returns React component
 */
function Stock(props: StockConfig): JSX.Element;

interface StockConfig extends StockOptions, ContainerConfig<StockOptions> {
  chartRef?: ChartRefConfig;
}

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

const StockExample = () => {
  const data = [
    { date: '2021-01-01', open: 100, high: 110, low: 95, close: 105 },
    { date: '2021-01-02', open: 105, high: 115, low: 100, close: 112 },
    { date: '2021-01-03', open: 112, high: 120, low: 108, close: 118 },
    { date: '2021-01-04', open: 118, high: 125, low: 115, close: 122 },
  ];

  const config = {
    data,
    xField: 'date',
    yField: ['open', 'close', 'high', 'low'],
  };

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

/**
 * Rose chart component (radial column chart)
 * @param props - Rose configuration extending G2Plot RoseOptions
 * @returns React component
 */
function Rose(props: RoseConfig): JSX.Element;

interface RoseConfig extends RoseOptions, ContainerConfig<RoseOptions> {
  chartRef?: ChartRefConfig;
}

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

const RoseExample = () => {
  const data = [
    { type: 'A', value: 40 },
    { type: 'B', value: 21 },
    { type: 'C', value: 17 },
    { type: 'D', value: 13 },
    { type: 'E', value: 9 },
  ];

  const config = {
    data,
    xField: 'type',
    yField: 'value',
    seriesField: 'type',
  };

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

/**
 * Radial bar chart component for circular data comparison
 * @param props - RadialBar configuration extending G2Plot RadialBarOptions
 * @returns React component
 */
function RadialBar(props: RadialBarConfig): JSX.Element;

interface RadialBarConfig extends RadialBarOptions, ContainerConfig<RadialBarOptions> {
  chartRef?: ChartRefConfig;
}

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

const RadialBarExample = () => {
  const data = [
    { name: 'X', score: 10 },
    { name: 'Y', score: 4 },
    { name: 'Z', score: 6 },
  ];

  const config = {
    data,
    xField: 'name',
    yField: 'score',
    colorField: 'name',
  };

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

/**
 * Bidirectional bar chart component for comparing two datasets
 * @param props - BidirectionalBar configuration extending G2Plot BidirectionalBarOptions
 * @returns React component
 */
function BidirectionalBar(props: BidirectionalBarConfig): JSX.Element;

interface BidirectionalBarConfig extends BidirectionalBarOptions, ContainerConfig<BidirectionalBarOptions> {
  chartRef?: ChartRefConfig;
}

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

const BidirectionalBarExample = () => {
  const data = [
    { country: 'A', '2016': 100, '2017': 120 },
    { country: 'B', '2016': 80, '2017': 90 },
    { country: 'C', '2016': 110, '2017': 130 },
  ];

  const config = {
    data,
    xField: 'country',
    yField: ['2016', '2017'],
    layout: 'horizontal',
  };

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

/**
 * Radar chart component for multivariate data
 * @param props - Radar configuration extending G2Plot RadarOptions
 * @returns React component
 */
function Radar(props: RadarConfig): JSX.Element;

interface RadarConfig extends RadarOptions, ContainerConfig<RadarOptions> {
  chartRef?: ChartRefConfig;
}

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

const RadarExample = () => {
  const data = [
    { item: 'Design', user: 'a', score: 70 },
    { item: 'Design', user: 'b', score: 30 },
    { item: 'Development', user: 'a', score: 60 },
    { item: 'Development', user: 'b', score: 70 },
    { item: 'Marketing', user: 'a', score: 50 },
    { item: 'Marketing', user: 'b', score: 60 },
    { item: 'Users', user: 'a', score: 40 },
    { item: 'Users', user: 'b', score: 50 },
    { item: 'Test', user: 'a', score: 60 },
    { item: 'Test', user: 'b', score: 70 },
    { item: 'Language', user: 'a', score: 70 },
    { item: 'Language', user: 'b', score: 50 },
    { item: 'Technology', user: 'a', score: 50 },
    { item: 'Technology', user: 'b', score: 40 },
    { item: 'Support', user: 'a', score: 30 },
    { item: 'Support', user: 'b', score: 40 },
    { item: 'Sales', user: 'a', score: 60 },
    { item: 'Sales', user: 'b', score: 40 },
    { item: 'UX', user: 'a', score: 50 },
    { item: 'UX', user: 'b', score: 60 },
  ];

  const config = {
    data,
    xField: 'item',
    yField: 'score',
    seriesField: 'user',
  };

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

/**
 * Violin plot component combining box plot and density
 * @param props - Violin configuration extending G2Plot ViolinOptions
 * @returns React component
 */
function Violin(props: ViolinConfig): JSX.Element;

interface ViolinConfig extends ViolinOptions, ContainerConfig<ViolinOptions> {
  chartRef?: ChartRefConfig;
}

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

const ViolinExample = () => {
  const data = [
    { type: 'A', value: 1 },
    { type: 'A', value: 2 },
    { type: 'A', value: 3 },
    { type: 'A', value: 4 },
    { type: 'A', value: 5 },
    { type: 'B', value: 2 },
    { type: 'B', value: 3 },
    { type: 'B', value: 4 },
    { type: 'B', value: 5 },
    { type: 'B', value: 6 },
  ];

  const config = {
    data,
    xField: 'type',
    yField: 'value',
  };

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