Angular Toolbar Overview

O componente Barra de ferramentas do Angular é um contêiner complementar para operações de interface do usuário a serem usadas principalmente com nossos componentes de gráficos. A barra de ferramentas será atualizada dinamicamente com uma predefinição de propriedades e itens de ferramenta quando vinculada aos nossos IgxDataChartComponent componentes ou IgxCategoryChartComponent componentes. Você poderá criar ferramentas personalizadas para o seu projeto, permitindo que os usuários finais forneçam alterações, oferecendo uma quantidade infinita de personalização.

Angular Toolbar Example

Dependencies

Instale os Ignite UI for Angular layouts, entradas, gráficos e pacotes principais:

npm install igniteui-angular-layouts
npm install igniteui-angular-inputs
npm install igniteui-angular-charts
npm install igniteui-angular-core

Os módulos a seguir são necessários ao usar o IgxToolbarComponent com o IgxDataChartComponent componente e seus recursos.

import { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule  } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxToolbarModule,
        IgxDataChartToolbarModule,
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        IgxDataChartAnnotationModule,
        IgxDataChartInteractivityModule,
        IgxDataChartCategoryTrendLineModule
        // ...
    ]
})
export class AppModule {}

import { IgxToolbarModule } from 'igniteui-react-layouts';
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule  } from 'igniteui-react-charts';

IgxToolbarModule.register();
IgrDataChartToolbarModule.register();
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartAnnotationModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartCategoryTrendLineModule.register();

Usage

Tool Actions

Veja a seguir uma lista dos diferentes IgxToolActionComponent itens que você pode adicionar à barra de ferramentas.

• IgxToolActionButtonComponent
• IgxToolActionCheckboxComponent
• IgxToolActionIconButtonComponent
• IgxToolActionIconMenuComponent
• IgxToolActionLabelComponent
• IgxToolActionNumberInputComponent
• IgxToolActionRadioComponent
• IgxToolActionSubPanelComponent

Cada uma dessas ferramentas expõe um OnCommand evento que é acionado pelo clique do mouse. Observe que o IgxToolActionIconMenuComponent é um invólucro para outras ferramentas que também podem ser agrupadas dentro de um IgxToolActionIconMenuComponent.

Ferramentas novas e existentes podem ser reposicionadas e marcadas como ocultas usando as overlayId propriedades , beforeId and afterId no IgxToolActionComponent objeto. ToolActions também expõem uma visibility propriedade.

O exemplo a seguir demonstra alguns recursos. Primeiro, IgxToolActionSubPanelComponent você pode agrupar ferramentas no incluindo ocultação de ferramentas internas, como as ações de ferramenta de menu ZoomReset e AnalyzeMenu. Neste exemplo, uma nova instância da ação da ferramenta ZoomReset é adicionada e colocada no ZoomMenu usando a propriedade the e atribuindo-a afterId a ZoomOut. Também é destacado por meio da isHighlighted propriedade na ferramenta. Isso garantirá que a nova ferramenta Redefinir seja exibida imediatamente na parte inferior do ZoomMenu.

Angular Data Chart Integration

A barra de ferramentas Angular contém uma Target propriedade. Isso é usado para vincular um componente, como o IgxDataChartComponent mostrado no código abaixo:

  <div class="legend">
    <igx-toolbar
      name="toolbar"
      [target]="chart"
      #toolbar>
    </igx-toolbar>
  </div>
  <div class="container fill">
    <igx-data-chart
    name="chart"
    #chart>
  </igx-data-chart>

Vários itens e menus pré-existentes IgxToolActionComponent ficam disponíveis quando o IgxDataChartComponent está vinculado à barra de ferramentas. Aqui está uma lista das ações internas da ferramenta Angular IgxDataChartComponent e suas associadas overlayId:

Ações de zoom

• ZoomReset: Um IgxToolActionLabelComponent que invoca o resetZoom método no gráfico para redefinir o nível de zoom para sua posição padrão.
• ZoomMenu: A IgxToolActionIconMenuComponent que expõe dois IgxToolActionLabelComponent itens para invocar os zoomIn métodos e zoomOut no gráfico para aumentar/diminuir o nível de zoom do gráfico.

Ações de tendência

• AnalyzeMenu: Um IgxToolActionIconMenuComponent que contém várias opções para configurar diferentes opções do gráfico.
• AnalyzeHeader: Um cabeçalho de subseção.
• LinesMenu: Um submenu contendo várias ferramentas para mostrar diferentes linhas horizontais tracejadas no gráfico.
  • LinesHeader: Um cabeçalho de seção de submenu para as três ferramentas a seguir:
    • MaxValue: A IgxToolActionCheckboxComponent que exibe uma linha horizontal tracejada ao longo do eixo y no valor máximo da série.
    • MinValue: A IgxToolActionCheckboxComponent que exibe uma linha horizontal tracejada ao longo do eixo y no valor mínimo da série.
    • Average: A IgxToolActionCheckboxComponent que exibe uma linha horizontal tracejada ao longo do eixo y no valor médio da série.
