대시보드 — 당신의 모습! Reveal에서 새로운 사용자 지정 테마를 만나보세요

애플리케이션 사용자를 위해Reveal 이제 밝은 테마와 어두운 테마 모두에서 아름답게 보이는 Mountain과 Ocean이라는 두 가지 테마를 기본으로 제공합니다. 애플리케이션 테마와 일치하는 시각화를 임베드하고 싶으신가요? 문제 없습니다! Reveal SDK를 통해 이제 사용자 정의 테마를 만들고 대시보드의 모든 측면을 제어할 수 있습니다.

Reveal의 새로운 대시보드 테마

산과 바다의 새로운 테마로 최고의 사용자 경험을 제공하기 위해 우리는 아름답게 보이고 밝은 모드와 어두운 모드에서 작동하며 현대적인 모양과 느낌을 가진 색상 팔레트를 개발했습니다.
리빌의 바다 테마

색상 팔레트

Reveal 애플리케이션 내의 각 테마는 팔레트에 10가지 다른 색상을 가지고 있습니다. 시각화를 편집하거나 만들 때 팔레트에서 선택하여 시작 색상을 쉽게 변경할 수 있습니다.

Analytics 포함 시 사용자 지정 테마 지정

기존 애플리케이션에 분석을 임베드할 때 해당 대시보드가 앱의 모양과 느낌과 일치하는 것이 중요합니다. 그래서 SDK를 통해 Reveal 대시보드에 대한 완전한 제어권을 제공합니다. 애플리케이션과 비교했을 때, 사용자 정의 테마로 달성할 수 있는 주요 사용자 정의는 다음과 같습니다. 

• 색상 팔레트: 시각화에서 시리즈를 표시하는 데 사용되는 색상입니다. 무제한으로 색상을 추가할 수 있습니다. 시각화에서 모든 색상이 사용되면 Reveal 이러한 색상의 새로운 음영을 자동 생성합니다. 이렇게 하면 색상이 반복되지 않고 각 값마다 고유한 색상이 있습니다.
• 강조색: Reveal의 기본 강조색은 + 대시보드 버튼과 다른 대화형 작업에서 찾을 수 있는 파란색 음영입니다. 응용 프로그램에서 사용하는 것과 동일한 강조색과 일치하도록 색상을 변경할 수 있습니다.
• 조건부 서식 색상: 조건부 서식을 사용할 때 설정할 수 있는 범위의 기본 색상을 변경합니다.
• 글꼴: Reveal 애플리케이션에서 일반, 중간 및 굵은 세 가지 유형의 텍스트를 사용합니다. 이러한 각 텍스트 그룹에 대해 글꼴 사용을 지정할 수 있습니다.
• 시각화 및 대시보드 배경색: 대시보드의 배경색과 시각화의 배경색을 별도로 구성할 수 있습니다.

사용자 지정 테마는 어떻게 만드나요?

Reveal에서 자신의 테마를 만드는 것은 새 테마의 인스턴스를 만드는 것만큼 쉽습니다. 테마 공개()/$.ig.테마 공개() 클래스. 이 클래스에는 위에 나열된 모든 사용자 정의 설정이 포함되어 있습니다.

새 RevealTheme/$.ig.RevealTheme 인스턴스를 만들면 각 설정에 대한 기본값을 받게 됩니다. 이제 변경해야 할 설정을 수정할 수 있습니다. 마지막으로 테마 인스턴스를 UpdateRevealTheme(theme)/ updateRevealTheme(theme) 메서드에 전달합니다. 대시보드나 다른 Reveal 구성 요소가 이미 화면에 표시되어 있는 경우 적용된 변경 사항을 보려면 다시 렌더링해야 합니다.

이미 고유한 테마를 적용했지만 다른 설정에 대한 변경 사항을 잃지 않고 일부 설정을 수정하고 싶을 수 있습니다.

