Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Stránka s grafom
Vzory

Stránka s grafom

Grafové zobrazenie údajov pomáha používateľom lepšie pochopiť prezentované údaje. Vždy poskytnite prezentované údaje tak, aby boli prístupné aj používateľom so zrakovým znevýhodnením.

Grafový vzor použite, keď chcete používateľom zobrazovať nejaký jav v závislosti na ďalšej premennej - napríklad vývoj javu v čase (napr. vývoj počtu nakazených COVID-19 na Slovensku)

Prezentácia údajov prostredníctvom grafu zobrazuje jav v súvislostiach a dotvára komplexnejší obraz o danej skutočnosti, než jednotlivé údaje izolovane.

Z čoho sa skladá graf?

Graf sa skladá z:

  1. nadpisu,
  2. prepínačov pre výber zobrazenia javu v grafe,
  3. priestoru pre popis,
  4. tlačidiel zobrazenia údajov z rôznych pohľadov, zobrazenia údajov prostredníctvom tabuľky, podrobného popisu metodiky,
  5. grafového okna s interaktívnym grafom repsektíve tabuľkového zobrazenia údajov,
  6. vysvetliviek,
  7. linku pre stiahnutie zdrojových údajov,
  8. linku pre zdieľanie grafu (voliteľné),
  9. označenia zdroja údajov.

Pozitívne testovaní

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.

Contents

Lorem ipsum ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.

Loipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.

Loipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.



<div data-module="idsk-graph" class="idsk-graph" id="graph1">
    <div class="govuk-grid-row idsk-graph__heading">
        <div class="idsk-graph__title">
            <h2 class="govuk-heading-m" data-lines="Kliknite na odkaz vyššie alebo ho skopírujte a vložte do prehliadača: ">Pozitívne testovaní</h2>
        </div>
        <div class="idsk-graph__controls">
            <div class="govuk-form-group">
                <div class="govuk-radios govuk-radios--inline">
                        <div class="govuk-radios__item">
                            <input class="govuk-radios__input idsk-graph__radio" name="radio-graph1" id="radio-graph1-1" type="radio" value="pcr" checked="">
                            <label class="govuk-label govuk-radios__label" for="radio-graph1-1">PCR</label>
                        </div>
                        <div class="govuk-radios__item">
                            <input class="govuk-radios__input idsk-graph__radio" name="radio-graph1" id="radio-graph1-2" type="radio" value="antigen" >
                            <label class="govuk-label govuk-radios__label" for="radio-graph1-2">Antigén</label>
                        </div>
                        <div class="govuk-radios__item">
                            <input class="govuk-radios__input idsk-graph__radio" name="radio-graph1" id="radio-graph1-3" type="radio" value="pcr-antigen" >
                            <label class="govuk-label govuk-radios__label" for="radio-graph1-3">PCR + Antigén</label>
                        </div>
                </div>
            </div>
        </div>
    </div>

    <div class="govuk-grid-row">
        <div class="govuk-grid-column-one-half">
            <div class="govuk-body-s idsk-graph__summary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.
            </div>
        </div>
    </div>

    <div class="govuk-tabs" data-activetab="0" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Contents
  </h2>
  <ul class="govuk-tabs__list">
        <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
          <a class="govuk-tabs__tab" href="#graph1-1">
            Denné prírastky
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#graph1-2">
            Celkovo
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#graph1-3">
            Údaje
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#graph1-4">
            Metodika
          </a>
        </li>
  </ul>
      <div class="govuk-tabs__panel" id="graph1-1">
        <iframe class='idsk-graph__iframe' data-src='/vzory/graph-sample' src='/vzory/graph-sample' title='Lorem Ipsun title'></iframe>
      </div>
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph1-2">
        <iframe class='idsk-graph__iframe' data-src='/vzory/graph-sample?time=sum' src='/vzory/graph-sample?time=sum' title='Lorem Ipsun 2 title'></iframe>
      </div>
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph1-3">
        <iframe class='idsk-graph__iframe' data-src='/vzory/interactive-table-sample-2' src='/vzory/interactive-table-sample-2' title='Lorem Ipsun 3 title'></iframe>
      </div>
      <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph1-4">
        <p class='govuk-body'>Lorem ipsum ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.</p><p class='govuk-body'>Loipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.</p><p class='govuk-body'>Loipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu tellus suscipit, condimentum arcu a, sollicitudin quam. Fusce tempor facilisis dui vitae iaculis. Sed ac sodales turpis.</p>
      </div>
