Ignite UI for React 変更ログ

Ignite UI for React の各バージョンのすべての重要な変更は、このページに記載されています。

18.7.0 (September 2024)

igniteui-react-charts (チャート)

新しいデータ円チャート - IgrDataPieChart は円ャートを表示する新しいコンポーネントです。このコンポーネントは、IgrCategoryChart と同様に動作し、基になるデータモデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、強調表示、アニメーション、凡例のサポートを可能にします。
新しい比例カテゴリ角度軸 - スライスをプロットするための、IgrDataChart のラジアル円シリーズの新しい軸。円チャートに似ており、データポイントが円グラフ内のセグメントとして表されます。
IgrToolbar
- 新しい ToolActionCheckboxList。選択用のチェックボックスを備えた項目のコレクションを表示する新しい CheckboxList ToolAction。 ToolAction CheckboxList 内のグリッドの高さは 5 項目まで大きくなり、その後スクロールバーが表示されます。 IgrCheckboxListModule を登録する必要があります。
- 新しいフィルタリングのサポート。
- 軸フィールドの変更。 CategoryChart をターゲットにする場合のツールバーの新しいデフォルトの IconMenu。ラベルフィールドは X 軸にマップされ、値フィールドは Y 軸にマップされます。ターゲットチャートは、行われた変更にリアルタイムで反応します。チャートに ItemsSource が設定されていない場合、IconMenu は非表示になります。

igniteui-react

新しい Banner コンポーネント。
新しい DatePicker コンポーネント。
新しい IgrDivider コンポーネント。
すべてのコンポーネントにネイティブイベントのサポートが追加されました。
IgrIcon
- setIconRef メソッドが追加されました。これにより、アイコンを SVG ファイルで登録および置き換えることができます。
- すべてのコンポーネントが内部的な参照によるアイコンを使用するようになり、カスタムテンプレートを明示的に提供しなくても簡単に置き換えられるようになりました。
IgrCombo、DatePicker、IgrDialog、IgrDropdown、 ExpansionPanel、IgrNavDrawer、IgrToast、IgrSnackbar、IgrSelectComponent
- トグルメソッドの show、hide、toggle メソッドは、成功した場合に true を返すようになりました。そうでない場合は false。
IgrButtonComponent、IgrIconButton、IgrCheckbox、IgrSwitch、IgrCombo、IgrDateTimeInput、IgrInput、IgrMaskInput、IgrRadio、IgrSelectComponent、IgrTextarea
- カスタムの focus および blur イベントは非推奨になりました。代わりにネイティブの onFocus および onBlur イベントを使用してください。
IgrRadioGroup
- name および value プロパティを追加しました。

重大な変更:

古い IgrDatePicker の名前を IgrXDatePicker に変更しました。
Form コンポーネントを削除しました。代わりにネイティブのフォームを使用してください。
以下のコンポーネントの size プロパティが削除され、代わりに --ig-size CSS カスタムプロパティが使用されるようになりました。
- IgrAvatar、 IgrButtonComponent、IgrIconButton、IgrCalendar、IgrChip、IgrDropdown、IgrIcon、IgrInput、IgrList、IgrRating、IgrSnackbar、IgrTabs、IgrTree
IgrBadge、IgrChip、IgrLinearProgress、IgrCircularProgress
- Variant プロパティタイプの名前を StyleVariant に変更しました。
IgrCalendar
- WeekStart プロパティタイプの名前を WeekDays に変更しました。
IgrCheckbox、IgrSwitch
- change イベント引数タイプを IgrComponentBoolValueChangedEventArgs から IgrCheckboxChangeEventArgs に変更しました。
IgrCombo、IgrSelectComponent
- positionStrategy、flip、sameWidth プロパティが削除されました。
IgrDateTimeInput
- maxValue および minValue プロパティが削除されました。代わりに max および min を使用してください。
IgrDropdown
- positionStrategy プロパティが削除されました。
IgrInput
- 古い名前の maxlength および minlength プロパティが削除されました。maxLength および minLength を使用してください。
- 古い名前の readonly および inputmode プロパティが削除されました。readOnly および inputMode を使用してください。
- inputMode タイプも string (文字列) に変更されました。
IgrRadio
- change イベント引数タイプを IgrComponentBoolValueChangedEventArgs から IgrRadioChangeEventArgs に変更しました。
IgrRangeSlider
- ariaThumbLower および ariaThumbUpper プロパティが削除されました。代わりに thumbLabelLower および thumbLabelUpper を使用してください。
IgrRating
- readonly プロパティの名前を readOnly に変更しました。

