Webové komponenty

Grafový komponent

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ý komponent 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:

  • a) nadpisu
  • b) prepínačov pre výber zobrazenia javu v grafe,
  • c) priestoru pre popis,
  • d) tlačidiel zobrazenia údajov z rôznych pohľadov, zobrazenia údajov prostredníctvom tabuľky, podrobného popisu metodiky,
  • e) grafového okna s interaktívnym grafom repsektíve tabuľkového zobrazenia údajov,
  • f) vysvetliviek,
  • g) linku pre stiahnutie zdrojových údajov,
  • h) linku pre zdieľanie grafu (voliteľné),
  • i) označenia zdroja údajov.

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.

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">
            <summary 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.
            </summary>
        </div>
    </div>

    
    <div class="govuk-tabs" data-activetab="" 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>
      <section 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>
      </section>
      <section 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>
      </section>
      <section 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>
      </section>
      <section 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>
      </section>
</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 (54 kB)" href="/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.csv" class="govuk-link" download>ako CSV (54 kB)</a>
                    </li>
                    <li>
                        <a title="ako JSON (54 kB)" href="/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.json" class="govuk-link" download>ako JSON (54 kB)</a>
                    </li>
                    <li>
                        <a title="ako XLSX (54 kB)" href="/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.xlsx" class="govuk-link" download>ako XLSX (54 kB)</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#graph1" class="govuk-link idsk-graph__copy-to-clickboard" >Kopírovať link</a>
                    </li>
                    <li>
                        <a title="Emailom" href="#graph1" class="govuk-link idsk-graph__send-link-by-email" >Emailom</a>
                    </li>
                    <li>
                        <a title="na Facebooku" href="#graph1" 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>

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ť.

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="graph2">
    <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-graph2" id="radio-graph2-1" type="radio" value="pcr" checked="">
                            <label class="govuk-label govuk-radios__label" for="radio-graph2-1">PCR</label>
                        </div>
                        <div class="govuk-radios__item">
                            <input class="govuk-radios__input idsk-graph__radio" name="radio-graph2" id="radio-graph2-2" type="radio" value="antigen" >
                            <label class="govuk-label govuk-radios__label" for="radio-graph2-2">Antigén</label>
                        </div>
                        <div class="govuk-radios__item">
                            <input class="govuk-radios__input idsk-graph__radio" name="radio-graph2" id="radio-graph2-3" type="radio" value="pcr-antigen" >
                            <label class="govuk-label govuk-radios__label" for="radio-graph2-3">PCR + Antigén</label>
                        </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="govuk-grid-row">
        <div class="govuk-grid-column-one-half">
            <summary 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.
            </summary>
        </div>
    </div>

    
    <div class="govuk-tabs" data-activetab="2" 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="#graph2-1">
            Denné prírastky
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#graph2-2">
            Celkovo
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#graph2-3">
            Údaje
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#graph2-4">
            Metodika
          </a>
        </li>
  </ul>
      <section class="govuk-tabs__panel" id="graph2-1">
        <iframe class='idsk-graph__iframe' data-src='/vzory/graph-sample' src='/vzory/graph-sample' title='Lorem Ipsun title'></iframe>
      </section>
      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph2-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>
      </section>
      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph2-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>
      </section>
      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph2-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>
      </section>
</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 (54 kB)" href="/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.csv" class="govuk-link" download>ako CSV (54 kB)</a>
                    </li>
                    <li>
                        <a title="ako JSON (54 kB)" href="/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.json" class="govuk-link" download>ako JSON (54 kB)</a>
                    </li>
                    <li>
                        <a title="ako XLSX (54 kB)" href="/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.xlsx" class="govuk-link" download>ako XLSX (54 kB)</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>

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.

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="graph3">
    <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-graph3" id="radio-graph3-1" type="radio" value="pcr" checked="">
                            <label class="govuk-label govuk-radios__label" for="radio-graph3-1">PCR</label>
                        </div>
                        <div class="govuk-radios__item">
                            <input class="govuk-radios__input idsk-graph__radio" name="radio-graph3" id="radio-graph3-2" type="radio" value="antigen" >
                            <label class="govuk-label govuk-radios__label" for="radio-graph3-2">Antigén</label>
                        </div>
                        <div class="govuk-radios__item">
                            <input class="govuk-radios__input idsk-graph__radio" name="radio-graph3" id="radio-graph3-3" type="radio" value="pcr-antigen" >
                            <label class="govuk-label govuk-radios__label" for="radio-graph3-3">PCR + Antigén</label>
                        </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="govuk-grid-row">
        <div class="govuk-grid-column-one-half">
            <summary 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.
            </summary>
        </div>
    </div>

    
    <div class="govuk-tabs" data-activetab="3" 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="#graph3-1">
            Denné prírastky
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#graph3-2">
            Celkovo
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#graph3-3">
            Údaje
          </a>
        </li>
        <li class="govuk-tabs__list-item">
          <a class="govuk-tabs__tab" href="#graph3-4">
            Metodika
          </a>
        </li>
  </ul>
      <section class="govuk-tabs__panel" id="graph3-1">
        <iframe class='idsk-graph__iframe' data-src='/vzory/graph-sample' src='/vzory/graph-sample' title='Lorem Ipsun title'></iframe>
      </section>
      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph3-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>
      </section>
      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph3-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>
      </section>
      <section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="graph3-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>
      </section>
</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 (54 kB)" href="/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.csv" class="govuk-link" download>ako CSV (54 kB)</a>
                    </li>
                    <li>
                        <a title="ako JSON (54 kB)" href="/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.json" class="govuk-link" download>ako JSON (54 kB)</a>
                    </li>
                    <li>
                        <a title="ako XLSX (54 kB)" href="/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.xlsx" class="govuk-link" download>ako XLSX (54 kB)</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#graph3" class="govuk-link idsk-graph__copy-to-clickboard" >Kopírovať link</a>
                    </li>
                    <li>
                        <a title="Emailom" href="#graph3" class="govuk-link idsk-graph__send-link-by-email" >Emailom</a>
                    </li>
                    <li>
                        <a title="na Facebooku" href="#graph3" 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>

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.

Rozšírené príklady pre grafový komponent