ParliamentChart

Hemicycle of seats: the arcs are worked out for the total, every arc gets seats in proportion to its length, and groups are laid left to right so each one reads as a wedge. Optional majority mark and seat total.

Import

import { ParliamentChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/parliament-chart.

Usage

<ParliamentChart
  title="Encuesta: servicio favorito (130 clientes)"
  data={pollVotes}
  innerRatio={0.4}
  seatShape="circle"
  majority={false}
  majorityLabel="Mayoría"
  centerLabel="votos"
  seatLabel="Votos"
  height={260}
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
title *	string
description	string
data *	readonly Omit<UnitCategory, "icon">[]		One group per entry; value is its number of seats (whole numbers).
rows	number		Number of arcs; computed from the seat count by default.
innerRatio	number	0.4	Radius of the innermost arc as a fraction of the outer one.
seatShape	"circle" | "square"	"circle"
majority	number | boolean	false	Draws the majority mark at the top of the arc: true for half the seats plus one, or an explicit number of seats.
majorityLabel	string	"Majority"	Text before the majority figure.
centerLabel	string		Word under the seat total in the middle (“escaños”, “sillas”). Omit to hide the total.
seatLabel	string	"Seats"	Name of the counted thing in the tooltip and data table.
height	number | "fill"	260
aspectRatio	number		Width / height ratio; sizes the drawing from the container width when height is not “fill”.
legend	boolean | "top" | "bottom"	true
tooltip	boolean	true
animate	boolean	true
loading	boolean	false
initialHidden	readonly string[]
labels	Partial<ChartLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Majority line
• Square Seats
• Many seats (auto rows)
• Fixed Rows
• Loading
• Empty
• Narrow

Source

packages/ui/src/charts/parliament-chart/parliament-chart.tsx