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 execute um cell range selection ou column selection para habilitar o Chart types view com base nos dados selecionados. Essa visualizaçã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 o botão de Data Analysis 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 de várias células for aplicada, somente a Text 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 o IgxExtrasModule ao seu app.module.ts
      • Aplicar igxChartIntegration diretivas igxConditionalFormatting​ ​igxContextMenu à 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:

    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 minigráficos, Conditional formatting fornece outra maneira de visualizar dados e torná-los mais fáceis de entender.

    Noções básicas sobre formatação condicional - permite aplicar formatação como cores e barras de dados a células com base na their value seleção de intervalo. O exemplo abaixo demonstra como você pode configurar a Grade para aplicar Conditional Formatting. Depende da Conditional formatting selection type condição rules que será mostrada. Abaixo, você encontrará os estilos predefinidos (predefinições) que você pode usar para aplicar rapidamente a formatação condicional aos seus dados. A formatação de um intervalo é limpa ao executar a formatação em um intervalo diferente ou por meio do botão limpar. O botão limpar só está ativo quando há uma formatação aplicada.

    Number range selection

    • Data Bars- As barras de dados podem ajudar você a identificar números maiores e menores, como produtos mais vendidos e mais vendidos. Essa predefinição facilita muito a visualização de valores em um intervalo de células selecionadas. Uma barra mais longa representa um valor mais alto. Uma célula que contém o valor 0 não tem barra de dados, todas as outras células são preenchidas proporcionalmente. Os valores positivos são com green cor e os valores negativos serão red
    • Color Scale- A tonalidade da cor representa o valor na célula. As células que contêm valores abaixo do *Lowest threshold serão coloridas red. As células que estão acima do *Highest threshold serão coloridas green. E todas as células que estão entre o Lowest e Highest threshold serão coloridas yellow.

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

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

    • Top 10%- Use essa predefinição para destacar os valores equivalentes aos 10% principais dos dados selecionados.
    • Greater than- Esta predefinição marca todos os valores Greater than the avarege
    • Duplicate values- Marca todos os valores duplicados.
    • Unique values- Todos os valores de célula exclusivos serão marcados (blue cor de fundo).
    • Empty- Marca todas as células com undefined valores

    Text range selection

    • Text contains- Marca todas as células que contêm o valor da célula do top-left most selected cell. Exemplo:
    • Duplicate values- Marca todos os valores duplicados.
    • Unique values- Todos os valores de célula exclusivos serão marcados (blue cor de fundo).
    • Empty- Marca todas as células com undefined 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.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars)    		 formatterName: string, formatRange?: GridSelectionRange [ ],
    reset: boolean (true by default)
    clearFormatting Remove a formatação condicional das células selecionadas. Uso:
    this.conditonalFormatting.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