Skip to main content

Bar Proportions

El componente BarProportions representa gráficamente proporciones en forma de una barra dividida en segmentos. Cada sección en la barra muestra una fracción del ancho total, de acuerdo a los valores dados en las props. El proposito de este componente es formar una barra grafica como BarFraction, sin representar necesariamente una fraccion, sino para poder ver la igualdad en proporciones dentro de ella. Se utiliza en multiples misiones donde la pregunta es sobre si la barra esta dividida en partes iguales o diferentes.

Funcionamiento​

  • 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. A diferencia de BarFraction, cada segmento tiene un color diferente, para enfatizar en la diferencia entre proporciones.

  • Generación de Secciones: Al igual que BarFraction, BarProportions inicia como una barra vacia, en donde dentro de ella se mapean segmentos. En este caso en lugar de solo mapear Segment's, se mapean secciones o sections. Estas se generan dependiendo del prop sectionValues, el cual es un array de tipo [size: number, segments: number].

    • Size: Este dato es de tipo number, del que se espera un valor de 0 - 1, que dentro del componente BarProportions se transforma a porcentaje, y sera el porcentaje de la barra vacia que ocupara una seccion.

    • Segments: Este dato es de tipo number tambien, del que se espera un valor aproximadamente entre 0 - 12; Este valor representa cuantos segments se mapearan dentro de cada seccion, osea en cuantas partes estara dividida cada seccion.

Props​

  • SectionsValues (obligatorio): Arreglo de objetos que define las secciones de la barra. Cada objeto en el arreglo tiene las siguientes propiedades:

    • size: Número que representa la proporción de la barra ocupada por esta sección. Se expresa en porcentaje del ancho total.

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

  • barStyle (opcional): Estilos personalizados para el contenedor general de la barra.

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

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

Ejemplo​