Ignite UI for React 変更ログ

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

19.0.0 (June 2025)

igniteui-react-charts (チャート)

• 新しいチャート データ注釈

  • データ注釈バンド レイヤー (ベータ版)
  • データ注釈ライン レイヤー (ベータ版)
  • データ注釈矩形レイヤー (ベータ版)
  • データ注釈スライス レイヤー (ベータ版)
  • データ注釈ストリップ レイヤー (ベータ版)

• データ ツールチップとデータ 凡例では、ツールチップまたは凡例のコンテンツをテーブルまたは垂直レイアウト構造でレイアウトするために使用できる新しい LayoutMode プロパティが公開されています。

• チャートの defaultInteraction プロパティが更新され、新しい列挙体 DragSelect が含まれるようになりました。これにより、ドラッグされたプレビュー Rect は、その中に含まれるポイントを選択します。 (ベータ版)

• ValueOverlay と ValueLayer は、上記にリストした新しい チャート データ注釈に加えて、プロット領域に追加の注釈テキストをオーバーレイするために使用できる OverlayText プロパティを公開するようになりました。これらの注釈の外観は、OverlayText プレフィックスが付いた多くのプロパティを使用して構成できます。たとえば、OverlayTextBrush プロパティはオーバーレイ テキストの色を構成します。 (ベータ版)

• 新しいトレンドライン レイヤー シリーズ タイプを使用すると、トレンド ライン レイヤーごとに 1 つのトレンド ラインを特定のシリーズに適用できます。これにより、チャートに複数の TrendlineLayer シリーズ タイプを使用できるため、単一のシリーズで複数のトレンド ラインを使用できるようになります。

igniteui-react-dashboards (ダッシュボード)

• DashboardTile では、ソート、グループ化、フィルタリング、選択などの集計を DataGrid ビューからチャート視覚化に伝播できるようになりました。これは現在、DashboardTile の DataSource を LocalDataSource のインスタンスにバインドすることによってサポートされています。

igniteui-react-grids

重大な変更

• DataGrid と IgrMultiColumnComboBox は、igniteui-react-data-grids パッケージの一部になりました。

機能拡張

Toolbar

• ツールバーから追加された値レイヤーが凡例に表示されるようになりました。
• ズーム リセット ツールはズーム ドロップダウンに移動されました。

Data Pie Chart

• チャートは GetOthersContext() メソッドを公開するようになりました。これにより、Others (その他) スライスのコンテンツが返されます。

バグ修正

バグ番号	コントロール	説明
25997	IgrDataGrid	集計はグループ化された最初の子行にのみ表示される。
37023	IgrDataChart	overflow: hidden が設定されている場合にツールチップが切り取られたり画面外に表示されたりする。
37244	Excel	カスタム データ検証が機能しない。.
37685	IgrSpreadsheet	Arial フォントで書式設定された数値が正しく描画されない。

19.0.0 (April 2025)

[!Note] バージョン 19.0.0 では、React 製品に多くの重大な変更が導入され、API の改善と整理が行われました。詳細は完全なアップデートガイドをご参照ください。

アップデート ガイド

削除済

• IgrCheckboxChangeEventArgs は削除されました。代わりに IgrCheckboxChangeEventArgs を使用してください。
• IgrRadioChangeEventArgs は削除されました。代わりに IgrRadioChangeEventArgs を使用してください。
• IgrRangeSliderValue は削除されました。代わりに IgrRangeSliderValueEventArgs を使用してください。
• ActiveStepChangingArgs は削除されました。代わりに IgrActiveStepChangingEventArgs を使用してください。
• ActiveStepChangedArgs は削除されました。代わりに IgrActiveStepChangedEventArgs を使用してください。

機能拡張

Stepper

Stepper Step の titlePosition は、同じ動作を持つ undefined ではなく、デフォルトで auto に設定されるようになりました。

Tabs

igr-tab パネル プロパティは削除されました。

igr-tab-panel コンポーネントは削除されました。igr-tab では、タブ ヘッダーとタブ コンテンツの両方が 1 つのコンポーネントに含まれるようになりました。

18.9.0 (April 2025)

新しいコンポーネント

• TileManager

機能拡張

List

• IgrListItem に新しいプロパティ selected を追加しました。

Accordion

• 新しいイベント Open および Close を追加しました。

igniteui-react-grids

• すべてのグリッド
  • IgrFilteringExpressionsTree プロパティを使用して初期フィルタリングの適用が可能になりました。

非推奨

• button の clicked イベントは非推奨となりました。代わりにネイティブの onClick ハンドラーを使用してください。

バグ修正

