あなたのダッシュボード - あなたの見た目! Revealの新しいカスタム テーマを紹介します

あなたのダッシュボード - あなたの見た目! Revealの新しいカスタム テーマを紹介します

Reveal組み込み分析とすぐに統合できるデータ視覚化を提供することを目的としています。重要なのは、アプリケーションに埋め込む要素がルック アンド フィールと一致していることを確認することです。アプリケーション ユーザー向けに、Revealは、すぐに使える 2 つのテーマ (Mountain と Ocean) が用意されています。これらは光の下でも美しく見えますし、[…]

6 分で読めます
Reveal目的は、組み込み分析とすぐに統合できるデータ視覚化を提供することです。重要なのは、アプリケーションに埋め込む要素がルック アンド フィールと一致していることを確認することです。

アプリケーション ユーザー向けに、Revealはすぐに使える 2 つのテーマ (Mountain と Ocean) が用意されており、明るいテーマでも暗いテーマでも美しく見えます。アプリケーションのテーマに合わせてビジュアライゼーションを埋め込みたいと考えていますか?問題ない！Reveal SDK を通じて、独自のカスタム テーマを作成し、ダッシュボードのあらゆる側面を制御できるようになりました。

Revealの新しいダッシュボード テーマ

山と海の新しいテーマで最高のユーザー エクスペリエンスを提供するために、見た目が美しく、ライト モードでもダーク モードでも機能し、モダンな外観と操作性を備えたカラー パレットを開発しました。ダッシュボードReveal
リビールの海のテーマ

カラーパレット

Revealアプリケーション内の各テーマのパレットには 10 の異なる色があります。ビジュアライゼーションを編集または作成するときに、パレットから選択して開始色を簡単に変更できます。

Revealアプリのカラーパレットの例

分析埋め込み時のカスタムテーマ

既存のアプリケーションに分析を埋め込む場合、それらのダッシュボードがアプリの外観と雰囲気に一致することが重要です。そのため、SDK を通じてRevealダッシュボードを完全に制御できるようになります。アプリケーションと比較して、カスタム テーマを使用して実現できる主なカスタマイズを次に示します。 

  • カラー パレット: ビジュアライゼーションでシリーズを表示するために使用される色。色は無制限に追加できます。ビジュアライゼーションですべての色が使用されると、Revealこれらの色の新しい色合いを自動生成します。こうすることで、色が繰り返されず、各値が独自の色を持つようになります。
  • アクセント カラー: Revealのデフォルトのアクセント カラーは、[+ ダッシュボード] ボタンやその他のインタラクティブ アクションにある青の色合いです。アプリケーションで使用するのと同じアクセントカラーに合わせて色を変更できます。
  • 条件付き書式の色: 条件付き書式を使用するときに設定できる境界のデフォルトの色を変更します。
  • フォント: Revealアプリケーションで 3 種類のテキスト (標準、中、太字) を使用します。これらのテキスト グループごとに使用するフォントを指定できます。
  • ビジュアライゼーションとダッシュボードの背景色: ダッシュボードの背景色とビジュアライゼーションの背景色を個別に構成できます。

カスタムテーマはどのように作成しますか?

Revealで独自のテーマを作成するのは、新しいRevealTheme()/$.igのインスタンスを作成するのと同じくらい簡単です。RevealTheme()クラス。このクラスには、上記のカスタマイズ可能な設定がすべて含まれています。

新しいRevealTheme/$.igを作成する場合。RevealThemeインスタンスでは、各設定のデフォルト値を取得します。これで、変更する必要のある設定を変更できます。最後に、テーマインスタンスを更新テーマ(テーマ) /更新テーマ(テーマ)メソッドに渡します。ダッシュボードまたは別のRevealコンポーネントがすでに画面に表示されている場合は、適用された変更を確認するために再レンダリングする必要があります。

独自のテーマをすでに適用しているが、他の設定に加えた変更を失わずに一部の設定を変更したい場合があります。

この場合、GetCurrentTheme()/getCurrentTheme()メソッドを呼び出すことができます。このメソッドを使用すると、RevealTheme 設定に設定した最後の値を取得できます。 RevealTheme の新しいインスタンスを最初から作成する場合とは異なり、変更を適用してテーマを再度更新すると、デフォルト値の代わりに、変更しなかった各設定の現在の値が取得されます。

​GetCurrentTheme()/getCurrentTheme() メソッドとUpdateRevealTheme(theme)/updateRevealTheme(theme)メソッドはどちらも、RevealView / $.ig.RevealViewクラスを通じてアクセスできます。

コード例

次のコード スニペットでは、現在のテーマを取得し、必要な変更を適用して、Revealでテーマを更新する方法を示します。

まず、変更を加える前のスクリーンショットの例から始めましょう。

マーケティング ダッシュボードReveal

次に、このコード スニペットを使用してカスタム テーマを定義します。

var regularFont = new FontFamily(new Uri("pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/"), "./#Verdana Italic"); 
var boldFont = new FontFamily(new Uri("pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/"), "./#Verdana Bold"); 
var mediumFont = new FontFamily(new Uri("pack://application:,,,/ [Your ProjectName];component/[pathToFonts]/"), "./#Verdana Bold Italic"); 