igniteui-react-grids

すべてのグリッド
- 新しい RowClick イベントが追加されました。
IgrPivotGrid
- IgrPivotDimension に sortable プロパティが追加されました。
- 水平レイアウトが追加されました。新しい pivotUI プロパティ内で rowLayout horizontal として有効にできます。
- 水平レイアウトのみの行ディメンションサマリーが追加されました。horizontalSummary を true に設定することで、各 IgrPivotDimension に対して有効にできます。
- 水平集計の位置を設定するための horizontalSummariesPosition プロパティを pivotUI に追加しました。
- 行ディメンションの行ヘッダーが追加されました。新しい pivotUI プロパティ内で showHeaders true として有効にできます。
- キーボードナビゲーションで行ディメンションヘッダーや列ヘッダーから行ヘッダーへ移動できるようになりました。
- キーボード操作で行ディメンションの縮小 (Alt + ↑ ↓ ← →) および行ヘッダーのソート (Ctrl + ↑ ↓) ができるようになりました。

重大な変更:

すべてのグリッド
- IgrRowIsland
- displayDensity の非推奨のプロパティが削除されました。
- actualColumns、contentColumns プロパティの名前を、actualColumnList および contentColumnList に変更しました。すべての列を取得するには、columns または columnList プロパティを使用してください。
- rowDelete および rowAdd イベント引数タイプの名前を IgrRowDataCancelableEventArgs に変更しました。
- contextMenu イベント引数タイプの名前を IgrGridContextMenuEventArgs に変更しました。
- IgrGridEditEventArgs、IgrGridEditDoneEventArgs、IgrPinRowEventArgs イベントの rowID および primaryKey プロパティが削除されました。代わりに rowKey を使用してください。
IgrPivotGrid
- showPivotConfigurationUI プロパティが削除されました。pivotUI を使用して、その中に新しい showConfiguration オプションを設定してください。
IgrColumn
- movable プロパティが削除されました。グリッドの moving プロパティを使用してください。
- columnChildren プロパティが削除されました。代わりに childColumns を使用してください。
columnGroup
- children プロパティが削除されました。代わりに childColumns を使用してください。
IgrPaginator
- isFirstPageDisabled および isLastPageDisabled プロパティが削除されました。代わりに、isFirstPage および isLastPage を使用してください。

18.6.1 (June 2024)

igniteui-react

IgrInput、IgrTextarea - ユーザー入力を制限することなく検証ルールを適用できるように validateOnly を公開しました。
IgrDropdown - IgrPositionStrategy プロパティは非推奨です。ドロップダウンは、ブラウザービューポートの最上位レイヤーにコンテナーをレンダリングするために Popover API を使用するようになったため、このプロパティは廃止されました。
IgrDockManager - IgrSplitPane の isMaximized は非推奨です。分割ペインレベルで isMaximized を true に設定しても、分割ペインはコンテナーとしてのみ機能し、最大化されて表示される実際のコンテンツがないため、実際の効果はありません。代わりに、IgrTabGroupPane および/または IgrContentPane の isMaximized プロパティを使用してください。

igniteui-react-grids

DisplayDensity は非推奨となり、代わりに --ig-size CSS カスタムプロパティが使用されるようになりました。詳細については、グリッドサイズトピックを参照してください。
IgrPivotGrid - コンポーネントの構成が正しく適用できるようになりました。

igniteui-react-charts (チャート)

データ凡例のグループ化とデータツールチップのグループ化 - 新しいグループ化機能が追加されました。GroupRowVisible プロパティは、各シリーズのグループ化を切り替え、オプトインすると dataLegendGroup プロパティを介してグループテキストを割り当てることができます同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。

チャートの選択 - 新しいシリーズ選択のスタイル設定。これは、IgrCategoryChart および IgrDataChart のすべてのカテゴリ、財務、およびラジアルシリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、SelectedSeriesItemsChanged イベントと selectedSeriesItems は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。
比例カテゴリ角度軸 - IgrDataChart のラジアル円シリーズの新しい軸により、データチャートのすべての追加機能を使用してロバスト可能な視覚化をする円チャートの作成が可能になります。
ツリーマップのハイライト表示 - ツリーマップの項目のマウスオーバーによるハイライト表示を構成できる highlightingMode プロパティが公開されました。このプロパティには 2 つのオプションがあります: Brighten では、マウスを置いた項目にのみハイライト表示が適用され、FadeOthers では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、highlightingTransitionDuration プロパティを使用して制御できます。
ツリーマップのパーセントベースのハイライト表示 - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい highlightedDataSource を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。highlightedValuesDisplayMode で切り替えることができ、FillBrushes でスタイルを設定できます。
IgrToolbar - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい IsHighlighted オプション。

