Análisis de los datos

    El análisis de datos es el proceso de examinar, transformar y organizar datos de una manera específica para generar información útil basada en ellos. También permite llegar a ciertos resultados y conclusiones a través del razonamiento analítico y lógico.

    Note

    Esta funcionalidad se introducirá en Ignite UI for Angular como paquete externo para facilitar la configuración y limitar el código requerido al mínimo.

    Data Analysis with DockManager

    Continúe y realice una cell range selection o column selection para habilitar la Chart types view en función de los datos seleccionados. Esta vista es parte del panel derecho de Dock Manager. Desde allí puedes:

    • Elija un tipo de gráfico específico y visualícelo en un panel separado.
    • O utilice el botón contextual Data Analysis para mostrar diferentes opciones de formato de texto.

    Note

    El componente web Dock Manager proporciona medios para administrar el diseño de la aplicación a través de paneles y permite a los usuarios finales personalizarla aún más fijando, cambiando el tamaño, moviendo y ocultando paneles. Después de seleccionar los datos, continúe, cree un par de gráficos y fíjelos (arrastrándolos) a las áreas disponibles.

    Tenga en cuenta (muestra relacionada):

    • En el nuevo cuadro de selección de datos, se actualizarán los datos.
    • Si se aplica la selección de rango de varias celdas, solo estará disponible la funcionalidad Text formatting.
    • Si los datos seleccionados no son compatibles con ninguno de los gráficos, se mostrará un mensaje de advertencia "Datos incompatibles".

    Data Analysis Package

    Puede comenzar a utilizar esta funcionalidad siguiendo los pasos a continuación. Tenga en cuenta que el paquete igniteui-angular-extras solo está disponible a través de nuestro feed npm privado. Si tiene una licencia comercial válida, tendrá acceso al feed privado.

    Empecemos con:

    • Instalación del paquete en su aplicación
    npm install @infragistics/igniteui-angular-extras
    • Instalación del paquete de dependencias entre pares
    npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angular-charts
    • Después de la instalación de los paquetes, continúe y:
      • Agregue el IgxExtrasModule a su app.module.ts
      • Aplique las directivas igxChartIntegration, igxConditionalFormatting, igxContextMenu a su grid
    <igx-grid #grid1 igxChartIntegration igxConditionalFormatting igxContextMenu
    [data]="localData" [autoGenerate]="true">
    <igx-paginator>
    </igx-paginator>
