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

The following modules are required when using the IgxToolbarComponent with the IgxDataChartComponent component and it's features.

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

The following is a list of the different IgxToolActionComponent items that you can add to the Toolbar.

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

Each of these tools exposes an OnCommand event that is triggered by mouse click. Note, the IgxToolActionIconMenuComponent is a wrapper for other tools that can also be wrapped inside a IgxToolActionIconMenuComponent.

New and existing tools can be repositioned and marked hidden using the overlayId, beforeId and afterId properties on the IgxToolActionComponent object. ToolActions also expose a visibility property.

The following example demonstrates a couple of features. First you can group tools together in the IgxToolActionSubPanelComponent including hiding built in tools such as the ZoomReset and AnalyzeMenu menu tool actions. In this example a new instance of the ZoomReset tool action within the ZoomMenu by using the the afterId property and assigning that to ZoomOut to be precise with it's placement. It is also highlighted via the isHighlighted property on the tool.

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: A IgxToolActionIconMenuComponent that exposes three IgxToolActionLabelComponent items to invoke the zoomIn and zoomOut methods on the chart for increasing/decreasing the chart's zoom level including ZoomReset, a IgxToolActionLabelComponent that invokes the resetZoom method on the chart to reset the zoom level to it's default position.

Acciones de tendencia

• AnalyzeMenu: A IgxToolActionIconMenuComponent that contains several options for configuring different options of the chart.
• AnalyzeHeader: A sub section header.
• LinesMenu: A sub menu containing various tools for showing different dashed horizontal lines on the chart.
  • LinesHeader: A sub menu section header for the following three tools:
    • MaxValue: A IgxToolActionCheckboxComponent that displays a dashed horizontal line along the yAxis at the maximum value of the series.
    • MinValue: A IgxToolActionCheckboxComponent that displays a dashed horizontal line along the yAxis at the minimum value of the series.
    • Average: A IgxToolActionCheckboxComponent that displays a dashed horizontal line along the yAxis at the average value of the series.
• TrendsMenu: A sub menu containing tools for applying various trendlines to the IgxDataChartComponent plot area.
  • TrendsHeader: A sub menu section header for the following three tools:
    • Exponential: A IgxToolActionRadioComponent that sets the trendLineType on each series in the chart to ExponentialFit.
    • Linear: A IgxToolActionRadioComponent that sets the trendLineType on each series in the chart to LinearFit.
    • Logarithmic: A IgxToolActionRadioComponent that sets the trendLineType on each series in the the chart to LogarithmicFit.
• HelpersHeader: A sub section header.
• SeriesAvg: A IgxToolActionCheckboxComponent that adds or removes a IgxValueLayerComponent to the chart's series collection using the ValueLayerValueMode of type Average.
• ValueLabelsMenu: A sub menu containing various tools for showing different annotations on the IgxDataChartComponent's plot area.
  • ValueLabelsHeader: A sub menu section header for the following tools:
    • ShowValueLabels: A IgxToolActionCheckboxComponent that toggles data point values by using a IgxCalloutLayerComponent.
    • ShowLastValueLabel: A IgxToolActionCheckboxComponent that toggles final value axis annotations by using a IgxFinalValueLayerComponent.
• ShowCrosshairs: A IgxToolActionCheckboxComponent that toggles mouse-over crosshair annotations via the chart's crosshairsDisplayMode property.
• ShowGridlines: A IgxToolActionCheckboxComponent that toggles extra gridlines by applying a MajorStroke to the X-Axis.

Acción Guardar en imagen

• CopyAsImage: A IgxToolActionLabelComponent that exposes an option to copy the chart to the clipboard.
• CopyHeader: A sub section header.

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

Similarly to adding svg, you can also add an Icon image from a URL via the registerIconFromDataURL. The method's third parameter would be used to enter a string URL.

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