Toteutusohjeita

Yleistä

Kela Design System ei toistaiseksi tarjoa valmiita komponentteja tiedon visualisointien toteutukseen. Tälle sivulle on koottu vinkkejä ja suosituksia, jotka tukevat visualisointien kehittämistä.

Kirjastoja visualisointien toteutukseen

Yleiset

Nämä kirjastot eivät ole sidottuja tiettyyn sovelluskehykseen. Toteutuksessa on suositeltavaa eriyttää visualisoinnin piirtäminen sovelluskehyskohtaisesta logiikasta.

• D3.js(Avautuu uuteen välilehteen): Monipuolinen ja erittäin räätälöitävä datalähtöinen kirjasto graafien ja muiden visualisointien toteutukseen.
• Apache Echarts(Avautuu uuteen välilehteen): Monipuolinen visualisointikirjasto, joka sisältää useita valmiita kuviotyyppejä.
• Chart.js(Avautuu uuteen välilehteen): Kevyt ja helppokäyttöinen kirjasto yleisimpien graafityyppien toteutukseen.

React

• Recharts(Avautuu uuteen välilehteen): Komponenttipohjainen React-kirjasto, joka hyödyntää D3.js:n toiminnallisuuksia graafien toteutuksessa.

Design-muuttujat

Kela Design System tarjoaa valmiiksi määritellyt design-muuttujat visualisointien toteutukseen. Muuttujat ovat saatavilla useissa formaateissa (JS, JSON, CSS-muuttujat, SCSS), ja ne kattavat värit, graafien viivat sekä typografian. Muuttujat on määritelty Kela- ja Kanta-teemoille sekä vaalealle ja tummalle tilalle.

Design-muuttujien avulla esimerkiksi vaalean ja tumman tilan tuki graafeissa yksinkertaistuu, ja arvot päivittyvät automaattisesti versiopäivitysten myötä.

Tiedon visualisoinnin design-muuttujat