Angular Toolbar Overview

The Angular Toolbar component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our IgxDataChartComponent or IgxCategoryChartComponent components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.

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 seguintes módulos são necessários ao usar oIgxToolbarComponent com oIgxDataChartComponent componente e suas funcionalidades.

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

A seguir está uma lista dos diferentesIgxToolActionComponent itens que você pode adicionar à Barra de Ferramentas.

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

Cada uma dessas ferramentas expõe umOnCommand evento que é acionado por um clique do mouse. Note que oIgxToolActionIconMenuComponent é um wrapper para outras ferramentas que também pode ser envolvido dentro de umIgxToolActionIconMenuComponent.

Ferramentas novas e existentes podem ser reposicionadas e marcadas como ocultas usando asoverlayId​beforeId propriedades eafterId noIgxToolActionComponent objeto. As ToolActions também expõem umavisibility propriedade.

O exemplo a seguir demonstra algumas características. Primeiro, você pode agrupar ferramentasIgxToolActionSubPanelComponent em conjunto incluindo ocultar ferramentas integradas, como as ações do menu ZoomReset e AnalyzeMenu. Neste exemplo, uma nova instância da ferramenta ZoomReset é acionada dentro do ZoomMenu, usando aafterId propriedade e atribuindo isso ao ZoomOut para ser preciso em sua posição. Também é destacado pelaisHighlighted propriedade na ferramenta.

Angular Data Chart Integration

The Angular Toolbar contains a Target property. This is used to link a component, such as the IgxDataChartComponent as shown in the code below:

  <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>

Several pre-existing IgxToolActionComponent items and menus become available when the IgxDataChartComponent is linked with the Toolbar. Here is a list of the built-in Angular IgxDataChartComponent Tool Actions and their associated overlayId:

Ações de zoom

• ZoomMenu: AIgxToolActionIconMenuComponent que expõe trêsIgxToolActionLabelComponent itens para invocar oszoomIn métodos ezoomOut no gráfico para aumentar/diminuir o nível de zoom do gráfico, incluindoZoomReset, aIgxToolActionLabelComponent que invoca oresetZoom método no gráfico para redefinir o nível de zoom para sua posição padrão.

Ações de tendência

• AnalyzeMenu: AIgxToolActionIconMenuComponent 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 seguintes três ferramentas:
    • MaxValue: AIgxToolActionCheckboxComponent que exibe uma linha horizontal tracejada ao longo do eixo y no valor máximo da série.
    • MinValue: AIgxToolActionCheckboxComponent que exibe uma linha horizontal tracejada ao longo do eixo y, no valor mínimo da série.
    • Average: AIgxToolActionCheckboxComponent que exibe uma linha horizontal tracejada ao longo do eixo y no valor médio da série.
• TrendsMenu: Um submenu contendo ferramentas para aplicar várias linhas de tendência àIgxDataChartComponent área do gráfico.
  • TrendsHeader: Um cabeçalho de seção de submenu para as seguintes três ferramentas:
    • Exponencial: AIgxToolActionRadioComponent que define otrendLineType em cada série do gráfico para ExponentialFit.
    • Linear: AIgxToolActionRadioComponent que define otrendLineType em cada série do gráfico como LinearFit.
    • Logarítmico: AIgxToolActionRadioComponent que define otrendLineType em cada série do gráfico para LogarítmicoAjuste.
• HelpersHeader: Um cabeçalho de subseção.
• SeriesAvg: AIgxToolActionCheckboxComponent que adiciona ou remove aIgxValueLayerComponent à coleção de séries do gráfico usando oValueLayerValueMode tipoAverage de .
• ValueLabelsMenu: Um submenu contendo várias ferramentas para mostrar diferentes anotações naIgxDataChartComponent área do enredo.
  • ValueLabelsHeader: Um cabeçalho de seção de submenu para as seguintes ferramentas:
    • ShowValueLabels: AIgxToolActionCheckboxComponent que alterna entre os valores dos pontos de dados usando aIgxCalloutLayerComponent.
    • ShowLastValueLabel: AIgxToolActionCheckboxComponent que alterna as anotações do eixo de valores finais usando aIgxFinalValueLayerComponent.
• ShowCrosshairs: AIgxToolActionCheckboxComponent que alterna o mouse sobre as anotações da mira via propriedade docrosshairsDisplayMode gráfico.
• ShowGridlines: AIgxToolActionCheckboxComponent que alterna linhas de grade extras aplicando aMajorStroke ao eixo X.

Ação Salvar na imagem

• CopyAsImage: AIgxToolActionLabelComponent que expõe uma opção para copiar o gráfico para a prancheta.
• CopyHeader: Um cabeçalho de subseção.

SVG Icons

When adding tools manually, icons can be assigned using the RenderIconFromText method. There are three paramters to pass in this method. The first is the icon collection name defined on the tool eg. iconCollectionName. The second is the name of the icon defined on the tool eg. iconName, followed by adding the SVG string.

Data URL Icons

De forma semelhante à adição do svg, você também pode adicionar uma imagem de ícone a partir de uma URL via oregisterIconFromDataURL. O terceiro parâmetro do método seria usado para inserir uma URL de string.

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

By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the orientation property.

<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