Updating JA for #1407, #1420 and #1421

doc/jp/components/dashboard-tile.md

@@ -0,0 +1,150 @@
+---
+title: {Platform} Dashboard Tile コンポーネント – {ProductName}
+_description: {Platform} Dashboard Tile コンポーネントを簡単に使い始める方法をご覧ください。
+_keywords: {ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Dashboard components, {Platform} Dashboard Tile controls, UI コントロール, {Platform} ウィジェット, Web ウィジェット, UI ウィジェット, ネイティブ {Platform} コンポーネント スイート, ネイティブ {Platform} コントロール, ネイティブ {Platform} コンポーネント ライブラリ, {Platform} Dashboard コンポーネント, {Platform} Dashboard Tile コントロール
+mentionedTypes: ["Toolbar", "CategoryChart", "XamDataChart", "XamRadialGauge", "XamLinearGauge", "XamGeographicMap"]
+_language: ja
+---
+
+# {Platform} Dashboard Tile (ダッシュボード タイル) の概要
+
+{Platform} Dashboard Tile コンポーネントは、データのスキーマに基づいて {ProductName} ツールセットからデータ視覚化コントロールを生成することにより、DataSource コレクションまたは単一のデータ ポイントを視覚化するコンテナー コントロールです。また、`Toolbar` を使用して、これらのデータ視覚化コントロールをさらに操作およびカスタマイズできます。
+
+## {Platform} Dashboard Tile の例
+
+<!-- TODO -->
+`sample="/charts/dashboard-tile/overview", height="600", alt="{Platform} Dashboard Tile の例"`
+
+## 依存関係
+
+<!-- Angular, WebComponents, React -->
+{ProductName} ツールセットに次のパッケージをインストールします:
+
+```cmd
+npm install {PackageCharts}
+npm install {PackageCore}
+npm install {PackageDashboards}
+npm install {PackageGauges}
+npm install {PackageGrids}
+npm install {PackageInputs}
+npm install {PackageLayouts}
+npm install {PackageMaps}
+```
+
+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 {}
+```
+
+```ts
+import { IgrDashboardTileModule, IgrDataChartDashboardTileModule, IgrRadialGaugeDashboardTileModule,
+         IgrLinearGaugeDashboardTileModule, IgrGeographicMapDashboardTileModule,
+         IgrPieChartDashboardTileModule } from "igniteui-react-dashboards";
+
+IgrDataChartDashboardTileModule.register();
+IgrRadialGaugeDashboardTileModule.register();
+IgrLinearGaugeDashboardTileModule.register();
+IgrGeographicMapDashboardTileModule.register();
+IgrPieChartDashboardTileModule.register();
+IgrDashboardTileModule.register();
+```
+
+```ts
+import { IgcDashboardTileModule, IgcDataChartDashboardTileModule, IgcRadialGaugeDashboardTileModule,
+         IgcLinearGaugeDashboardTileModule, IgcGeographicMapDashboardTileModule,
+         IgcPieChartDashboardTileModule } from "igniteui-angular-dashboards";
+
+ModuleManager.register(
+    IgcDataChartDashboardTileModule,
+    IgcRadialGaugeDashboardTileModule,
+    IgcLinearGaugeDashboardTileModule,
+    IgcGeographicMapDashboardTileModule,
+    IgcPieChartDashboardTileModule,
+    IgcDashboardTileModule
+);
+```
+
+<!-- end:Angular, WebComponents, React -->
+
+<!-- Blazor -->
+
+**IgniteUI.Blazor.Controls** 名前空間を **_Imports.razor** ファイルに追加します。
+
+```razor
+@using IgniteUI.Blazor.Controls
+```
+
+Dashboard Tile コンポーネントを使用する場合、以下のモジュールが必要です:
+
+```razor
+// in Program.cs file
+
+builder.Services.AddIgniteUIBlazor(
+    typeof(IgbDataChartDashboardTileModule),
+    typeof(IgbRadialGaugeDashboardTileModule),
+    typeof(IgbLinearGaugeDashboardTileModule),
+    typeof(IgbGeographicMapDashboardTileModule),
+    typeof(IgbPieChartDashboardTileModule),
+    typeof(IgbDashboardTileModule)
+);
+```
+
+<!-- end: Blazor -->
+
+## 使用方法
+
+コントロールはバインドしたデータを評価し、{ProductName} ツールセットから表示する視覚エフェクトを選択するため、Dashboard Tile の `DataSource` プロパティを何にバインドするかによって、デフォルトで表示される視覚エフェクトが決まります。Dashboard Tile に表示されるデータ視覚化コントロールは次のとおりです。
+
+* [{IgPrefix}CategoryChart](chart-overview.html)
+* [{IgPrefix}DataChart](chart-overview.html)
+* [{IgPrefix}DataPieChart](data-pie-chart.html)
+* [{IgPrefix}GeographicMap](geo-map.html)
+* [{IgPrefix}LinearGauge](linear-gauge.html)
+* [{IgPrefix}RadialGauge](radial-gauge.html)
+
+デフォルトで選択されるデータ視覚化は、主にスキーマとバインドした `DataSource` の数によって決まります。たとえば、単一の数値をバインドすると `XamRadialGauge` が取得されますが、互いにあまり近くない値とラベルのペアのコレクションをバインドすると `XamDataPieChart` が取得されます。より多くの値パスを持つ `DataSource` をバインドすると、バインドされたコレクションの数に応じて、複数の列シリーズまたは線シリーズを持つ `CategoryChart` または `DataChart` を受け取ります。`ShapeDataSource` にバインドして `XamGeographicMap` を受け取ることもできます。
+
+`DataSource` をバインドするときに単一の視覚化にロックされることはなく、`VisualizationType` プロパティを設定することで、特定の視覚化を表示することをコントロールに指示できます。たとえば、特に折れ線チャートを表示したい場合は、次のように Dashboard Tile を定義できます。
+
+<!-- TODO SAMPLE -->
+
+視覚化または視覚化のプロパティも、コントロールの上部にある `Toolbar` を使用して構成できます。この `Toolbar` には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。
+
+<img src="../images/dashboard-tile-toolbar.png" />
+
+左から右へ:
+
+- 最初のツールは、コントロールに提供された `DataSource` を含むデータ グリッドを表示します。これは切り替えツールなので、グリッドを表示した後にもう一度クリックすると、視覚化に戻ります。
+- 2 番目のツールを使用すると、現在のデータ視覚化のプロパティを構成できます。
+- 3 番目のツールを使用すると、現在の視覚化を変更して、異なるシリーズ タイプをプロットしたり、まったく異なるタイプの視覚化を表示したりすることができます。これは、前述の `VisualizationType` プロパティを設定することによってコントロール上で設定できます。
+- 最後のツールを使用すると、基になるデータ項目のどのプロパティをコントロールに含めるかを構成できます。これを構成するには、コントロールに `IncludedProperties` または `ExcludedProperties` コレクションを設定します。
+
+## API リファレンス
+
+ - `Toolbar`
+ - `CategoryChart`
+ - `XamDataChart`
+ - `DataPieChart`
+ - `XamGeographicMap`
+ - `XamLinearGauge`
+ - `XamRadialGauge`
+
+## その他のリソース
+
+* [{ProductName} **フォーラム (英語)**]({ForumsLink})
+* [{ProductName} **GitHub (英語)**]({GithubLink})

doc/jp/components/general-nuget-feed.md

@@ -23,9 +23,12 @@ Infragistics は製品版を使用するユーザーにプライベート NuGet
 
 2 - [**パッケージ ソース**] セクションで、ダイアログの右上にある **[+]** アイコンをクリックして新しいパッケージ ソースを追加します。
    - 名前を **Infragistics** に設定します。
-   - ソースを **https://packages.infragistics.com/nuget/licensed** に設定します。
+   - NuGet プロトコル バージョン 3 を使用する場合は、ソースを **https://packages.infragistics.com/nuget/licensed/v3/index.json** に設定します。それ以外の場合は、**https://packages.infragistics.com/nuget/licensed/** に設定する必要があります。
 
-    [**更新**] ボタンをクリックし、[OK] をクリックしてダイアログを閉じます。
+> [!Note]
+> v3 またはそれ以前のバージョンを使用するかどうかの詳細については、次の Web サイト (英語) をご覧ください: **https://devblogs.microsoft.com/nuget/nuget-3-what-and-why/** 。プロトコル v3 は、新しいバージョンの NuGet クライアント (2015 以降) を使用する場合にのみ適用されます。古い NuGet クライアントは、v3 と互換性がない場合があります。
+
+    **[更新]** ボタンをクリックし、[OK] をクリックしてダイアログを閉じます。
 
 <img src="../images/general/nuget-package-manager-package-sources-ig-server.jpg" />
 
@@ -39,6 +42,10 @@ Infragistics は製品版を使用するユーザーにプライベート NuGet
 3 - 以下のコマンドを実行します。
 
 ```cmd
+//nuget protocol v3
+nuget sources add -name "Infragistics" -source "https://packages.infragistics.com/nuget/licensed/v3/index.json" -username "your login email" -password "your password"
+
+//nuget protocol v2
 nuget sources add -name "Infragistics" -source "https://packages.infragistics.com/nuget/licensed" -username "your login email" -password "your password"
 ```
 

doc/jp/components/layouts/color-editor.md

@@ -0,0 +1,181 @@
+---
+title: {Platform} Color Editor | カラー エディター | インフラジスティックス
+_description: Color Editor コンポーネントは、アプリケーションの任意のコンポーネントまたは側面の色を変更するための、簡単に構成可能なオプションを提供します。
+_keywords: {Platform} Color Editor, {ProductName}, {Platform} カラー エディター, インフラジスティックス
+mentionedTypes: ["ColorEditor"]
+namespace: Infragistics.Controls
+_language: ja
+---
+
+# {Platform} Color Editor (カラー エディター) の概要 (プレビュー)
+
+{ProductName} Color Editor は軽量のカラー ピッカー コンポーネントです。Color Editor は、ブラッシ アイコンをクリックすると開きます。RGBA 値と 16 進値の両方を、下部にある目的の色から取得できます。これらの値は、3 つのスライダーが変更されると更新されます。中央のボックスは、彩度と明度を調整するために設計されており、隣接する 2つ のスライダーで rgb 値と輝度値を調整できます。RGB は (1～255) の範囲で登録されます。明度は (0～1) の範囲で登録されます。
+
+## {Platform} Color Editor の例
+
+`sample="/layouts/color-editor/overview", height="320", alt="{Platform} Color Editor の例"`
+
+<div class="divider--half"></div>
+
+## 依存関係
+
+<!-- Angular, WebComponents, React -->
+まず、次のコマンドを実行して {ProductName} をインストールする必要があります:
+
+```cmd
+npm install {PackageCore}
+npm install {PackageInputs}
+```
+
+`ColorEditor` を使用する前に、次のモジュールを登録する必要があります:
+
+```ts
+import { IgcColorEditorModule } from "igniteui-angular-inputs";
+
+@NgModule({
+    imports: [
+        IgcColorEditorModule
+    ]
+})
+export class AppModule {}
+```
+
+```ts
+import { IgcColorEditorModule, IgcColorEditorComponent } from 'igniteui-webcomponents-inputs';
+
+ModuleManager.register(
+    IgcColorEditorModule
+);
+```
+
+```tsx
+import { IgrColorEditor, IgrColorEditorModule } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+IgrColorEditorModule.register();
+```
+
+<!-- end:Angular, WebComponents, React -->
+
+<!-- Blazor -->
+
+ます、**IgniteUI.Blazor.Controls** 名前空間を **_Imports.razor** ファイルに追加します。
+
+```razor
+@using IgniteUI.Blazor.Controls
+```
+
+Dashboard Tile コンポーネントを使用する場合、以下のモジュールが必要です:
+
+```razor
+// in Program.cs file
+builder.Services.AddIgniteUIBlazor(
+    typeof(IgbColorEditorModule)
+);
+```
+
+<!-- end: Blazor -->
+
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+
+## 使用方法
+
+`ColorEditor` の使用を開始する最も簡単な方法は次のとおりです:
+
+<!-- Angular -->
+```html
+<igx-color-editor
+    name="colorEditor"
+    #colorEditor>
+    </igx-color-editor>
+</div>
+```
+<!-- end: Angular -->
+
+<!-- WebComponents -->
+```html
+<igc-color-editor
+    name="colorEditor"
+    id="colorEditor">
+</igc-color-editor>
+```
+<!-- end: WebComponents -->
+
+<!-- React -->
+```tsx
+<IgrColorEditor
+    ref={this.colorEditorRef}>
+</IgrColorEditor>
+```
+<!-- end:React -->
+
+<!-- Blazor -->
+```razor
+<IgbColorEditor>
+</IgbColorEditor>
+```
+<!-- end:Blazor -->
+
+## イベントにバインド
+
+Color Editor コンポーネントは、次のイベントを発生させます:
+
+- valueChanged
+- valueChanging
+
+<!-- Angular -->
+```ts
+@ViewChild("colorEditor", { static: true } )
+private colorEditor: IgxColorEditorComponent
+public ngAfterViewInit(): void 
+{	
+    this.colorEditor.valueChanged.subscribe(this.onValueChanged);
+}
+
+public onValueChanged = (e: any) => {
+    console.log("test");
+}
+```
+<!-- end: Angular -->
+
+<!-- WebComponents -->
+```ts
+this.OnValueChanged = this.OnValueChanged.bind(this);
+this.colorEditor = document.getElementById('colorEditor') as IgcColorEditorComponent;
+this.colorEditor.valueChanged = this.OnValueChanged;
+```
+<!-- end: WebComponents -->
+
+<!-- Blazor -->
+```razor
+<IgbColorEditor ValueChanged="@OnValueChanged" />
+
+@code {
+    public void OnValueChanged(IgbColorEditorPanelSelectedValueChangedEventArgs e)
+    {
+
+    }
+}
+```
+<!-- end:Blazor -->
+
+<!-- React -->
+```tsx
+<IgrColorEditor valueChanged={this.onValueChanged} />
+
+public onValueChanged(calendar: IgrColorEditor, e: IgrColorEditorPanelSelectedValueChangedEventArgs) {
+
+}
+```
+<!-- end: React -->
+
+<div class="divider--half"></div>
+
+## API リファレンス
+
+ - `ColorEditor`
+
+## その他のリソース
+
+* [{ProductName} **フォーラム (英語)**]({ForumsLink})
+* [{ProductName} **GitHub (英語)**]({GithubLink})