igniteui-react-gauges (ゲージ)

IgrRadialGauge
- ハイライト針の新しいラベル。highlightLabelText と highlightLabelSnapsToNeedlePivot および、その他の HighlightLabel の多くのスタイル関連プロパティが追加されました。

18.6.0 (March 2024)

igniteui-react-charts

initialFilter プロパティによる新しいデータフィルタリング。フィルター式を適用して、チャートデータをレコードのサブセットにフィルターします。大規模なデータのドリルダウンに使用できます。
XamRadialChart
- 新しいラベルモード IgrCategoryAngleAxis は、ラベルの位置をさらに構成できる labelMode プロパティを公開するようになりました。これにより、Center 列挙型を選択してデフォルトモードを切り替えることも、ラベルを円形のプロット領域に近づける新しいモード ClosestPoint を使用することもできます。

igniteui-react-grids

新しい [IgrHierarchicalGrid](grids/hierarchical-grid/overview.md) コンポーネント

igniteui-react-gauges

IgrRadialGauge
- 新しいタイトル/サブタイトルのプロパティ。titleText、subtitleText はゲージの下部近くに表示されます。さらに、TitleFontSize、TitleFontFamily、TitleFontStyle、TitleFontWeight、titleExtent など、さまざまなタイトルとサブタイトルのフォントプロパティが追加されました。最後に、新しい titleDisplaysValue により、値を針の位置に対応させることができます。
- IgrRadialGauge の新しい opticalScalingEnabled プロパティと opticalScalingSize プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカルスケーリングを持つサイズを管理します。この新機能の詳細については、こちらを参照してください。
- 新しいハイライト針が追加されました。highlightValue と highlightValueDisplayMode の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。
IgrLinearGauge
- 新しいハイライト針が追加されました。highlightValue と highlightValueDisplayMode の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。
IgrBulletGraph
- highlightValueDisplayMode が 'Overlay' 設定に適用されたとき、パフォーマンスバーには値と新しい highlightValue の差が反映されるようになりました。ハイライト値には、フィルタリング/サブセットが完了した測定パーセンテージが塗りつぶされた色で表示され、残りのバーの外観は割り当てられた値に対して薄く表示され、リアルタイムでパフォーマンスを示します。

igniteui-react

新しい IgrTextarea コンポーネント
新しい IgrButtonGroup コンポーネント
IgrDockManager
- 新しい proximityDock プロパティ。有効にすると、ドッキングインジケーターは表示されなくなり、エンドユーザーは、ドラッグしたペインをターゲットペインの端に近づけてドラッグすることでドッキングできます
- 新しい containedInBoundaries プロパティ。フローティングペインを Dock Manager の境界内に保持するかどうかを決定します。デフォルトは false です。
- 新しい showPaneHeaders プロパティ。ペインのヘッダーをホバー時にのみ表示するか、常に表示するかを決定します。デフォルトは always です。
IgrInput、IgrMaskInput、IgrDateTimeInput、IgrRating
- Readonly は readOnly に名前が変更されました。
IgrInput
- Maxlength は maxLength に名前が変更されました。
- Minlength は minLength に名前が変更されました。
IgrTree
- ノードをクリックすると展開状態が変更されるかどうかを決定する toggleNodeOnClick プロパティが追加されました。デフォルトは false です。
IgrRating
- allowReset が追加されました。有効にすると、同じ値を選択するとコンポーネントがリセットされます。動作の変更 - 以前のリリースでは、これが Rating コンポーネントのデフォルトの動作でした。アプリケーションでこの動作を維持する必要がある場合は、必ず allowReset を設定してください。
select、IgrDropdown
- selectedItem、items、および groups ゲッターが公開されました。

非推奨

Form コンポーネントは非推奨になりました。代わりにネイティブのフォーム要素を使用してください。
size プロパティと属性は、すべてのコンポーネントで非推奨になりました。代わりに --ig-size CSS カスタムプロパティを使用してください。次の例では、Avatar コンポーネントのサイズを小さく設定します:
```
.avatar {
    --ig-size: var(--ig-size-small);
}
```
IgrDateTimeInput
- MinValue および MaxValue プロパティは非推奨になりました。代わりに min および max を使用してください。
IgrRangeSlider
- AriaLabelLower および AriaLabelUpper プロパティは非推奨になりました。代わりに thumbLabelLower および thumbLabelUpper を使用してください。

