デフォルトのレポートテーマ 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 色がパレットに反映。

Color class

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

tableAccent

PropertyName	PropertyValue
tableAccent	`#118DFF`

good / neutral / bad

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

maximum / center / minimum / null

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

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 の外側)

filterCard

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

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

その他