Visão geral da barra de ferramentas do React

O componente React Barra de Ferramentas é um contêiner companheiro para operações de interface a serem usados principalmente com nossos componentes de gráficos. A barra de ferramentas será atualizada dinamicamente com um pré-definido de propriedades e itens da ferramenta quando vinculada aos nossosIgrDataChart componentes ouIgrCategoryChart OR. Você poderá criar ferramentas personalizadas para seu projeto, permitindo que os usuários finais façam alterações, oferecendo uma quantidade infinita de personalização.

React Toolbar Example

Dependências

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

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

Os seguintes módulos são necessários ao usar oIgrToolbar com oIgrDataChart componente e suas funcionalidades.

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();

Uso

Tool Actions

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

• IgrToolActionButton
• IgrToolActionCheckbox
• IgrToolActionIconButton
• IgrToolActionIconMenu
• IgrToolActionLabel
• IgrToolActionNumberInput
• IgrToolActionRadio
• IgrToolActionSubPanel

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

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

O exemplo a seguir demonstra algumas características. Primeiro, você pode agrupar ferramentasIgrToolActionSubPanel 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.

React Data Chart Integration

A barra de ferramentas React contém umaTarget propriedade. Isso é usado para vincular um componente, comoIgrDataChart mostrado no código abaixo:

  private toolbar: IgrToolbar
  private toolbarRef(r: IgrToolbar) {
      this.toolbar = r;
      this.setState({});
  }
  private chart: IgrDataChart
  private chartRef(r: IgrDataChart) {
      this.chart = r;
      this.toolbar.target = this.chart;
      this.setState({});
  }
  public render(): JSX.Element {
        return (
      <div>
        <IgrToolbar
          ref={this.toolbarRef}>
        </IgrToolbar>
      </div>

      <div>
        <IgrDataChart
          ref={this.chartRef}>
        </IgrDataChart>
      </div>
    );
  }

Vários itens e menus pré-existentesIgrToolAction ficam disponíveis quando elesIgrDataChart são vinculados à Barra de Ferramentas. Aqui está uma lista das Ações ReactIgrDataChart Ferramentas integradas e suas associadasoverlayId:

Ações de zoom

• ZoomMenu: AIgrToolActionIconMenu que expõe trêsIgrToolActionLabel itens para invocar oszoomIn métodos ezoomOut no gráfico para aumentar/diminuir o nível de zoom do gráfico, incluindoZoomReset, aIgrToolActionLabel 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: AIgrToolActionIconMenu 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: AIgrToolActionCheckbox que exibe uma linha horizontal tracejada ao longo do eixo y no valor máximo da série.
    • MinValue: AIgrToolActionCheckbox que exibe uma linha horizontal tracejada ao longo do eixo y, no valor mínimo da série.
    • Average: AIgrToolActionCheckbox 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 àIgrDataChart área do gráfico.
  • TrendsHeader: Um cabeçalho de seção de submenu para as seguintes três ferramentas:
    • Exponencial: AIgrToolActionRadio que define otrendLineType em cada série do gráfico para ExponentialFit.
    • Linear: AIgrToolActionRadio que define otrendLineType em cada série do gráfico como LinearFit.
    • Logarítmico: AIgrToolActionRadio que define otrendLineType em cada série do gráfico para LogarítmicoAjuste.
• HelpersHeader: Um cabeçalho de subseção.
• SeriesAvg: AIgrToolActionCheckbox que adiciona ou remove aIgrValueLayer à coleção de séries do gráfico usando oValueLayerValueMode tipoAverage de .
• ValueLabelsMenu: Um submenu contendo várias ferramentas para mostrar diferentes anotações naIgrDataChart área do enredo.
  • ValueLabelsHeader: Um cabeçalho de seção de submenu para as seguintes ferramentas:
    • ShowValueLabels: AIgrToolActionCheckbox que alterna entre os valores dos pontos de dados usando aIgrCalloutLayer.
    • ShowLastValueLabel: AIgrToolActionCheckbox que alterna as anotações do eixo de valores finais usando aIgrFinalValueLayer.
• ShowCrosshairs: AIgrToolActionCheckbox que alterna o mouse sobre as anotações da mira via propriedade docrosshairsDisplayMode gráfico.
• ShowGridlines: AIgrToolActionCheckbox que alterna linhas de grade extras aplicando aMajorStroke ao eixo X.

Ação Salvar na imagem

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

Ícones SVG

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.

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 React é mostrada horizontalmente, mas também tem a capacidade de ser exibida verticalmente ao definir aorientation propriedade.

<IgrToolbar orientation="Vertical" />

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

Editor de cores

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

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

<IgrToolbar
    ref={this.toolbarRef}
    target={this.chart}>
    <IgrToolActionColorEditor
        title="Series Brush Color"
        name="colorEditorTool">
    </IgrToolActionColorEditor>
</IgrToolbar>

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

Referências de API

• IgrToolbar
• IgrDataChart

Recursos adicionais

• Ignite UI for React Forums
• Ignite UI for React GitHub