削除済

デフォルトの属性を隠していた独自の dir 属性が削除されました。これは互換性のある変更です。
IgrSlider - ariaLabel シャドウプロパティ。これは互換性のある変更です。
IgrCheckbox - ariaLabelledBy シャドウ属性。これは互換性のある変更です。
IgrSwitch - ariaLabelledBy シャドウ属性。これは互換性のある変更です。
IgrRadio - ariaLabelledBy シャドウ属性。これは互換性のある変更です。

18.5.0 (January 2024)

igniteui-react-charts (チャート)

チャートのハイライト表示フィルター - IgrCategoryChart と IgrDataChart は、データのサブセットの内外でハイライト表示およびアニメーション化する方法を公開するようになりました。このハイライト表示の表示はシリーズのタイプによって異なります。列およびエリアシリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。

18.4.0 (December 2023)

igniteui-react-grids (Grid)

新規機能:
- 状態保持

18.3.0 (October 2023)

クリップボードを介してチャートを画像に保存するための保存ツールアクションが追加されました。
ツールバーの orientation プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。
ツールバーの renderImageFromText メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタムツールの作成がさらに強化されました。
Grid - これは新しい完全に機能するクロスプラットフォームグリッドで、フィルタリング、ソート、テンプレート、行の選択、行のグループ化、行のピン固定、移動可能な列などの機能が含まれています。

非推奨のコンポーネント

DataGrid - DataGrid は非推奨です。Grid を使用してください。

18.2.0 (June 2023)

新しいコンポーネント

Toolbar - ベータ版。このコンポーネントは、主にチャートコンポーネントで使用される UI 操作のコンパニオンコンテナーです。ツールバーは、IgrDataChart または IgrCategoryChart コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタムツールを作成して、エンドユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。

igniteui-react-charts (チャート)

ValueLayer - IgrValueLayer という名前の新しいシリーズタイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい valueLines コレクションに追加することで、IgrCategoryChart と IgrFinancialChart に適用されます。
ダッシュ配列を IgrDataChart のシリーズのさまざまな部分に適用できるようになりました。これは、チャートにプロットされたシリーズ、チャートのグリッド線、およびチャートにプロットされたシリーズのトレンドラインに適用できます。

18.1.0 (November 2022)

デフォルトの動作を大幅に改善し、カテゴリチャート API を改良して使いやすくしました。これらの新しいチャートの改善点は次のとおりです:

ブラウザー / 画面サイズに基づいた水平ラベル回転のレスポンシブレイアウト。
すべてのプラットフォームでの丸型ラベルの描画が強化されました。
StackedFragmentSeries にマーカープロパティを追加しました。
shouldPanOnMaximumZoom プロパティを追加しました。
新しいカテゴリ軸プロパティ:
- ZoomMaximumCategoryRange
- ZoomMaximumItemSpan
- ZoomToCategoryRange
- ZoomToItemSpan
カテゴリの文字列と数値をグループ化、ソート、集計するための新しいチャート集計 API により、チャートデータを事前に集計または計算する必要がなくなります。
- InitialSortDescriptions
- InitialSorts
- SortDescriptions
- InitialGroups
- InitialGroupDescriptions
- GroupDescriptions
- InitialSummaries
- InitialSummaryDescriptions
- SummaryDescriptions
- InitialGroupSortDescriptions
- GroupSorts
- GroupSortDescriptions

[!Note] includedProperties | excludedProperties を使用している場合、チャート集計は機能しません。チャートのこれらのプロパティは非集計データ用です。データを集計しようとすると、これらのプロパティは使用できなくなります。うまくいかない理由は、描画のためにチャートに渡されたコレクションを集計により置き換えるためです。include/exclude プロパティは、そのデータの in/out プロパティをフィルターするように設計されており、それらのプロパティは新しい集計されたコレクションには存在しません。

igniteui-react-grids (データグリッド)

IgrColumn を IgrDataGridColumn に変更しました。
GridCellEventArgs を IgrDataGridCellEventArgs に変更しました。
GridSelectionMode を DataGridSelectionMode に変更しました。
SummaryOperand を DataSourceSummaryOperand に変更しました。

