Análise de dados

    A análise de dados é o processo de examinar, transformar e organizar dados de uma maneira específica para gerar informações úteis com base neles. Também permite alcançar certos resultados e conclusões por meio de raciocínio analítico e lógico.

    Note

    Essa funcionalidade será introduzida no Ignite UI for Angular como pacote externo para facilitar a configuração e limitar o código necessário no 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:

    • Escolha o tipo de gráfico específico e visualize-o em um painel separado.
    • Or use the Data Analysis context button to show different text formatting options.

    Note

    O componente Web do Dock Manager fornece meios para gerenciar o layout do aplicativo por meio de painéis e permite que os usuários finais o personalizem ainda mais, fixando, redimensionando, movendo e ocultando painéis. Depois de selecionar os dados, vá em frente e crie alguns gráficos e fixe-os (arrastando) nas áreas disponíveis

    Lembre-se (relacionado ao exemplo):

    • No novo gráfico de seleção de dados, os dados do gráfico serão atualizados.
    • If multi-cell range selection is applied, only the Text formatting functionality will be available.
    • Se os dados selecionados não forem compatíveis com nenhum dos gráficos, uma mensagem de aviso "Dados incompatíveis" será exibida.

    Data Analysis Package

    Você pode começar a usar essa funcionalidade seguindo as etapas abaixo. Lembre-se de que o pacote igniteui-angular-extras está disponível apenas por meio de nosso feed npm privado. Se você tiver uma licença comercial válida, terá acesso ao feed privado.

    Vamos começar com:

    • Instalando o pacote em seu aplicativo
    npm install @infragistics/igniteui-angular-extras
    • Instalando as dependências de peer de pacote
    npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angular-charts
    • Após a instalação dos pacotes, vá em frente e:
      • 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>

    E é isso! Agora você pode executar a seleção do intervalo de células e seguir o fluxo de análise de dados.

    Data Analysis Button

    O botão de análise de dados é a saída para visualizar os dados selecionados de várias maneiras:

    Botão de análise de dados

    Dessa forma, todas as seleções de intervalo realizadas na grade podem ser facilmente analisadas com um único clique.

    O botão é renderizado em cada seleção de intervalo no canto inferior direito da seleção e oculta quando a seleção está inativa. A rolagem horizontal e vertical reposiciona o botão para que ele seja sempre renderizado em sua posição designada.

    Chart Integration

    Esta seção apresenta a integração do Grid com a funcionalidade de gráficos, que permite ao usuário final visualizar um gráfico com base nos dados selecionados do Grid e escolher diferentes tipos de gráficos, se necessário.

    O gráfico será mostrado selecionando um intervalo de células e clicando no botão mostrar análise.

    Note

    A opção de criação de gráfico só está disponível quando há valores numéricos nos dados selecionados.

    Atualmente, oferecemos suporte aos seguintes tipos de gráfico:

    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
    Formatação das barras de dados

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

    Formatação em escala de cores
    • Top 10% - Use this preset to highlight the values which are equivalent to top 10% of the selected data.
    Top 10% de formatação
    • Greater than - This preset marks all values Greater than the average
    • Duplicate values - Marks all duplicate values.
    • Unique values - All cell values that are unique will be marked (blue background color).
    Formatação de valores únicos
    • 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:
    O texto contém formatação
    • 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 Descrição Argumentos
    ConditionalFormattingType Uma enumeração, que representa os tipos de formatação condicional
    IFormatColors Uma interface, que representa as cores de formatação
    formatter: string Uma propriedade input, que define/obtém o tipo de formatação atual
    formatColors Uma propriedade de entrada, que define/obtém as cores de formatação atuais val: IFormatColors
    onFormattersReady Um evento, que emite o aplicávelformatting types para os dados selecionados, quando eles são determinados.
    formatCells Aplica formatação condicional para as células selecionadas. Uso:
    this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)    		 formatterName: string, formatRange?: GridSelectionRange [ ],
    reset: boolean (true by default)
    clearFormatting Remove a formatação condicional das células selecionadas. Uso:
    this.conditionalFormatting.clearFormatting()

    IgxChartIntegrationDirective

    API Descrição Argumentos
    CHART_TYPE Uma enumeração, representando os tipos de gráfico com suporte
    OPTIONS_TYPE Uma enumeração, representando o tipo de opções com suporte, que pode ser aplicada a um componente de gráfico
    IOptions Uma interface para opções de propriedades de gráfico
    chartFactory Cria um componente de gráfico, com base no tipo de gráfico fornecido. Uso:
    this.chartIntegration.chartFactory(CHART_TYPE. COLUMN_GROUPED, this.viewContainerRef)    		 type: qualquer [ ], viewContainerRef:ViewContainerRef
    setChartComponentOptions Define as opções de propriedade como um componente de gráfico. Uso:
    this.chartIntegration.setChartComponentOptions(CHART_TYPE. TORTA, OPTIONS_TYPE. CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } })    		 chart: CHART_TYPE, optionsType: OPTIONS_TYPE, options: IOptions
    getAvailableCharts Retorna os tipos de gráfico habilitados
    enableCharts Habilita os tipos de gráfico fornecidos. Por padrão, todos os tipos de gráfico estão ativados types: CHART_TYPE [ ]
    disableCharts Desabilita os tipos de gráfico fornecidos types: CHART_TYPE [ ]
    onChartTypesDetermined Um evento, emitido quando os tipos de gráfico, aplicáveis para ochartData, são determinados. Esse evento emite um objeto do tipoIDeterminedChartTypesArgs, que possui 2 propriedades:
    chartsAvailabilty: Map<CHART_TYPE, boolean>- os tipos de gráficos habilitados/desabilitados,
    chartsForCreation: CHART_TYPE[]- os tipos de gráfico aplicáveis para ochartData
    onChartCreationDone Um evento, emitido quando um gráfico é criado. Esse evento emite o componente gráfico, que é criado
    chartData: any[ ] Uma propriedade de entrada, que define/obtém os dados para os gráficos selectedData: any[ ]
    useLegend: boolean Uma entrada, que habilita/desabilita o uso da legenda para todos os tipos de gráfico. Por padrão, ele é definido como true
    defaultLabelMemberPath: string Uma propriedade de entrada, que define/obtém o caminho padrão do membro do rótulo para os gráficos. Por padrão, o caminho do membro do rótulo será determinado, com base nos dados fornecidos.
    (se os registros de dados fornecidos tiverem propriedades com valores de cadeia de caracteres, o primeiro nome da propriedade de cadeia de caracteres do primeiro registro de dados nochartData será selecionado como um caminho de membro de rótulo para os gráficos, caso contrário, o caminho do membro de rótulo terá value 'Index'.)​
    scatterChartYAxisValueMemberPath: string Uma propriedade de entrada, que define/obtém o caminho padrão do membro de raio para o gráfico de bolhas de dispersão. Se não for definido, o caminho do membro do valor do eixo Y padrão será o primeiro nome de propriedade numérica do primeiro registro de dados nochartData path: string
    bubbleChartRadiusMemberPath: string Uma propriedade de entrada, que define/obtém o caminho padrão do membro de raio para o gráfico de bolhas de dispersão. Se não for definido, o caminho padrão do membro radius será o segundo nome da propriedade numérica do primeiro registro de dados nochartData path: string

    Useful resources