Statistical Chart Types

/**
 * Histogram component for frequency distribution visualization
 */
const Histogram: ForwardRefExoticComponent<PropsWithoutRef<HistogramConfig> & RefAttributes<Chart>>;

interface HistogramConfig extends CommonConfig<HistogramOptions> {}

interface HistogramOptions extends Options {
  // Specific configuration for histogram charts
}

import React from "react";
import { Histogram } from "@ant-design/plots";

// Sample data of heights
const data = [
  { height: 160 }, { height: 162 }, { height: 164 }, { height: 165 },
  { height: 167 }, { height: 169 }, { height: 170 }, { height: 172 },
  { height: 174 }, { height: 175 }, { height: 177 }, { height: 180 },
];

const config = {
  data,
  binField: 'height',
  binWidth: 5,
  color: '#1890ff',
  tooltip: {
    showMarkers: false,
  },
};

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

/**
 * Box plot component for statistical distribution visualization
 */
const Box: ForwardRefExoticComponent<PropsWithoutRef<BoxConfig> & RefAttributes<Chart>>;

interface BoxConfig extends CommonConfig<BoxOptions> {}

interface BoxOptions extends Options {
  // Specific configuration for box plots
}

import React from "react";
import { Box } from "@ant-design/plots";

const data = [
  { group: 'Group A', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 18] },
  { group: 'Group B', values: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 16, 20] },
  { group: 'Group C', values: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25] },
];

// Transform data for box plot
const transformedData = data.flatMap(item => 
  item.values.map(value => ({ group: item.group, value }))
);

const config = {
  data: transformedData,
  xField: 'group',
  yField: 'value',
  boxStyle: {
    stroke: '#545454',
    fill: '#1890FF',
    fillOpacity: 0.3,
  },
  outlierStyle: {
    stroke: '#f5222d',
    fill: '#f5222d',
  },
};

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

/**
 * Violin plot component for density distribution visualization
 */
const Violin: ForwardRefExoticComponent<PropsWithoutRef<ViolinConfig> & RefAttributes<Chart>>;

interface ViolinConfig extends CommonConfig<ViolinOptions> {}

interface ViolinOptions extends Options {
  // Specific configuration for violin plots
}

import React from "react";
import { Violin } from "@ant-design/plots";

const data = [
  { category: 'A', value: 10 }, { category: 'A', value: 12 },
  { category: 'A', value: 15 }, { category: 'A', value: 18 },
  { category: 'B', value: 8 }, { category: 'B', value: 14 },
  { category: 'B', value: 16 }, { category: 'B', value: 20 },
  { category: 'C', value: 5 }, { category: 'C', value: 22 },
];

const config = {
  data,
  xField: 'category',
  yField: 'value',
  seriesField: 'category',
  kde: {
    smooth: true,
  },
  box: {
    visible: true,
  },
};

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

/**
 * Heatmap component for two-dimensional data visualization
 */
const Heatmap: ForwardRefExoticComponent<PropsWithoutRef<HeatmapConfig> & RefAttributes<Chart>>;

interface HeatmapConfig extends CommonConfig<HeatmapOptions> {}

interface HeatmapOptions extends Options {
  // Specific configuration for heatmaps
}

import React from "react";
import { Heatmap } from "@ant-design/plots";

const data = [
  { x: 'Monday', y: '9am', value: 12 },
  { x: 'Monday', y: '10am', value: 15 },
  { x: 'Monday', y: '11am', value: 18 },
  { x: 'Tuesday', y: '9am', value: 8 },
  { x: 'Tuesday', y: '10am', value: 22 },
  { x: 'Tuesday', y: '11am', value: 25 },
  { x: 'Wednesday', y: '9am', value: 14 },
  { x: 'Wednesday', y: '10am', value: 19 },
  { x: 'Wednesday', y: '11am', value: 16 },
];

const config = {
  data,
  xField: 'x',
  yField: 'y',
  colorField: 'value',
  color: ['#174c83', '#7eb6d3', '#efefeb', '#efefeb', '#448e4d', '#90c695'],
  meta: {
    value: {
      min: 0,
      max: 30,
    },
  },
  heatmapStyle: {
    stroke: '#f0f0f0',
    opacity: 0.8,
  },
};

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

/**
 * Radial bar chart component for circular data visualization
 */
const RadialBar: ForwardRefExoticComponent<PropsWithoutRef<CommonConfig<RadialBarOptions>> & RefAttributes<Chart>>;

interface RadialBarOptions extends Options {
  // Specific configuration for radial bar charts
}

import React from "react";
import { RadialBar } from "@ant-design/plots";

const data = [
  { name: 'X6', score: 70, grade: 'C' },
  { name: 'G', score: 60, grade: 'D' },
  { name: 'AVA', score: 48, grade: 'D' },
  { name: 'G2', score: 38, grade: 'F' },
  { name: 'L7', score: 28, grade: 'F' },
];

const config = {
  data,
  xField: 'name',
  yField: 'score',
  maxAngle: 270,
  radius: 0.8,
  innerRadius: 0.2,
  tooltip: {
    formatter: (datum) => ({
      name: datum.name,
      value: `${datum.score} (Grade: ${datum.grade})`,
    }),
  },
  colorField: 'grade',
  color: ({ grade }) => {
    if (grade === 'A' || grade === 'B') return '#1890ff';
    if (grade === 'C') return '#faad14';
    return '#f5222d';
  },
};

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

/**
 * Bullet chart component for performance comparison visualization
 */
const Bullet: ForwardRefExoticComponent<PropsWithoutRef<BulletConfig> & RefAttributes<Chart>>;

interface BulletConfig extends CommonConfig<BulletOptions> {}

interface BulletOptions extends Options {
  // Specific configuration for bullet charts
}

import React from "react";
import { Bullet } from "@ant-design/plots";

const data = [
  {
    title: 'Revenue',
    ranges: [100, 200, 300],
    measures: [150],
    target: 250,
  },
  {
    title: 'Orders',
    ranges: [50, 100, 150],
    measures: [120],
    target: 140,
  },
];

const config = {
  data,
  measureField: 'measures',
  rangeField: 'ranges',
  targetField: 'target',
  xField: 'title',
  color: {
    range: ['#f0f0f0', '#bfbfbf', '#595959'],
    measure: '#5B8FF9',
    target: '#3D76DD',
  },
  label: {
    measure: {
      position: 'middle',
      style: { fill: '#fff' },
    },
  },
};

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

/**
 * Venn diagram component for set relationship visualization
 */
const Venn: ForwardRefExoticComponent<PropsWithoutRef<VennConfig> & RefAttributes<Chart>>;

interface VennConfig extends CommonConfig<VennOptions> {}

interface VennOptions extends Options {
  // Specific configuration for Venn diagrams
}

import React from "react";
import { Venn } from "@ant-design/plots";

const data = [
  { sets: ['A'], size: 12, label: 'A' },
  { sets: ['B'], size: 12, label: 'B' },
  { sets: ['C'], size: 12, label: 'C' },
  { sets: ['A', 'B'], size: 2, label: 'A&B' },
  { sets: ['A', 'C'], size: 2, label: 'A&C' },
  { sets: ['B', 'C'], size: 2, label: 'B&C' },
  { sets: ['A', 'B', 'C'], size: 1 },
];

const config = {
  data,
  setsField: 'sets',
  sizeField: 'size',
  pointStyle: {
    fillOpacity: 0.85,
  },
  label: {
    style: {
      fontSize: 12,
      fill: '#fff',
    },
  },
};

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