16.16.0 (June 2022)

igniteui-react-charts (チャート)

高度に構成可能な DataLegend コンポーネントが追加されました。これは、IgrLegend とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。
高度に構成可能な DataToolTip が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャートタイプのデフォルトのツールチップになりました。
積層シリーズのアニメーションとトランジションインのサポートが追加されました。isTransitionInEnabled プロパティを true に設定すると、アニメーションを有効にできます。そこから、transitionInDuration プロパティを設定してアニメーションが完了するまでの時間を決定し、transitionInMode でアニメーションのタイプを決定できます。
追加された AssigningCategoryStyle イベントは、IgrDataChart のすべてのシリーズで利用できるようになりました。このイベントは、背景色の Fill やハイライト表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。
CalloutLayer の新しい allowedPositions 列挙体。チャート内のどこにコールアウトを配置するかを制限するために使用されます。デフォルトでは、コールアウトは最適な場所に配置されますが、これは TopLeft、TopRight、BottomLeft、または BottomRight を強制するために使用されます。
注釈レイヤーに追加された新しいコーナー半径プロパティ。各コールアウトのコーナーを丸めるために使用されます。コーナー半径がデフォルトで追加されていることに注意してください。
- CalloutLayer の calloutCornerRadius
- FinalValueLayer の axisAnnotationBackgroundCornerRadius
- CrosshairLayer の xAxisAnnotationBackgroundCornerRadius と yAxisAnnotationBackgroundCornerRadius
さまざまな方法でスクロールバーを有効にするための新しい horizontalViewScrollbarMode および verticalViewScrollbarMode 列挙体。isVerticalZoomEnabled または isHorizontalZoomEnabled と組み合わせると、チャートをナビゲートするための軸に沿ったスクロールバーを、常設またはフェードインおよびフェードアウトすることができます。
新しい FavorLabellingScaleEnd は、軸がスケールの最後にラベルを表示することを優先するかどうかを決定します。数値軸 (IgrNumericXAxis、IgrNumericYAxis、PercentChangeAxis など) とのみ互換性があります。
新しい isSplineShapePartOfRange は、軸に要求された軸範囲にスプライン形状を含めるかどうかを決定します。
新しい xAxisMaximumGap は、xAxisGap を使用するときにプロットされたシリーズの最大許容値を決定します。ギャップは、プロットされたシリーズの列またはバー間のスペースの量を決定します。
新しい xAxisMinimumGapSize は、xAxisGap を使用するときに、プロットされたシリーズの最小許容ピクセルベース値を決定し、各カテゴリ間に常にある程度の間隔があることを保証します。

igniteui-react-grids (データグリッド)

新機能 - 行ページングを追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロールバーを使用せずにデータを順次閲覧することができます。テーブルページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。

16.15.1 (December 2021)

igniteui-react-grids (データグリッド)

データグリッド

ドロップダウンの項目に複数のフィールドで構成されるキーが含まれている場合に使用される IgrComboBoxColumn に string[] 型の valueMultiField が追加されました。

[!Note] 以下の重大な変更が導入されました

valueField プロパティを string[] 型から string に変更しました。

igniteui-react-inputs (入力)

日付ピッカー

ValueChanged イベントを SelectedValueChanged に変更しました。

複数列コンボボックス

TextChanged イベントを TextValueChanged に変更しました。
ValueChanged イベントを SelectedValueChanged に変更しました。

16.15.0 (November 2021)

[!Note] パッケージ「lit-html」を確認してください。最適な互換性のために、「^2.0.0」以降がプロジェクトに追加されます。

igniteui-react-charts (チャート)

このリリースでは、地理マップとすべてのチャートコンポーネントのビジュアルデザインと構成オプションにいくつかの改善と簡素化が導入されています。

