Skip to main content

Graphic Fraction Proportions

El componente GrahpicFractionProportion representa proporciones de una grafica dividida en diferentes secciones, siendo ellas divididas en segmentos. Según la prop fractiontype, renderiza un gráfico de barra o un gráfico de pastel usando BarProportions o PieProportions, respectivamente.

Descripción de Funcionamiento​

  • Selección de Tipo de Fracción: Según el valor de fractiontype, el componente renderiza PieProportions o BarProportions.

  • Asignación de Colores: Se pasa la prop color a PieProportions o BarProportions para definir el color de borde y relleno de las secciones.

  • Renderizado del Gráfico: Si fractiontype es "pie": Renderiza PieProportions con sectionsValues, radius, y estilos personalizados. Si fractiontype es "bar": Renderiza BarProportions con sectionsValues y barStyle.

Props​

  • SectionsValues (obligatorio): Un arreglo de objetos, donde cada objeto representa una sección de la fracción. Cada objeto tiene:

    • size: Número que representa la proporción de la sección en relación al total.

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

  • fractiontype (opcional): Define el tipo de fracción a representar. Acepta "bar" para gráfico de barra o "pie" para gráfico de pastel. Si no se especifica, no renderiza ninguna opción específica.

  • 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.

  • containerStyles (opcional): Estilos personalizados para el contenedor principal.

  • radius (opcional): Especifica el radio del gráfico de pastel. Solo se aplica si fractiontype es "pie".

  • barStyle (opcional): Estilos personalizados para el gráfico de barra.

  • pieStyle (opcional): Estilos personalizados para el gráfico de pastel.