LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@PowerBIxyz(Takeshi Kagata)

Power BI workout - レポートの Base theme

Last updated at Posted at 2022-04-06

デフォルトのレポートテーマ CY22SU03.json をハック。最終的には カスタム レポート テーマを理解する。

pbix ファイルの構成

  • *.pbix
    • Report
      • StaticResources
        • RegisteredResources
          • *.json (インポートされたカスタム テーマ ファイル)
          • イメージファイル(Canvas background: キャンバスの背景)
          • イメージファイル(Wallpaper: キャンバス背後の背景)
        • SharedResources
          • BaseThemes
            • CY**SU**.json (デフォルトのテーマ ファイル) 👈👈
      • Layout (レポート本体)
    • [Content_Types].xml
    • DataModel (データ本体)
    • DiagramLayout
    • Metadata
    • SecurityBindings
    • Settings
    • Version

CY**SU**.json
レポートに配置したビジュアルやフィルター ペイン などの既定値が一式含まれている。カスタム テーマ ファイル を考えるときや確かめるときにも役に立つので整理しておく。Power BI で利用するビジュアルや機能などが増えたときなどで更新されるが Power BI Desktop の更新に含まれるので何もする必要はない。2022-03 時点で "CY22SU03.json"

Base theme (CY22SU03.json) をハック

PropertyName PropertyValue
name CY22SU03
dataColors array
foreground #252423
foregroundNeutralSecondary #605E5C
foregroundNeutralTertiary #B3B0AD
background #FFFFFF
backgroundLight #F3F2F1
backgroundNeutral #C8C6C4
tableAccent #118DFF
good #1AAB40
neutral #D9B300
bad #D64554
maximum #118DFF
center #D9B300
minimum #DEEFFF
null #FF7F48
hyperlink #0078d4
visitedHyperlink #0078d4
textClasses object
visualStyles object

name

レポート テーマ ファイルで唯一の必須プロパティ

PropertyName PropertyValue
name CY22SU03

dataColors

PropertyName PropertyValue
dataColors array
dataColors
#118DFF
#12239E
#E66C37
#6B007B
#E044A7
#744EC2
#D9B300
#D64550
#197278
#1AAB40
#15C6F4
#4092FF
#FFA058
#BE5DC9
#F472D0
#B5A1FF
#C4A200
#FF8080
#00DBBC
#5BD667
#0091D5
#4668C5
#FF6300
#99008A
#EC008C
#533285
#99700A
#FF4141
#1F9A85
#25891C
#0057A2
#002050
#C94F0F
#450F54
#B60064
#34124F
#6A5A29
#1AAB40
#BA141A
#0C3D37
#0B511F

定義のうち先頭 8 色がパレットに反映。

image.png
image.png

Color class

PropertyName PropertyValue
foreground #252423
foregroundNeutralSecondary #605E5C
foregroundNeutralTertiary #B3B0AD
background #FFFFFF
backgroundLight #F3F2F1
backgroundNeutral #C8C6C4
tableAccent #118DFF

image.png

tableAccent

PropertyName PropertyValue
tableAccent #118DFF

image.png

good / neutral / bad

PropertyName PropertyValue
good #1AAB40
neutral #D9B300
bad #D64554

image.png

maximum / center / minimum / null

PropertyName PropertyValue
maximum #118DFF
center #D9B300
minimum #DEEFFF
null #FF7F48

image.png

Text class

{
  "textClasses": {
    "<ClassName>": {
      "<propertyName>": <propertyValue>,
      ...
    },
    ...
  }
}

Primary classes

ClassName propertyName-propertyValue
callout "fontSize": 45
"fontFace": "DIN"
"color": "#252423"
title "fontSize": 12
"fontFace": "DIN"
"color": "#252423"
header "fontSize": 12
"fontFace": "Segoe UI Semibold"
"color": "#252423"
label "fontSize": 12
"fontFace": "Segoe UI"
"color": "#252423"

Secondary classes

Base theme では未定義。Secondary class は Primary class を継承

  • (Primary class) title
    • largeTitle
  • (Primary class) label
    • semiboldLabel
    • largeLabel
    • smallLabel
    • lightLabel
    • boldLabel
    • largeLightLabel
    • smallLightLabel

Text class で影響するビジュアルの要素は次のリンク先で。

visualStyles

    "visualStyles": {
        "<visualName>": {
            "<styleName>": {
                "<cardName>": [{
                    "<propertyName>": <propertyValue>
                }]
            }
        }
    }
VisualName StyleName CardName-propertyName-propertyValue
* * object
scatterChart * object
lineChart * object
map * object
pieChart * object
donutChart * object
pivotTable * object
multiRowCard * object
kpi * object
slicer * object
waterfallChart * object
columnChart * object
clusteredColumnChart * object
hundredPercentStackedColumnChart * object
barChart * object
clusteredBarChart * object
hundredPercentStackedBarChart * object
areaChart * object
stackedAreaChart * object
lineClusteredColumnComboChart * object
lineStackedColumnComboChart * object
ribbonChart * object
group * object
basicShape * object
shape * object
image * object
actionButton * object
pageNavigator * object
bookmarkNavigator * object
textbox * object
page * object