이 경우 GetCurrentTheme()/getCurrentTheme() 메서드를 호출할 수 있습니다. 이 메서드를 사용하면 RevealTheme 설정에 대해 설정한 마지막 값을 가져올 수 있습니다. 처음부터 RevealTheme의 새 인스턴스를 생성하는 경우와 달리 변경 사항을 적용하고 테마를 다시 업데이트하면 기본값 대신 수정하지 않은 각 설정에 대한 현재 값을 얻게 됩니다.

​GetCurrentTheme()/getCurrentTheme() 및 UpdateRevealTheme(theme)/updateRevealTheme(theme) 메서드는 모두 RevealView / $.ig.RevealView 클래스를 통해 액세스할 수 있습니다.

코드 예

다음 코드 조각에서는 현재 테마를 가져오고 원하는 변경 사항을 적용하고 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); 

참고: 새 색상 세트를 추가하려면 먼저 차트 색상 목록 기본값을 지워야 합니다.

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);  

참고: 글꼴 옵션 사용

공개 테마의 boldFont, regularFont 또는 mediumFont 설정을 정의할 때 정확한 글꼴 패밀리 이름을 전달해야 합니다. 가중치는 이름이 아니라 글꼴 자체의 정의에 의해 정의됩니다. $.ig.RevealTheme 글꼴 설정에 지정된 글꼴 이름을 사용할 수 있는지 확인하려면 @font-face(CSS 속성)를 사용해야 할 수 있습니다.

이제 테마 변경 사항을 구현한 후 대시보드 및 시각화 편집기 모두에 새로운 결과가 표시됩니다.

위의 코드 스니펫에서 변경 사항을 적용한 후의 대시보드 편집기.

위의 코드 스니펫에서 변경 사항을 적용한 후의 Visualization Editor.

테마 속성을 변경하는 코드 스니펫

테마 변경 문서는 다음 위치에 있습니다.

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

다음은 $.ig.RevealTheme에서 설정할 수 있는 속성입니다.

• 차트색상
• 일반글꼴
• 중간글꼴
• 볼드체
• 글꼴 색상
• 대시보드배경색상
• 시각화배경색상
• 악센트색상
• 둥근 모서리 사용
• conditionalFormatting.lowColor
• conditionalFormatting.midColor
• conditionalFormatting.hiColor
• conditionalFormatting.noneColor

다음은 웹 SDK에서 테마를 수정하는 스니펫입니다.

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

// 표준 색상/글꼴 설정
공개Theme.accentColor = "rgb(15,96,69)";
공개Theme.regularFont = "의로운";
공개Theme.mediumFont = "주의사항";
공개Theme.boldFont = "도미네";
공개Theme.fontColor = "rgb(226,24,125)";
공개Theme.dashboardBackgroundColor = "rgb(24,224,37)";
공개Theme.visualizationBackgroundColor = "rgb(221,224,37)";

// 조건 서식 설정
공개Theme.conditionalFormatting.hiColor = "rgb(87,0,127)";
공개Theme.conditionalFormatting.lowColor = "rgb(158,0,232)";
공개Theme.conditionalFormatting.midColor = "rgb(198,137,229)";
공개Theme.conditionalFormatting.noneColor = "rgb(255,255,127)";

// 차트 색상 설정
공개Theme.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)"];

// 정사각형 또는 둥근 모양 설정
공개Theme.useRoundedCorners = 거짓;

// 대시보드 업데이트
$.ig.RevealView.updateRevealTheme(revealTheme);

Theme 속성을 설정한 후 RevealView에서 updateReveal 메서드를 호출합니다.

$.ig.RevealView.updateRevealTheme(revealTheme);

글꼴 사용자 지정을 위해 페이지의 css에 다음 줄을 추가해야 합니다.

<link href=”https://fonts.googleapis.com/css?family=Righteous” rel=”스타일시트”>
<링크 href=”https://fonts.googleapis.com/css?family=Domine” rel=”스타일시트”>
<링크 href=”https://fonts.googleapis.com/css?family=Caveat” rel=”스타일시트”>

이러한 속성 설정을 사용하면 필요한 브랜드 고객 경험에 맞게 Reveal 내장 분석을 사용자 정의할 수 있습니다!

추가적으로 원하시는 스타일링 포인트가 있다면 말씀 해주세요!