Velg diagram etter spørsmålet, ikke etter datastrukturen
| Spørsmål | Diagram |
|---|---|
| Hvordan utvikler én verdi seg over tid/kategori? | <lm-chart-line> |
| Hvordan utvikler flere verdier seg samtidig, og hva er summen deres? | <lm-chart-area> |
| Hvordan sammenlignes kategorier presist mot hverandre? | <lm-chart-bar> |
| Hvordan er andelene av en helhet fordelt? | <lm-chart-pie> (legg til hull for donut-variant, f.eks. med et nøkkeltall i midten) |
| Henger to numeriske variabler sammen (korrelasjon)? | <lm-chart-scatter> |
| Skal brukeren kunne sortere/lese eksakte enkeltrader? | <lm-data-table> - gjerne ved siden av et diagram, ikke i stedet for det |
Store datasett: aggreger før du tegner
Alle diagramkomponentene tegner ett DOM-element (linje-/stolpe-/punktsegment) per datapunkt - de er ikke bygget for å visualisere titusenvis av rapunkter direkte. Før et stort rådatasett når et diagram:
- Grupper langs tid (dag → uke/måned) med vanlig JS-reduksjon, og send kun de
aggregerte punktene til
<lm-chart-line>/<lm-chart-area>. - Bruk sentraltendensfunksjonene (
beregnGjennomsnitt/beregnMedian) til å komprimere mange enkeltmålinger til ett representativt punkt per kategori, se forrige guide. - Sample eller aggreger
<lm-chart-scatter>-punkter (f.eks. gruppér i bøtter/bins) hvis datasettet har mange tusen observasjoner - se komponentens egen «egner seg ikke for»-seksjon. <lm-data-table>derimot tåler langt flere rader uendret, siden den bare tegner tekst - men vurder fortsatt paginering/filtrering i eget forbrukerkode ved svært store lister, siden komponenten selv ikke pagineres.
Responsive dashboards: container queries, ikke faste bredder
Et dashbord som kombinerer flere <lm-stat>, diagrammer og
<lm-data-table>-instanser skal aldri anta hvor bredt hvert enkelt kort ender opp -
layouten varierer med skjermbredde, antall kolonner i grid-et, og om et kort er halv eller full bredde.
Bruk CSS Grid til selve dashbord-oppsettet (se rot-styles.css sine instruksjoner om Grid
fremfor Flexbox), og la hver komponent tilpasse seg sin egen tildelte plass:
- Alle diagramkomponentene skalerer med sin egen
inline-size- de har ingen fast, iboende pikselbredde. <lm-data-table>setter selvcontainer-type: inline-sizeog stabler radene automatisk som etikett/verdi-par når kortet blir smalt (f.eks. i en smal sidepanel-plassering) - ingen ekstra oppsett trengs fra dashbordet.- Unngå
@media-brytepunkter for denne typen tilpasning - de kjenner kun til hele viewporten, ikke det faktiske kortet komponenten står i. Se «Container queries» i designsystem.instructions.md.