블로그로 돌아가기
ChatGPT
Perplexity
Reveal은 이제 애플리케이션 사용자를 위해 기본적으로 Mountain 및 Ocean이라는 두 가지 테마를 제공하며, 이 테마는 밝은 모드와 어두운 모드 모두에서 아름답게 보입니다. 애플리케이션의 테마와 일치하는 시각화를 임베디드하려는 경우 문제가 되지 않습니다! Reveal SDK를 통해 이제 고유한 맞춤형 테마를 만들고 대시보드의 모든 측면을 제어할 수 있습니다.
Reveal의 새로운 대시보드 테마
새로운 Mountain 및 Ocean 테마를 통해 최상의 사용자 경험을 제공하기 위해 아름답게 보이고, 밝은 모드와 어두운 모드 모두에서 작동하며, 현대적인 디자인을 갖춘 색상 팔레트를 개발했습니다. 
Reveal의 Ocean 테마
색상 팔레트
Reveal 애플리케이션 내의 각 테마에는 팔레트에 10가지 색상이 있습니다. 시각화를 편집하거나 만들 때 팔레트에서 선택하여 시작 색상을 쉽게 변경할 수 있습니다.
분석을 임베디드할 때 맞춤형 테마 지정
기존 애플리케이션에 분석을 임베디드할 때는 해당 대시보드가 귀사의 앱 디자인과 일치하는 것이 중요합니다. 그렇기 때문에 SDK를 통해 Reveal 대시보드를 완벽하게 제어할 수 있습니다. 애플리케이션과 비교하여 맞춤형 테마를 통해 달성할 수 있는 주요 사용자 지정은 다음과 같습니다.
- 색상 팔레트: 시각화에서 시리즈를 표시하는 데 사용되는 색상입니다. 원하는 만큼 많은 색상을 추가할 수 있습니다. 시각화에서 모든 색상이 사용되면 Reveal은 이러한 색상의 새로운 음영을 자동으로 생성합니다. 이렇게 하면 색상이 반복되지 않고 각 값에 고유한 색상이 지정됩니다.
- 강조 색상: Reveal의 기본 강조 색상은 + 대시보드 버튼 및 기타 대화형 작업에서 찾을 수 있는 파란색 음영입니다. 애플리케이션에서 사용하는 것과 동일한 강조 색상으로 변경할 수 있습니다.
- 조건부 서식 색상: 조건부 서식을 사용할 때 설정할 수 있는 경계의 기본 색상을 변경합니다.
- 글꼴: Reveal은 애플리케이션에서 세 가지 유형의 텍스트(일반, 중간, 굵게)를 사용합니다. 각 텍스트 그룹에 사용할 글꼴을 지정할 수 있습니다.
- 시각화 및 대시보드 배경색: 대시보드 배경색과 시각화 배경색을 별도로 구성할 수 있습니다.
맞춤형 테마를 어떻게 만드나요?
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에서 테마를 업데이트하는 방법을 설명합니다.
먼저 변경하기 전에 스크린샷이 어떻게 보이는지 보여주는 예제를 살펴보겠습니다.
이제 이 코드 조각을 사용하여 사용자 지정 테마를 정의하십시오.
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);참고: 글꼴 옵션 사용
reveal 테마의 boldFont, regularFont 또는 mediumFont 설정을 정의할 때 정확한 글꼴 패밀리 이름을 전달해야 합니다. 글꼴 자체의 정의에 따라 글꼴 스타일이 정의되며 이름에 정의되지 않습니다. 따라서 "$.ig.RevealTheme"의 $.ig.RevealTheme 글꼴 설정에 지정된 글꼴 패밀리 이름이 사용 가능하도록 @font-face(CSS 속성)를 사용해야 할 수 있습니다.
이제 테마 변경 사항을 구현한 후 대시보드 및 시각화 편집기에서 새로운 결과를 확인할 수 있습니다.
위의 코드 조각에서 변경 사항을 적용한 후의 대시보드 편집기입니다..
위의 코드 조각에서 변경 사항을 적용한 후의 시각화 편집기입니다.
테마 속성을 변경하기 위한 코드 스니펫
테마 변경에 대한 설명서는 여기에 있습니다.
https://www.revealbi.io/help/developer/rvui.wpf~infragistics.sdk.revealtheme_properties
다음은 $.ig.RevealTheme에서 설정할 수 있는 속성입니다.
- chartColors
- regularFont
- mediumFont
- boldFont
- fontColor
- dashboardBackgroundColor
- visualizationBackgroundColor
- accentColor
- useRoundedCorners
- conditionalFormatting.lowColor
- conditionalFormatting.midColor
- conditionalFormatting.hiColor
- conditionalFormatting.noneColor
다음은 웹 SDK에서 테마를 수정하는 코드 조각입니다.
var revealTheme = new $.ig.RevealTheme();
// 표준 색상/글꼴 설정 revealTheme.accentColor = “rgb(15,96,69)”; revealTheme.regularFont = “Righteous”; revealTheme.mediumFont = “Caveat”; revealTheme.boldFont = “Domine”; revealTheme.fontColor = “rgb(226,24,125)”; revealTheme.dashboardBackgroundColor = “rgb(24,224,37)”; revealTheme.visualizationBackgroundColor = “rgb(221,224,37)”;
// 조건부 서식 설정 revealTheme.conditionalFormatting.hiColor = “rgb(87,0,127)”; revealTheme.conditionalFormatting.lowColor = “rgb(158,0,232)”; revealTheme.conditionalFormatting.midColor = “rgb(198,137,229)”; revealTheme.conditionalFormatting.noneColor = “rgb(255,255,127)”;
// 차트 색상 설정 revealTheme.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)”];
// 사각형 또는 둥근 모양 설정 revealTheme.useRoundedCorners = false;
// 대시보드 업데이트 $.ig.RevealView.updateRevealTheme(revealTheme);
테마 속성을 설정한 후에는 updateReveal 메서드를 RevealView.
$.ig.RevealView.updateRevealTheme(revealTheme);
에 호출합니다. 글꼴 사용자 지정을 위해 페이지의 CSS에 다음 줄을 추가해야 합니다.
이러한 속성 설정을 통해 고객이 원하는 브랜드 경험에 맞게 Reveal 임베디드 분석 사용자 지정할 수 있습니다!
추가 스타일링이 필요한 경우 알려주십시오. 알려주세요.!
데이터의 힘을 활용하십시오.
실시간 컨텍스트 데이터를 통해 비즈니스를 성장시키십시오.
