Skip to main content

Pie Proportions

El componente PieProportions representa proporciones en un gráfico de pastel, dividiéndolo en PieSegment's. Cada sección del gráfico tiene un tamaño específico (fracción del círculo completo) y un número determinado de segmentos. Al igual que PieGraph es una grafica de pastel, con la diferencia de que no representa el valor de una fraccion, sino solo la particion de esta grafica.

Funcionamiento​

La manera de funcionar es muy parecida a BarProportions, con la diferencia de que al ser estos segmentos, componentes SVG, el posicionamiento, parecido a "stackearlos" uno junto al otro, no es tan sencillo como con componentes View's, de la forma que funciona es que le proporciona a PieSegment el angulo de inicio y final, y se recalcula dependiendo del valor de sectionsValues.size de cada seccion.

  • Validación de Secciones: El componente asegura que la suma de size en sectionsValues no exceda 1. Si la suma es mayor a 1, elimina secciones al final del arreglo hasta que el tamaño total sea válido.

  • Distribución de Colores: Utiliza una paleta de colores aleatoria (mediante getShuffledColorPalettes) para asignar colores a cada sección, a menos que se proporcionen colores específicos en la prop color.

  • Generación de Secciones: Cada sección es un conjunto de segmentos en forma de porción del círculo. Cada segmento tiene un ángulo igual, calculado en función de size y segments.

  • Relleno Complementario: Si la suma de los tamaños de las secciones no alcanza el 100% del círculo, se genera una porción complementaria en blanco.

  • Caso de Sección Completa: Si alguna sección cubre el 100% del gráfico (size === 1), el componente simplemente dibuja un círculo completo usando el color de la primera sección.

Props​

  • sectionsValues (obligatorio): Un arreglo de objetos, donde cada objeto representa una sección del gráfico de pastel. Cada objeto contiene:

    • size: Número que representa la proporción de la sección en relación al círculo completo (valor entre 0 y 1).

    • segments: Número de segmentos dentro de esa sección.

  • radius (opcional): Radio del gráfico de pastel. Por defecto es 50.

  • color (opcional): Objeto que define los colores predeterminados para cada sección.

    • border: Color del borde de los segmentos.
    • fill: Color de relleno de los segmentos.

  • styles (opcional): Estilos personalizados para el contenedor del gráfico.

Ejemplo​