Ignite UI for React

    Ignite UI for React의 각 버전에 대한 모든 주목할만한 변경 사항은 이 페이지에 문서화되어 있습니다.

    18.7.0 (September 2024)

    igniteui-react-charts (Charts)

    • 새 데이터 파이 차트-DataPieChart 원형 차트를 렌더링하는 새로운 구성 요소입니다. 이 구성 요소는 기본 데이터 모델의 속성을 자동으로 감지하는 동시에 ItemLegend 구성 요소를 통해 선택, 강조 표시, 애니메이션 및 범례 지원을 허용한다는 점에서 유사 IgrCategoryChart 하게 작동합니다.

    • New Proportional Category Angle Axis- 원형 차트와 유사한 슬라이스를 그리기 위한 방사형 파이 시리즈의 IgrDataChart 새로운 축으로, 데이터 포인트가 원형 그래프 내에서 세그먼트로 표시되는 데이터 시각화 유형입니다.

    • IgrToolbar

      • New ToolActionCheckboxList 선택할 수 있는 확인란이 있는 항목 컬렉션을 표시하는 새로운 CheckboxList ToolAction입니다. ToolAction CheckboxList 내의 그리드는 높이가 최대 5개 항목까지 증가한 다음 스크롤 막대가 표시됩니다.

      • 새로운 필터링 지원

      • 축 필드 변경 사항: CategoryChart를 대상으로 할 때 도구 모음의 새로운 기본 IconMenu. 레이블 필드는 X축에 매핑되고 값 필드는 Y축에 매핑됩니다. 대상 차트는 변경 사항에 실시간으로 반응합니다. 차트에 ItemsSource가 설정되어 있지 않으면 IconMenu가 숨겨집니다.

    igniteui-react

    • 새로운 배너 구성 요소.
    • 새로운 DatePicker 구성 요소.
    • 새 Divider 구성 요소.
    • 모든 구성 요소에 기본 이벤트에 대한 지원이 추가되었습니다.
    • IgrIcon
      • 메소드가 추가되었습니다 setIconRef. 이를 통해 SVG 파일로 아이콘을 등록하고 바꿀 수 있습니다.
      • 이제 모든 구성 요소는 내부적으로 참조로 아이콘을 사용하므로 사용자 지정 템플릿을 명시적으로 제공하지 않고도 쉽게 바꿀 수 있습니다.
    • IgrCombo, IgrDatePicker,, IgrDropdown​ ​IgrDialog, ExpansionPanel, IgrNavDrawer​ ​IgrToast​ ​IgrSnackbar​ ​IgrSelectComponent
      • Toggle methods show, hide, toggle methods는 성공하면 이제 true를 반환하고, 그렇지 않으면 false를 반환합니다.
    • IgrButtonComponent, IgrIconButton, IgrCombo​ ​IgrDateTimeInput​ ​IgrMaskInput​ ​IgrSwitch​ ​IgrRadio​ ​IgrCheckbox​ ​IgrInput​ ​IgrSelectComponent, IgrTextarea
      • 더 이상 사용되지 않는 사용자 지정 focus 및 blur 이벤트. 대신 native onFocus 및 onBlur events를 사용하십시오.
    • IgrRadioGroup
      • 추가 Name 그리고 value 속성.

    주요 변경 사항:

    • 이전 IgrDatePicker의 이름을 IgrXDatePicker로 변경했습니다.
    • 구성 요소를 제거했습니다 IgrForm. 대신 네이티브 형식을 사용합니다.
    • 다음 구성 요소에 대한 CSS 사용자 지정 속성을 위해--ig-size 속성을 제거 size 했습니다.
    • IgrBadge, IgrChip, IgrLinearProgress, IgrCircularProgress
      • 속성 유형의 이름이 다음으로 StyleVariant 바뀌었습니다 Variant.
    • IgrCalendar
      • 속성 유형의 이름이 다음으로 WeekDays 바뀌었습니다 WeekStart.
    • IgrCheckbox, IgrSwitch
    • IgrCombo, IgrSelectComponent
      • , flip, sameWidth properties가 제거되었습니다 positionStrategy.
    • IgrDateTimeInput
      • 제거된 maxValue 속성. minValue 대신 and를 min 사용합니다 max.
    • IgrDropdown
      • 속성이 제거되었습니다 positionStrategy.
    • IgrInput
      • 이전의 명명 maxlength 된 및 minlength 속성을 제거했습니다. 를 사용 maxLength 하고 minLength.
      • 이전의 명명 readonly 된 및 inputmode 속성을 제거했습니다. 를 사용 readOnly 하고 inputMode.
      • 타입도 로 변경 inputMode 했습니다 string.
    • IgrRadio
    • IgrRangeSlider
      • 제거된 ariaThumbLower 속성. ariaThumbUpper 대신 and를 thumbLabelUpper 사용합니다 thumbLabelLower.
    • IgrRating
      • 속성의 이름이 readonly 다음과 같이 바뀝니다 readOnly.

    igniteui-react-grids

    • All Grids
    • 새로운 RowClick 이벤트가 추가되었습니다.
    • IgrPivotGrid
      • 추가 sortable에 대한 속성 IgrPivotDimension.
      • 가로 레이아웃이 추가되었습니다. 새 pivotUI 속성 내에서 다음과 같이 활성화할 수 있습니다 rowLayout horizontal.
      • 수평 레이아웃에 대해서만 행 차원 요약을 추가했습니다. 각각에 대해 활성화할 수 있습니다. IgrPivotDimension 설정하여 horizontalSummary 받는 사람 참.
      • 에 속성을 pivotUI 추가하여 horizontalSummariesPosition 수평 요약 위치를 구성합니다.
      • 행 차원에 대한 행 머리글을 추가했습니다. 새로운 내부에서 활성화할 수 있습니다. pivotUI 속성을 showHeaders 참.
      • 이제 키보드 탐색을 통해 행 차원 머리글 또는 열 머리글에서 앞뒤로 행 머리글로 이동할 수 있습니다.
      • 행 차원 축소 사용 Alt + Arrows 및 행 머리글 정렬 사용에 Ctrl + Arrow Up/Down 대한 키보드 상호 작용이 추가되었습니다.

    주요 변경 사항:

    • All Grids, RowIsland
      • 더 이상 사용되지 않는 속성을 제거했습니다 displayDensity.
      • 이름이 바뀌고 actualColumns​ ​contentColumns 속성이 and contentColumnList로 변경되었습니다 actualColumnList. 또는 columnList 속성을 사용하여 columns 이제 모든 열을 가져옵니다.
      • 이름이 rowDelete 바뀌고 rowAdd 이벤트 인수 형식이 변경되었습니다 RowDataCancelableEventArgs.
      • 이벤트 인수 형식의 이름이 다음으로 GridContextMenuEventArgs 바뀌었습니다 contextMenu.
      • 제거된 IgrGridEditEventArgs, IgrGridEditDoneEventArgs, IgrPinRowEventArgs events rowID 및 primaryKey 속성. 대신 사용하십시오 rowKey.
    • IgrPivotGrid
      • removed showPivotConfigurationUI 속성을 클릭합니다. 새 showConfiguration 옵션을 사용하고 pivotUI 그 안에 설정하십시오.
    • IgrColumn
      • 속성이 제거되었습니다 movable. 지금 Grid의 moving 속성을 사용합니다.
      • 속성이 제거되었습니다 columnChildren. 대신 사용하십시오 childColumns.
    • IgrColumnGroup
      • 속성이 제거되었습니다 children. 대신 사용하십시오 childColumns.
    • IgrPaginator
      • 제거된 isFirstPageDisabled 속성. isLastPageDisabled 대신 and를 isLastPage 사용합니다 isFirstPage.

    18.6.1 (June 2024)

    igniteui-react

    • IgrInput, IgrTextarea- 사용자 입력을 제한하지 않고 유효성 검사 규칙을 적용할 수 있도록 노출 ValidateOnly 됩니다.
    • IgrDropdown-positionStrategy property는 더 이상 사용되지 않습니다. 이제 드롭다운은 API를 IgrPopover 사용하여 브라우저 뷰포트의 최상위 계층에서 컨테이너를 렌더링하므로 속성이 더 이상 사용되지 않습니다.
    • IgrDockManager-IgrSplitPane isMaximized은(는) 더 이상 사용되지 않습니다. 분할 창 수준에서 isMaximized를 true로 설정하면 분할 창은 컨테이너로만 사용되므로 최대화된 상태로 표시할 실제 콘텐츠가 없으므로 실제 효과가 없습니다. isMaximized 대신 and/or IgrContentPane 속성을 IgrTabGroupPane 사용합니다.

    igniteui-react-grids

    • DisplayDensity CSS 사용자 정의 속성을 위해--ig-size 더 이상 사용되지 않습니다. 자세한 내용은 그리드 크기 항목을 확인하세요.

    • IgrPivotGrid- 이제 구성 요소의 구성을 올바르게 적용할 수 있습니다.

    igniteui-react-charts (Charts)

    • 데이터 범례 그룹화 및 데이터 도구 설명 그룹화- 새로운 그룹화 기능이 추가되었습니다. 이 속성은 GroupRowVisible 각 시리즈와 함께 그룹화를 전환하고 옵트인하면 속성을 통해 그룹 텍스트를 할당할 수 있습니다 DataLegendGroup. 동일한 값이 둘 이상의 시리즈에 적용되면 그룹화되어 표시됩니다. 모든 사용자에 대해 분류하고 구성해야 하는 대규모 데이터 세트에 유용합니다.

    • 차트 선택- 새로운 시리즈 선택 스타일링. 이것은 모든 범주, 금융 및 방사형 시리즈에 걸쳐 IgrCategoryChart 광범위하게 채택됩니다 IgrDataChart. 시리즈를 클릭하면 다른 색상, 밝아지거나 흐려지게 표시, 윤곽선에 초점을 맞출 수 있습니다. 개별 계열 또는 전체 데이터 항목을 통해 영향을 받는 항목을 관리합니다. 여러 시리즈 및 마커가 지원됩니다. 특정 데이터 항목의 값 간의 다양한 차이점 또는 유사점을 설명하는 데 유용합니다. 또한 SelectedSeriesItemsChanged 이벤트를 진행하고 SelectedSeriesItems 팝업 또는 선택 항목에 따른 데이터 분석을 통해 다른 화면과 같이 응용 프로그램 내에서 발생할 수 있는 다른 작업과 관련된 강력한 비즈니스 요구 사항을 구축하는 데 추가 도움을 받을 수 있습니다.

    • Proportional Category Angle Axis- Radial Pie Series의 새로운 축으로 IgrDataChart, 파이 차트를 만들 수 있도록 하여 데이터 차트의 추가 기능을 모두 사용하여 강력한 시각화를 허용합니다.

    • Treemap Highlighting- 이제 트리 맵에 highlightingMode 있는 항목의 마우스 오버 강조 표시를 구성할 수 있는 속성을 노출합니다. 이 속성은 두 가지 옵션을 사용합니다 : Brighten 강조 표시는 마우스를 올려 놓은 항목에만 적용되고 FadeOthers, 호버 된 항목의 강조 표시는 동일하게 유지되지만 다른 모든 항목은 페이드 아웃됩니다. 이 강조 표시는 애니메이션되며 속성을 사용하여 highlightingTransitionDuration 제어할 수 있습니다.

    • 트리맵 퍼센트 기반 하이라이트- 새로운 퍼센트 기반 하이라이트를 통해 노드가 컬렉션의 진행 상황 또는 하위 집합을 나타낼 수 있습니다. 모양은 데이터 항목의 멤버에 의해 또는 새 HighlightedItemsSource 항목을 제공하여 특정 값까지 배경색을 채우는 것으로 표시됩니다. 를 통해 highlightedValuesDisplayMode 전환하고 스타일을 지정할 FillBrushes 수 있습니다.

    • IgrToolbar- 선택한 특정 도구 주위의 테두리를 윤곽선으로 표시하기 위한 ToolAction에 대한 새로운 IsHighlighted 옵션.

    igniteui-react-gauges (Gauges)

    • IgrRadialGauge
      • 강조 표시 바늘에 대한 새 레이블입니다. HighlightLabelText 그리고 HighlightLabelSnapsToNeedlePivot HighlightLabel에 대한 다른 많은 스타일 관련 속성이 추가되었습니다.

    18.6.0 (March 2024)

    igniteui-react-charts

    • 속성을 통한 새 데이터 필터링. initialFilter 필터 표현식을 적용하여 차트 데이터를 레코드의 하위 집합으로 필터링합니다. 대용량 데이터를 드릴다운하는 데 사용할 수 있습니다.

    • XamRadialChart

      • 새 레이블 모드 IgrCategoryAngleAxis 이제 레이블의 위치를 추가로 구성할 수 있는 속성을 노출 LabelMode 합니다. 이렇게 하면 열거형을 선택하여 Center 기본 모드 간에 전환하거나 새 모드를 ClosestPoint 사용하여 레이블을 원형 그림 영역에 더 가깝게 가져올 수 있습니다.

    igniteui-react-grids

    igniteui-react-gauges

    • IgrRadialGauge
      • 새 제목/부제목 속성. TitleText, SubtitleText 게이지 하단 근처에 나타납니다. 또한 , TitleFontFamily, TitleFontStyle,와 TitleFontWeight​ ​TitleExtent 같은 TitleFontSize 다양한 제목/부제목 글꼴 속성이 추가되었습니다. 마지막으로 새 TitleDisplaysValue 값은 바늘의 위치와 일치할 수 있습니다.
      • 새로운 OpticalScalingEnabled 그리고 OpticalScalingSize에 대한 속성 IgrRadialGauge. 이 새로운 기능은 게이지의 레이블, 제목 및 자막이 100% 광학 배율을 갖는 크기를 관리합니다. 이 새로운 기능에 대해 자세히 알아볼 수 있습니다 여기
      • 새로운 하이라이트 바늘이 추가되었습니다. HighlightValue​ ​HighlightValueDisplayMode 둘 다 값과 '오버레이' 설정이 제공되면 주 바늘이 희미하게 나타나고 새 바늘이 나타납니다.
    • IgrLinearGauge
      • 새로운 하이라이트 바늘이 추가되었습니다. HighlightValue​ ​HighlightValueDisplayMode 둘 다 값과 '오버레이' 설정이 제공되면 주 바늘이 희미하게 나타나고 새 바늘이 나타납니다.
    • IgrBulletGraph
      • 이제 성능 표시줄에 값이 '오버레이' 설정에 적용될 때 HighlightValueDisplayMode 값과 새 HighlightValue 값의 차이가 반영됩니다. 강조 표시 값에는 필터링된/하위 집합 완료된 측정 백분율이 채워진 색상으로 표시되고 나머지 막대의 모양은 할당된 값으로 흐리게 표시되어 실시간으로 성능을 보여줍니다.

    igniteui-react

    • New IgrTextarea component
    • 새 IgrButtonGroup 구성 요소
    • IgrDockManager
      • 새 ProximityDock 속성. 사용하도록 설정하면 도킹 표시기가 표시되지 않으며 최종 사용자는 드래그한 창을 대상 창 가장자리 가까이로 끌어 도킹할 수 있습니다.
      • 새 ContainedInBoundaries 속성. 부동 창을 Dock 관리자 경계 내에 유지할지 여부를 결정합니다. 기본값은 입니다 false.
      • 새 ShowPaneHeaders 속성. 창 머리글을 가리키기만 할지 아니면 항상 표시할지를 결정합니다. 기본값은 입니다 always.
    • IgrInput, IgrMaskInput, IgrDateTimeInput, IgrRating
    • IgrInput
    • IgrTree
      • 노드를 클릭하면 확장 상태가 변경되는지 여부를 결정하는 속성이 추가되었습니다 toggleNodeOnClick. 기본값은 입니다 false.
    • IgrRating
      • allowReset 추가. 활성화된 경우 동일한 값을 선택하면 구성 요소가 재설정됩니다. 동작 변경- 이전 릴리스에서는 등급 구성 요소의 기본 동작이었습니다. 응용 프로그램에서 이 동작을 유지해야 하는지 여부를 설정해야 allowReset 합니다.
    • select, IgrDropdown
      • exposed selectedItem, items and groups getters

    Deprecations

    • 구성 IgrForm 요소는 더 이상 사용되지 않습니다. 대신 기본 양식 요소를 사용하십시오.
    • 속성 및 특성은 size 모든 구성 요소에서 더 이상 사용되지 않습니다.--ig-size 대신 CSS 사용자 정의 속성을 사용하십시오. 다음 예제에서는 avatar 구성 요소의 크기를 small로 설정합니다.
      .avatar {
    --ig-size: var(--ig-size-small);
}
    • IgrDateTimeInput
    • IgrRangeSlider

    제거

    • 기본 속성을 가리는 자체 dir 속성을 제거했습니다. 이는 호환성이 손상되지 않는 변경입니다.
    • IgrSlider-ariaLabel shadowed 속성. 이는 호환성이 손상되지 않는 변경입니다.
    • IgrCheckbox-ariaLabelledBy shadowed 속성. 이는 호환성이 손상되지 않는 변경입니다.
    • IgrSwitch-ariaLabelledBy shadowed 속성. 이는 호환성이 손상되지 않는 변경입니다.
    • IgrRadio-ariaLabelledBy shadowed 속성. 이는 호환성이 손상되지 않는 변경입니다.

    18.5.0 (January 2024)

    igniteui-react-charts (Charts)

    • 차트 강조 표시 필터-IgrCategoryChart 이제 데이터 IgrDataChart 하위 집합 안팎으로 강조 표시하고 애니메이션하는 방법을 노출합니다. 이 강조 표시는 시리즈 유형에 따라 다릅니다. 열 및 영역 계열의 경우 하위 집합은 전체 데이터 집합 위에 표시되며 하위 집합은 계열의 실제 브러시로 색상이 지정되고 전체 집합의 불투명도가 감소합니다. 라인 시리즈의 경우 하위 집합이 점선으로 표시됩니다.

    18.4.0 (December 2023)

    igniteui-react-grids (Grid)

    18.3.0 (October 2023)

    igniteui-react-grids (Toolbar - Beta)

    • 클립보드를 통해 차트를 이미지로 저장하는 저장 도구 작업이 추가되었습니다.

    • 수직 방향은 도구 모음의 orientation 속성을 통해 추가되었습니다. 기본적으로 도구 모음은 수평이며, 이제 도구 모음을 수직 방향으로 표시할 수 있으며 여기서 도구는 왼쪽/오른쪽으로 정중하게 팝업됩니다.

    • 도구 모음의 방법을 통해 사용자 지정 SVG 아이콘 지원이 추가되어 사용자 지정 도구 생성이 더욱 향상되었습니다 renderImageFromText.

    • 그리드- 이것은 완전히 작동하는 새로운 크로스 플랫폼 그리드이며 필터링, 정렬, 템플릿, 행 선택, 행 그룹화, 행 고정 및 이동 가능한 열과 같은 기능을 포함합니다.

    더 이상 사용되지 않는 구성 요소

    DataGrid - The DataGrid is deprecated, please use Grid

    18.2.0 (June 2023)

    New Components

    • 툴바- 베타. 이 구성 요소는 주로 차트 구성 요소와 함께 사용되는 UI 작업을 위한 동반 컨테이너입니다. 도구 모음은 IgrDataChart 또는 IgrCategoryChart 구성 요소에 연결되면 미리 설정된 속성 및 도구 항목으로 동적으로 업데이트됩니다. 최종 사용자가 변경 사항을 제공하고 끝없는 양의 사용자 정의를 제공할 수 있도록 프로젝트에 대한 사용자 정의 도구를 만들 수 있습니다.

    igniteui-react-charts (Charts)

    • ValueLayer- 이제 최대값, 최소 및 평균과 같은 플로팅된 데이터의 다양한 초점에 대한 오버레이를 렌더링할 수 있는 라는 IgrValueLayer 새로운 계열 유형이 노출됩니다. 이는 새 valueLines 컬렉션에 추가하여 and IgrFinancialChart에 적용됩니다 IgrCategoryChart.

    • 이제 대시 배열 시리즈의 다양한 부분에 IgrDataChart. 이것을 다음에 적용할 수 있습니다. 시리즈 차트에 그려진, 눈금선 차트의 추세선 차트에 표시된 시리즈 중 하나입니다.

    18.1.0 (November 2022)

    기본 동작에 대한 상당한 개선 사항이 추가되었으며 카테고리 차트 API를 더 쉽게 사용할 수 있도록 개선되었습니다. 이러한 새로운 차트 개선 사항은 다음과 같습니다.

    • 브라우저/화면 크기에 따라 수평 라벨 회전을 위한 반응형 레이아웃.
    • 모든 플랫폼에서 둥근 레이블에 대한 향상된 렌더링.
    • StackedFragmentSeries에 마커 속성을 추가했습니다.
    • ​shouldPanOnMaximumZoom 속성을 추가했습니다.
    • 새 범주 축 속성:
      • ZoomMaximumCategoryRange
      • ZoomMaximumItemSpan
      • ZoomToCategoryRange
      • ZoomToItemSpan
    • 범주 문자열 및 숫자 값을 그룹화, 정렬 및 요약하기 위한 새로운 차트 집계 API로 차트 데이터를 미리 집계하거나 계산할 필요가 없습니다.
      • 초기 정렬 설명
      • 초기 정렬
      • 정렬 설명
      • 초기 그룹
      • 초기 그룹 설명
      • 그룹 설명
      • 초기 요약
      • 초기 요약 설명
      • 요약설명
      • 초기 그룹 정렬 설명
      • 그룹 정렬
      • 그룹 정렬 설명

    [!Note] Chart Aggregation will not work when using includedProperties | excludedProperties. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.

    igniteui-react-grids (Data Grid)

    16.16.0 (June 2022)

    igniteui-react-charts (Charts)

    • 고도로 구성 가능한 추가 데이터 범례와 매우 유사하게 작동하는 구성요소 IgrLegend 이지만 계열 값을 표시하고 계열 행 및 값 열 필터링, 값 스타일 지정 및 서식 지정을 위한 많은 구성 속성을 제공합니다.
    • 도구 설명에 시리즈의 범례 배지뿐만 아니라 시리즈의 값과 제목을 표시하는 고도로 구성 가능한 DataToolTip을 추가했습니다. 이것은 이제 모든 차트 유형에 대한 기본 도구 설명입니다.
    • Stacked Series에 대한 애니메이션 및 전환 지원이 추가되었습니다. 애니메이션은 isTransitionInEnabled 속성을 true로 설정하여 활성화할 수 있습니다. 여기에서 transitionInDuration 속성을 설정하여 애니메이션을 완료하는 데 걸리는 시간을 결정하고 transitionInMode 하여 발생하는 애니메이션 유형을 결정할 수 있습니다.
    • 추가된 AssigningCategoryStyle 이벤트는 이제 모든 시리즈에서 사용할 수 있습니다 IgrDataChart. 이 이벤트는 background-color 및 highlighting과 같은 Fill 계열 항목의 측면을 조건부로 구성하려는 경우에 처리됩니다.
    • CalloutLayer에 대한 새로운 allowedPositions 열거형입니다. 설명선이 차트 내에서 배치되는 위치를 제한하는 데 사용됩니다. 기본적으로 콜아웃은 지능적으로 최상의 위치에 배치되지만 예를 들어 TopLeft, TopRight, BottomLeft 또는 BottomRight 강제하는 데 사용됩니다.
    • 주석 레이어에 대한 새로운 모서리 반경 속성이 추가되었습니다. 각 콜아웃의 모서리를 둥글게 만드는 데 사용됩니다. 이제 코너 반경이 기본적으로 추가되었습니다.
    • 다양한 방식으로 스크롤 막대를 활성화하는 새로운 horizontalViewScrollbarMode 및 verticalViewScrollbarMode 열거형. isVerticalZoomEnabled 또는 isHorizontalZoomEnabled와 함께 사용하면 차트를 탐색하기 위해 축을 따라 스크롤 막대를 지속하거나 페이드 인 및 아웃할 수 있습니다.
    • 새로운 FavorLabellingScaleEnd는 축이 스케일 끝에서 레이블 방출을 선호해야 하는지 여부를 결정합니다. 숫자 축(예: IgrNumericXAxis, IgrNumericYAxis, PercentChangeAxis)과만 호환됩니다.
    • 새로운 isSplineShapePartOfRange 축의 요청된 축 범위에 스플라인 모양을 포함할지 여부를 결정합니다.
    • 새로운 xAxisMaximumGap​ ​xAxisGap 사용할 때 플롯된 시리즈에 허용되는 최대값을 결정합니다. 간격은 플롯된 계열의 열 또는 막대 사이의 간격을 결정합니다.
    • 새 xAxisMinimumGapSize​ ​xAxisGap 사용할 때 플롯된 계열에 대해 허용되는 최소 픽셀 기반 값을 결정하여 각 범주 사이에 항상 약간의 간격이 있도록 합니다.

    igniteui-react-grids (Data Grid)

    큰 데이터 집합을 유사한 콘텐츠가 있는 페이지 시퀀스로 분할하는 데 사용되는 새 기능 -행 페이징이 추가되었습니다. 페이지 매김을 사용하면 데이터를 설정된 행 수로 표시할 수 있으므로 사용자가 스크롤 막대 없이 데이터를 "스크롤"할 수 있습니다. 테이블 페이지 매김을 위한 UI에는 일반적으로 현재 페이지, 총 페이지, 사용자가 데이터 페이지를 넘길 수 있는 클릭 가능한 이전 및 다음 화살표/단추 등이 포함됩니다.

    16.15.1 (December 2021)

    igniteui-react-grids (Data Grid)

    데이터 그리드

    • 추가됨 ValueMultiField, string[] 유형의 IgrComboBoxColumn 드롭다운 항목에 여러 필드로 구성된 키가 포함된 경우에 사용됩니다.

    [!Note] The following breaking changes were introduced

    • ​valueField 속성이 string[] 유형에서 string으로 변경되었습니다.

    igniteui-react-inputs (Inputs)

    날짜 선택기

    • ValueChanged 이벤트를 SelectedValueChanged로 변경했습니다.

    Multi-Column ComboBox

    • ​TextChanged 이벤트를 TextValueChanged로 변경했습니다.
    • Changed ValueChanged event to SelectedValueChanged.

    16.15.0 (November 2021)

    [!Note] Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility.

    igniteui-react-charts (Charts)

    이 릴리스에서는 지리적 맵 및 모든 차트 구성 요소에 대한 시각적 디자인 및 구성 옵션에 대한 몇 가지 개선 사항 및 단순화를 소개합니다.

    • 변경됨 yAxisLabelLocation 속성 유형 YAxisLabelLocation ~에서 AxisLabelLocation ~에 IgrFinancialChart 그리고 IgrCategoryChart
    • Changed xAxisLabelLocation property's type to XAxisLabelLocation from AxisLabelLocation in IgrFinancialChart
    • Added xAxisLabelLocation property to IgrCategoryChart
    • 범례에 IgrGeographicMap의 지리적 계열을 표현하기 위한 지원이 추가되었습니다.
    • Added crosshair lines by default in IgrFinancialChart and IgrCategoryChart
    • Added crosshair annotations by default in IgrFinancialChart and IgrCategoryChart
    • Added final value annotation by default in IgrFinancialChart
    • 카테고리 차트 및 금융 차트에 새 속성이 추가되었습니다.
    • 카테고리 차트, 금융 차트, 데이터 차트 및 지리 지도에 새 속성을 추가했습니다.
      • 동일한 차트의 여러 계열에 어떤 표식 유형을 할당할 수 있는지를 허용하는 markerAutomaticBehavior​
      • legendItemBadgeShape 범례에 표시된 모든 계열의 배지 모양을 설정하기 위한 것입니다.
      • 범례의 모든 계열에 배지 복잡도를 설정하기 위한 legendItemBadgeMode​
    • 데이터 차트 및 지리 지도의 계열에 새 속성이 추가되었습니다.
      • legendItemBadgeShape 범례에 표시된 특정 시리즈에 배지 모양을 설정하기 위한 것입니다.
      • 범례의 특정 시리즈에 배지 복잡도를 설정하기 위한 legendItemBadgeMode​
    • 범주 차트 및 시리즈에서 기본 수직 십자선 선 획을 #000000에서 #BBBBBB로 변경했습니다.
    • 동일한 차트에 그려진 모든 시리즈의 마커 모양이 원으로 변경되었습니다. 이것은 차트의 markerAutomaticBehavior 속성을 SmartIndexed enum 값으로 설정하여 되돌릴 수 있습니다.
    • 원, 선 또는 사각형만 표시하도록 차트 범례의 계열 모양을 단순화했습니다. 이것은 차트의 legendItemBadgeMode 속성을 MatchSeries enum 값으로 설정하여 되돌릴 수 있습니다.
    • 접근성을 개선하기 위해 모든 차트에 표시되는 시리즈 및 마커의 색상 팔레트 변경
    오래된 브러시/윤곽선 새로운 아웃라인/브러시
    #8BDC5C
    #8B5BB1
    #6DB1FF
    #F8A15F
    #EE5879
    #735656
    #F7D262
    #8CE7D9
    #E051A9
    #A8A8B7    		 #8BDC5C
    #8961A9
    #6DB1FF
    #82E9D9
    #EA3C63
    #735656
    #F8CE4F
    #A8A8B7
    #E051A9
    #FF903B

    igniteui-react-grids (Data Grid)

    16.14.0 (April 2021)

    igniteui-react-charts (Charts)

    이 릴리스에서는 모든 차트 구성 요소에 대한 몇 가지 새롭고 향상된 시각적 디자인 및 구성 옵션(예: IgrDataChart, IgrCategoryChart, and IgrFinancialChart)을 소개합니다.

    • Bar/Column/Waterfall 시리즈가 둥근 모서리 대신 정사각형 모서리를 갖도록 변경됨
    • Scatter High Density 시리즈의 heat min 속성 색상을 #8a5bb1에서 #000000으로 변경
    • Scatter High Density 시리즈의 heat max 속성 색상이 #ee5879에서 #ee5879로 변경되었습니다.
    • 금융/폭포 시리즈의 NegativeBrush 및 NegativeOutline 속성이 #C62828에서 #ee5879로 변경되었습니다.
    • 마커의 두께를 1px에서 2px로 변경
    • ​IgrPointSeries, IgrBubbleSeries, IgrScatterSeries, IgrPolarScatterSeries에 대한 마커 윤곽선과 일치하도록 마커 채우기를 변경했습니다. 이 변경 사항을 취소하려면 markerFillMode 속성을 Normal로 설정하면 됩니다.
    • ​IgrTimeXAxis 및 IgrOrdinalTimeXAxis에 대한 압축 레이블 지정
    • 새 마커 속성:
      • 시리즈. markerFillMode- 마커가 윤곽선에 따라 달라지도록 MatchMarkerOutline으로 설정할 수 있습니다.
      • 시리즈. markerFillOpacity- 0에서 1 사이의 값으로 설정할 수 있습니다.
      • 시리즈. markerOutlineMode-MatchMarkerBrush로 설정할 수 있으므로 마커의 윤곽선이 채우기 브러시 색상에 따라 달라집니다.
    • 새 시리즈 속성:
      • 시리즈. outlineMode- 시리즈 개요 표시 여부를 전환하도록 설정할 수 있습니다. 데이터 차트의 경우 속성은 시리즈에 있습니다.
    • 차트가 기본 확대/축소 수준일 때 뷰포트에 도입된 블리드 오버 영역을 정의하는 새로운 차트 속성입니다. 일반적인 사용 사례는 축과 첫 번째/마지막 데이터 포인트 사이에 공간을 제공하는 것입니다. 아래에 나열된 computedPlotAreaMarginMode는 마커가 활성화되면 자동으로 여백을 설정합니다. 다른 것들은 두께를 나타내기 위해 Double을 지정하도록 설계되었으며 PlotAreaMarginLeft 등은 차트의 네 면 모두에 대한 공간을 조정합니다.
    • 새 하이라이트 속성
      • 차트. highlightingMode- 호버링 또는 호버링되지 않은 시리즈를 희미하게 하거나 밝게 할지 여부를 설정합니다.
      • 차트. highlightingBehavior- 마우스 위치(예: 바로 위 항목 또는 가장 가까운 항목)에 따라 계열이 강조 표시되는지 여부를 설정합니다.
      • 참고로 이전 릴리스에서는 강조 표시가 호버 시 페이드되는 것으로 제한되었습니다.
    • 스택형, 분산형, 극좌표, 방사형 및 도형 시리즈 강조 표시 추가:
    • Stacked, Scatter, Polar, Radial 및 Shape 시리즈에 주석 레이어를 추가했습니다.
    • 누적 시리즈 내에서 개별 스택 조각의 데이터 소스를 재정의하기 위한 지원이 추가되었습니다.
    • Stacked, Scatter, Range, Polar, Radial 및 Shape 시리즈에 사용자 정의 스타일 이벤트 추가
    • 세로 확대/축소를 시리즈 콘텐츠에 자동으로 동기화하는 지원 추가
    • 표시된 초기 레이블을 기반으로 차트의 가로 여백을 자동으로 확장하는 지원이 추가되었습니다.
    • 계열 및 마커의 재설계된 색상 팔레트:
    오래된 브러시/윤곽선 새로운 아웃라인/브러시
    #7446B9
    #9FB328
    #F96232
    #2E9CA6
    #DC3F76
    #FF9800
    #3F51B5
    #439C47
    #795548
    #9A9A9A    		 #8bdc5c
    #8b5bb1
    #6db1ff
    #f8a15f
    #ee5879
    #735656
    #f7d262
    #8ce7d9
    #e051a9
    #a8a8b7

    예를 들어:

    차트 범례

    • ItemLegend에 Bubble, Donut, 파이 차트와 함께 사용할 수 있는 horizontal orientation 속성을 추가했습니다.
    • 추가 legendHighlightingMode 속성 - 범례 항목 위로 마우스를 가져갈 때 계열 강조 표시를 활성화합니다.

    igniteui-react-maps (GeoMap)

    [!Note] These features are CTP

    • 지도의 랩 어라운드 표시에 대한 지원 추가(가로 무한 스크롤)
    • 좌표 원점을 둘러싸는 동안 일부 지도 시리즈의 디스플레이 이동에 대한 지원이 추가되었습니다.
    • 도형 계열 강조 표시 지원 추가
    • 모양 시리즈의 일부 주석 레이어에 대한 지원 추가

    igniteui-react-grids (Data Grid)

    • Added EditOnKeyPress aka Excel-style Editing, instantly begin editing when typing.
    • ​EditModeClickAction 속성이 추가되었습니다. - 기본적으로 편집 모드로 들어가려면 두 번 클릭해야 합니다. 새 셀을 선택할 때 편집 모드가 발생하도록 하려면 SingleClick으로 설정할 수 있습니다.
    • ​EnterKeyBehaviors 속성 추가(일명 Excel 스타일 탐색(Enter 동작)) – Enter 키의 동작을 제어합니다. 예를 들어 옵션은 (없음, 편집, 위, 아래, 왼쪽, 오른쪽으로 이동)입니다.
    • ​EnterKeyBehaviorAfterEdit 속성이 추가되었습니다. - 편집 모드에 있는 동안 이 속성은 Enter 키를 눌렀을 때를 제어합니다. 예를 들어 옵션은 다음과 같습니다(아래, 위, 오른쪽, 왼쪽 셀로 이동).
    • Added SelectAllRows - method.
    • 행 범위 선택 추가 -GridSelectionMode 속성이 MultipleRow로 설정된 경우 이제 다음과 같은 새로운 기능이 포함됩니다.
      • 행을 선택하려면 클릭하고 드래그하세요.
      • 여러 행을 선택하려면 Shift 키를 누른 채 클릭하세요.
      • 여러 행을 선택하려면 Shift 키를 누른 채 위쪽/아래쪽 화살표 키를 누르세요.
    • 스페이스바를 누르면 MultipleRow 또는 SingleRow로 설정된 GridSelectionMode 속성을 통해 활성 행 선택이 전환됩니다.
    • Added Column Summaries to Column Options Dialog.

    igniteui-react-inputs (Inputs)

    날짜 선택기

    • showTodayButton- 오늘 버튼 표시 여부를 전환합니다.
    • label- 날짜 값 위에 라벨을 추가합니다.
    • placeholder 속성 - 선택된 값이 없을 때 사용자 정의 텍스트를 추가합니다.
    • formatString - Customize input date string e.g. (yyyy-MM-dd)
    • dateFormat- 선택한 날짜를 LongDate 또는 ShortDate로 표시할지 여부를 지정합니다.
    • firstDayOfWeek- 주의 첫 번째 요일을 지정합니다.
    • firstWeekOfYear- 연도의 첫 번째 주를 표시할 시기를 지정합니다(예: 첫 번째 전체 주, 처음 4일 주).
    • showWeekNumbers - Toggles Week number visibility
    • minDate & maxDate- 선택 가능한 날짜 범위를 지정하는 날짜 제한입니다.
    • 추가된 접근성

    16.12.3 (November 2020)

    igniteui-react-grids (Data Grid)

    [!Note] These breaking changes were introduce in the grid package.

    • PropertyPath의 이름이 변경되었습니다.

    데이터 그리드 구성 요소 속성 propertyPath 이름이 field로 변경되었습니다. 이는 모든 열 유형, GroupDescription, SortDescription 및 SummaryDescription에 적용됩니다.

     <IgrTextColumn field="Name"/>

    import { IgrColumnSummaryDescription, IgrColumnSortDescription, IgrColumnGroupDescription } from 'igniteui-react-grids'