• TrendsMenu: A sub menu containing tools for applying various trendlines to the IgxDataChartComponent plot area.
  • TrendsHeader: Um cabeçalho de seção de submenu para as três ferramentas a seguir:
    • Exponencial: Um IgxToolActionRadioComponent que define o trendLineType em cada série no gráfico como ExponentialFit.
    • Linear: Um IgxToolActionRadioComponent que define o trendLineType em cada série no gráfico como LinearFit.
    • Logarítmico: Um IgxToolActionRadioComponent que define o trendLineType em cada série no gráfico como LogarithmicFit.
• HelpersHeader: Um cabeçalho de subseção.
• SeriesAvg: A IgxToolActionCheckboxComponent que adiciona ou remove a IgxValueLayerComponent à coleção de séries do gráfico usando o ValueLayerValueMode tipo Average of.
• ValueLabelsMenu: Um submenu contendo várias ferramentas para mostrar diferentes anotações na IgxDataChartComponent área de plotagem.
  • ValueLabelsHeader: Um cabeçalho de seção de submenu para as seguintes ferramentas:
    • ShowValueLabels: A IgxToolActionCheckboxComponent que alterna valores de ponto de dados usando a IgxCalloutLayerComponent.
    • ShowLastValueLabel: A IgxToolActionCheckboxComponent que alterna as anotações do eixo do valor final usando a IgxFinalValueLayerComponent.
• ShowCrosshairs: Um IgxToolActionCheckboxComponent que alterna as anotações de mira do mouse por meio da propriedade do crosshairsDisplayMode gráfico.
• ShowGridlines: A IgxToolActionCheckboxComponent que alterna linhas de grade extras aplicando a MajorStroke ao eixo X.

Ação Salvar na imagem

• CopyAsImage: A IgxToolActionLabelComponent que expõe uma opção para copiar o gráfico para a área de transferência.
• CopyHeader: Um cabeçalho de subseção.

SVG Icons

Ao adicionar ferramentas manualmente, os ícones podem ser atribuídos usando o RenderIconFromText método. Existem três parâmetros a serem aprovados neste método. O primeiro é o nome da coleção de ícones definido na ferramenta, por exemplo. iconCollectionName O segundo é o nome do ícone definido na ferramenta, por exemplo iconName, seguido pela adição da string SVG.

Data URL Icons

Da mesma forma que adicionar svg, você também pode adicionar uma imagem de ícone de um URL por meio do RegisterIconFromDataURL. O terceiro parâmetro do método seria usado para inserir uma URL de cadeia de caracteres.

O snippet a seguir mostra os dois métodos de adição de um ícone.

<igx-tool-action-label
    title="Custom Icon"
    iconName="CustomIcon"
    iconCollectionName="CustomCollection">
</igx-tool-action-label>

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
  
  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
}

public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");

}

public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';

  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);

}

public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
  
}

@code {

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var toolbar = this.toolbar;

    if (firstRender) {
        this.ToolbarCustomIconOnViewInit();
    }
}

private IgbToolbar toolbar;

public void ToolbarCustomIconOnViewInit()
{
	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
	{
        this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
	}));
}

}

```tsx
<IgrToolbar orientation="Vertical" />

Vertical Orientation

Por padrão, a barra de ferramentas Angular é mostrada horizontalmente, mas também tem a capacidade de ser mostrada verticalmente definindo a orientation propriedade.

<igx-toolbar orientation="Vertical" />

O exemplo a seguir demonstra a orientação vertical da barra de ferramentas Angular.

Editor de cores

Você pode adicionar uma ferramenta de edição de cores personalizada à barra de ferramentas Angular, que também funcionará com o evento Command para executar um estilo personalizado em seu aplicativo.

<igx-toolbar
  name="toolbar"
  #toolbar>
      <igx-tool-action-color-editor
      title="Series Brush"
      name="colorEditorTool"
      #colorEditorTool>
      </igx-tool-action-color-editor>
</igx-toolbar>

<igc-toolbar
  name="toolbar"
  id="toolbar">
      <igc-tool-action-color-editor
      title="Series Brush Color"
      name="colorEditorTool"
      id="colorEditorTool">
      </igc-tool-action-color-editor>
</igc-toolbar>

O exemplo a seguir demonstra o estilo do pincel da série Gráfico de Dados do Angular com a ferramenta Editor de Cores.

API References

• IgxToolbarComponent
• IgxDataChartComponent

Additional Resources

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub