Mohsen Zarei
Tilbage til arbejde

Udvalgt arbejde · 02 / Egne visualiseringer

Diagrammer, vi måtte bygge.

Power BI kommer med et fast sæt diagrammer. Vores var ikke iblandt, så jeg byggede nogle selv og stod for den tekniske retning på resten: seks egne visualiseringer indtil videre, et body-map-heatmap, et søjlediagram, en måler, en stablet ændringssøjle og KPI-kort, alt i TypeScript. Bygget om herunder, live.

Min rolle: hands-on udvikling af udvalgte visualiseringer; teknisk retning og sparring med teamet på de øvrige.

6egne visualiseringer
12kropsregioner
TypeScript + SVG0 diagrambibliotekermåler · søjler · stakke · kort

Om eksempeldata. Alle tal, datoer, skadesantal, procenter, tendenser og sammenligninger på siden er opdigtede eksempeldata, lavet udelukkende for at vise visualiseringerne. De afspejler ikke rigtige personer, hændelser, organisationer eller forretningsresultater.

Sådan virker det

Power BI taler. Din kode tegner.

Bygget én gang. Så affyres update() ved hver ændring af data, størrelse eller indstilling. Kør loopet

ÉN GANG

constructor

Værten bygger visualiseringen og rækker DOM-elementet videre. Du sætter dit <svg> op.

UDLØSER

data / størrelse / indstilling ændres

Nogen filtrerer, ændrer størrelse eller justerer en formatkontrol.

HVER GANG

update(options)

Værten kalder dit update() med friske options.

LÆS

options.dataViews[0]

Du trækker de omformede data og de aktuelle indstillinger ud.

TEGN

render() → SVG

Ryd lærredet, gentegn i den nye størrelse.

idle
Datakontrakt

bodyRegion-gruppering + injuryCount-måling kategorisk dataView specialtegnet SVG.

categories[] + values[]

Visualisering ét · skades-body-mappetEksempeldata

Skader, kortlagt på en krop.

To felter ind: en kropsregion og et skadesantal. Hver region farves på en femtrins-skala; panelet samler dem i grupper og fremhæver de værste. Klik på en region for at fokusere på den

Periode
I alt42 skader

Skader efter kropsgruppe

0
1–5
6–15
16–40
41+
Farve = antal skader

Bånd: 1–5 · 6–15 · 16–40 · 41+, alle format-pane-farver. Dette er prototypen. Dens leverede tvilling bodyInjuryHeatmap bytter båndene ud med en glidende min→max-gradient, kender venstre fra højre og kobler Power BI-selektion, krydsfremhævning og tooltips på.

Visualisering to · søjlevisualiseringenEksempeldata

Et søjlediagram, der gør det, det indbyggede ikke vil.

De detaljer, det indbyggede søjlediagram springer over, hver især en kontrol i format-panelet. Skift i panelet. Diagrammet følger med

Format · Søjlevisualisering
Totalsum-header
Vis
Præfiks
Justering
Header-kant
Stil
Tykkelse1.5
Radius6
Farve
Fonte & farve
Etiketstørrelse12
Værdistørrelse13
Søjler

Visualisering tre · halvcirkelmålerenEksempeldata

På mål, med ét blik.

Én værdi, tre tilstande. Bue, tal og status opdateres sammen. Træk i værdien

81% På sporet

Faktisk værdi81%
min 0maks 100
Under mål0 – 59
I risiko60 – 79
På sporet80 – 100

Min/maks, zoner og markører er alle format-panel-kontroller.Eksempeldata

Iteration

Én god version er i virkeligheden seks.

Hver udgivelse tilføjede én ting, en rapport bad om. Den gamle pakke blev aldrig overskrevet, kun afløst. Gå gennem versionerne

1.6.0Data

Values-rollen tager både et mål (measure) og en gruppering, så “Opsummer ikke” giver de rå kategoriværdier i stedet for en tvungen sum.