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

    Vá em frente e realize umcell range selection oucolumn selection para ativar oChart types view com base nos dados selecionados. Esta visão faz parte do painel direito do Dock Manager. A partir daí, você pode:

    • Escolha o tipo de gráfico específico e visualize-o em um painel separado.
    • Ou use oData Analysis botão de contexto para mostrar diferentes opções de formatação de texto.

    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.
    • Se a seleção de intervalo multi-célula for aplicada, apenas aText formatting funcionalidade estará disponível.
    • 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:
      • Adicione issoIgxExtrasModule ao seu app.module.ts
      • ApliqueigxChartIntegration​igxConditionalFormatting​igxContextMenu diretivas à sua grade
    <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

    Se você tiver uma grade com milhares de linhas de dados, seria muito difícil ver padrões e tendências apenas examinando as informações brutas. Semelhante a gráficos e linhas de faísca,Conditional formatting oferece outra forma de visualizar dados e facilitar a compreensão.

    Entender formatação condicional - ela permite aplicar formatação como cores e barras de dados a células com base natheir value seleção do intervalo. O exemplo abaixo demonstra como você pode configurar a Grade para se aplicarConditional Formatting. Depende daConditional formatting selection type condiçãorules que será mostrada. Abaixo, você encontrará os estilos predefinidos (presets) que pode ser usado para aplicar rapidamente formatação condicional aos seus dados. A formatação de um intervalo é liberada ao realizar a formatação em diferentes intervalos ou através do botão de liberar. O botão de limpar só está ativo quando há uma formatação aplicada.

    Number range selection

    • Data Bars- As barras de dados podem ajudar a identificar números maiores ou menores, como produtos mais vendidos e mais baratos. Esse preset facilita muito a visualização de valores em uma faixa de células selecionadas. Uma barra mais longa representa um valor maior. Uma célula que possui valor 0 não tem barra de dados, todas as outras células são preenchidas proporcionalmente. Valores positivos são comgreen cor e valores negativos serãored
    Formatação das barras de dados

    Lowest threshold- Abaixo de 33% do valor máximo da célula na seleção de alcance.Highest threshold- Acima de 66% do valor máximo da célula na seleção de alcance.

    Formatação em escala de cores
    • Top 10%- Use esse preset para destacar os valores que são equivalentes aos 10% superiores dos dados selecionados.
    Top 10% de formatação
    • Greater than- Este preset marca todos os valoresGreater than the average
    • Duplicate values- Marca todos os valores duplicados.
    • Unique values- Todos os valores de células que são únicos serão marcados (bluecor de fundo).
    Formatação de valores únicos
    • Empty- Marca todas as células comundefined valores

    Text range selection

    • Text contains- Marca todas as células que contêm o valor da célula a partir de.top-left most selected cell Exemplo:
    O texto contém formatação
    • Duplicate values- Marca todos os valores duplicados.
    • Unique values- Todos os valores de células que são únicos serão marcados (bluecor de fundo).
    • Empty- Marca todas as células comundefined valores

    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