すべての ビジュアル が Base theme (CY22SU03.json) に網羅されているわけではない。
たとえば、tableEx(テーブル ビジュアル) は Base theme (CY22SU03.json) に定義されていない。継承された定義で充分であるか、個別の要素で定義されていて ビジュアル ごとの定義が必要ない感じ。

  • tableEx
  • funnel
  • treemap
  • filledMap
  • decompositionTreeVisual
  • keyDriversVisual
  • qnaVisual
  • azureMap
  • rdlVisual

*(any VisualName) - *(any StyleName)

VisualName StyleName CardName-propertyName-propertyValue
* * object
CardName propertyName: propertyValue
* "wordWrap": true
line "transparency": 0
outline "transparency": 0
plotArea "transparency": 0
categoryAxis "showAxisTitle": true
"gridlineStyle": "dotted"
valueAxis "showAxisTitle": true
"gridlineStyle": "dotted"
title "titleWrap": true
lineStyles "strokeWidth": 3
wordWrap "show": true
background "show": true
"transparency": 0
outspacePane "backgroundColor": { "solid": { "color": "#ffffff" } }
"foregroundColor": { "solid": { "color": "#252423" } }
"transparency": 0
"border": true
"borderColor": { "solid": { "color": "#B3B0AD" } }
filterCard "$id": "Applied"
"transparency": 0
"foregroundColor": { "solid": { "color": "#252423" } }
"border": true
"$id": "Available"
"transparency": 0
"foregroundColor": { "solid": { "color": "#252423" } }
"border": true
outspacePane

フィルタ ペイン(filterCard の外側)
image.png

filterCard

フィルタ ペイン に配置されている filterCard
フィルタ適用可能(Available) / フィルタ適用済み(Applied) それぞれ
image.png

scatterChart - *(any StyleName)

CardName propertyName: propertyValue
bubbles "bubbleSize": -10
general "responsive": true
fillPoint "show": true
legend "showGradientLegend": true

lineChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

map - *(any StyleName)

CardName propertyName: propertyValue
bubbles "bubbleSize": -10

pieChart - *(any StyleName)

CardName propertyName: propertyValue
legend "show": true
"position": "RightCenter"
labels "labelStyle": "Data value, percent of total"

donutChart - *(any StyleName)

CardName propertyName: propertyValue
legend "show": true
"position": "RightCenter"
labels "labelStyle": "Data value, percent of total"

pivotTable - *(any StyleName)

CardName propertyName: propertyValue
* "showExpandCollapseButtons": true

multiRowCard - *(any StyleName)

CardName propertyName: propertyValue
card "outlineWeight": 2
"barShow": true
"barWeight": 2

kpi - *(any StyleName)

CardName propertyName: propertyValue
trendline "transparency": 20

slicer - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
date "hideDatePickerButton": false
items "fontColor": { "solid": { "color": "#252423" } }
"padding": 4
"accessibilityContrastProperties": true }

waterfallChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true

columnChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
legend "showGradientLegend": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

clusteredColumnChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
legend "showGradientLegend": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

hundredPercentStackedColumnChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
legend "showGradientLegend": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

barChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
legend "showGradientLegend": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

clusteredBarChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
legend "showGradientLegend": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

hundredPercentStackedBarChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
legend "showGradientLegend": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

areaChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

stackedAreaChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

lineClusteredColumnComboChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

lineStackedColumnComboChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true
smallMultiplesLayout "backgroundTransparency": 0
"gridLineType": "inner"

ribbonChart - *(any StyleName)

CardName propertyName: propertyValue
general "responsive": true

group - *(any StyleName)

CardName propertyName: propertyValue
background "show": false

basicShape - *(any StyleName)

CardName propertyName: propertyValue
background "show": false
general "keepLayerOrder": true
visualHeader "show": false

shape - *(any StyleName)

CardName propertyName: propertyValue
background "show": false
general "keepLayerOrder": true
visualHeader "show": false

image - *(any StyleName)

CardName propertyName: propertyValue
background "show": false
general "keepLayerOrder": true
visualHeader "show": false
lockAspect "show": true

actionButton - *(any StyleName)

CardName propertyName: propertyValue
background "show": false
visualHeader "show": false

pageNavigator - *(any StyleName)

CardName propertyName: propertyValue
background "show": false
visualHeader "show": false

bookmarkNavigator - *(any StyleName)

CardName propertyName: propertyValue
background "show": false
visualHeader "show": false

textbox - *(any StyleName)

CardName propertyName: propertyValue
general "keepLayerOrder": true
visualHeader "show": false

page - *(any StyleName)

CardName propertyName: propertyValue
outspace "color": { "solid": { "color": "#FFFFFF" } }
background "transparency": 100

その他

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?