Udvalgt arbejde — 02 / Egne visualiseringer
Diagrammer, jeg måtte skrive selv.
Power BI kommer med et fast sæt diagrammer. Da det, jeg havde brug for, ikke var iblandt dem, skrev jeg det selv — seks indtil videre: et body-map-heatmap, et søjlediagram, en måler, en stablet ændringssøjle og KPI-kort, alle håndskrevet i TypeScript. Bygget om herunder, live, så du kan lege med dem.
Alle tal i disse widgets er eksempeldata — opdigtet for at vise, hvordan hver visualisering opfører sig, ikke rigtige tal.
LIVEsamme heatmap som længere nede — varmere betyder flere skader.
Kort fortalt
En custom-visualisering er et lille program, Power BI kører inde i rapporten: den rækker din kode dataene og størrelsen på boksen, og din kode tegner pixlerne.
Det er kode, ikke en skabelon
En TypeScript-klasse, der implementerer ét interface. Ingen træk-og-slip — hver pixel er tegnet med vilje.
01 · IVisual · TypeScriptPower BI rækker den data
Du erklærer de felter, du accepterer; værten former dataene, så de passer, og sender dem ind ved hver ændring.
02 · capabilities · dataViewDu tegner pixlerne
Ud fra dataene og viewporten lægger koden SVG ud — søjler, stier, etiketter, et helt statistikpanel.
03 · SVG · dit layoutDet leveres som én fil
Pakket i én enkelt .pbiviz — kode, styles og ikon zippet sammen — og importeret i en hvilken som helst rapport.
Sådan virker det
Power BI taler. Din kode tegner.
Hele dens liv er ét loop: bygget én gang, så affyres update() ved hver ændring af data, størrelse eller indstilling — læs, gentegn. Kør loopet
constructor
Værten bygger visualiseringen og rækker DOM-elementet videre. Du sætter dit <svg> op.
data / størrelse / indstilling ændres
Nogen filtrerer, ændrer størrelse eller justerer en formatkontrol.
update(options)
Værten kalder dit update() med friske options.
options.dataViews[0]
Du trækker de omformede data og de aktuelle indstillinger ud.
render() → SVG
Ryd lærredet, læg billedet ud i den nye størrelse.
Visualisering ét — skades-body-mappet
Skader, kortlagt på en krop.
To felter ind — en kropsregion og et skadesantal — og hver region farves på en femtrins-skala, mens panelet samler dem i grupper og fremhæver de værste. Klik på en region, eller træk i sagsmængden
Skader efter kropsgruppe
Bånd: 1–5 · 6–15 · 16–40 · 41+ — alle sammen format-pane-farver. Dette er prototypen; dens leverede tvilling bodyInjuryHeatmap bytter de fem bånd ud med en glidende min→max-gradient, kender venstre fra højre og kobler Power BI-selektion, krydsfremhævning og tooltips på.
Dataene bag det
To felter ind. Et billede ud.
Den erklærer, hvad den accepterer — én gruppering, ét mål — og Power BI omformer rapporten til den kategoriske dataView, den modtager. Slå rækker til og fra — hold øje med dataView
dataViewhvad update() modtager — categorical
Visualisering to — søjlevisualiseringen
Et søjlediagram, der gør det, det indbyggede ikke vil.
Til de detaljer, det indbyggede søjlediagram springer over — en rigtig totalsum-header, egne fonte, justering og en kant, du kan forme. Hver især er en kontrol i format-panelet. Skift i panelet — diagrammet følger med
Hvor panelet kommer fra
Erklær en kontrol. Power BI tegner panelet.
Du bygger aldrig panelet i hånden — du erklærer hver egenskabs type, og værten renderer kontrollen. Vælg en type
A boolean becomes a switch in the pane, and arrives in your settings model as true / false.
Visualisering tre — halvcirkelmåleren
På mål, med ét blik.
Én værdi fylder mod et maks, forbi to mål, ind i en af tre zoner — bagud, på sporet, foran — og buen tager zonens farve. Træk i værdien
Mål ved 40 og 75 · min/maks, zoner og markører er alle format-panel-kontroller.
Også på hylden
Samme instinkt, et par gange til.
To mere, der gør sig fortjent — en stablet søjle, der annoterer sin ændring mellem perioder, og en stribe KPI-kort. Begge live. Prik til dem
Stablet søjle + ændring
v3.5.8 · signaturforklaring · drilldown · ændringsdeltaerMultiCard
v1.3.2 · KPI-kort · række eller kolonneIteration
Én god version er i virkeligheden seks.
Hver udgivelse tilføjede præcis én ting, en rapport bad om — og den gamle pakke blev aldrig overskrevet, kun afløst. Gå gennem versionerne
Set the Values role to accept a measure or a grouping, so a report author can pick “Don't summarize” and show raw category values instead of a forced sum.
I tal
Familien, talt op.
Begge tegnet i rå SVG på powerbi-visuals-API'et — ingen D3-diagramhjælpere, ingen tredjeparts-charting. Hver farve, font og kant er en format-panel-kontrol.