Web Components Toolbar Overview
The Web Components 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 IgcDataChartComponent
or IgcCategoryChartComponent
components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
Web Components Toolbar Example
Dependencies
Install the Ignite UI for Web Components layouts, inputs, charts and core packages:
npm install igniteui-webcomponents-layouts
npm install igniteui-webcomponents-inputs
npm install igniteui-webcomponents-charts
npm install igniteui-webcomponents-core
The following modules are required when using the IgcToolbarComponent
with the IgcDataChartComponent
component and it's features.
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';
ModuleManager.register(
IgcToolbarModule,
IgcToolActionLabelModule,
IgcDataChartToolbarModule,
IgcDataChartCategoryModule,
IgcDataChartCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcDataChartCategoryTrendLineModule
);
Usage
Tool Actions
The following is a list of the different IgcToolActionComponent
items that you can add to the Toolbar.
IgcToolActionButtonComponent
IgcToolActionCheckboxComponent
IgcToolActionIconButtonComponent
IgcToolActionIconMenuComponent
IgcToolActionLabelComponent
IgcToolActionNumberInputComponent
IgcToolActionRadioComponent
IgcToolActionSubPanelComponent
Each of these tools exposes an OnCommand
event that is triggered by mouse click. Note, the IgcToolActionIconMenuComponent
is a wrapper for other tools that can also be wrapped inside a IgcToolActionIconMenuComponent
.
New and existing tools can be repositioned and marked hidden using the overlayId
, beforeId
and afterId
properties on the IgcToolActionComponent
object. ToolActions also expose a visibility
property.
The following example demonstrates a couple of features. First you can group tools together in the IgcToolActionSubPanelComponent
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 is added and placed within the ZoomMenu by using the the afterId
property and assigning that to ZoomOut. It is also highlighted via the isHighlighted
property on the tool. This will ensure the new Reset tool is promptly displayed at the bottom of the ZoomMenu.
Web Components Data Chart Integration
The Web Components Toolbar contains a Target
property. This is used to link a component, such as the IgcDataChartComponent
as shown in the code below:
<div>
<igc-toolbar
name="Toolbar"
id="Toolbar">
</igc-toolbar>
</div>
<div class="container fill">
<igc-data-chart
is-horizontal-zoom-enabled="true"
name="chart"
id="chart">
</igc-data-chart>
</div>
private _bind: () => void;
constructor() {
var toolbar = this.toolbar = document.getElementById('Toolbar') as IgcToolbarComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
this._bind = () => {
toolbar.target = this.chart;
}
this._bind();
}
Several pre-existing IgcToolActionComponent
items and menus become available when the IgcDataChartComponent
is linked with the Toolbar. Here is a list of the built-in Web Components IgcDataChartComponent
Tool Actions and their associated overlayId
:
Zooming Actions
ZoomReset
: AIgcToolActionLabelComponent
that invokes theresetZoom
method on the chart to reset the zoom level to it's default position.ZoomMenu
: AIgcToolActionIconMenuComponent
that exposes twoIgcToolActionLabelComponent
items to invoke thezoomIn
andzoomOut
methods on the chart for increasing/decreasing the chart's zoom level.
Trend Actions
AnalyzeMenu
: AIgcToolActionIconMenuComponent
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
: AIgcToolActionCheckboxComponent
that displays a dashed horizontal line along the yAxis at the maximum value of the series.MinValue
: AIgcToolActionCheckboxComponent
that displays a dashed horizontal line along the yAxis at the minimum value of the series.Average
: AIgcToolActionCheckboxComponent
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 theIgcDataChartComponent
plot area.TrendsHeader
: A sub menu section header for the following three tools:- Exponential: A
IgcToolActionRadioComponent
that sets thetrendLineType
on each series in the chart to ExponentialFit. - Linear: A
IgcToolActionRadioComponent
that sets thetrendLineType
on each series in the chart to LinearFit. - Logarithmic: A
IgcToolActionRadioComponent
that sets thetrendLineType
on each series in the the chart to LogarithmicFit.
- Exponential: A
HelpersHeader
: A sub section header.SeriesAvg
: AIgcToolActionCheckboxComponent
that adds or removes aIgcValueLayerComponent
to the chart's series collection using theValueLayerValueMode
of typeAverage
.ValueLabelsMenu
: A sub menu containing various tools for showing different annotations on theIgcDataChartComponent
's plot area.ValueLabelsHeader
: A sub menu section header for the following tools:ShowValueLabels
: AIgcToolActionCheckboxComponent
that toggles data point values by using aIgcCalloutLayerComponent
.ShowLastValueLabel
: AIgcToolActionCheckboxComponent
that toggles final value axis annotations by using aIgcFinalValueLayerComponent
.
ShowCrosshairs
: AIgcToolActionCheckboxComponent
that toggles mouse-over crosshair annotations via the chart'scrosshairsDisplayMode
property.ShowGridlines
: AIgcToolActionCheckboxComponent
that toggles extra gridlines by applying aMajorStroke
to the X-Axis.
Save to Image Action
CopyAsImage
: AIgcToolActionLabelComponent
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.
The following snippet shows both methods of adding an Icon.
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");
}
<igc-tool-action-label
title="Custom Icon"
icon-name="CustomIcon"
icon-collection-name="CustomCollection">
</igc-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");
}
@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 Web Components Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the orientation
property.
<igc-toolbar orientation="Vertical" />
The following example demonstrates the vertical orientation of the Web Components Toolbar.
Editor de cores
You can add a custom color editor tool to the the Web Components Toolbar, which will also work with the Command event to perform custom styling to your application.
<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>
The following example demonstrates styling the Web Components Data Chart series brush with the Color Editor tool.