var customTheme = RevealView.GetCurrentTheme(); 
customTheme.ChartColors.Clear(); 
customTheme.ChartColors.Add(Color.FromRgb(192, 80, 77)); 
customTheme.ChartColors.Add(Color.FromRgb(101, 197, 235)); 
customTheme.ChartColors.Add(Color.FromRgb(232, 77, 137); 

customTheme.BoldFont = new FontFamily("Gabriola"); 
customTheme.MediumFont = new FontFamily("Comic Sans MS"); 
customTheme.FontColor = Color.FromRgb(31, 59, 84); 
customTheme.AccentColor = Color.FromRgb(192, 80, 77); 
customTheme.DashboardBackgroundColor = Color.FromRgb(232, 235, 252); 

RevealView.UpdateRevealTheme(customTheme);

注:新しい色のセットを追加するには、最初にグラフの色リストのデフォルト値をクリアする必要があります。

次のコード スニペットは、revealTheme クラスの新しいインスタンスを作成し、必要な設定に変更を適用し、Reveal Web でテーマを更新する方法を示しています。
 
コードサンプル –Reveal Web 
var revealTheme = new $.ig.RevealTheme(); 
revealTheme.chartColors = ["rgb(192, 80, 77)", "rgb(101, 197, 235)", "rgb(232, 77, 137)"]; 

revealTheme.mediumFont = "Gabriola"; 
revealTheme.boldFont = "Comic Sans MS"; 
revealTheme.fontColor = "rgb(31, 59, 84)"; 
revealTheme.accentColor = "rgb(192, 80, 77)"; 
revealTheme.dashboardBackgroundColor = "rgb(232, 235, 252)"; 

$.ig.RevealView.updateRevealTheme(revealTheme);

注: フォント オプションの使用

リビール テーマの太字フォント、標準フォント、または中フォント設定を定義するときは、正確なフォント ファミリ名を渡す必要があります。ウェイトは名前ではなくフォント自体の定義によって定義されます。$.ig.RevealThemeフォント設定で指定されたフォントフェイス名が使用可能であることを確認するには、@font-face (CSS プロパティ) を使用する必要がある場合があります。

テーマの変更を実装した後、ダッシュボード エディターと視覚化エディターの両方に新しい結果が表示されます。

Reveal BI のダッシュボード
上記のコード スニペットの変更を適用した後のダッシュボード エディター。

ダッシュボードReveal
上記のコード スニペットからの変更を適用した後のビジュアライゼーション エディター。

テーマのプロパティを変更するコード スニペット

テーマを変更するためのドキュメントは次の場所にあります。

https://www.revealbi.io/help/developer/rvui.wpf~infragistics.sdk.revealtheme_properties 

$.ig.RevealTheme で設定できるプロパティは次のとおりです。

  • グラフの色
  • 通常のフォント
  • 中フォント
  • 太字フォント
  • フォントの色
  • ダッシュボードの背景色
  • 視覚化背景色
  • アクセントの色
  • 丸い角を使用する
  • 条件付き書式設定.lowColor
  • 条件付き書式設定.midColor
  • 条件付き書式設定.hiColor
  • 条件付き書式設定.noneColor

Web SDK でテーマを変更するスニペットを次に示します。

var revealTheme = new $.ig.RevealTheme();

// 標準色・フォントの設定
LeaveTheme.accentColor = “rgb(15,96,69)”;
明らかにTheme.regulatoryFont = “正義”;
replaceTheme.mediumFont = “警告”;
replaceTheme.boldFont = “ドミネ”;
replaceTheme.fontColor = “rgb(226,24,125)”;
replaceTheme.dashboardBackgroundColor = “rgb(24,224,37)”;
replaceTheme.visualizationBackgroundColor = “rgb(221,224,37)”;

// 条件付き書式設定を設定します
replaceTheme.conditionalFormatting.hiColor = “rgb(87,0,127)”;
replaceTheme.conditionalFormatting.lowColor = “rgb(158,0,232)”;
replaceTheme.conditionalFormatting.midColor = “rgb(198,137,229)”;
LeaveTheme.conditionalFormatting.noneColor = “rgb(255,255,127)”;

//チャート色の設定
LeaveTheme.chartColors = [“rgb(248,53,255)”, “rgb(248,53,75)”, “rgb(54,247,160)”, “rgb(130,53,244)”, “rgb(235,242,138),rgb(239,139,219) ),rgb(38,116,68),rgb(108,147,178)”];

// 正方形または丸い外観を設定する
replaceTheme.useRoundedCorners = false;

// ダッシュボードを更新する
$.ig.RevealView.updateRevealTheme(revealTheme);

Theme プロパティを設定したら、RevealViewでupdateRevealメソッドを呼び出します。

$.ig.RevealView.updateRevealTheme(revealTheme);

フォントをカスタマイズするには、ページの CSS に次の行を追加する必要があります。

<link href=”https://fonts.googleapis.com/css?family=Righteous” rel=”stylesheet”>
<link href=”https://fonts.googleapis.com/css?family=Domine” rel=”stylesheet”>
<link href=”https://fonts.googleapis.com/css?family=Caveat” rel=”stylesheet”>

 

これらのプロパティ設定を使用すると、必要なブランドのカスタマー エクスペリエンスに合わせてReveal埋め込み分析をカスタマイズできるはずです。

他に必要なスタイリング ポイントがある場合は、お知らせください。

 
製品のアップデート情報
デモを予約