DonutChart

DonutChart Properties

• items (DonutChartItem[]):
  An array of objects representing the data for the chart. Each element defines the value of a segment and its color.
• innerRadius (number):
  The inner radius of the chart, determining how large the central hole will be. Default: 120.
• outerRadius (number):
  The outer radius of the chart. Default: 150.
• hoverInnerRadius (number):
  The inner radius used when hovering over a segment. Default: 110.
• hoverOuterRadius (number):
  The outer radius used when hovering over a segment. Default: 160.
• onItemMouseEnter (function(item: DonutChartItem)):
  Event handler for mouse hover over a segment. Returns the item that the mouse is hovering over.
• onItemMouseLeave (function):
  Event handler triggered when the mouse leaves a segment.

Internal Functions

• scale (value: number):
  Transforms the value of an item into an angle (in radians) for display on the chart.
• arcs (createMemo):
  Calculates a set of arcs for the chart based on the items data. Returns an array of objects, each containing the start angle, end angle, color, and item data.

DonutChartArc

The separate component DonutChartArc is responsible for rendering an individual segment of the chart. It supports mouse interaction and changes radii on hover.

DonutChartArc Properties

• startAngle (number):
  The starting angle of the segment (in radians).
• endAngle (number):
  The ending angle of the segment (in radians).
• color (string):
  The color of the segment.
• innerRadius (number):
  The inner radius of the segment.
• outerRadius (number):
  The outer radius of the segment.
• hoverInnerRadius (number):
  The inner radius of the segment on mouse hover.
• hoverOuterRadius (number):
  The outer radius of the segment on mouse hover.
• onMouseEnter (function):
  Event handler for mouse hover over the segment.
• onMouseLeave (function):
  Event handler for mouse leaving the segment.

Important Points

• arc:
  A function that constructs the SVG path for each segment based on the start and end angles, as well as the radii.
• createMemo:
  Used for caching calculations of angles, arcs, and SVG paths to improve performance.