const productCount = new IgrColumnSummaryDescription();
productCount.field = "ProductName";
const colSortDesc = new IgrColumnSortDescription();
colSortDesc.field = "UnitsInStock";
const income = new IgrColumnGroupDescription();
income.field = "Income";

    16.12.2 (April 2020)

    igniteui-react-grids (Data Grid)

    • 라이브그리드 명칭 변경

    데이터 그리드 구성 요소와 해당 모듈의 이름이 "LiveGrid"에서 "DataGrid"로 변경되었습니다.

    [!Note] These breaking changes were introduce in these packages and components only:

    그리드와 해당 모듈을 가져오기 위한 새 코드는 다음과 같습니다.

    import { IgrDataGrid } from "igniteui-react-grids";
import { IgrDataGridModule } from 'igniteui-react-grids';
    • 데이터 그리드에 필요한 피어 종속성

    데이터 그리드 구성 요소에는 "inputs" 패키지가 필요합니다.

    **npm install --save igniteui-react-inputs**

    16.11.7

    • 변경된 수입 명세서

    API 클래스 및 열거형에 대한 전체 경로 대신 패키지 이름만 사용하도록 가져오기 문이 간소화되었습니다.

    [!Note] These breaking changes were introduce in these packages and components only:

    영향을 받는 패키지 영향을 받는 구성 요소
    igniteui-react-excel 엑셀 라이브러리
    igniteui-react-spreadsheet 스프레드시트
    igniteui-react-maps 지역 지도, 트리맵
    igniteui-react-gauges 불릿 그래프, 선형 계기, 방사형 게이지
    igniteui-react-charts 카테고리 차트, 데이터 차트, 도넛 차트, 금융 차트], 파이 차트, 확대/축소 슬라이더
    igniteui-react-core 모든 클래스와 열거형
    igniteui-반응-그리드 데이터 그리드
    • 변경 후 코드

    이제 API 클래스 및 열거형에 대한 전체 경로 대신 패키지 이름만 사용해야 합니다.

    Data Grid 구성 요소 및 해당 모듈의 이름도 변경되었습니다.

    // gauges:
