Hallintanäkymän kaaviot ilman yhtäkään riippuvuutta
Rakensimme hallintanäkymän trendiviivat, pikkukäyrät ja kategoriapalkit tavallisena inline-SVG:nä. Ei kaaviokirjastoa, muutama sata riviä yhteensä, tumma tila kaupan päälle. Tässä perustelut käsin tehdyille kaavioille ja sille, milloin näin ei pidä missään nimessä tehdä.
Kun lisäsimme varastonäkymän, ilmeinen liike olisi ollut asentaa kaaviokirjasto. Suositut kirjastot ovat erinomaisia. Ne ovat myös isoja, mielipiteellisiä teemoituksen suhteen ja rakennettu käsittelemään tuhat tapausta, kun me tarvitsimme neljä: kahden sarjan trendiviivan, rivikohtaisen pikkukäyrän, varastosaldon palkin ja kategoriajakauman. Kirjoitimme ne sen sijaan inline-SVG:nä, ja koko setti jäi pienemmäksi kuin useimpien kirjastojen tyyppimäärittelyt.
Kaavio on yksi polku
Kun työkalut riisutaan pois, viivakaavio on yksi merkkijono: arvoistasi rakennettu SVG-polku. Kuvaa jokaisen pisteen indeksi x-akselille, jokainen arvo y-akselille ja yhdistä ne. Ainoa hienous jonka kannattaa kirjoittaa muistiin on marginaali: kuvaa suurin arvo muutama pikseli yläreunan alapuolelle, tai viivan paksuus huipulla leikkautuu viewBoxin puolesta poikki.
const W = 300, H = 80, PAD = 3; // top pad so the peak stroke is not clippedconst max = Math.max(1, ...values);const x = (i) => (i / (values.length - 1)) * W;const y = (v) => PAD + (H - PAD) * (1 - v / max); const d = values .map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)} ${y(v).toFixed(1)}`) .join(' '); // <path d={d} fill="none" stroke="var(--color-primary)" strokeWidth="2" />Tumma tila ei maksa mitään
Hiljainen voitto on teemoitus. Designtokenimme ovat CSS-muuttujia, ja SVG:n viivat ja täytöt hyväksyvät ne kuten minkä tahansa muun ominaisuuden. stroke="var(--color-primary)" tarkoittaa, että kaavio värittää itsensä uudelleen sillä sekunnilla kun teema vaihtuu, ilman kaaviokohtaista teema-asetusta, ilman kahdennettua paletttia ja ilman että kaaviot ja muu käyttöliittymä ajautuvat erilleen. Kun myöhemmin säädimme tummaa palettiamme, kaaviot seurasivat perässä ilman että niihin koskettiin.
Sinä omistat reunatapaukset
Kirjastot ovat anteliaita ominaisuuksien kanssa ja kitsaita niiden reunatapausten kanssa, jotka ovat vain sinun. Mitä pikkukäyrän pitäisi tehdä yhdellä datapisteellä? Mitä trendikaavio kertoo, kun yritys on aivan uusi ja jokainen arvo on nolla? Käsin tehdyt komponentit tekevät näistä päätöksistä selviä ja halpoja: rehellinen tyhjä tila yhdellä lauseella, tasainen viiva kaatumisen sijaan, tekstitiivistelmä jokaisen kaavion vierellä ruudunlukijoita varten ja yksi prefers-reduced-motion -mediakysely, joka sammuttaa piirtymisanimaation.
- Anna jokaiselle kaaviolle aria-label ja selkokielinen tiivistelmä. SVG on koristetta, lause on data.
- Animoi viivat stroke-dashoffsetilla piirtymisefektiä varten, ja laita se prefers-reduced-motionin taakse.
- Pidä matematiikka ja merkkaus yhdessä. Kaaviokomponentti, jonka luet ylhäältä alas yhdeltä ruudulta, on kaavio jonka osaat korjata kello 23.
- Suunnittele tyhjä tila ensin. Uudet tilit näkevät sen useammin kuin minkään muun tilan.
Milloin kirjastoa kannattaa käyttää
Käsin tekeminen lakkaa olemasta fiksua sillä hetkellä, kun vaatimuksiin kasvaa oikeat hampaat. Zoomaus ja rajaus, logaritmiset skaalat, pinotut alueet kunnollisella interpoloinnilla, akselit fiksusti sijoitetuin väliviivoin, canvas-piirto kymmenille tuhansille pisteille: nämä ovat ratkaistuja ongelmia, ja niiden ratkaiseminen uudelleen käsin on se tapa, jolla kahden päivän ominaisuudesta tulee kahden kuukauden harrastus. Sääntömme on yksinkertainen. Jos kaavio on esitystä, kirjoita SVG. Jos kaavio on soitin, jota käyttäjä soittaa, ota riippuvuus ja ole iloinen että joku ylläpitää sitä.
Paras kaaviokirjasto neljälle pienelle kaaviolle osoittautui for-silmukaksi.
