diff --git a/doc/jp/components/dashboard-tile.md b/doc/jp/components/dashboard-tile.md new file mode 100644 index 000000000..73dc8e6f4 --- /dev/null +++ b/doc/jp/components/dashboard-tile.md @@ -0,0 +1,154 @@ +--- +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 は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。また、埋め込みの `Toolbar` で提供される一連のツールを使用して、さまざまな方法で表示される視覚化を変更できます。 + +提供されたデータの形状に応じて、以下を含む多種多様な視覚化が選択可能です。これには以下が含まれますが、これらに限定されません: カテゴリ チャート、`ラジアル チャートと極座標チャート、散布図、地理マップ、ラジアル ゲージとリニア ゲージ、ファイナンシャル チャート、積層型チャート。 + +ツールバー内のチャート タイプ メニューを操作すると、候補リストの中から異なる視覚化を選択できます。 + +## {Platform} Dashboard Tile の例 + + +`sample="/charts/dashboard-tile/overview", height="600", alt="{Platform} Dashboard Tile の例"` + +## 依存関係 + + +{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 +); +``` + + + + + +**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) +); +``` + + + +## 使用方法 + +コントロールはバインドしたデータを評価し、{ProductName} ツールセットから表示する視覚エフェクトを選択するため、Dashboard Tile の `DataSource` プロパティを何にバインドするかによって、デフォルトで表示される視覚エフェクトが決まります。Dashboard Tile に表示されるデータ視覚化コントロールは次のとおりです。 + +* [{IgPrefix}CategoryChart](charts/chart-overview.md) +* [{IgPrefix}DataChart](charts/chart-overview.md) +* [{IgPrefix}DataPieChart](charts/types/data-pie-chart.md) +* [{IgPrefix}GeographicMap](geo-map.md) +* [{IgPrefix}LinearGauge](linear-gauge.md) +* [{IgPrefix}RadialGauge](radial-gauge.md) + +デフォルトで選択されるデータ視覚化は、主にスキーマとバインドした `DataSource` の数によって決まります。たとえば、単一の数値をバインドすると `XamRadialGauge` が取得されますが、互いに区別しやすい値とラベルのペアのコレクションをバインドすると `XamDataPieChart` が取得されます。より多くの値パスを持つ `DataSource` をバインドすると、バインドされたコレクションの数に応じて、複数の列シリーズまたは線シリーズを持つ `DataChart` を受け取ります。また、`XamGeographicMap` を取得するために、`ShapeDataSource` または地理的ポイントを含むデータにバインドすることもできます。 + +`DataSource` をバインドするときに単一の視覚化にロックされることはなく、`VisualizationType` プロパティを設定することで、特定の視覚化を表示することをコントロールに指示できます。たとえば、特に折れ線チャートを表示したい場合は、次のように Dashboard Tile を定義できます。 + + + +視覚化または視覚化のプロパティも、コントロールの上部にある `Toolbar` を使用して構成できます。この `Toolbar` には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。 + + + +左から右へ: + +- 最初のツールは、コントロールに提供された `DataSource` を含むデータ グリッドを表示します。これは切り替えツールなので、グリッドを表示した後にもう一度クリックすると、視覚化に戻ります。 +- 2 番目のツールを使用すると、現在のデータ視覚化の設定を構成できます。 +- 3 番目のツールを使用すると、現在の視覚化を変更して、異なるシリーズ タイプをプロットしたり、まったく異なるタイプの視覚化を表示したりすることができます。これは、前述の `VisualizationType` プロパティを設定することによってコントロール上で設定できます。 +- 最後のツールを使用すると、基になるデータ項目のどのプロパティをコントロールに含めるかを構成できます。これを構成するには、コントロールに `IncludedProperties` または `ExcludedProperties` コレクションを設定します。 + +## API リファレンス + + - `Toolbar` + - `CategoryChart` + - `XamDataChart` + - `DataPieChart` + - `XamGeographicMap` + - `XamLinearGauge` + - `XamRadialGauge` + +## その他のリソース + +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) +* [{ProductName} **GitHub (英語)**]({GithubLink}) diff --git a/doc/jp/components/general-changelog-dv-blazor.md b/doc/jp/components/general-changelog-dv-blazor.md index 47bfdd680..1e6a80835 100644 --- a/doc/jp/components/general-changelog-dv-blazor.md +++ b/doc/jp/components/general-changelog-dv-blazor.md @@ -15,6 +15,18 @@ _language: ja * バージョン 2024.2 以降、Ignite UI for Blazor ツールセットは .NET 9 をサポートします。.NET 9 の詳細については、[Microsoft サイト](https://learn.microsoft.com/ja-jp/dotnet/core/whats-new/dotnet-9/overview)をご確認ください。 +### {PackageCharts} (チャート) + +DashboardTile (ベータ版) + +- 新しい [Dashboard Tile](charts/dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。 + +### {PackageCharts} (入力) + +- 新しい ColorEditor と Toolbar の ToolAction (ベータ版) + +この新しいエディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために [Toolbar](menus/toolbar.md) コンポーネントに統合されました。 + **重大な変更** - バージョン 2024.2 のリリースでは、[Microsoft .NET ライフサイクル](https://dotnet.microsoft.com/ja-jp/platform/support/policy/dotnet-core)に従い、.NET 3.1、.NET 5、.NET 7 はサポートされなくなりました。 diff --git a/doc/jp/components/general-changelog-dv-react.md b/doc/jp/components/general-changelog-dv-react.md index 3ce99c9bb..19601581a 100644 --- a/doc/jp/components/general-changelog-dv-react.md +++ b/doc/jp/components/general-changelog-dv-react.md @@ -10,6 +10,20 @@ _language: ja {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +## **{PackageVerChanges-24-2-DEC}** + +### {PackageCharts} (チャート) + +DashboardTile (ベータ版) + +- 新しい [Dashboard Tile](charts/dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。 + +### {PackageCharts} (入力) + +- 新しい ColorEditor と Toolbar の ToolAction (ベータ版) + +この新しいエディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために [Toolbar](menus/toolbar.md) コンポーネントに統合されました。 + ## **{PackageVerChanges-24-2-NOV}** ### 一般 diff --git a/doc/jp/components/general-changelog-dv-wc.md b/doc/jp/components/general-changelog-dv-wc.md index 9266c17e9..ebda80583 100644 --- a/doc/jp/components/general-changelog-dv-wc.md +++ b/doc/jp/components/general-changelog-dv-wc.md @@ -11,6 +11,20 @@ _language: ja {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +### **{PackageVerChanges-24-2-DEC}** + +#### {PackageCharts} (チャート) + +DashboardTile (ベータ版) + +- 新しい [Dashboard Tile](charts/dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。 + +#### {PackageCharts} (入力) + +- 新しい ColorEditor と Toolbar の ToolAction (ベータ版) + +この新しいエディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために [Toolbar](menus/toolbar.md) コンポーネントに統合されました。 + ### **{PackageVerChanges-24-1-SEP}** #### {PackageCharts} (チャート) diff --git a/doc/jp/components/general-changelog-dv.md b/doc/jp/components/general-changelog-dv.md index f9f2d9e6c..b0270fb42 100644 --- a/doc/jp/components/general-changelog-dv.md +++ b/doc/jp/components/general-changelog-dv.md @@ -16,6 +16,20 @@ _language: ja * [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master) +## **{PackageVerChanges-24-2-DEC}** + +### {PackageCharts} (チャート) + +DashboardTile (ベータ版) + +- 新しい [Dashboard Tile](charts/dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。 + +### {PackageCharts} (入力) + +- 新しい ColorEditor と Toolbar の ToolAction (ベータ版) + +この新しいエディターはスタンドアロンのカラー ピッカーとして使用でき、実行時に視覚化を更新するために [Toolbar](menus/toolbar.md) コンポーネントに統合されました。 + ## **{PackageVerChanges-24-1-SEP}** - [データ円チャート](charts/types/data-pie-chart.md) - `DataPieChart` は円ャートを表示する新しいコンポーネントです。このコンポーネントは、`CategoryChart` と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、ハイライト表示、アニメーション、凡例のサポートを可能にします。 diff --git a/doc/jp/components/general-nuget-feed.md b/doc/jp/components/general-nuget-feed.md index 7cce990df..d6471fb51 100644 --- a/doc/jp/components/general-nuget-feed.md +++ b/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] をクリックしてダイアログを閉じます。 @@ -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" ``` diff --git a/doc/jp/components/inputs/color-editor.md b/doc/jp/components/inputs/color-editor.md new file mode 100644 index 000000000..bd29dd370 --- /dev/null +++ b/doc/jp/components/inputs/color-editor.md @@ -0,0 +1,179 @@ +--- +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="/inputs/color-editor/overview", height="320", alt="{Platform} Color Editor の例"` + +
+ +## 依存関係 + + +まず、次のコマンドを実行して {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(); +``` + + + + + +ます、**IgniteUI.Blazor.Controls** 名前空間を **_Imports.razor** ファイルに追加します。 + +```razor +@using IgniteUI.Blazor.Controls +``` + +Dashboard Tile コンポーネントを使用する場合、以下のモジュールが必要です: + +```razor +// in Program.cs file +builder.Services.AddIgniteUIBlazor( + typeof(IgbColorEditorModule) +); +``` + + + +## 使用方法 + +`ColorEditor` の使用を開始する最も簡単な方法は次のとおりです: + + +```html + + + +``` + + + +```html + + +``` + + + +```tsx + + +``` + + + +```razor + + +``` + + +## イベントにバインド + +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"); +} +``` + + + +```ts +this.OnValueChanged = this.OnValueChanged.bind(this); +this.colorEditor = document.getElementById('colorEditor') as IgcColorEditorComponent; +this.colorEditor.valueChanged = this.OnValueChanged; +``` + + + +```razor + + +@code { + public void OnValueChanged(IgbColorEditorPanelSelectedValueChangedEventArgs e) + { + + } +} +``` + + + +```tsx + + +public onValueChanged(calendar: IgrColorEditor, e: IgrColorEditorPanelSelectedValueChangedEventArgs) { + +} +``` + + +
+ +## API リファレンス + + - `ColorEditor` + +## その他のリソース + +* [{ProductName} **フォーラム (英語)**]({ForumsLink}) +* [{ProductName} **GitHub (英語)**]({GithubLink}) \ No newline at end of file diff --git a/doc/jp/components/menus/toolbar.md b/doc/jp/components/menus/toolbar.md index 4275b3e13..49d84d3d7 100644 --- a/doc/jp/components/menus/toolbar.md +++ b/doc/jp/components/menus/toolbar.md @@ -359,6 +359,59 @@ public toolbarCustomIconOnViewInit(): void { 次の例は、{Platform} ツールバーの垂直方向を示しています。 `sample="/charts/toolbar/layout-in-vertical-orientation", height="600", alt="{Platform} 垂直方向"` +### Color Editor (カラー エディター) + +{Platform} Toolbar にカスタム カラー エディター ツールを追加できます。このツールは、コマンド イベントと連携して、アプリケーションにカスタム スタイルを適用することもできます。 + +```html + + + + +``` + +```ts + + + + +``` + +```tsx + + + + +``` + +```razor + + + + +``` + +次の例は、カラー エディター ツールを使用して {Platform} Data Chart シリーズ ブラシのスタイルを設定する方法を示しています。 + +`sample="/charts/toolbar/color-editor-support", height="600", alt="{Platform} Color Editor のサポート"` +