Descripción general de la barra de herramientas de React

El componente React Toolbar es un contenedor complementario para las operaciones de la interfaz de usuario que se usarán principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará dinámicamente con un preajuste de propiedades y elementos de la herramienta cuando esté vinculada a nuestrosIgrDataChart componentes.IgrCategoryChart Podrás crear herramientas personalizadas para tu proyecto que permitan a los usuarios finales realizar 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 para usar elIgrToolbar con elIgrDataChart 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 diferentesIgrToolAction elementos que puedes añadir a la barra de herramientas.

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

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

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

El siguiente ejemplo muestra un par de características. Primero, puedes agrupar herramientas en elIgrToolActionSubPanel 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.

React Data Chart Integration

La barra de herramientas React contiene unaTarget propiedad. Esto se utiliza para enlazar un componente, como seIgrDataChart muestra en el código siguiente:

  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 preexistentesIgrToolAction quedan disponibles cuando seIgrDataChart vincula con la barra de herramientas. Aquí tienes una lista de las acciones de ReactIgrDataChart de herramienta integradas y sus asociadasoverlayId:

Acciones de zoom

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

Acciones de tendencia

• AnalyzeMenu: AIgrToolActionIconMenu 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: AIgrToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor máximo de la serie.
    • MinValue: AIgrToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor mínimo de la serie.
    • Average: AIgrToolActionCheckbox 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 alIgrDataChart área del gráfico.
  • TrendsHeader: Un encabezado de sección de submenú para las siguientes tres herramientas:
    • Exponencial: AIgrToolActionRadio que establece eltrendLineType en cada serie del gráfico en Ajustión Exponencial.
    • Lineal: AIgrToolActionRadio que establece eltrendLineType en cada serie del gráfico como LinearFit.
    • Logarítmico: AIgrToolActionRadio que establece eltrendLineType en cada serie del gráfico a LogarítmicoAjuste.
• HelpersHeader: Un encabezado de subsección.
  • SeriesAvg: AIgrToolActionCheckbox que añade o elimina aIgrValueLayer a la colección de series del gráfico usando elValueLayerValueMode tipoAverage de .
  • ValueLabelsMenu: Un submenú que contiene varias herramientas para mostrar diferentes anotaciones enIgrDataChart el área de la gráfica.
  • ValueLabelsHeader: Un encabezado de sección de submenú para las siguientes herramientas:
    • ShowValueLabels: A que alterna los valores deIgrToolActionCheckbox los puntos de datos usando aIgrCalloutLayer.
    • ShowLastValueLabel: AIgrToolActionCheckbox que desactiva las anotaciones del eje de valores finales usando aIgrFinalValueLayer.
• ShowCrosshairs: AIgrToolActionCheckbox que alterna el ratón sobre las anotaciones de la mira mediante la propiedad delcrosshairsDisplayMode gráfico.
• ShowGridlines: AIgrToolActionCheckbox que alterna líneas de rejilla adicionales aplicando aMajorStroke al eje X.

Acción Guardar en imagen

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

Iconos SVG

Al añadir herramientas manualmente, se pueden asignar iconos usando elRenderIconFromText método. Hay tres parámetros que hay que cumplir con 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 añadir la cadena SVG.

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.

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

}

<IgrToolbar orientation="Vertical" />

Vertical Orientation

Por defecto, la barra de herramientas React se muestra horizontalmente, pero también tiene la capacidad de mostrarse verticalmente configurando laorientation 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