Descripción general de la barra de herramientas de React

El componente React barra de herramientas es un contenedor complementario para las operaciones de la interfaz de usuario que se usará principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará dinámicamente con un ajuste preestablecido de propiedades y elementos de herramienta cuando se vincule a nuestros IgrDataChart componentes o IgrCategoryChart. Podrá crear herramientas personalizadas para su proyecto, lo que permitirá a los usuarios finales proporcionar cambios, ofreciendo una cantidad infinita de personalización.

React Toolbar Example

dependencias

Instale los Ignite UI for React diseños, entradas, gráficos y paquetes principales:

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

Los siguientes módulos son necesarios cuando se utiliza el IgrToolbar​ ​IgrDataChart componente y sus características.

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 continuación se muestra una lista de los diferentes IgrToolAction elementos que puede agregar a la barra de herramientas.

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

Cada una de estas herramientas expone un OnCommand evento que se desencadena al hacer clic del mouse. Tenga en cuenta que es IgrToolActionIconMenu un envoltorio para otras herramientas que también se pueden envolver dentro de un IgrToolActionIconMenu.

Las herramientas nuevas y existentes se pueden reposicionar y marcar como ocultas utilizando las overlayId propiedades y beforeId​ ​afterId del IgrToolAction objeto. ToolActions también expone una visibility propiedad.

En el ejemplo siguiente se muestran un par de características. En primer lugar, puede agrupar herramientas en las IgrToolActionSubPanel herramientas integradas de ocultación, incluidas las acciones de la herramienta de menú ZoomReset y AnalyzeMenu. En este ejemplo, una nueva instancia de la acción de la herramienta ZoomReset dentro de ZoomMenu mediante el uso de la afterId propiedad y asignándola a ZoomOut para ser precisos con su ubicación. También se resalta a través de la isHighlighted propiedad de la herramienta.

React Data Chart Integration

La barra de herramientas React contiene una Target propiedad. Esto se utiliza para vincular un componente, como se IgrDataChart muestra en el código a continuación:

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

Varios elementos y menús preexistentes IgrToolAction están disponibles cuando se IgrDataChart vincula con la barra de herramientas. A continuación, se muestra una lista de las acciones de herramienta React IgrDataChart integradas y sus asociadas overlayId:

Acciones de zoom

• ZoomMenu: A IgrToolActionIconMenu que expone tres IgrToolActionLabel elementos para invocar el y zoomOut en zoomIn el gráfico para aumentar/disminuir el nivel de zoom del gráfico, incluido ZoomReset un IgrToolActionLabel que invoca el resetZoom método en el gráfico para restablecer el nivel de zoom a su posición predeterminada.

Acciones de tendencia

• AnalyzeMenu: A IgrToolActionIconMenu que contiene varias opciones para configurar diferentes opciones del gráfico.
• AnalyzeHeader: encabezado de una subsección.
• LinesMenu: un submenú que contiene varias herramientas para mostrar diferentes líneas horizontales discontinuas en el gráfico.
  • LinesHeader: encabezado de sección del submenú para las siguientes tres herramientas:
    • MaxValue: A IgrToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor máximo de la serie.
    • MinValue: A IgrToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor mínimo de la serie.
    • Average: A IgrToolActionCheckbox 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 varias líneas de tendencia al área de trazado IgrDataChart.
  • TrendsHeader: encabezado de sección de submenú para las siguientes tres herramientas:
    • Exponencial: A IgrToolActionRadio que establece el trendLineType en cada serie del gráfico en ExponentialFit.
    • Lineal: A IgrToolActionRadio que establece el trendLineType en cada serie del gráfico en LinearFit.
    • Logarítmico: A IgrToolActionRadio que establece el trendLineType en cada serie del gráfico en LogarithmicFit.
• HelpersHeader: encabezado de una subsección.
• SeriesAvg: A IgrToolActionCheckbox que agrega o quita a a a IgrValueLayer la colección de series del gráfico mediante el ValueLayerValueMode tipo Average of.
• ValueLabelsMenu: Un submenú que contiene varias herramientas para mostrar diferentes anotaciones en el IgrDataChart área de la trama.
  • ValueLabelsHeader: encabezado de sección del submenú para las siguientes herramientas:
    • ShowValueLabels: A IgrToolActionCheckbox que alterna los valores de los puntos de datos mediante a IgrCalloutLayer.
    • ShowLastValueLabel: A IgrToolActionCheckbox que alterna las anotaciones del eje del valor final mediante a IgrFinalValueLayer.
• ShowCrosshairs: A IgrToolActionCheckbox que alterna las anotaciones en forma de cruz al pasar el ratón por encima a través de la propiedad del crosshairsDisplayMode gráfico.
• ShowGridlines: A IgrToolActionCheckbox que alterna líneas de cuadrícula adicionales aplicando a MajorStroke al eje X.

Acción Guardar en imagen

• CopyAsImage: A IgrToolActionLabel que expone una opción para copiar el gráfico en el portapapeles.
• CopyHeader: Un encabezado de subsección.

Iconos SVG

Al agregar herramientas manualmente, los iconos se pueden asignar mediante el RenderIconFromText método. Hay tres parámetros que se deben pasar en este método. El primero es el nombre de la colección de iconos definido en la herramienta, por ejemplo. iconCollectionName El segundo es el nombre del icono definido en la herramienta, por ejemplo iconName, seguido de la adición de la cadena SVG.

Data URL Icons

De manera similar a agregar svg, también puede agregar una imagen de icono desde una URL a través del registerIconFromDataURL. El tercer parámetro del método se usaría para ingresar una URL de cadena.

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

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

De forma predeterminada, la barra de herramientas React se muestra horizontalmente, pero también tiene la capacidad de mostrarse verticalmente estableciendo la orientation propiedad.

<IgrToolbar orientation="Vertical" />

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

Color Editor

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

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

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

Referencias de API

• IgrToolbar
• IgrDataChart

Recursos adicionales

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