IgrFinancialChart と IgrCategoryChart の yAxisLabelLocation プロパティのタイプを AxisLabelLocation から YAxisLabelLocation に変更しました。
IgrFinancialChart の AxisLabelLocation から XAxisLabelLocation に xAxisLabelLocation プロパティのタイプを変更しました。
IgrCategoryChart に xAxisLabelLocation プロパティを追加しました。
凡例で IgrGeographicMap の地理的なシリーズを表すためのサポートが追加されました。
IgrFinancialChart とIgrCategoryChart にデフォルトの十字線を追加しました。
IgrFinancialChart とIgrCategoryChart にデフォルトの十字線の注釈を追加しました。
IgrFinancialChart にデフォルトで最終値の注釈を追加しました。
カテゴリチャートとファイナンシャルチャートに新しいプロパティを追加しました:
- 十字線をカスタマイズするための crosshairsLineThickness およびその他のプロパティ
- 十字線の注釈をカスタマイズするための crosshairsAnnotationXAxisBackground およびその他のプロパティ
- 最終値の注釈をカスタマイズするための finalValueAnnotationsBackground およびその他のプロパティ
- シリーズ塗りつぶしの不透明度を変更できる areaFillOpacity (エリアチャートなど)
- マーカーの厚さを変更できる markerThickness
カテゴリチャート、ファイナンシャルチャート、データチャート、および地理マップに新しいプロパティを追加しました。
- 同じチャート内の複数のシリーズにどのマーカータイプを割り当てることができる markerAutomaticBehavior
- 凡例で表されるすべてのシリーズのバッジの形状を設定するための legendItemBadgeShape
- 凡例のすべてのシリーズにバッジの複雑さを設定するための legendItemBadgeMode
データチャートと地理マップのシリーズに新しいプロパティを追加しました。
- 凡例で表される特定のシリーズにバッジの形状を設定するための legendItemBadgeShape
- 凡例の特定のシリーズにバッジの複雑さを設定するための legendItemBadgeMode
カテゴリチャートとシリーズで、デフォルトの垂直十字線ストロークを#000000 から #BBBBBB に変更しました。
同じチャートにプロットされたすべてのシリーズのマーカーの図形を円に変更しました。これは、チャートの markerAutomaticBehavior プロパティを SmartIndexed 列挙値に設定することで元に戻すことができます。
チャートの凡例のシリーズの簡略化された図形で、円、線、または四角のみを表示します。これは、チャートの legendItemBadgeMode プロパティを MatchSeries 列挙値に設定することで元に戻すことができます。
アクセシビリティを向上させるために、すべてのチャートに表示されるシリーズとマーカーのカラーパレットを変更しました

古いのブラシ/アウトライン	新のアウトライン/ブラシ
#8BDC5C #8B5BB1 #6DB1FF #F8A15F #EE5879 #735656 #F7D262 #8CE7D9 #E051A9 #A8A8B7	#8BDC5C #8961A9 #6DB1FF #82E9D9 #EA3C63 #735656 #F8CE4F #A8A8B7 #E051A9 #FF903B

igniteui-react-grids (データグリッド)

新規機能:
新規 API:
- SelectionChanged イベントを追加しました。複数行の選択など、選択のインタラクションの変化を検出するために使用されます。
重大な変更:
- グリッドの SummaryScope プロパティのタイプを DataSourceSummaryScope から SummaryScope に変更しました。
- GroupHeaderDisplayMode プロパティのタイプを DataSourceSectionHeaderDisplayMode から GroupHeaderDisplayMode に変更しました。

16.14.0 (April 2021)

igniteui-react-charts (チャート)

このリリースでは、すべてのチャートコンポーネントに、いくつかの新しく改善されたビジュアルデザインと構成オプションが導入されています。例えば、IgrDataChart、IgrCategoryChart、および IgrFinancialChart。