</div>

    <div class="idsk-graph__meta">
        <div class="idsk-graph__meta-download-share">
            <div class="idsk-graph__meta-download">
                <a class="govuk-link idsk-graph__meta-link-list" title="Stiahnuť údaje" href="#">
                    Stiahnuť údaje
                    <svg width="18" height="11" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0725 1.07107L9.00146 8.14214L1.9304 1.07107" stroke="#0B0C0C" stroke-width="3"/>
                    </svg>
                </a>
                <ul class="idsk-graph__meta-list">
                    <li>
                        <a title="ako CSV" href="https://raw.githubusercontent.com/Institut-Zdravotnych-Analyz/covid19-data/main/DailyStats/OpenData_Slovakia_Covid_DailyStats.csv" class="govuk-link" download>ako CSV</a>
                    </li>
                    <li>
                        <a title="ako XLSX" href="https://github.com/Institut-Zdravotnych-Analyz/covid19-data/blob/main/DailyStats/OpenData_Slovakia_Covid_DailyStats.xlsx?raw=true" class="govuk-link" download>ako XLSX</a>
                    </li>
                </ul>
            </div>
            <div class="idsk-graph__meta-share">
                <a class="govuk-link idsk-graph__meta-link-list" title="Zdielať údaje" href="#">
                    Zdielať údaje
                    <svg width="18" height="11" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M16.0725 1.07107L9.00146 8.14214L1.9304 1.07107" stroke="#0B0C0C" stroke-width="3"/>
                    </svg>
                </a>
                <ul class="idsk-graph__meta-list">
                    <li>
                        <a title="Kopírovať link" href="/komponenty/grafovy-komponent#graph2" class="govuk-link idsk-graph__copy-to-clickboard" >Kopírovať link</a>
                    </li>
                    <li>
                        <a title="Emailom" href="#graph2" class="govuk-link idsk-graph__send-link-by-email" >Emailom</a>
                    </li>
                    <li>
                        <a title="na Facebooku" href="#graph2" class="govuk-link idsk-graph__share-on-facebook" target="_blank">na Facebooku</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="idsk-graph__meta-source">
            Zdroj: NCZI
        </div>
    </div>
</div>

Ako funguje graf?

Prepínače

Môžete použiť prepínače na prepínanie súvisiacich javov - napríklad PCR testy, antigénové testy a podobne. Ak javy spolu nesúvisia, vytvorte pre ne samostatné grafy.

Popis

Do popisu uvádzajte čo graf zobrazuje - aký jav a podľa čoho sa zobrazuje - napríklad počet nakazených COVID-19 na Slovensku podľa dátumu. Ak si to údaje vyžadujú, pridajte do popisu aj doplňujúce informácie.

Tlačidlá

Nad grafovým oknom sú textové tlačidlá.

Pohľady na údaje

Ak budete zobrazovať napríklad počet nakazených COVID-19 na Slovensku podľa dátumu je dobré ponúknuť používateľovi možnosť vidieť denné prírastky a taktiež ich kumulatívny počet, ktorý zobrazuje celkový stav.

Zobrazenie údajov v tabuľkovej forme

Ďalším tlačidlom je zobrazenie údajov prostredníctvom tabuľkového zobrazenie údajov. Namiesto grafu sa zobrazia údaje v tabuľkové forme, z ktorých je vytvorený graf. Údaje v tabuľke je možné zoraďovať.

Metodika

Po kliknutí sa zobrazí podrobná metodika - napríklad zberu údajov. Tu je priestor na popísanie ako sa údaje zbierajú, pre popis úzkych miest - kde môžu vznikať diskrepancie a oneskorenia a ako sú ošetrené a podobne.

Vysvetlivky

Po kliknutí na graf sa používateľovi zobrazia údaje v danom bode s popisom. Pod grafovým oknom sa umiestnite vysvetlivky.

Zdieľanie grafu

Pod grafovým oknom môžete pridať aj link pre jednoduché zdieľanie vášho grafu na rôznyhc platformách.

Zdrojové údaje a zdroj údajov

Vždy pridajte ku grafu aj zdrojové údaje. Použite štandardné, strojovo spracovateľné údajové formáty ako napríklad csv, JSON, XML. Môžete dať používateľom na výber z viacerých formátov.

Uvádzajte, kto alebo čo je zdrojom údajov, ktoré prezentujete.