Graph ID-SK

Graph ukážka grafového komponentu

(open in a new window)
Code

Markup


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

Macro

{% from "graph/macro.njk" import idskGraph %}

{{ idskGraph({
  "uniqueId": "graph1",
  "title": "Pozitívne testovaní",
  "radioOptions": [
    {
      "title": "PCR",
      "value": "pcr"
    },
    {
      "title": "Antigén",
      "value": "antigen"
    },
    {
      "title": "PCR + Antigén",
      "value": "pcr-antigen"
    }
  ],
  "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.",
  "graphDailyIframeSrc": "/vzory/graph-sample",
  "graphDailyIframeTitle": "Lorem Ipsun title",
  "graphSumIframeSrc": "/vzory/graph-sample?time=sum",
  "graphSumframeTitle": "Lorem Ipsun 2 title",
  "tableIframeSrc": "/vzory/interactive-table-sample-2",
  "tableIframeTitle": "Lorem Ipsun 3 title",
  "methodicsHtml": " <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> ",
  "download": {
    "downloadTitle": "Stiahnuť údaje",
    "items": [
      {
        "title": "ako CSV (54 kB)",
        "value": "/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.csv"
      },
      {
        "title": "ako JSON (54 kB)",
        "value": "/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.json"
      },
      {
        "title": "ako XLSX (54 kB)",
        "value": "/public/assets/data/PCR_denne_kumulat_AG-denne_kumulat.xlsx"
      }
    ]
  },
  "share": {
    "shareTitle": "Zdielať údaje",
    "items": [
      {
        "title": "Kopírovať link",
        "class": "idsk-graph__copy-to-clickboard",
        "value": "/komponenty/grafovy-komponent#graph1"
      },
      {
        "title": "Emailom",
        "class": "idsk-graph__send-link-by-email",
        "value": "#graph1"
      },
      {
        "title": "na Facebooku",
        "class": "idsk-graph__share-on-facebook",
        "value": "#graph1",
        "target": "_blank"
      }
    ]
  },
  "source": "Zdroj: NCZI"
}) }}