バグ番号	コントロール	説明
25602	IgrDataGrid	日付特有のフィルター演算子を含むレイアウトを読み込むと、TypeError がコンソールに出力される。
28480	IgrCombo	データ ソースを置き換えた際に未定義の参照エラーが発生する。
30319	IgrDataGrid	値が変更されていないにもかかわらず、レコードがソートされる。
32598	IgrDataGrid	複数選択が正しく動作しない。
36374	IgrInput	タッチ デバイスでフォームを送信すると、以前の値がバインドされる。

18.8.1 (March 2025)

igniteui-react-grids

次の表は、このリリースの Ignite UI for React ツールセットに対して行われたバグ修正を示しています。

バグ番号	コントロール	説明
36864	グリッド	React ライセンス パッケージのインポート パス "grids/combined" が正しくない。

18.8.0 (March 2025)

igniteui-react-grids

• すべてのグリッド
  • グリッドの列に新しい disabledSummaries が追加され、開発者が一部の集計をスキップできるようにしました。
  • 内部グリッド アクション ボタンをカプセル化しました。

igniteui-react

• Dockmanager に、分割内で直接ドッキングできる新しい allowSplitterDock プロパティが追加されました。
• Dockmanager の IgrSplitPane に新しい useFixedSize プロパティが追加され、新しいサイズ変更動作が可能になりました。

機能拡張

Toolbar

• IgrToolbar と IgrToolPanel に新しい groupHeaderTextStyle プロパティを追加しました。設定されている場合、すべての IgrToolActionGroupHeader アクションに適用されます。
• タイトル テキストの水平方向の配置を制御する titleHorizontalAlignment という新しいプロパティを IgrToolAction に追加しました。
• IgrToolActionSubPanel に、パネル内の項目間の間隔を制御する itemSpacing という新しいプロパティを追加しました。

バグ修正

次の表は、このリリースの Ignite UI for React ツールセットに対して行われたバグ修正を示しています。

バグ番号	コントロール	説明
32093	IgrPivotGrid	PivotDateDimensionOptions は PivotDateDimension には適用されない。
26218	Excel Library	Excel ファイルを読み込むだけで、チャートのプロット領域の右マージンが狭くなり、塗りつぶしパターンと前景の塗りつぶしが消える。
30286	IgrDataChart	バブルをクリックすると、Bubble Series のツールチップが近くのバブル データの内容に切り替わる。
32906	IgrDataChart	IgrDataChart は上部に 2 つの xAxis を表示している。
33605	IgrDataChart	凡例に ScatterLineSeries の線の色が正しく表示されない。
34053	IgrRadialGauge	スケール ラベルの位置がずれる。
34083	Excel Library	テンプレート Excel ファイルのテキストに 「=」 が含まれている場合、TextOperatorConditionalFormat が正しく読み込まれない/保存されない。
34324	IgrGrid	グリッド テンプレートの条件による列の非表示が機能しない。
34678	IgrGrid	列挙型の値が文字列に変換され、一部のグリッドプロパティで想定される数値の動作が壊れる
34776	IgrDataChart	IgrDataChart を繰り返し表示したり非表示にしたりすると、JS ヒープでメモリ リークが発生する。
35495	Excel Library	テンプレート ファイルを読み込むと、セル内の画像が失われる。
35496	IgrSpreadsheet	Excel に画像付きでスタイルを設定すると エラーが発生する。
35498	IgrDataChart	IncludedSeries で指定されたシリーズのツールチップは表示されない。
36176	Excel Library	LET 関数を含む Excel ブックを読み込むと、例外が発生する。
36379	Excel Library	Excel ワークブック内のアルファ チャネルを含む色は読み込まれない。

18.7.7 (January 2025)

• バグ修正

igniteui-react-grids

• すべてのグリッド
  • 複数の重複したブラウザー タブでコンポーネントが開かれた場合に発生する重大なメモリ リークを修正しました。

18.7.6 (December 2024)

igniteui-react-charts (チャート)

DashboardTile (ベータ版)

• 新しい Dashboard Tile コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの Toolbar コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。

igniteui-react-charts (入力)

• 新しい ColorEditor (ベータ版) と Toolbar の ToolAction (ベータ版)

この新しいカラー エディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために Toolbar コンポーネントに統合されました。

18.7.4 (November 2024)

一般

• 新しい Carousel コンポーネント。
• IgrInput
  • change イベント引数タイプを IgrComponentDataValueChangedEventArgs から IgrComponentValueChangedEventArgs に変更しました。

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)

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

• クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。

• ツールバーの 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 (データ グリッド)

• 新規機能:
  • フィルター行
  • レイアウトのカスタマイズ読み込み/保存
  • 列をグループ化するための GroupBy 領域
  • セルの結合
• 新規 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-data-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-data-grids";
import { IgrDataGridModule } from 'igniteui-react-data-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-data-grids";
import { IgrLiveGridModule } from 'igniteui-react-data-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-data-grids/ES5/igr-live-grid";
import { IgrLiveGridModule } from 'igniteui-react-data-grids/ES5/igr-live-grid-module';