From 12a188c31b9d382ee5e89953ccec1825df6c555d Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Tue, 22 Oct 2024 20:05:27 -0400 Subject: [PATCH 01/19] Adding changes from build igniteui-xplat-docs-make-pr-JP+KR_2024.10.23.2 --- jp/components/charts/features/chart-performance.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/jp/components/charts/features/chart-performance.md b/jp/components/charts/features/chart-performance.md index 2091ea12ca..4de5d2ece2 100644 --- a/jp/components/charts/features/chart-performance.md +++ b/jp/components/charts/features/chart-performance.md @@ -75,11 +75,9 @@ export class MultiDataSources { const dataSource1: any[] = []; dataSource1.push({ "Year": "1996", "Value": 148 }); dataSource1.push({ "Year": "2000", "Value": 142 }); - const dataSource2: any[] = []; dataSource2.push({ "Year": "1996", "Value": 110 }); dataSource2.push({ "Year": "2000", "Value": 115 }); - const multipleSources: any[] = [dataSource1, dataSource2]; return multipleSources; } From 4925107127ff7aba78a20eaa4cdda817f2efd686 Mon Sep 17 00:00:00 2001 From: ddaribo Date: Tue, 29 Oct 2024 13:38:19 +0200 Subject: [PATCH 02/19] feat(*): update topics with new fr related to input formats --- en/components/date-picker.md | 1 + en/components/date-range-picker.md | 2 ++ en/components/date-time-editor.md | 1 + en/components/grids_templates/editing.md | 18 ++++++++++++++++++ en/components/time-picker.md | 1 + 5 files changed, 23 insertions(+) diff --git a/en/components/date-picker.md b/en/components/date-picker.md index adbcd9fe92..38f54aaea5 100644 --- a/en/components/date-picker.md +++ b/en/components/date-picker.md @@ -213,6 +213,7 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker A good thing to note is that the the Angular DatePicker Component in Ignite UI will always add a leading zero on the `date` and `month` portions if they were provided in a format that does not have it, e.g. `d/M/yy` becomes `dd/MM/yy`. This applies only during editing. [`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) on the other hand uses Angular's [`DatePipe`](https://angular.io/api/common/DatePipe) and is used to format the picker's input when it is not focused. If no [`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) is provided, the picker will use the [`inputFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#inputFormat) as its [`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat). +Alternatively, if the [`inputFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#inputFormat) property is not set, the input format will be inferred from the [`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) in case it can be parsed as containing numeric date-time parts only. More information about these can be found in the [`IgxDateTimeEditor`](date-time-editor.md#examples) examples section. diff --git a/en/components/date-range-picker.md b/en/components/date-range-picker.md index 1a42ebbc24..f4e0bb6240 100644 --- a/en/components/date-range-picker.md +++ b/en/components/date-range-picker.md @@ -245,6 +245,8 @@ The `inputFormat` property accepts a constructed format string using characters ``` +If the [`inputFormat`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#inputFormat) property is not set, the input format will be inferred from the [`displayFormat`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#displayFormat) in case it can be parsed as containing numeric date-time parts only. + >[!NOTE] > The `IgxDateRangePicker` now supports IME input. When composition ends, the control converts the wide-character numbers to ASCII characters. diff --git a/en/components/date-time-editor.md b/en/components/date-time-editor.md index 983fcade77..5fb1e000be 100644 --- a/en/components/date-time-editor.md +++ b/en/components/date-time-editor.md @@ -126,6 +126,7 @@ Date Time Editor Directive has intuitive keyboard navigation that makes it easy The [`IgxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) supports different display and input formats. It uses Angular's [`DatePipe`](https://angular.io/api/common/DatePipe), which allows it to support predefined format options, such as `shortDate` and `longDate`. It can also accept a constructed format string using characters supported by the `DatePipe`, e.g. `EE/MM/yyyy`. Notice that formats like `shortDate`, `longDate`, etc., can be used as [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) only. Also, if no [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) is provided, the editor will use the [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputformat) as its [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat). +Alternatively, if the [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) property is not set, the input format will be inferred from the [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) in case it can be parsed as containing numeric date-time parts only. To set a specific input format, pass it as a string to the IgxDateTimeEditor directive. This will set both the expected user input format and the [mask](mask.md) for the editor. Additionally, the [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) is locale based, so if none is provided, the editor will default to the one used by the browser. diff --git a/en/components/grids_templates/editing.md b/en/components/grids_templates/editing.md index f5d31ed620..e812a657a2 100644 --- a/en/components/grids_templates/editing.md +++ b/en/components/grids_templates/editing.md @@ -70,6 +70,24 @@ In the @@igComponent if you set rowEditable property to true, and editable prope All available column data types could be found in the official [Column types topic](column-types.md#default-template). +#### Default template editors of date-time columns + +The template editors of `date`, `dateTime` and `time` column data types use a default input format as per the `IgxGrid`'s [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale). + +In case the [`pipeArgs`]({environment:angularApiUrl}/interfaces/columntype.html#pipeArgs) object `format` property is set on the column, the input format of the editors will be inferred from it. The condition is that it can be parsed as containing numeric date-time parts only. + +If the editors input format should be explicitly set, the [`editorOptions`]({environment:angularApiUrl}/interfaces/columntype.html#editorOptions) object of type [`IColumnEditorOptions`]({environment:angularApiUrl}/interfaces/icolumneditoroptions.html) can be leveraged. It accepts a `dateTimeFormat` property that is used as input format for the editors of `date`, `dateTime` and `time` column data types. + +```typescript +const editorOptions: IColumnEditorOptions = { + dateTimeFormat: 'MM/dd/YYYY', +} +``` + +```html + +``` + ### Event arguments and sequence The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](row-editing.md) and [**Cell Editing**](cell-editing.md) lifecycle - when starting, committing or canceling the editing action. diff --git a/en/components/time-picker.md b/en/components/time-picker.md index 806e4d6418..8d8655aef8 100644 --- a/en/components/time-picker.md +++ b/en/components/time-picker.md @@ -261,6 +261,7 @@ The time picker component supports different display and input formats. The display format is the format of the value when in edit mode and can be one of the listed Angular [DatePipe](https://angular.io/api/common/DatePipe) formats. This allows it to support predefined format options, such as `shortTime` and `longTime`. The input format is the format of the value when not in edit mode and the format, in which the time portions are displayed in the dropdown/dialog. The `inputFormat` property accepts a constructed format string using characters supported by the DatePipe, e.g. `hh:mm:ss`, but doesn't support predefined format options, such as `shortTime` and `longTime`. If the `inputFormat` property is not defined, it defaults to `hh:mm tt`. +Alternatively, if the [`inputFormat`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#inputFormat) property is not set, the input format will be inferred from the [`displayFormat`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#displayFormat) in case it can be parsed as containing numeric date-time parts only. ```html Date: Fri, 1 Nov 2024 14:01:17 +0200 Subject: [PATCH 03/19] docs(*): update JA for #5984 --- jp/components/date-picker.md | 1 + jp/components/date-range-picker.md | 2 ++ jp/components/date-time-editor.md | 13 +++++----- jp/components/grids_templates/editing.md | 33 +++++++++++++++++++----- jp/components/time-picker.md | 1 + 5 files changed, 37 insertions(+), 13 deletions(-) diff --git a/jp/components/date-picker.md b/jp/components/date-picker.md index 41e366868c..d4a5917f8b 100644 --- a/jp/components/date-picker.md +++ b/jp/components/date-picker.md @@ -213,6 +213,7 @@ export class SampleFormComponent { 注意すべき点は、Ignite UI の Angular DatePicker Component が `date` と `month` の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、`d/M/yy` は `dd/MM/yy` になります。これは編集中にのみ適用されます。 一方、[`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) は Angular の [`DatePipe`](https://angular.io/api/common/DatePipe) を使用し、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。[`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) が指定されていない場合、ピッカーは [`inputFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#inputFormat) を [`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) として使用します。 +あるいは、[`inputFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#inputFormat) プロパティが設定されていない場合、入力形式は [`displayFormat`]({environment:angularApiUrl}/classes/igxdatepickercomponent.html#displayFormat) から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。 これらの詳細については、[`IgxDateTimeEditor`](date-time-editor.md#例) の例のセクションを参照してください。 diff --git a/jp/components/date-range-picker.md b/jp/components/date-range-picker.md index 21990225af..050d9bd303 100644 --- a/jp/components/date-range-picker.md +++ b/jp/components/date-range-picker.md @@ -246,6 +246,8 @@ Date Range Picker コンポーネントはさまざまな表示および入力 ``` +[`inputFormat`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#inputFormat) プロパティが設定されていない場合、入力形式は [`displayFormat`]({environment:angularApiUrl}/classes/igxdaterangepickercomponent.html#displayFormat) から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。 + >[!NOTE] > `IgxDateRangePicker` が IME 入力をサポートするようになりました。合成が終了すると、コントロールはワイド文字の数字を ASCII 文字に変換します。 diff --git a/jp/components/date-time-editor.md b/jp/components/date-time-editor.md index a791fe9e73..c3fc36f32b 100644 --- a/jp/components/date-time-editor.md +++ b/jp/components/date-time-editor.md @@ -1,11 +1,11 @@ --- -title: 日時エディター ディレクティブ - ネイティブ Angular | Ignite UI for Angular +title: 日付/時刻エディター ディレクティブ - ネイティブ Angular | Ignite UI for Angular _description: Ignite UI for Angular Date Time Editor ディレクティブでは、Date オブジェクトによって日付と時刻を処理できます。 _keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, ネイティブ Angular コンポーネント, Angular Date Time Editor ディレクティブAngular Date Time ディレクティブ コントロール, Date Time Editor, Angular Date Time ディレクティブ _language: ja --- -# Angular Date Time Editor (日時エディター) ディレクティブ +# Angular Date Time Editor (日付/時刻エディター) ディレクティブ

Ignite UI for Angular Date Time Editor ディレクティブでは、選択された入力要素で日付と時刻を設定および編集できます。ユーザーは、編集可能なマスク入力によって日付または時間部分を編集できます。さらに、検証に最小値と最大値だけでなく、希望の表示形式および入力形式の設定を指定できます。

@@ -72,7 +72,7 @@ Ignite UI for Angular Date Time Editor モジュールまたはディレクテ ## Ignite UI for Angular Date Time Editor ディレクティブの使用 -input 要素を日時エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を [igx-input-group](input-group.md) にラップします。これにより、[`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html)、[`igxLabel`](label-input.md)、[`igx-prefix`](input-group.md#prefix-および-suffix)、[`igx-suffix`](input-group.md#prefix-および-suffix)、[`igx-hint`](input-group.md#hint) ディレクティブを利用できるだけでなく、フォーム入力を扱うときの一般的なシナリオに対処できます。 +input 要素を日付/時刻エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を [igx-input-group](input-group.md) にラップします。これにより、[`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.html)、[`igxLabel`](label-input.md)、[`igx-prefix`](input-group.md#prefix-および-suffix)、[`igx-suffix`](input-group.md#prefix-および-suffix)、[`igx-hint`](input-group.md#hint) ディレクティブを利用できるだけでなく、フォーム入力を扱うときの一般的なシナリオに対処できます。 ### バインディング 以下は、Date オブジェクトを [`value`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#value) として設定する基本的な構成シナリオです。 @@ -118,7 +118,7 @@ Date Time Editor ディレクティブには直感的なキーボード ナビ - 上矢印 / 下矢印 - 日付部分を増減します。関連する [`spinLoop`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#spinLoop) を参照してください。 -- Ctrl / Cmd + ; - エディターの現在の日時を設定します。 +- Ctrl / Cmd + ; - エディターの現在の日付/時刻を設定します。 ## 例 @@ -126,6 +126,7 @@ Date Time Editor ディレクティブには直感的なキーボード ナビ [`IgxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) は、さまざまな表示および入力の形式をサポートします。 Angular の [`DatePipe`](https://angular.io/api/common/DatePipe) を使用しており、`shortDate` や `longDate` などの事前定義された形式オプションをサポートできます。また、`DatePipe` でサポートされている文字を使用して構築されたフォーマット文字列を受け入れることもできます。例えば、`EE/MM/yyyy` です。`shortDate`、`longDate` などの形式は、[`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) としてのみ使用できることに注意してください。また、[`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) が指定されていない場合、エディターは [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) を [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) として使用します。 +あるいは、[`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) プロパティが設定されていない場合、入力形式は [`displayFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#displayFormat) から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。 特定の入力形式を設定するには、文字列として IgxDateTimeEditor ディレクティブに渡します。これにより、予期されるユーザー入力形式とエディターの[マスク](mask.md)の両方が設定されます。さらに、[`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。 @@ -172,7 +173,7 @@ public maxDate = new Date(2020, 11, 1); [`minValue`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#minValue) および [`minValue`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#minValue) 入力は、タイプ `string` にすることもできます。 [ISO 文字列へのバインド](#iso)を参照してください。 ### 増加および減少 -[`igxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) ディレクティブは、公開 [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) および [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) メソッドを公開します。これらは、現在設定されている日時の特定の [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) を増加または減少し、いくつかの方法で使用できます。 +[`igxDateTimeEditor`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) ディレクティブは、公開 [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) および [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) メソッドを公開します。これらは、現在設定されている日付/時刻の特定の [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) を増加または減少し、いくつかの方法で使用できます。 最初のシナリオでは、特定の [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) がメソッドに渡されない場合、デフォルトの [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) は指定された [`inputFormat`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#inputFormat) と内部ディレクティブの実装に基づいて増加または減少します。2 番目のシナリオでは、さまざまな要件に適合する可能性があるため、操作する [`DatePart`]({environment:angularApiUrl}/enums/datepart.html) を明示的に指定できます。 また、どちらのメソッドも、増加/減少手順を設定するために使用できるタイプ `number` のオプションの `delta` パラメーターを受け入れます。 @@ -185,7 +186,7 @@ public maxDate = new Date(2020, 11, 1);
-さらに、`spinDelta` はタイプ [`DatePartDeltas`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) の入力プロパティであり、各日時セグメントに異なるデルタを適用するために使用できます。これは、キーボードで回転するとき、および [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) メソッドと [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) メソッドで回転するときに適用されます。ただし、`spinDelta` よりも優先されるため `delta` パラメーターが指定されていない場合に限ります。 +さらに、`spinDelta` はタイプ [`DatePartDeltas`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) の入力プロパティであり、各日付/時刻セグメントに異なるデルタを適用するために使用できます。これは、キーボードで回転するとき、および [`increment`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#increment) メソッドと [`decrement`]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html#decrement) メソッドで回転するときに適用されます。ただし、`spinDelta` よりも優先されるため `delta` パラメーターが指定されていない場合に限ります。 ### Angular フォーム Date Time Editor ディレクティブは、コア FormsModule [`NgModel`](https://angular.io/api/forms/NgModel) と [`ReactiveFormsModule`](https://angular.io/api/forms/ReactiveFormsModule) (FormControl、FormGroup など) のすべてのフォーム ディレクティブをサポートします。これには、[フォーム `Validators`](https://angular.io/api/forms/Validators)機能も含まれます。次の例は、テンプレート駆動型フォームで `required` バリデータを使用する方法を示しています。 diff --git a/jp/components/grids_templates/editing.md b/jp/components/grids_templates/editing.md index ecb092f016..b435d987f4 100644 --- a/jp/components/grids_templates/editing.md +++ b/jp/components/grids_templates/editing.md @@ -1,10 +1,3 @@ - - @@if (igxName === 'IgxGrid') { --- title: Angular Grid の編集 - Ignite UI for Angular @@ -30,6 +23,13 @@ _language: ja --- } + + # Angular @@igComponent 編集 Ignite UI for Angular @@igComponent コンポーネントは、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。データの変更のフェーズは次のとおりです: [セル編集](cell-editing.md)、[行編集](row-editing.md)、および[一括編集](batch-editing.md)。@@igComponent は、これらの操作をカスタマイズできる強力なパブリック API を提供します。さらに、**セル編集**は、列のデータ型に基づいていくつかのデフォルト エディターを公開します。これらは、[igxCellEditor ディレクティブ](cell-editing.md#セル編集テンプレート)または [igxRow ディレクティブ](row-editing.md#行編集オーバーレイのカスタマイズ)を介して簡単にカスタマイズできます。 @@ -71,6 +71,24 @@ Ignite UI for Angular @@igComponent コンポーネントは、レコードの すべての利用可能な列データ型は、公式の[列タイプ トピック](column-types.md#デフォルトのテンプレート)にあります。 +#### 日付/時刻列のデフォルトのテンプレート エディター + +`date`、`dateTime`、`time` 列データ タイプのテンプレート エディターは、`IgxGrid` の [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) に応じてデフォルトの入力形式を使用します。 + +列に [`pipeArgs`]({environment:angularApiUrl}/interfaces/columntype.html#pipeArgs) オブジェクトの `format` プロパティが設定されている場合、エディターの入力形式はそこから推測されます。条件は、数値の日付と時刻の部分のみを含むものとして解析できることです。 + +エディターの入力形式を明示的に設定する必要がある場合は、[`IColumnEditorOptions`]({environment:angularApiUrl}/interfaces/icolumneditoroptions.html) タイプの [`editorOptions`]({environment:angularApiUrl}/interfaces/columntype.html#editorOptions) オブジェクトを利用できます。これは、`date`、`dateTime`、および `time` 列データ タイプのエディターの入力形式として使用される `dateTimeFormat` プロパティを受け入れます。 + +```typescript +const editorOptions: IColumnEditorOptions = { + dateTimeFormat: 'MM/dd/YYYY', +} +``` + +```html + +``` + ### イベントの引数とシーケンス グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、[**行の編集**](row-editing.md)および[**セルの編集**](cell-editing.md)のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。 @@ -161,6 +179,7 @@ public onSorting(event: ISortingEventArgs) { ## その他のリソース
+ * [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md) * [@@igComponent 概要](@@igMainTopic.md) * [列のデータ型](column-types.md#デフォルトのテンプレート) diff --git a/jp/components/time-picker.md b/jp/components/time-picker.md index d618546c8d..f71bed0cfd 100644 --- a/jp/components/time-picker.md +++ b/jp/components/time-picker.md @@ -262,6 +262,7 @@ Time Picker コンポーネントは、さまざまな表示形式と入力形 表示形式は、編集モードでの値の形式であり、リストされている Angular [DatePipe](https://angular.io/api/common/DatePipe) 形式の 1 つにすることができます。これにより、`shortTime` や `longTime` などの事前定義されたフォーマット オプションをサポートできます。 入力形式は、編集モードでないときの値の形式と、時間部分がドロップダウン/ダイアログに表示される形式です。`inputFormat` プロパティは、DatePipe でサポートされている文字を使用して構築されたフォーマット文字列を受け入れます。`hh:mm:ss` ですが、`shortTime` や `longTime` などの事前定義されたフォーマット オプションはサポートしていません。`inputFormat` プロパティが定義されていない場合、デフォルトで `hh:mm tt` になります。 +あるいは、[`inputFormat`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#inputFormat) プロパティが設定されていない場合、入力形式は [`displayFormat`]({environment:angularApiUrl}/classes/igxtimepickercomponent.html#displayFormat) から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。 ```html Date: Mon, 25 Nov 2024 14:46:01 +0200 Subject: [PATCH 04/19] doc(ng-sa): Adding info about default standalone components. (#6001) --- .../general/how-to/how-to-use-standalone-components.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/en/components/general/how-to/how-to-use-standalone-components.md b/en/components/general/how-to/how-to-use-standalone-components.md index 2e4f79042d..d1f6478d01 100644 --- a/en/components/general/how-to/how-to-use-standalone-components.md +++ b/en/components/general/how-to/how-to-use-standalone-components.md @@ -6,7 +6,7 @@ _keywords: Ignite UI for Angular, Standalone Components, Angular 16, Angular Mod # Using Standalone Components with Ignite UI for Angular -Angular 14 introduced the concept of [standalone components](https://angular.io/guide/standalone-components) which allows for a simplified way of building applications by reducing the need for using `NgModules`. Standalone components were in developer preview until Angular 15. To support this new paradigm, all Ignite UI for Angular components are now exported as `standalone` with version `16.0.0`. All the existing `NgModules` are still exported by the library for backward compatibility. However, they no longer declare any of the Ignite UI for Angular components. Instead they import and export the `standalone` components. +Angular 14 introduced the concept of [standalone components](https://angular.io/guide/standalone-components) which allows for a simplified way of building applications by reducing the need for using `NgModules`. Standalone components were in developer preview until Angular 15. To support this new paradigm, all Ignite UI for Angular components are now exported as `standalone` with version `16.0.0`. As of Angular 19 all compoenents are standalone by default. All the existing `NgModules` are still exported by the library for backward compatibility. However, they no longer declare any of the Ignite UI for Angular components. Instead they import and export the `standalone` components. ## How to use the new standalone components @@ -19,7 +19,6 @@ import { IGX_GRID_DIRECTIVES } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IGX_GRID_DIRECTIVES, AsyncPipe] }) ``` @@ -33,7 +32,6 @@ import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe] }) ``` @@ -48,7 +46,6 @@ import { IgxGridModule } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IgxGridModule, AsyncPipe] }) ``` From 156b00632bee4f57750c49504a2141bb9d0f3fff Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Mon, 25 Nov 2024 15:27:39 +0200 Subject: [PATCH 05/19] docs(*): Updating JA for #6001 --- .../general/how-to/how-to-use-standalone-components.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/jp/components/general/how-to/how-to-use-standalone-components.md b/jp/components/general/how-to/how-to-use-standalone-components.md index 171ae5cd28..19ef603747 100644 --- a/jp/components/general/how-to/how-to-use-standalone-components.md +++ b/jp/components/general/how-to/how-to-use-standalone-components.md @@ -7,7 +7,7 @@ _language: ja # Ignite UI for Angular での Standalone (スタンドアロン) コンポーネントの使用 -Angular 14 では[スタンドアロン コンポーネント](https://angular.io/guide/standalone-components)の概念が導入されました。これにより、`NgModules` を使用する必要性が減り、アプリケーションを構築する方法が簡素化されます。スタンドアロン コンポーネントは、Angular 15 まで開発者プレビューでした。この新しいパラダイムをサポートするために、バージョン `16.0.0` では、すべての Ignite UI for Angular コンポーネントが `standalone` としてエクスポートされるようになりました。既存のすべての `NgModule` は、後方互換性のためにライブラリによって引き続きエクスポートされます。ただし、Ignite UI for Angular コンポーネントは宣言されなくなりました。代わりに、`standalone` コンポーネントをインポートおよびエクスポートします。 +Angular 14 では[スタンドアロン コンポーネント](https://angular.io/guide/standalone-components)の概念が導入されました。これにより、`NgModules` を使用する必要性が減り、アプリケーションを構築する方法が簡素化されます。スタンドアロン コンポーネントは、Angular 15 まで開発者プレビューでした。この新しいパラダイムをサポートするために、バージョン `16.0.0` では、すべての Ignite UI for Angular コンポーネントが `standalone` としてエクスポートされるようになりました。Angular 19 以降、すべてのコンポーネントはデフォルトでスタンドアロンです。既存のすべての `NgModule` は、後方互換性のためにライブラリによって引き続きエクスポートされます。ただし、Ignite UI for Angular コンポーネントは宣言されなくなりました。代わりに、`standalone` コンポーネントをインポートおよびエクスポートします。 ## 新しいスタンドアロン コンポーネントの使用方法 @@ -20,7 +20,6 @@ import { IGX_GRID_DIRECTIVES } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IGX_GRID_DIRECTIVES, AsyncPipe] }) ``` @@ -34,7 +33,6 @@ import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe] }) ``` @@ -49,7 +47,6 @@ import { IgxGridModule } from 'igniteui-angular'; selector: 'app-grid-sample', styleUrls: ['grid.sample.scss'], templateUrl: 'grid.sample.html', - standalone: true, imports: [IgxGridModule, AsyncPipe] }) ``` From b2c128bf3f579dc8c9865c933713a4d08e3febda Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Mon, 25 Nov 2024 15:34:20 +0200 Subject: [PATCH 06/19] docs(summaries): enhance summaries topics with disabledSummaries examples --- en/components/grids_templates/summaries.md | 103 +++++++++++++++++++++ 1 file changed, 103 insertions(+) diff --git a/en/components/grids_templates/summaries.md b/en/components/grids_templates/summaries.md index 77c10dc9dd..f4c37b6c44 100644 --- a/en/components/grids_templates/summaries.md +++ b/en/components/grids_templates/summaries.md @@ -115,6 +115,56 @@ All available column data types could be found in the official [Column types top ``` } + +**@@igComponent summaries** can be customized further by using the [`disabledSummaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disabledSummaries) property, which allows you to exclude specific summary functions for a column. This property accepts an array of strings representing the keys of the summaries to disable. + +@@if (igxName === 'IgxGrid') { +For example, to disable the `count`, `min`, and `max` summaries for a `ReorderLevel` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`: + +```html +<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + +``` +} +@@if (igxName === 'IgxTreeGrid') { +For example, to disable the `count`, `min`, and `max` summaries for a `Units` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`: + +```html +<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + +``` +} +@@if (igxName === 'IgxHierarchicalGrid') { +For example, to disable the `count`, `min`, and `max` summaries for a `Grammy Nominations` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`: + +```html + + + + +
+ +
+ + + + + + + +``` +} + +In this example, the numeric column will display only the remaining summaries, such as `average` and `sum`, while excluding the disabled ones. This approach ensures that you can tailor the summary results displayed for each column to better suit your application's requirements. + The other way to enable/disable summaries for a specific column or a list of columns is to use the public method [`enableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#enableSummaries)/[`disableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#disableSummaries) of the **@@igSelector**. @@if (igxName === 'IgxGrid') { @@ -327,6 +377,59 @@ export class HGridSummarySampleComponent implements OnInit { ``` } +**@@igComponent summaries** also support customization when using the [`disabledSummaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disabledSummaries) property alongside custom summaries. This property allows you to exclude specific custom summary, offering precise control over which summaries are displayed for a given column. For example, to disable a custom summary like `test` while keeping others active, you can use the `disabledSummaries` property and set it to `['test']`: + +@@if (igxName === 'IgxGrid') { +```html + <@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + + + + + +``` + +In this example, the `UnitsInStock` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs. +} + +@@if (igxName === 'IgxTreeGrid') { +```html +<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> + + + + + + +``` + +In this example, the `Units` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs. +} + +@@if (igxName === 'IgxHierarchicalGrid') { +```html + + + + +
+ +
+ + + + + + +``` + +In this example, the `Grammy Nominations` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs. +} + ### Custom summaries, which access all data Now you can access all @@igComponent data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand `operate` method. As you can see in the code snippet below the operate method has the following three parameters: From 2becec17694c51fb8c168f1a6a3fe7f938c7f7b4 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Mon, 25 Nov 2024 17:08:36 +0200 Subject: [PATCH 07/19] Update angular SSR topic --- en/components/general/ssr-rendering.md | 113 +++++-------------------- 1 file changed, 20 insertions(+), 93 deletions(-) diff --git a/en/components/general/ssr-rendering.md b/en/components/general/ssr-rendering.md index 542cc87118..f521041ee2 100644 --- a/en/components/general/ssr-rendering.md +++ b/en/components/general/ssr-rendering.md @@ -1,145 +1,72 @@ --- -title: Server-side rendering | Angular Universal | Ignite UI for Angular | Infragistics -_description: How to use Angular Universal rendering with Ignite UI for Angular. -_keywords: Ignite UI for Angular, Universal, Server-side rendering +title: Server-side rendering | Angular SSR | Ignite UI for Angular | Infragistics +_description: How to use Angular Server-side rendering with Ignite UI for Angular. +_keywords: Ignite UI for Angular, Angular SSR, Server-side rendering --- -# Server-side Rendering with Angular Universal +# Server-side Rendering with Angular SSR This topic aims at describing what Server-side Rendering is and how to configure it within Ignite UI for Angular application. -## Angular Universal +## Angular Server-side rendering -All Angular applications run in the client's browser and often this may result in a negative performance hit on the [First Meaningful Paint (FMP)](https://web.dev/first-meaningful-paint) i.e. when a browser first renders the primary content of a page. This is when [Angular Universal](https://angular.io/guide/universal) comes in handy, you can generate the full HTML for a page on the server. It renders a client-side page to HTML on the server that is later bootstrapped on the client. Okay, but how it works? +All Angular applications run in the client's browser and often this may result in a negative performance hit on the [Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) i.e. when a browser first renders the largest content of a page. This is when [Angular SSR](https://angular.dev/guide/ssr) comes in handy, you can generate the full HTML for a page on the server. It renders a client-side page to HTML on the server that is later bootstrapped on the client. Okay, but how it works? -> [FMP](https://web.dev/first-meaningful-paint) measures when the primary content of a page is visible to the user, as for [FCP](https://web.dev/first-contentful-paint) metric, it measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. See [Lighthouse performance scoring](https://web.dev/performance-scoring) for more information. +> [LCP](https://web.dev/articles/lcp) measures when the largest content of a page is visible to the user, as for [FCP](https://web.dev/first-contentful-paint) metric, it measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. See [Lighthouse performance scoring](https://web.dev/performance-scoring) for more information. ## How it works? -With Angular Universal, you will serve a static version of your apps' landing page, while at the same time the full Angular application loads in the background. The landing page will be pure HTML and will be displayed even if the JavaScript is disabled. More about Server Rendering you can find [here](https://developers.google.com/web/updates/2019/02/rendering-on-the-web). +With Angular SSR, you will serve a static version of your apps' landing page, while at the same time the full Angular application loads in the background. The landing page will be pure HTML and will be displayed even if the JavaScript is disabled. More about Server Rendering you can find [here](https://developers.google.com/web/updates/2019/02/rendering-on-the-web). ## Usage Server-side rendering is one of the many techniques part of [Rendering on Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) guidelines, that can: - Ease web crawlers to index your website higher in searches - will improve your Search Engine Optimization (SEO). - Show the first page quickly - slow initial page load is disengaging for the users (if it takes more than 3 seconds to load). -- Improve your app performance - it will have a positive impact on both [First Meaningful Paint](https://web.dev/first-meaningful-paint) and [First Contentful Paint](https://web.dev/first-contentful-paint). +- Improve your app performance - it will have a positive impact on both [First Contentful Paint](https://web.dev/first-contentful-paint) and [Largest Contentful Paint](https://web.dev/articles/lcp). > It gives you full control over SEO and social-media previews, and it improves the overall perceived performance of your application by allowing users to see an initial painted view. ## Add SSR to existing Ignite UI application -### Step 1 - Add @nguniversal +### Step 1 - Add @angular/ssr By using Angular CLI schematic we can run the following command: ``` -ng add @nguniversal/express-engine --clientProject ssr-example +ng add @angular/ssr ``` -This schematic will perform several changes to your app client and server configurations, as well as npm commands and app.module updates. - -### Step 2 - Define all browser-specific objects that are missing -Since Universal apps run on the server and not in the browser, there are a few things you need to watch out for in your code. Browser-specific objects, such as `window`, `document`, or `location` are missing, so we recommend using of [domino](https://github.com/fgnass/domino#server-side-dom-implementation-based-on-mozillas-domjs) for Server-side DOM abstraction. Domino is a Server-side DOM implementation based on Mozilla's dom.js. - -- install domino `npm install domino` - for server-side dom abstraction -- install xmlhttprequest `npm i xmlhttprequest` - If using IgxIconService to register icons -- Configure the "server.ts" - -```typescript -// server.ts -const domino = require('domino'); -const fs = require('fs'); -const path = require('path'); -const template = fs - .readFileSync(path.join('dist/browser', 'index.html')) - .toString(); -const window = domino.createWindow(template); - -// Ignite UI browser objects abstractions -(global as any).window = window; -(global as any).document = window.document; -(global as any).Event = window.Event; -(global as any).KeyboardEvent = window.KeyboardEvent; -(global as any).MouseEvent = window.MouseEvent; -(global as any).FocusEvent = window.FocusEvent; -(global as any).PointerEvent = window.PointerEvent; -(global as any).HTMLElement = window.HTMLElement; -(global as any).HTMLElement.prototype.getBoundingClientRect = () => { - return { - left: '', - right: '', - top: '', - bottom: '' - }; -}; - -// If using IgxIconService to register icons -(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; - -// Other optional depending on your application configuration -(global as any).object = window.object; -(global as any).navigator = window.navigator; -(global as any).localStorage = window.localStorage; -(global as any).DOMTokenList = window.DOMTokenList; -``` +This schematic will perform several changes to your app client and server configurations, as well as add extra files to the project structure. -### Step 3 - Start your universal app +### Step 2 - Start your Angular SSR app Run the following command: ``` -npm run build:ssr && npm run serve:ssr +ng serve ``` -> As alternative to [Angular Express Engine](https://github.com/angular/universal/blob/master/modules/express-engine/README.md) you may use [ASP.NET Core Engine](https://github.com/angular/universal/tree/master/modules/aspnetcore-engine) for running Angular Apps with Server-side Rendering. - ## Build a new application from scratch -1. Use `ng new` or the [Ignite UI CLI](./cli/getting-started-with-cli.md) `ig new` command. +1. Use `ng new` or the [Ignite UI CLI](./cli/getting-started-with-cli.md) `ig new` command. Alternatively, use `ng new --ssr` to create a new Angular SSR project directly, skipping step 3. 2. Execute `ng add igniteui-angular` which installs the library's npm packages to your workspace and configures the project in the current working directory to use that library. -4. Add Angular Universal with `ng add @nguniversal/express-engine --clientProject ig-ssr-example`. "ig-ssr-example" is your project name. -3. Add Ignite UI for Angular components - e.g. Grid, Calendar et -4. Configure the "server.ts" file to define all needed browser-specific objects, such as "window", "document", or "location". - - install domino `npm install domino` - for server-side dom abstraction - - install xmlhttprequest `npm i xmlhttprequest` - If using IgxIconService to register icons - -## Use starter project - -Use the starter project that includes Ignite UI for Angular components. The project uses Angular CLI to quickly build a simple application with Angular Universal. - -### Step 1 - Clone the starter repository - -``` -git clone https://github.com/IgniteUI/ng-universal-example.git -``` - -### Step 2 - Use NPM to install the needed dependencies - -``` -npm install -``` - -### Step 3 - Build and start the application by using: - -``` -npm run build:ssr && npm run serve:ssr -``` +3. Add Angular SSR with `ng add @angular/ssr`. +4. Add Ignite UI for Angular components - e.g. Grid, Calendar ## Other considerations - If your application is using other browser-specific objects, wrap their usage in a conditional statement, so that they’ll only be used by Angular on the browser. You can do this by importing the functions `isPlatformBrowser` and `isPlatformServer` from `@angular/common`, injecting the `PLATFORM_ID` token into your component, and running the imported functions to see whether you’re on the server or the browser. - If using ElementRef for HTML element handling, don’t use the nativeElement to manipulate attributes on the element. Instead, inject and use the [Renderer2 methods](https://alligator.io/angular/using-renderer2). - All URLs for server requests should be absolute, keep in mind that data requests from relative URLs will fail when running from the server. -- For handling browser events the Angular team provides the [preboot](https://github.com/angular/preboot) library. This library buffers the events and replay them once the client-side script is loaded. -- When using Angular Universal, the server will pre-render pages that will be visible to the users, however, interactions will be limited. Once the client-side app is loaded in the background, it will seamlessly switch from showing the server-rendered pages to the client-side app. +- For handling browser events the Angular team provides the [withEventReplay()](https://angular.dev/guide/hydration#capturing-and-replaying-events) function. This feature allows to capture all events that happen before hydration and replay those events once hydration has completed. +- When using Angular SSR, the server will pre-render pages that will be visible to the users, however, interactions will be limited. Once the client-side app is loaded in the background, it will seamlessly switch from showing the server-rendered pages to the client-side app. ## Useful resources
-* [Angular Universal guide](https://angular.io/guide/universal) -* [Ignite UI Starter Kit](https://github.com/IgniteUI/ng-universal-example) +* [Angular SSR guide](https://angular.dev/guide/ssr) * [Server-side rendering terminology](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) * [Getting started with Ignite UI for Angular](getting-started.md) * [Ignite UI CLI Guide](cli/step-by-step-guide-using-cli.md) From 525cb2e7bd6fbbedf1e600b249c9484904cac894 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Tue, 26 Nov 2024 17:35:09 +0200 Subject: [PATCH 08/19] Add info about icon service --- en/components/general/ssr-rendering.md | 1 + 1 file changed, 1 insertion(+) diff --git a/en/components/general/ssr-rendering.md b/en/components/general/ssr-rendering.md index f521041ee2..0868ec03a4 100644 --- a/en/components/general/ssr-rendering.md +++ b/en/components/general/ssr-rendering.md @@ -60,6 +60,7 @@ ng serve - If using ElementRef for HTML element handling, don’t use the nativeElement to manipulate attributes on the element. Instead, inject and use the [Renderer2 methods](https://alligator.io/angular/using-renderer2). - All URLs for server requests should be absolute, keep in mind that data requests from relative URLs will fail when running from the server. - For handling browser events the Angular team provides the [withEventReplay()](https://angular.dev/guide/hydration#capturing-and-replaying-events) function. This feature allows to capture all events that happen before hydration and replay those events once hydration has completed. +- If using IgxIconService to register icons please make sure that you have configured [provideHttpClient()](https://angular.dev/api/common/http/provideHttpClient) in your providers. - When using Angular SSR, the server will pre-render pages that will be visible to the users, however, interactions will be limited. Once the client-side app is loaded in the background, it will seamlessly switch from showing the server-rendered pages to the client-side app. ## Useful resources From 227c413ca8490ccf1b33dfc62ffffd451fbe83c9 Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Wed, 4 Dec 2024 02:05:30 +0200 Subject: [PATCH 09/19] Adding changes from build igniteui-xplat-docs-make-pr_2024.12.4.2 --- en/components/charts/features/chart-navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/charts/features/chart-navigation.md b/en/components/charts/features/chart-navigation.md index 3144397849..61d4bf560f 100644 --- a/en/components/charts/features/chart-navigation.md +++ b/en/components/charts/features/chart-navigation.md @@ -27,7 +27,7 @@ Like this sample? Get access to our complete Angular toolkit and start building ## Chart Navigation with User Interactions -Zooming is on by default on the chart. In order to disable navigation in the UI, you need to set either the [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) and/or the [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) properties of the chart to false, depending on the direction that you wish to disable zooming. +Whether or not zooming is on by default depends on the chart you are using. If you are using [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), it is on by default, but it is not in the [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html). In order to enable or disable navigation in the UI, you need to set either the [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) and/or the [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) properties of the chart, depending on the direction that you wish to enable or disable zooming. It is also possible to zoom or pan simply by clicking the mouse or using touch. The [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) property can also be set to either `DragPan` to allow panning or `None` to prevent these operations. From 42028627bc37a40aa0ea6f990a2f191bd1f12611 Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Tue, 3 Dec 2024 19:08:47 -0500 Subject: [PATCH 10/19] Adding changes from build igniteui-xplat-docs-make-pr-JP+KR_2024.12.4.2 --- jp/components/charts/features/chart-navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jp/components/charts/features/chart-navigation.md b/jp/components/charts/features/chart-navigation.md index 702eb7ce8e..74d41dcfb6 100644 --- a/jp/components/charts/features/chart-navigation.md +++ b/jp/components/charts/features/chart-navigation.md @@ -27,7 +27,7 @@ Ignite UI for Angular チャートを使用すると、マウス、キーボー ## ユーザー インタラクションによるチャート ナビゲーション -チャートでは、ズームはデフォルトでオンになっています。UI でナビゲーションを無効にするには、ズームを無効にする方向に応じて、チャートの [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) プロパティまたは [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) プロパティのいずれかを false に設定する必要があります。 +ズームがデフォルトでオンになっているかどうかは、使用しているチャートによって異なります。[`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) を使用している場合、デフォルトでオンになっていますが、[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) ではオフです。+UI でナビゲーションを有効または無効にするには、ズームを無効にする方向に応じて、チャートの [`isHorizontalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isHorizontalZoomEnabled) プロパティおよび/または [`isVerticalZoomEnabled`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html#isVerticalZoomEnabled) プロパティを設定する必要があります。 またマウスやタッチでズームまたはパンニングできます。チャートの [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) プロパティは、マウスクリック イベントやタッチ イベントで何が起こるかを決定します。このプロパティはデフォルトで `DragZoom` に設定されており、ズームを有効に設定すると、クリックしてドラッグした際にプロット領域の上に四角形のプレビューが配置され、グラフのズーム領域になります。この [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) プロパティは、パンニングを許可する場合は `DragPan`、これらの操作を禁止する場合は `None` に設定することもできます。 From 17c228136bdffaa8a634fc5a83476c411c8e8e2a Mon Sep 17 00:00:00 2001 From: Andrew Goldenbaum Date: Wed, 4 Dec 2024 10:56:03 -0500 Subject: [PATCH 11/19] Re-add data pie chart to TOC --- en/components/toc.yml | 3 +++ jp/components/toc.yml | 3 +++ 2 files changed, 6 insertions(+) diff --git a/en/components/toc.yml b/en/components/toc.yml index f83ea1f9be..0fea85e9a6 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -631,6 +631,9 @@ - name: Composite Chart href: charts/types/composite-chart.md new: false +- name: Data Pie Chart + href: charts/types/data-pie-chart.md + new: true - name: Donut Chart href: charts/types/donut-chart.md new: false diff --git a/jp/components/toc.yml b/jp/components/toc.yml index 21d0a60ee1..d479657985 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -632,6 +632,9 @@ - name: 複合チャート href: charts/types/composite-chart.md new: false +- name: Data Pie Chart + href: charts/types/data-pie-chart.md + new: true - name: ドーナツ チャート href: charts/types/donut-chart.md new: false From dfc60ecfe4d66bffb65daa67f7140b924c76fceb Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Tue, 10 Dec 2024 19:14:27 -0500 Subject: [PATCH 12/19] Adding changes from build igniteui-xplat-docs-make-pr_2024.12.11.1 --- en/components/menus/toolbar.md | 35 +++++++++++++++++++++++++++++++++ en/images/color-editor.png | Bin 0 -> 17382 bytes 2 files changed, 35 insertions(+) create mode 100644 en/images/color-editor.png diff --git a/en/components/menus/toolbar.md b/en/components/menus/toolbar.md index 9e3d1adbba..5d6c99dbcf 100644 --- a/en/components/menus/toolbar.md +++ b/en/components/menus/toolbar.md @@ -194,6 +194,41 @@ The following example demonstrates the vertical orientation of the Angular Toolb +### Color Editor + +You can add a custom color editor tool to the the Angular Toolbar, which will also work with the Command event to perform custom styling to your application. + +```html + + + + +``` + +```ts + + + + +``` + +The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool. + + + + + + + + +## Dependencies + + + +Install the following packages in the Ignite UI for Angular toolset: + +```cmd +npm install igniteui-angular-charts +npm install igniteui-angular-core +npm install igniteui-angular-dashboards +npm install igniteui-angular-gauges +npm install igniteui-angular-grids +npm install igniteui-angular-inputs +npm install igniteui-angular-layouts +npm install igniteui-angular-maps +``` + +The following modules are suggested when using the Dashboard Tile component: + +```ts +import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule, + IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule, + IgxPieChartDashboardTileModule } from "igniteui-angular-dashboards"; + +@NgModule({ + imports: [ + IgxDataChartDashboardTileModule, + IgxRadialGaugeDashboardTileModule, + IgxLinearGaugeDashboardTileModule, + IgxGeographicMapDashboardTileModule, + IgxPieChartDashboardTileModule, + IgxDashboardTileModule + ] +}) +export class AppModule {} +``` + + + +## Usage + +Depending on what you bind the Dashboard Tile's `DataSource` property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for Angular toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following: + +* [IgxCategoryChart](charts/chart-overview.md) +* [IgxDataChart](charts/chart-overview.md) +* [IgxDataPieChart](charts/types/data-pie-chart.md) +* [IgxGeographicMap](geo-map.md) +* [IgxLinear Gauge](linear-gauge.md) +* [IgxRadialGauge](radial-gauge.md) + +The data visualization that is chosen by default is mainly dependent on the schema and the count of the `DataSource` that you have bound. For example, if you bind a single numeric value, you will get a [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html), but if you bind a collection of value-label pairs that are easy to distinguish from each other, you will likely get a `XamDataPieChart`. If you bind an `DataSource` that has more value paths, you will receive a [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) with multiple column series or line series, depending mainly on the count of the collection bound. You can also bind to a `ShapeDataSource` or data the appears to contain geographic points to receive a [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html). + +You are not locked into a single visualization when you bind the `DataSource`, and you can tell the control that you want to see a particular visualization by setting its `VisualizationType` property. For example, if you specifically wanted to see a line chart, you could define the Dashboard Tile like so: + + + + + + + +The visualization or properties of the visualization are also configurable using the [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) at the top of the control. This [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below: + + + +From left to right: + +* The first tool will show a data grid with the `DataSource` provided to the control. This is a toggle tool, so if you click it again after showing the grid, it will revert to the visualization. +* The second tool allows you to configure the settings of the current data visualization. +* The third tool allows you to change the current visualization, allowing you to plot a different series type or show a different type of visualization altogether. This can be set on the control by setting the `VisualizationType` property, mentioned above. +* The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) or [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) collection on the control. + +This demo demonstrates dashboard tile integration with the Angular Pie Chart. The toolbar options at the top right provides access to styling and changing the data visualization. + + + + + +This demo demonstrates dashboard tile integration with the Angular Geographic Map. The toolbar options at the top right provides access to styling and changing the data visualization. + + + + + +## API References + +* [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) +* [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +* [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) +* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +* [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) +* [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) + +## Additional Resources + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/general-changelog-dv.md b/en/components/general-changelog-dv.md index cece5d69cb..dc39c0e9f6 100644 --- a/en/components/general-changelog-dv.md +++ b/en/components/general-changelog-dv.md @@ -16,6 +16,20 @@ All notable changes for each version of Ignite UI for Angular are documented on * [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master) +## **Version TBA (December 2024)** + +### igniteui-angular-charts (Charts) + +DashboardTile (Beta) + +* New [Dashboard Tile](dashboard-tile.md) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](menus/toolbar.md) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code. + +### igniteui-angular-charts (Inputs) + +* New ColorEditor & Toolbar ToolAction (Beta) + +This new editor can be used as a standalone color picker and is now integrated into the [Toolbar](menus/toolbar.md) component to update visualizations at runtime. + ## **18.1.0 (September 2024)** * [Data Pie Chart](charts/types/data-pie-chart.md) - The [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) is a new component that renders a pie chart. This component works similarly to the [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html), in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component. diff --git a/en/components/inputs/color-editor.md b/en/components/inputs/color-editor.md new file mode 100644 index 0000000000..af96b21d09 --- /dev/null +++ b/en/components/inputs/color-editor.md @@ -0,0 +1,88 @@ +--- +title: Angular Color Editor | Color Editor | Infragistics +_description: Color Editor component provides an easily configurable option to change colors for any desirable component or aspect of your application. +_keywords: Angular Color Editor, Ignite UI for Angular, Infragistics +mentionedTypes: ["ColorEditor"] +namespace: Infragistics.Controls +--- + +# Angular Color Editor Overview (preview) + +The Ignite UI for Angular Color Editor is a lightweight color picker component. The Color Editor can pop open by clicking the brush icon. Both the rgba and hex values can be obtained from the desired color along the bottom. These values will update when the three sliders are modified. The center box is designed for adjusting the saturation and brightness along with two adjacent sliders for adjusting the rgb and luminance values. Rgb registers between (1-255). The lightness registers between(0-1). + +## Angular Color Editor Example + + + + + +
+ +## Dependencies + + + +First, you need to install the Ignite UI for Angular by running the following command: + +```cmd +npm install igniteui-angular-core +npm install igniteui-angular-inputs +``` + +Before using the `ColorEditor`, you need to register the following modules as follows: + + + +## Usage + +The simplest way to start using the `ColorEditor` is as follows: + + + +```html + + + +``` + + + +## Binding to events + +The Color Editor component raises the following events: + +* valueChanged +* valueChanging + + + +```ts +@ViewChild("colorEditor", { static: true } ) +private colorEditor: IgxColorEditorComponent +public ngAfterViewInit(): void +{ + this.colorEditor.valueChanged.subscribe(this.onValueChanged); +} + +public onValueChanged = (e: any) => { + console.log("test"); +} +``` + + + +
+ +## API References + +* `ColorEditor` + +## Additional Resources + +* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/images/dashboard-tile-toolbar.png b/en/images/dashboard-tile-toolbar.png new file mode 100644 index 0000000000000000000000000000000000000000..87a6dce4f142c1f21b015ef79a404f4cba29487d GIT binary patch literal 23088 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 literal 0 HcmV?d00001 From 1460ab585da7ab10dfd96662c2d2c3b8e8fd17e9 Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Tue, 17 Dec 2024 19:05:40 -0500 Subject: [PATCH 14/19] Adding changes from build igniteui-xplat-docs-make-pr-JP+KR_2024.12.18.2 --- jp/components/dashboard-tile.md | 133 ++++++++++++++++++++++++++ jp/components/general-changelog-dv.md | 14 +++ jp/components/inputs/color-editor.md | 89 +++++++++++++++++ jp/components/menus/toolbar.md | 37 +++++++ jp/images/color-editor.png | Bin 0 -> 17382 bytes jp/images/dashboard-tile-toolbar.png | Bin 0 -> 23088 bytes 6 files changed, 273 insertions(+) create mode 100644 jp/components/dashboard-tile.md create mode 100644 jp/components/inputs/color-editor.md create mode 100644 jp/images/color-editor.png create mode 100644 jp/images/dashboard-tile-toolbar.png diff --git a/jp/components/dashboard-tile.md b/jp/components/dashboard-tile.md new file mode 100644 index 0000000000..032002bed0 --- /dev/null +++ b/jp/components/dashboard-tile.md @@ -0,0 +1,133 @@ +--- +title: Angular Dashboard Tile コンポーネント | Ignite UI for Angular +_description: Angular Dashboard Tile コンポーネントを簡単に使い始める方法をご覧ください。 +_keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Dashboard components, Angular Dashboard Tile controls, UI コントロール, Angular ウィジェット, Web ウィジェット, UI ウィジェット, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, Angular Dashboard コンポーネント, Angular Dashboard Tile コントロール +mentionedTypes: ["Toolbar", "CategoryChart", "XamDataChart", "XamRadialGauge", "XamLinearGauge", "XamGeographicMap"] +_language: ja +--- + +# Angular Dashboard Tile (ダッシュボード タイル) の概要 + +Angular Dashboard Tile は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。また、埋め込みの [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) で提供される一連のツールを使用して、さまざまな方法で表示される視覚化を変更できます。 + +提供されたデータの形状に応じて、以下を含む多種多様な視覚化が選択可能です。これには以下が含まれますが、これらに限定されません: カテゴリ チャート、\`ラジアル チャートと極座標チャート、散布図、地理マップ、ラジアル ゲージとリニア ゲージ、ファイナンシャル チャート、積層型チャート。 + +ツールバー内のチャート タイプ メニューを操作すると、候補リストの中から異なる視覚化を選択できます。 + +## Angular Dashboard Tile の例 + + + + + + + +## 依存関係 + + + +Ignite UI for Angular ツールセットに次のパッケージをインストールします: + +```cmd +npm install igniteui-angular-charts +npm install igniteui-angular-core +npm install igniteui-angular-dashboards +npm install igniteui-angular-gauges +npm install igniteui-angular-grids +npm install igniteui-angular-inputs +npm install igniteui-angular-layouts +npm install igniteui-angular-maps +``` + +Dashboard Tile コンポーネントを使用する場合、以下のモジュールを使用することをお勧めします: + +```ts +import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule, + IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule, + IgxPieChartDashboardTileModule } from "igniteui-angular-dashboards"; + +@NgModule({ + imports: [ + IgxDataChartDashboardTileModule, + IgxRadialGaugeDashboardTileModule, + IgxLinearGaugeDashboardTileModule, + IgxGeographicMapDashboardTileModule, + IgxPieChartDashboardTileModule, + IgxDashboardTileModule + ] +}) +export class AppModule {} +``` + + + +## 使用方法 + +コントロールはバインドしたデータを評価し、Ignite UI for Angular ツールセットから表示する視覚エフェクトを選択するため、Dashboard Tile の `DataSource` プロパティを何にバインドするかによって、デフォルトで表示される視覚エフェクトが決まります。Dashboard Tile に表示されるデータ視覚化コントロールは次のとおりです。 + +* [IgxCategoryChart](charts/chart-overview.md) +* [IgxDataChart](charts/chart-overview.md) +* [IgxDataPieChart](charts/types/data-pie-chart.md) +* [IgxGeographicMap](geo-map.md) +* [IgxLinearGauge](linear-gauge.md) +* [IgxRadialGauge](radial-gauge.md) + +デフォルトで選択されるデータ視覚化は、主にスキーマとバインドした `DataSource` の数によって決まります。たとえば、単一の数値をバインドすると [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) が取得されますが、互いに区別しやすい値とラベルのペアのコレクションをバインドすると `XamDataPieChart` が取得されます。より多くの値パスを持つ `DataSource` をバインドすると、バインドされたコレクションの数に応じて、複数の列シリーズまたは線シリーズを持つ `DataChart` を受け取ります。また、[`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) を取得するために、`ShapeDataSource` または地理的ポイントを含むデータにバインドすることもできます。 + +`DataSource` をバインドするときに単一の視覚化にロックされることはなく、`VisualizationType` プロパティを設定することで、特定の視覚化を表示することをコントロールに指示できます。たとえば、特に折れ線チャートを表示したい場合は、次のように Dashboard Tile を定義できます。 + + + + + + + +視覚化または視覚化のプロパティも、コントロールの上部にある [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) を使用して構成できます。この [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。 + + + +左から右へ: + +* 最初のツールは、コントロールに提供された `DataSource` を含むデータ グリッドを表示します。これは切り替えツールなので、グリッドを表示した後にもう一度クリックすると、視覚化に戻ります。 +* 2 番目のツールを使用すると、現在のデータ視覚化の設定を構成できます。 +* 3 番目のツールを使用すると、現在の視覚化を変更して、異なるシリーズ タイプをプロットしたり、まったく異なるタイプの視覚化を表示したりすることができます。これは、前述の `VisualizationType` プロパティを設定することによってコントロール上で設定できます。 +* 最後のツールを使用すると、基になるデータ項目のどのプロパティをコントロールに含めるかを構成できます。これを構成するには、コントロールに [`includedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#includedProperties) または [`excludedProperties`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#excludedProperties) コレクションを設定します。 + +このデモでは、ダッシュボード タイルと Angular 円チャートの統合を示します。右上のツールバー オプションを使用すると、スタイル設定やデータ視覚化の変更にアクセスできます。 + + + + + +このデモでは、ダッシュボード タイルと Angular 地理マップの統合を示します。右上のツールバー オプションを使用すると、スタイル設定やデータ視覚化の変更にアクセスできます。 + + + + + +## API リファレンス + +* [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) +* [`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) +* [`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) +* [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) +* [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) +* [`IgxLinearGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxlineargaugecomponent.html) +* [`IgxRadialGaugeComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_gauges.igxradialgaugecomponent.html) + +## その他のリソース + +* [Ignite UI for Angular **フォーラム (英語)**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub (英語)**](https://github.com/IgniteUI/igniteui-angular) diff --git a/jp/components/general-changelog-dv.md b/jp/components/general-changelog-dv.md index ec4bb661ae..b6292f253b 100644 --- a/jp/components/general-changelog-dv.md +++ b/jp/components/general-changelog-dv.md @@ -17,6 +17,20 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 * [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master) +## **Version TBA (December 2024)** + +### igniteui-angular-charts (チャート) + +DashboardTile (ベータ版) + +* 新しい [Dashboard Tile](dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。 + +### igniteui-angular-charts (入力) + +* 新しい ColorEditor と Toolbar の ToolAction (ベータ版) + +この新しいエディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために [Toolbar](menus/toolbar.md) コンポーネントに統合されました。 + ## **18.1.0 (September 2024)** * [データ円チャート](charts/types/data-pie-chart.md) - [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) は円ャートを表示する新しいコンポーネントです。このコンポーネントは、[`IgxCategoryChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、ハイライト表示、アニメーション、凡例のサポートを可能にします。 diff --git a/jp/components/inputs/color-editor.md b/jp/components/inputs/color-editor.md new file mode 100644 index 0000000000..0385203542 --- /dev/null +++ b/jp/components/inputs/color-editor.md @@ -0,0 +1,89 @@ +--- +title: Angular Color Editor | カラー エディター | インフラジスティックス +_description: Color Editor コンポーネントは、アプリケーションの任意のコンポーネントまたは側面の色を変更するための、簡単に構成可能なオプションを提供します。 +_keywords: Angular Color Editor, Ignite UI for Angular, Angular カラー エディター, インフラジスティックス +mentionedTypes: ["ColorEditor"] +namespace: Infragistics.Controls +_language: ja +--- + +# Angular Color Editor (カラー エディター) の概要 (プレビュー) + +Ignite UI for Angular Color Editor は軽量のカラー ピッカー コンポーネントです。Color Editor は、ブラッシ アイコンをクリックすると開きます。RGBA 値と 16 進値の両方を、下部にある目的の色から取得できます。これらの値は、3 つのスライダーが変更されると更新されます。中央のボックスは、彩度と明度を調整するために設計されており、隣接する 2つ のスライダーで rgb 値と輝度値を調整できます。RGB は (1～255) の範囲で登録されます。明度は (0～1) の範囲で登録されます。 + +## Angular Color Editor の例 + + + + + +
+ +## 依存関係 + + + +まず、次のコマンドを実行して Ignite UI for Angular をインストールする必要があります: + +```cmd +npm install igniteui-angular-core +npm install igniteui-angular-inputs +``` + +`ColorEditor` を使用する前に、次のモジュールを登録する必要があります: + + + +## 使用方法 + +`ColorEditor` の使用を開始する最も簡単な方法は次のとおりです: + + + +```html + + + +``` + + + +## イベントにバインド + +Color Editor コンポーネントは、次のイベントを発生させます: + +* valueChanged +* valueChanging + + + +```ts +@ViewChild("colorEditor", { static: true } ) +private colorEditor: IgxColorEditorComponent +public ngAfterViewInit(): void +{ + this.colorEditor.valueChanged.subscribe(this.onValueChanged); +} + +public onValueChanged = (e: any) => { + console.log("test"); +} +``` + + + +
+ +## API リファレンス + +* `ColorEditor` + +## その他のリソース + +* [Ignite UI for Angular **フォーラム (英語)**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +* [Ignite UI for Angular **GitHub (英語)**](https://github.com/IgniteUI/igniteui-angular) diff --git a/jp/components/menus/toolbar.md b/jp/components/menus/toolbar.md index c5b40856e6..fc87b867ae 100644 --- a/jp/components/menus/toolbar.md +++ b/jp/components/menus/toolbar.md @@ -195,6 +195,43 @@ public toolbarCustomIconOnViewInit(): void { +### Color Editor (カラー エディター) + +Angular Toolbar にカスタム カラー エディター ツールを追加できます。このツールは、コマンド イベントと連携して、アプリケーションにカスタム スタイルを適用することもできます。 + +```html + + + + +``` + +```ts + + + + +``` + +次の例は、カラー エディター ツールを使用して Angular Data Chart シリーズ ブラシのスタイルを設定する方法を示しています。 + + + + +