棒/縦棒/ウォーターフォールシリーズを、角丸ではなく角が四角になるように変更しました。
heat min プロパティの散布高密度シリーズの色を #8a5bb1 から #000000 に変更しました。
heat max プロパティの散布高密度シリーズの色を #ee5879 から #ee5879 に変更しました。
ファイナンシャル/ウォーターフォールシリーズの NegativeBrush および NegativeOutline プロパティを #C62828 から #ee5879 に変更しました
マーカーの厚さを 1 pxから 2 pxに変更しました。
IgrPointSeries、IgrBubbleSeries、IgrScatterSeries、IgrPolarScatterSeries のマーカーのアウトラインに一致するようにマーカーの塗りつぶしを変更しました。markerFillMode プロパティを Normal に設定すると、この変更を元に戻すことができます。
IgrTimeXAxis とIgrOrdinalTimeXAxis のラベリングを圧縮しました。
新しいマーカープロパティ:
- series.markerFillMode - マーカーがアウトラインに依存するように、MatchMarkerOutline に設定できます。
- series.markerFillOpacity - 0〜1 の値に設定できます。
- series.markerOutlineMode - マーカーのアウトラインが塗りブラシの色に依存するように、'MatchMarkerBrush' に設定できます。
新シリーズプロパティ:
- series.outlineMode - シリーズアウトラインの表示を切り替えるように設定できます。データチャートの場合、プロパティはシリーズ上にあることに注意してください。
チャートがデフォルトのズームレベルにあるときにビューポートに導入されるブリードオーバー領域を定義する新しいチャートプロパティを追加しました。一般的な使用例では、軸と最初/最後のデータポイントの間にスペースを提供します。以下にリストされている computedPlotAreaMarginMode は、マーカーが有効になっているときに自動的にマージンを設定することに注意してください。その他は、厚さを表す Double を指定するように設計されており、PlotAreaMarginLeft などがチャートの 4 辺すべてにスペースを調整します。
- chart.plotAreaMarginLeft
- chart.plotAreaMarginTop
- chart.plotAreaMarginRight
- chart.plotAreaMarginBottom
- chart.computedPlotAreaMarginMode
新しいハイライト表示プロパティ:
- chart.highlightingMode - ホバーされたシリーズとホバーされていないシリーズをフェードまたは明るくするかを設定します。
- chart.highlightingBehavior - 真上または最も近い項目など、マウスの位置に応じてシリーズをハイライト表示するかどうかを設定します。
- 以前のリリースでは、ハイライト表示はホバー時にフェードするように制限されていたことに注意してください。
積層型、散布、極座標、ラジアル、およびシェイプシリーズにハイライト表示を追加しました。
積層型、散布、極座標、ラジアル、およびシェイプシリーズに注釈レイヤーを追加しました。
積層型シリーズ内の個々の積層フラグメントのデータソースをオーバーライドするためのサポートが追加されました。
積層型、散布、範囲、極座標、ラジアル、シェイプシリーズにカスタムスタイルのイベントを追加しました。
垂直ズームをシリーズコンテンツに自動的に同期するサポートが追加されました。
表示された最初のラベルに基づいてチャートの水平マージンを自動的に拡張するサポートが追加されました。
シリーズとマーカーの再設計されたカラーパレット:

古いのブラシ/アウトライン	新のアウトライン/ブラシ
#7446B9 #9FB328 #F96232 #2E9CA6 #DC3F76 #FF9800 #3F51B5 #439C47 #795548 #9A9A9A	#8bdc5c #8b5bb1 #6db1ff #f8a15f #ee5879 #735656 #f7d262 #8ce7d9 #e051a9 #a8a8b7

例:

チャート凡例

バブル、ドーナツ、および円チャートで使用できる水平方向の orientation プロパティを ItemLegend に追加しました。
legendHighlightingMode プロパティの追加 - 凡例項目にホバーした時にシリーズのハイライト表示を有効にします。

igniteui-react-maps (GeoMap)

[!Note] これらの機能は CTP です。

マップの表示を折り返すためのサポートが追加されました (水平方向に無限にスクロールできます)。
座標原点を折り返しながら、一部のマップシリーズの表示をシフトするためのサポートが追加されました。
シェイプシリーズのハイライト表示のサポートが追加されました。

igniteui-react-grids (データグリッド)

EditOnKeyPress、(別名: Excel スタイルの編集) を追加し、入力するとすぐに編集を開始します。
EditModeClickAction プロパティを追加しました - デフォルトでは、編集モードに入るにはダブルクリックが必要です。これを SingleClick に設定して、新しいセルを選択するときに編集モードを実行できるようにすることができます。
EnterKeyBehaviors プロパティの追加 - 別名 Excel スタイルナビゲーション (Enter 動作) - Enter キーの動作を制御します。たとえば、オプションは none、edit、move up、down、left、right です。
EnterKeyBehaviorAfterEdit プロパティの追加 - 編集モードでは、このプロパティは Enter キーが押されたときを制御します。例えば、オプションは (下、上、右、左のセルに移動) です。
SelectAllRows メソッドを追加しました。
行範囲の選択を追加しました - GridSelectionMode プロパティを MultipleRow に設定すると、次の新しい機能が含まれるようになりました:
- クリックしてドラッグし、行を選択します。
- Shift キーを押しながらクリックして、複数の行を選択します。
- Shift キーを押しながら上下の矢印キーを押して、複数の行を選択します。
スペースバーを押すと、MultipleRow または SingleRow に設定された GridSelectionMode プロパティを介してアクティブな行の選択が切り替わります。
列オプションダイアログに列集計を追加しました。

igniteui-react-inputs (入力)

日付ピッカー

