React 툴바 개요

React 툴바 컴포넌트는 UI 작업을 위한 보조 컨테이너로, 주로 차트 구성 요소와 함께 사용됩니다. 툴바는 ORIgrDataChart 컴포넌트와IgrCategoryChart 연동되면 속성과 도구 항목의 사전 설정으로 동적으로 업데이트됩니다. 프로젝트에 맞는 맞춤형 도구를 만들어 최종 사용자가 변경할 수 있도록 무한한 맞춤화를 제공할 수 있습니다.

React Toolbar Example

종속성

Ignite UI for React 설치:

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

다음 모듈들은 컴포넌트IgrToolbar와 그 기능을 사용할IgrDataChart 때 필요합니다.

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

용법

Tool Actions

다음은 툴바에 추가할 수 있는 다양한IgrToolAction 항목들의 목록입니다.

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

이 도구들 각각은 마우스 클릭으로 트리거되는 이벤트를OnCommand 노출합니다. 참고로, 이IgrToolActionIconMenu 도구는 다른 도구들도 안에 감을IgrToolActionIconMenu 수 있는 래퍼입니다.

새로운 도구와 기존 도구를 객체의overlayId 'and 속성'을 사용해beforeId​afterId​IgrToolAction 위치를 바꾸고 숨김으로 표시할 수 있습니다. ToolActions는 속성도visibility 노출합니다.

다음 예시는 몇 가지 특징을 보여줍니다. 먼저 도구를 그룹으로 묶을 수 있습니다.IgrToolActionSubPanel 내장된 도구들을 숨기는 것도 포함해서, 줌리셋 그리고 분석메뉴 메뉴 도구 동작. 이 예시에서 새로운 인스턴스는 줌리셋 도구 내 작동 줌 메뉴 다음에afterId 속성에 할당하고 줌아웃 정확히 말하면 그 위치입니다. 또한 이 부분은isHighlighted 도구에 대한 속성.

React Data Chart Integration

React 툴바에는 속성이 포함되어Target 있습니다. 이는 아래 코드에 나타난 것과 같은IgrDataChart 컴포넌트를 연결하는 데 사용됩니다:

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

툴바와 연동되면IgrToolAction 기존IgrDataChart에 있던 여러 항목과 메뉴가 제공됩니다. 다음은 내장된 ReactIgrDataChart 도구 액션과 관련된overlayId 작업 목록입니다:

확대/축소 작업

• ZoomMenu: AIgrToolActionIconMenu 그럼 세 가지 증거가 드러난다IgrToolActionLabel 소환할 수 있는 항목들zoomIn 그리고zoomOut 차트의 줌 레벨을 증가/감소시키는 방법들은 다음과 같습니다.ZoomReset, 아IgrToolActionLabel 이는resetZoom 차트에서 줌 레벨을 기본 위치로 리셋하는 메서드를 사용하세요.

추세 조치

• AnalyzeMenu:IgrToolActionIconMenu이 라이브러리는 차트의 다양한 옵션을 구성할 수 있는 여러 옵션을 포함하고 있습니다.
• AnalyzeHeader: 하위 섹션 헤더.
• LinesMenu: 차트 내 다양한 점선 수평선을 표시할 수 있는 다양한 도구를 포함하는 하위 메뉴입니다.
  • LinesHeader: 다음 세 가지 도구에 대한 하위 메뉴 섹션 헤더:
    • MaxValue:IgrToolActionCheckbox 급수의 최대 값에서 y축을 따라 대시선으로 표시된 수평선을 나타냅니다.
    • MinValue:IgrToolActionCheckbox 급수의 최소 값에서 y축을 따라 점선으로 수평선을 표시하는 A.
    • Average:IgrToolActionCheckbox이 평균값에 y축을 따라 점선으로 수평선을 표시하는 A.
• TrendsMenu: 플롯 영역에IgrDataChart 다양한 추세선을 적용할 수 있는 도구를 포함하는 하위 메뉴입니다.
  • TrendsHeader: 다음 세 가지 도구에 대한 하위 메뉴 섹션 헤더:
    • 지수의: AIgrToolActionRadio이 함수는trendLineType 차트의 각 시리즈에서 지수적정.
    • 선형: AIgrToolActionRadio이 함수는trendLineType 차트의 각 시리즈에서 라인어핏.
    • 로그: AIgrToolActionRadio이 함수는trendLineType 차트의 각 시리즈에서 로그리스미크핏.
• HelpersHeader: 하위 섹션 헤더.
• SeriesAvg:IgrToolActionCheckbox a 는 of 유형을IgrValueLayer 사용하여ValueLayerValueMode 차트의 시리즈 컬렉션에 aAverage를 추가하거나 제거하는 것입니다.
• ValueLabelsMenu: 플롯 영역에IgrDataChart 다양한 주석을 표시할 수 있는 다양한 도구를 담은 하위 메뉴입니다.
  • ValueLabelsHeader: 다음 도구들을 위한 하위 메뉴 섹션 헤더:
    • ShowValueLabels:IgrToolActionCheckbox a 를 사용하여IgrCalloutLayer 데이터 포인트 값을 토글합니다.
    • ShowLastValueLabel:IgrToolActionCheckbox a 를 사용하여IgrFinalValueLayer 최종 값 축 주석을 토글합니다.
• ShowCrosshairs:IgrToolActionCheckbox 차트의crosshairsDisplayMode 속성을 통해 마우스 오버 조준선 주석을 토글하는 기능입니다.
• ShowGridlines:IgrToolActionCheckbox A는 X축에 aMajorStroke를 적용하여 추가 격자선을 토글합니다.

이미지에 저장 작업

• CopyAsImage: 이IgrToolActionLabel 기능은 차트를 클립보드에 복사할 수 있는 옵션을 노출시킵니다.
• CopyHeader: 하위 섹션 헤더.

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

svg를 추가하는 것과 마찬가지로, URL에서 아이콘 이미지를 추가할 수도 있습니다.registerIconFromDataURL이 메서드의 세 번째 매개변수는 문자열 URL을 입력하는 데 사용됩니다.

다음 코드 조각은 아이콘을 추가하는 두 가지 방법을 모두 보여 줍니다.

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

기본적으로 React 툴바는 가로로 표시되지만, 속성을 설정orientation 해 세로로 표시할 수도 있습니다.

<IgrToolbar orientation="Vertical" />

다음 예제는 React Toolbar의 수직 방향을 보여줍니다.

색상 편집기

React 툴바에 사용자 정의 색상 편집기 도구를 추가할 수 있으며, 이 도구는 Command 이벤트와 함께 작동하여 응용 프로그램에 사용자 정의 스타일을 수행합니다.

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

다음 예제에서는 색 편집기 도구를 사용하여 React 데이터 차트 시리즈 브러시의 스타일을 지정하는 방법을 보여 줍니다.

API 참조

• IgrToolbar
• IgrDataChart

추가 리소스

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