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

    Go ahead and perform a cell range selection or column selection in order to enable the Chart types view based on the selected data. This view is part of Dock Manager's right pane. From there you can:

    • Elija un tipo de gráfico específico y visualícelo en un panel separado.
    • Or use the Data Analysis context button to show different text formatting options.

    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.
    • If multi-cell range selection is applied, only the Text formatting functionality will be available.
    • 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.

    Lets start with:

    • 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:
      • Add the IgxExtrasModule to your app.module.ts
      • Apply igxChartIntegration, igxConditionalFormatting, igxContextMenu directives to your 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

    If you have a Grid with thousands of rows of data it would be very difficult to see patterns and trends just from examining the raw information. Similar to charts and sparklines, Conditional formatting provides another way to visualize data and make it easier to understand.

    Understanding conditional formatting - it allows for applying formatting such as colors and data bars to cells based on their value in the range selection. The sample below demonstrates how you can configure the Grid to apply Conditional Formatting. It depends on the Conditional formatting selection type what condition rules will be shown. Below you will find the predefined styles (presets) that you can use in order to quickly apply conditional formatting to your data. The formatting of a range gets cleared when performing formatting on different range or through the clear button. The clear button is only active when there is an applied formatting.

    Number range selection

    • Data Bars - Data bars can help you spot larger and smaller numbers, such as top-selling and bottom-selling products. This preset makes it very easy to visualize values in a range of selected cells. A longer bar represents a higher value. A cell that holds value of 0 has no data bar all other cells are filled proportionally. Positive values are with green color and negative values will be red
    • Color Scale - The shade of the color represents the value in the cell. The cells that hold values below the *Lowest threshold will be colored in red. The cells that are above the *Highest threshold will be colored in green. And all the cells that are between the Lowest and Highest threshold will be colored in yellow.

    Lowest threshold - Below 33% of the maximum cell value in range selection.

    Highest threshold - Above 66% of the maximum cell value in range selection.

    • Top 10% - Use this preset to highlight the values which are equivalent to top 10% of the selected data.
    • Greater than - This preset marks all values Greater than the avarege
    • Duplicate values - Marks all duplicate values.
    • Unique values - All cell values that are unique will be marked (blue background color).
    • Empty- Marks all cells with undefined values

    Text range selection

    • Text contains - Marks all cells that contain the cell value from the top-left most selected cell. Example:
    • Duplicate values - Marks all duplicate values.
    • Unique values - All cell values that are unique will be marked (blue background color).
    • Empty- Marks all cells with undefined values

    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 Applies conditional formatting for the selected cells. Usage:
    this.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars)    		 formatterName: string, formatRange?: GridSelectionRange [ ],
    reset: boolean (true by default)
    clearFormatting Removes the conditional formatting from the selected cells. Usage:
    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