Skip to main content

Graphic Fraction

GraphicFraction es un componente que muestra el valor de una fraccion en forma de una grafica de pie o una barra. Dependiendo de un prop, escoge que tipo de graphica renderizar. Ya sea PieGraph o BarFraction.

Este componente consume:

Funcionamiento​

  • Tipo de Gráfico: Basado en el valor de fractiontype, el componente renderiza una fracción en forma de barra (BarFraction) o en forma de gráfico circular (PieGraph).

  • Fracción Completa y Parcial: El valor de whole determina cuántas barras o círculos estarán completamente llenos. La última barra o círculo representa la fracción parcial.

  • Colores y Estilos Personalizables: Puedes modificar los colores de los bordes y del relleno de los segmentos, así como aplicar estilos personalizados a cada tipo de gráfico.

    • color (border: string, fill: string): Background Color y Border Color que se le aplicarian a las graficas independientemente de que tipo sea.

    • containerStyles: Estilos que se le aplican a el contenedor de la grafica, independientemente del tipo.

    • barStyle: Estilos que se le aplican a BarFraction.

    • pieStyle: Estilos que se le aplican a PieGraph.

    • Radius: Al usar el tipo "pie", puedes definir el tamaño del círculo mediante el prop radius.