import { IgrLinearGauge } from "igniteui-react-gauges";
import { IgrLinearGaugeModule } from "igniteui-react-gauges";
import { IgrLinearGraphRange } from "igniteui-react-gauges";
import { IgrRadialGauge } from 'igniteui-react-gauges';
import { IgrRadialGaugeModule } from 'igniteui-react-gauges';
import { IgrRadialGaugeRange } from 'igniteui-react-gauges';
import { SweepDirection } from 'igniteui-react-core';
// charts:
import { IgrFinancialChart } from 'igniteui-react-charts';
import { IgrFinancialChartModule } from 'igniteui-react-charts';
import { IgrDataChart } from 'igniteui-react-charts';
import { IgrDataChartCoreModule } from 'igniteui-react-charts';
// maps:
import { IgrGeographicMap } from "igniteui-react-maps";
import { IgrGeographicMapModule } from "igniteui-react-maps";
// grids:
import { IgrLiveGrid } from "igniteui-react-grids";
import { IgrLiveGridModule } from 'igniteui-react-grids';
    • 변경 전 코드

    이전에는 API 클래스 및 열거형에 대한 전체 경로를 사용하여 가져와야 했습니다.

    // gauges:
import { IgrLinearGauge } from "igniteui-react-gauges/ES5/igr-linear-gauge";
import { IgrLinearGaugeModule } from "igniteui-react-gauges/ES5/igr-linear-gauge-module";
import { IgrLinearGraphRange } from "igniteui-react-gauges/ES5/igr-linear-graph-range";

import { IgrRadialGauge } from "igniteui-react-gauges/ES5/igr-radial-gauge";
import { IgrRadialGaugeModule } from "igniteui-react-gauges/ES5/igr-radial-gauge-module";
import { IgrRadialGaugeRange } from "igniteui-react-gauges/ES5/igr-radial-gauge-range";
import { SweepDirection } from "igniteui-react-core/ES5/SweepDirection";

// charts:
import { IgrFinancialChart } from "igniteui-react-charts/ES5/igr-financial-chart";
import { IgrFinancialChartModule } from "igniteui-react-charts/ES5/igr-financial-chart-module";
import { IgrDataChart } from "igniteui-react-charts/ES5/igr-data-chart";
import { IgrDataChartCoreModule } from "igniteui-react-charts/ES5/igr-data-chart-core-module";

// maps:
import { IgrGeographicMap } from "igniteui-react-maps/ES5/igr-geographic-map";
import { IgrGeographicMapModule } from "igniteui-react-maps/ES5/igr-geographic-map-module";

// grids:
import { IgrLiveGrid } from "igniteui-react-grids/ES5/igr-live-grid";
import { IgrLiveGridModule } from 'igniteui-react-grids/ES5/igr-live-grid-module';