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 los Ignite UI for Angular diseños, entradas, gráficos y paquetes principales:

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

Los siguientes módulos son necesarios para usar elIgxToolbarComponent con elIgxDataChartComponent componente y sus características.

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 continuación se muestra una lista de los diferentesIgxToolActionComponent elementos que puedes añadir a la barra de herramientas.

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

Cada una de estas herramientas expone unOnCommand evento que se activa con un clic del ratón. Ten en cuenta que elIgxToolActionIconMenuComponent es un envoltorio para otras herramientas que también puede envolverse dentro de unIgxToolActionIconMenuComponent​

Las herramientas nuevas y existentes pueden reposicionarse y marcarse como ocultas usando lasoverlayId​beforeId propiedades yafterId delIgxToolActionComponent objeto. ToolActions también revela unavisibility propiedad.

El siguiente ejemplo muestra un par de características. Primero, puedes agrupar herramientas en elIgxToolActionSubPanelComponent que también ocultar herramientas integradas como las acciones de menú ZoomReset y AnalyzeMenu. En este ejemplo, una nueva instancia de la herramienta ZoomReset actúa dentro del menú ZoomMenu, usando laafterId propiedad y asignándola a ZoomOut para que sea preciso su ubicación. También se resalta mediante laisHighlighted propiedad de la herramienta.

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:

Acciones de zoom

• ZoomMenu: AIgxToolActionIconMenuComponent que expone tresIgxToolActionLabelComponent elementos para invocar loszoomIn métodos yzoomOut en la carta para aumentar/disminuir el nivel de zoom de la carta, incluyendoZoomReset, aIgxToolActionLabelComponent que invoca elresetZoom método en la carta para restablecer el nivel de zoom a su posición predeterminada.

Acciones de tendencia

• AnalyzeMenu: AIgxToolActionIconMenuComponent que contiene varias opciones para configurar diferentes opciones del gráfico.
• AnalyzeHeader: Un encabezado de subsección.
• LinesMenu: Un submenú que contiene varias herramientas para mostrar diferentes líneas horizontales discontinuas en el gráfico.
  • LinesHeader: Un encabezado de sección de submenú para las siguientes tres herramientas:
    • MaxValue: AIgxToolActionCheckboxComponent que muestra una línea horizontal discontinua a lo largo del eje y en el valor máximo de la serie.
    • MinValue: AIgxToolActionCheckboxComponent que muestra una línea horizontal discontinua a lo largo del eje y en el valor mínimo de la serie.
    • Average: AIgxToolActionCheckboxComponent que muestra una línea horizontal discontinua a lo largo del eje y en el valor medio de la serie.
• TrendsMenu: Un submenú que contiene herramientas para aplicar diversas líneas de tendencia alIgxDataChartComponent área del gráfico.
  • TrendsHeader: Un encabezado de sección de submenú para las siguientes tres herramientas:
    • Exponencial: AIgxToolActionRadioComponent que establece eltrendLineType en cada serie del gráfico en Ajustión Exponencial.
    • Lineal: AIgxToolActionRadioComponent que establece eltrendLineType en cada serie del gráfico como LinearFit.
    • Logarítmico: AIgxToolActionRadioComponent que establece eltrendLineType en cada serie del gráfico a LogarítmicoAjuste.
• HelpersHeader: Un encabezado de subsección.
• SeriesAvg: AIgxToolActionCheckboxComponent que añade o elimina aIgxValueLayerComponent a la colección de series del gráfico usando elValueLayerValueMode tipoAverage de .
• ValueLabelsMenu: Un submenú que contiene varias herramientas para mostrar diferentes anotaciones enIgxDataChartComponent el área de la gráfica.
  • ValueLabelsHeader: Un encabezado de sección de submenú para las siguientes herramientas:
    • ShowValueLabels: A que alterna los valores deIgxToolActionCheckboxComponent los puntos de datos usando aIgxCalloutLayerComponent.
    • ShowLastValueLabel: AIgxToolActionCheckboxComponent que desactiva las anotaciones del eje de valores finales usando aIgxFinalValueLayerComponent.
• ShowCrosshairs: AIgxToolActionCheckboxComponent que alterna el ratón sobre las anotaciones de la mira mediante la propiedad delcrosshairsDisplayMode gráfico.
• ShowGridlines: AIgxToolActionCheckboxComponent que alterna líneas de rejilla adicionales aplicando aMajorStroke al eje X.

Acción Guardar en imagen

• CopyAsImage: AIgxToolActionLabelComponent que expone una opción para copiar la carta al portapapeles.
• CopyHeader: Un encabezado de subsección.

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 similar a añadir svg, también puedes añadir una imagen de icono desde una URL a través de elregisterIconFromDataURL. El tercer parámetro del método se usaría para introducir una URL de cadena.

En el siguiente fragmento de código se muestran ambos métodos para agregar un icono.

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

El siguiente ejemplo demuestra la orientación vertical de la barra de herramientas Angular.

Color Editor

Puede agregar una herramienta de editor de color personalizada a la barra de herramientas Angular, que también funcionará con el evento Command para realizar un estilo personalizado en la aplicación.

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

En el ejemplo siguiente se muestra el estilo del pincel de la serie Angular Gráfico de datos con la herramienta Editor de color.

API References

• IgxToolbarComponent
• IgxDataChartComponent

Additional Resources

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub