ダッシュボードはあなたのスタイル！Revealの新しいカスタムテーマをご紹介します

ダッシュボードはあなたのスタイル！Revealの新しいカスタムテーマをご紹介します

Revealは、アナリティクスを組み込んだ、すぐに統合できるデータ・ビジュアライゼーションを提供します。重要なのは、アプリケーションに埋め込む要素が、ルック＆フィールにマッチしていることを確認することです。私たちのアプリケーション・ユーザーのために、 、「Mountain（山）」と「Ocean（海）」という2つのテーマがすぐに使えるようになりました。Reveal

6 分で読めます
Reveal、組み込みの分析機能を備えた、すぐに統合できるデータ視覚化機能を提供します。重要なのは、アプリケーションに埋め込む要素が外観と操作感に一致することを確認することです。

アプリケーション ユーザー向けに、Revealは現在、明るいテーマと暗いテーマの両方で美しく表示される Mountain と Ocean の 2 つのテーマがすぐに使用できます。アプリケーションのテーマに合わせて視覚化を埋め込みたいですか? 問題ありません! Reveal SDK を使用すると、独自のカスタム テーマを作成し、ダッシュボードのあらゆる側面を制御できるようになりました。

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

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

カラーパレット

Revealアプリケーション内の各テーマのパレットには 10 種類の色があります。視覚化を編集または作成するときに、パレットから選択して開始色を簡単に変更できます。

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

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

既存のアプリケーションに分析機能を埋め込む場合、ダッシュボードがアプリケーションの外観と操作感に合っていることが重要です。そのため、SDK を通じてRevealダッシュボードを完全に制御できるようにしています。アプリケーションと比較して、カスタム テーマで実現できる主なカスタマイズは次のとおりです。 

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

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

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

新しいRevealTheme/$.ig.RevealThemeインスタンスを作成すると、各設定のデフォルト値が取得されます。これで、変更する必要がある設定を変更できます。最後に、テーマ インスタンスをUpdateRevealTheme(theme)/ updateRevealTheme(theme)メソッドに渡します。ダッシュボードまたは別の 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埋め込み分析をカスタマイズできるようになります。

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

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