ShowTodayButton - 現在の日付のボタンの表示を切り替えます。
label - 日付値の上にラベルを追加します。
placeholder プロパティ - 値が選択されていない場合にカスタムテキストを追加します。
FormatString - 入力日付文字列をカスタマイズします。(例: yyyy-MM-dd)
DateFormat - 選択した日付を LongDate または ShortDate のどちらとして表示するかを指定します。
FirstDayOfWeek - 週の最初の曜日を指定します。
FirstWeekOfYear - 年の最初の週をいつ表示するかを指定します。例えば、最初の 1 週間、最初の 4 日間の週です。
ShowWeekNumbers - 週番号の表示を切り替えます。
MinDate & MaxDate - 使用可能の選択できる日付の範囲を指定する日付制限。
アクセシビリティの追加

16.12.3 (November 2020)

igniteui-react-grids (データグリッド)

[!Note] これらの重大な変更は、グリッドパッケージで導入されました。

PropertyPath の名称変更

データグリッドコンポーネントの propertyPath プロパティ名が field に変更されました。これは、すべての Column タイプ、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 (データグリッド)

Live Grid の名称変更

Data Grid コンポーネントおよび対応するモジュールの名前が「LiveGrid」から「DataGrid」に変更されました。

[!Note] これらの重大な変更は、これらのパッケージとコンポーネントでのみ導入されました:

グリッドとそれに対応するモジュールをインポートする新しいコードは以下のとおりです。

import { IgrDataGrid } from "igniteui-react-grids";
import { IgrDataGridModule } from 'igniteui-react-grids';

Data Grid の必須ピア依存関係

Data Grid コンポーネントには「inputs」パッケージが必要です。

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

16.11.7

import ステートメントの変更

Import ステートメントは、API クラスと列挙型へのフルパスではなくパッケージ名のみを使用するように簡素化されました。

[!Note] これらの重大な変更は、これらのパッケージとコンポーネントでのみ導入されました:

影響されるパッケージ	影響されるコンポーネント
igniteui-react-excel	Excel ライブラリ
igniteui-react-spreadsheet	スプレッドシート
igniteui-react-maps	地理マップ、ツリーマップ
igniteui-react-gauges	ブレットグラフ、リニアゲージ、ラジアルゲージ
igniteui-react-charts	カテゴリチャート、データチャート、ドーナツチャート、ファイナンシャルチャート、円チャート、ズームスライダー
igniteui-react-core	すべてのクラスと列挙型
igniteui-react-grids	データグリッド

変更後のコード

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

Ignite UI for React 変更ログ

18.7.0 (September 2024)

igniteui-react-charts (チャート)

igniteui-react

igniteui-react-grids

18.6.1 (June 2024)

igniteui-react

igniteui-react-grids

igniteui-react-charts (チャート)

igniteui-react-gauges (ゲージ)

18.6.0 (March 2024)

igniteui-react-charts

igniteui-react-grids

igniteui-react-gauges

igniteui-react

非推奨

削除済

18.5.0 (January 2024)

igniteui-react-charts (チャート)

18.4.0 (December 2023)

igniteui-react-grids (Grid)

18.3.0 (October 2023)

igniteui-react-grids (Toolbar - ベータ版)

非推奨のコンポーネント

18.2.0 (June 2023)

新しいコンポーネント

igniteui-react-charts (チャート)

18.1.0 (November 2022)

igniteui-react-grids (データ グリッド)

16.16.0 (June 2022)

igniteui-react-charts (チャート)

igniteui-react-grids (データ グリッド)

16.15.1 (December 2021)

igniteui-react-grids (データ グリッド)

データ グリッド

igniteui-react-inputs (入力)

日付ピッカー

複数列コンボボックス

16.15.0 (November 2021)

igniteui-react-charts (チャート)

igniteui-react-grids (データ グリッド)

16.14.0 (April 2021)

igniteui-react-charts (チャート)

チャート凡例

igniteui-react-maps (GeoMap)

igniteui-react-grids (データ グリッド)

igniteui-react-inputs (入力)

日付ピッカー

16.12.3 (November 2020)

igniteui-react-grids (データ グリッド)

16.12.2 (April 2020)

igniteui-react-grids (データ グリッド)

16.11.7

igniteui-react-grids (データグリッド)

igniteui-react-grids (データグリッド)

igniteui-react-grids (データグリッド)

データグリッド

igniteui-react-grids (データグリッド)

igniteui-react-grids (データグリッド)

igniteui-react-grids (データグリッド)

igniteui-react-grids (データグリッド)