</igx-grid>

    ¡Y eso es! Ahora puede realizar la selección del rango de celdas y seguir el flujo de análisis de datos.

    Data Analysis Button

    El botón de análisis de datos es la salida para visualizar los datos seleccionados de varias maneras:

    De esta manera, cada selección de rango realizada en la cuadrícula se puede analizar fácilmente con un solo clic.

    El botón se representa en cada selección de rango en la parte inferior derecha de la selección y se oculta cuando la selección está inactiva. El desplazamiento horizontal y vertical reposiciona el botón para que siempre se muestre en su posición designada.

    Chart Integration

    Esta sección presenta la integración de Grid con la funcionalidad de gráficos, que permite al usuario final visualizar un gráfico basado en los datos seleccionados de Grid y elegir diferentes tipos de gráficos si es necesario.

    El gráfico se mostrará seleccionando un rango de celdas y haciendo clic en el botón Mostrar análisis.

    Note

    La opción de creación de gráficos solo está disponible cuando hay valores numéricos en los datos seleccionados.

    Actualmente admitimos los siguientes tipos de gráficos:

    Conditional Cell Formatting

    Si tiene una cuadrícula con miles de filas de datos, sería muy difícil ver patrones y tendencias simplemente examinando la información sin procesar. Al igual que los gráficos y minigráficos, Conditional formatting proporciona otra forma de visualizar datos y hacerlos más fáciles de entender.

    Comprender el formato condicional: permite aplicar formato, como colores y barras de datos, a las celdas en función de their value en la selección de rango. El siguiente ejemplo demuestra cómo puede configurar Grid para aplicar Conditional Formatting. Depende del Conditional formatting selection type qué rules de condición se mostrarán. A continuación encontrará los estilos predefinidos (ajustes preestablecidos) que puede utilizar para aplicar rápidamente formato condicional a sus datos. El formateo de un rango se borra al realizar el formateo en un rango diferente o mediante el botón Borrar. El botón borrar solo está activo cuando hay un formato aplicado.

    Number range selection

    • Data Bars: las barras de datos pueden ayudarle a detectar números mayores y menores, como los productos más vendidos y los menos vendidos. Este ajuste preestablecido hace que sea muy fácil visualizar valores en un rango de celdas seleccionadas. Una barra más larga representa un valor más alto. Una celda que tiene un valor de 0 no tiene barra de datos; todas las demás celdas se llenan proporcionalmente. Los valores positivos serán de color green y los valores negativos serán de red
    • Color Scale: el tono del color representa el valor en la celda. Las celdas que contienen valores por debajo del *Lowest threshold se colorearán en red. Las celdas que estén por encima del *Highest threshold se colorearán en green. Y todas las celdas que estén entre el Highest threshold​ ​Lowest y más alto se colorearán en yellow.

    Lowest threshold: por debajo del 33 % del valor máximo de celda en la selección de rango.

    Highest threshold: por encima del 66 % del valor máximo de celda en la selección de rango.

    • Top 10%: utilice este ajuste preestablecido para resaltar los valores que equivalen al 10% superior de los datos seleccionados.
    • Greater than: este ajuste preestablecido marca todos los valores Greater than the avarege
    • Duplicate values: marca todos los valores duplicados.
    • Unique values: se marcarán todos los valores de celda que sean únicos (color de fondo blue).
    • Empty: marca todas las celdas con valores undefined​

    Text range selection

    • Text contains: marca todas las celdas que contienen el valor de la top-left most selected cell. Ejemplo:
    • Duplicate values: marca todos los valores duplicados.
    • Unique values: se marcarán todos los valores de celda que sean únicos (color de fondo blue).
    • Empty: marca todas las celdas con valores undefined​

    Demo

    Data Analysis Package API

    IgxConditionalFormattingDirective

    API Descripción Argumentos
    ConditionalFormattingType Una enumeración, que representa los tipos de formato condicional.
    IFormatColors Una interfaz que representa los colores de formato.
    formatter: string Una propiedad de entrada, que establece/obtiene el tipo de formato actual
    formatColors Una propiedad de entrada, que establece/obtiene los colores de formato actuales val: IFormatColors
    onFormattersReady Un evento que emite el mensaje aplicable.formatting types para los datos seleccionados, cuando sean determinados.
    formatCells Aplica formato condicional a las celdas seleccionadas. Uso:
    this.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars)    		 formatterName: string, formatRange?: GridSelectionRange [ ],
    reset: boolean (true by default)
    clearFormatting Elimina el formato condicional de las celdas seleccionadas. Uso:
    this.conditonalFormatting.clearFormatting()

    IgxChartIntegrationDirective

    API Descripción Argumentos
    CHART_TYPE Una enumeración que representa los tipos de gráficos admitidos.
    OPTIONS_TYPE Una enumeración, que representa el tipo de opciones admitidas, que se puede aplicar a un componente del gráfico.
    IOptions Una interfaz para opciones de propiedades de gráficos
    chartFactory Crea un componente de gráfico, según el tipo de gráfico proporcionado. Uso:
    this.chartIntegration.chartFactory(CHART_TYPE.COLUMN_GROUPED, this.viewContainerRef)    		 type: cualquiera[], viewContainerRef:ViewContainerRef
    setChartComponentOptions Establece opciones de propiedad para un componente de gráfico. Uso:
    this.chartIntegration.setChartComponentOptions(CHART_TYPE.PIE, OPTIONS_TYPE.CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } })    		 chart: CHART_TYPE, optionsType: OPTIONS_TYPE, options: IOptions
    getAvailableCharts Devuelve los tipos de gráficos habilitados
    enableCharts Habilita los tipos de gráficos proporcionados. De forma predeterminada, todos los tipos de gráficos están habilitados. types: CHART_TYPE [ ]
    disableCharts Deshabilita los tipos de gráficos proporcionados types: CHART_TYPE [ ]
    onChartTypesDetermined Un evento, emitido cuando se escribe el gráfico, aplicable para elchartData, están determinadas. Este evento emite un objeto de tipoIDeterminedChartTypesArgs, que tiene 2 propiedades:
    chartsAvailabilty: Mapa<CHART_TYPE, booleano>- los tipos de gráficos habilitados/deshabilitados,
    chartsForCreation: CHART_TYPE[]- los tipos de gráficos aplicables para elchartData
    onChartCreationDone Un evento emitido cuando se crea un gráfico. Este evento emite el componente de gráfico, que se crea
    chartData: any[ ] Una propiedad de entrada, que establece/obtiene los datos para los gráficos. selectedData: any[ ]
    useLegend: boolean Una entrada que habilita/deshabilita el uso de leyendas para todos los tipos de gráficos. Por defecto está configurado en verdadero
    defaultLabelMemberPath: string Una propiedad de entrada, que establece/obtiene la ruta del miembro de etiqueta predeterminada para los gráficos. De forma predeterminada, la ruta del miembro de la etiqueta se determinará en función de los datos proporcionados.
    (si los registros de datos proporcionados tienen propiedades con valores de cadena, el nombre de la propiedad de la primera cadena del primer registro de datos en elchartData se seleccionará como ruta del miembro de la etiqueta para los gráficos; de lo contrario, la ruta del miembro de la etiqueta tendrá el valor 'Índice'.)
    scatterChartYAxisValueMemberPath: string Una propiedad de entrada, que establece/obtiene la ruta del miembro de radio predeterminada para el gráfico de burbujas de dispersión. Si no se establece, la ruta del miembro del valor del eje Y predeterminada será el primer nombre de propiedad numérica del primer registro de datos en elchartData path: string
    bubbleChartRadiusMemberPath: string Una propiedad de entrada, que establece/obtiene la ruta del miembro de radio predeterminada para el gráfico de burbujas de dispersión. Si no se establece, la ruta predeterminada del miembro del radio será el segundo nombre de propiedad numérica del primer registro de datos en elchartData path: string

    Useful resources