Přeskočit obsah

Konfigurace ovládacího panelu a widgetů

LogMan.io Přehled ovládacích panelů

Nastavení ovládacího panelu

Pro úpravu rozvržení nebo konfigurace dashboardu musí mít uživatel přiřazen prostředek dashboards:admin.

Nastavení ovládacího panelu z uživatelského rozhraní

TODO: zatím neimplementováno

Ruční nastavení ovládacího panelu z knihovny

Konfigurace knihovny

Konfigurace knihovny je uložena v uzlu Knihovna. Musí být pouze typu JSON.

Pro získání konfigurace z Library musí být spuštěna služba asab_library s konfigurací ukazující na hlavní uzel Library.

Konfiguraci z Library lze upravovat - pozici a velikost widgetů lze do Library uložit přímo z rozhraní BS-WebUI.

Nastavení ovládacího panelu s konfigurací Knihovny

  • Konfigurační soubory panelů musí být uloženy v uzlu dashboard/Dashboards v Knihovně podle následujícího příkladu struktury.

  • konfigurační soubor Knihovny (config), který definuje uzel Knihovny s konfigurací v uzlu Knihovny Dashboardy. Název config je zároveň názvem panelu Dashboard zobrazeného v postranním panelu aplikace. Jedná se o povinný parametr.

  • DŮLEŽITÉ UPOZORNĚNÍ - konfigurační soubor MUSÍ mít příponu .json, jinak nebude možné zobrazit konfigurační soubor v modulu Knihovna, a tím spustit funkce jako Upravit nebo Zakázat.

Struktura konfigurace v knihovně

- hlavní uzel Knihovny (`library`)
    - Ovládací panely
        - **config**.json
Kde

  • **hlavní uzel knihovny** obvykle by měl být pojmenován jako knihovna

  • **config** je název konkrétní konfigurace Dashboardu, např. Můj Dashboard.json

V knihovně vypadá cesta ke konfiguračnímu souboru takto:

/<main Library node>/Dashboards/<dashboardConfig>.json

Podívejte se na konfiguraci dashboardu example.

Konfigurace ovládacího panelu

Zdroj dat

Slouží především k nastavení zdroje dat pro widgety. Datových zdrojů může být neomezený počet.

Příklad nastavení zdroje dat

{
    ...

     "Dashboard:datasource:elastic": {
        "type": "elasticsearch", // Zdroj dat
        "datetimeField": "@timestamp", // Typ datačasu
        "specification": "es-pattern*" // Vzor indexu nebo vzor URL
    },

    ...
}

Pokročilé nastavení Elasticsearch

{
    ...

     "Dashboard:datasource:elastic": {
        // Základní nastavení
        "type": "elasticsearch",
        "datetimeField": "@timestamp",
        "specification": "es-pattern*",


        // Pokročilé nastavení
        "sortData": "asc", // Seřadit data "asc" nebo "desc" během zpracování (nepovinné)


        // Pokročilé nastavení elasticsearch
        "size": 100, // Maximální velikost výsledků v odpovědi (výchozí 20) (nepovinné)
        "aggregateResult": true, // Pouze grafy (ne PieChart) - požádá ES o agregované hodnoty (nepovinné)
        "groupBy": "(nepovinné): // Pouze grafy - požádá ES o agregaci podle pojmu definovaného v klíči "groupBy" (nepovinné)
        "matchPhrase": "event.dataset: microsoft-office-365" // Pro výchozí zobrazení konkrétní shody zdroje dat
    },

    ...
}

Připojení datového zdroje k widgetu

Pokud není datový zdroj přiřazen k widgetu, nebudou pro zobrazení ve widgetu zpracována žádná data.

{
    ...

    "Dashboard:widget:somewidget": {
        "datasource": "Dashboard:datasource:elastic",

        ...
    },

    ...
}

Výzvy

Sekce Nastavení výzev poskytuje další možnost nastavení výzvy Dashboardu nebo změny jejího výchozího nastavení.

Použití v konfiguračním souboru:

{
    ...

    "Dashboard:prompts": {
        "dateRangePicker": true, // Povolit výzvu pro výběr rozsahu data
        "filterInput": true, // Povolit výzvu k zadání filtru
        "submitButton": true // Povolit výzvu k odeslání tlačítka
    },

    ...
}

Nastavení vlastních časových úseků

Někdy je žádoucí nastavit vlastní časové období pro zobrazování dat, protože data jsou položena např. mimo výchozí období nastavené pro Dashboard. Výchozí období je now-1H, které by mělo vyhledávat data v rámci now a 1 hodinu zpět. Například by to mohlo být nastaveno v Dashboard:prompts takto:

{
    ...

    "Dashboard:prompts": {
        ...

        "dateRangePicker": true,
        "dateRangePicker:datetimeStart": "now-1H",
        "dateRangePicker:datetimeEnd": "now",
        ...
    },

    ...
}

Kde dateRangePicker:datetimeStart a dateRangePicker:datetimeEnd jsou období, která nastavují rozsah na počáteční období (počáteční) a na koncové období (konečné).

Možnosti nastavení pro obě období jsou:

  • now-ns
  • now-nm
  • now-nH
  • now-nd
  • now-`n``w
  • now-nM
  • now-nY
  • nyní
  • now+ns
  • now+nm
  • now+nH
  • now+nd
  • now+`n``w
  • now+nM
  • now+nY

Kde - n je číslo, např. 2, - s označuje sekundy, - m označuje minuty, - H označuje hodiny, - d označuje dny, - w označuje týdny, - M označují měsíce, - Y označují roky

Ostatní hodnoty budou ignorovány.

Je možné nastavit např. pouze jedno období jako v tomto příkladu, druhé období zůstane výchozí:

{
    ...

    "Dashobard:prompts": {
        ...

        "dateRangePicker": true,
        "dateRangePicker:datetimeStart": "now-1H",
        ...
    },

    ...
}

Další příklad nastavení časového rozsahu, kde se data zobrazují 15 hodin do minulosti a hledají se 10 minut do budoucnosti:

{
    ...

    "Dashboard:prompts": {
        ...

        "dateRangePicker": true,
        "dateRangePicker:datetimeStart": "now-15H",
        "dateRangePicker:datetimeEnd": "now+10m",
        ...
    },

    ...
}

<!-- One can specify their button title, color, path to the endpoint and formItems, which is an array of objects.

In formItems is possible to specify the type of input form (username, phone, email and password) and their titles and hint messages. On submit, filled information will be set as a JSON body of the POST request to the specified path of telco service.

widgets: [{
            component_id: "WidgetContainer",
            dataSource: "ES",
            type: "Value",
            title: "Title",
            ...
            actionButton: {
                title: 'Trigger', // Title of the button
                backgroundColor: 'primary', // Color of the button (only reactstrap and bootstrap colors, if wider range needed, configure it via external CSS)
                buttonOutline: true, // Set the outline of the button (default false)
                action:"/path/of/the/endpoint", // Url path of the endpoint (without protocol and host)
                formItems:[
                    {form:"username", title:"Username", hint: "Input username"},
                    {form:"phone", title:"Phone", hint: "Input phone"},
                    {form:"email", title:"Email", hint: "Input email"},
                    {form:"password", title:"Password", hint: "Input password"}
                ] // Forms to use in the popover
                }, // Add an aritrary button which will perform some action via triggering an endpoint defined in path
            ...
        }]
``` -->

### Mřížkový systém (volitelné nastavení)

Mřížku lze nakonfigurovat jedinečně pro různé ovládací panely. Konfiguraci mřížky lze tedy implementovat do konfigurace řídicího panelu, jak je vidět na příkladu. Pokud není v konfiguraci uveden, použije se výchozí nastavení Grid.
{ ...

"Dashboard:grid": {
    "preventCollision": false // Pokud je nastaveno na true, zabrání to kolizi widgetů na mřížce.
},
"Dashboard:grid:breakpoints": {
    "lg": 1200,
    "md": 996,
    "sm": 768,
    "xs": 480,
    "xxs": 0
},
"Dashboard:grid:cols": {
    "lg": 12,
    "md": 10,
    "sm": 6,
    "xs": 4,
    "xxs": 2
},

...

} ``` Výše uvedené nastavení je také výchozím nastavením ovládacího panelu.

Konfigurace autorizace / zakázání

Přístrojový panel lze omezit pro přístup pouze s určitým nájemcem (nájemci). To znamená, že uživatelé, kteří nemají přístup k určitému nájemci (nájemcům), nemají k přístrojovému panelu přístup. To je výhodné např. v případě, kdy chce správce omezit přístup k ovládacím panelům s citlivými údaji na určitou skupinu (skupiny) uživatelů. Chcete-li zakázat konfiguraci pro konkrétního tenanta, musíte sami přejít do sekce Knihovna aplikace a Zakázat konkrétní soubor kliknutím na přepínač v souboru. Název zakázaného souboru konkrétní konfigurace panelu se pak přidá do souboru .disabled.yaml s dotčeným(i) nájemcem(i) v uzlu Knihovna.

Zlidštit

Komponenta sloužící k převodu číselných hodnot do lidsky čitelné podoby. Převádí hodnoty do lidsky čitelné podoby, jako např: 0.000001 =&gt; 1 µ 0.00001 =&gt; 10 µ 0.0001 =&gt; 100 µ 0.001 =&gt; 1 m 0.01 =&gt; 10 m 0.1 =&gt; 100 m 1 =&gt; 1 10 =&gt; 10 100 =&gt; 100 1000 =&gt; 1 k 10000 =&gt; 10 k 100000 =&gt; 100 k 1000000 =&gt; 1 M atd. Lze jej použít pro widgety s hodnotou a více hodnotami. Chcete-li ve widgetu povolit komponentu Humanize, musíte nastavit hodnotu - "humanize": true v konfiguraci widgetu - "base": <number> definovat základnu pro přepočet, volitelný parametr, výchozí hodnota je 1000 - "decimální čísla": <number> definovat, kolik desetinných míst se má zobrazit, nepovinný parametr - "displayUnits": true zobrazí předponu (tj. µ, m, k, M, G) jednotek, nepovinný parametr, výchozí false - "units": <string> B, Hz, ...), parametr: zobrazit uživatelsky definovanou příponu jednotek (např. B, Hz, ...). displayUnits a units se ve widgetu dají dohromady a výsledek může vypadat jako MHz, kde M je předpona a Hz je uživatelem definovaná přípona. ``` { ...

"Dashboard:widget:valuewidget": {
    ...

    "humanize": true,
    "base": 1024,
    "decimální čísla": 3,
    "displayUnits": true,
    "units": "B",

    ...
},

...

} ```

Nápověda (volitelné nastavení)

Nápovědu lze přidat pro jakýkoli widget kromě widgetu Nástroje. Tímto způsobem bude nápověda vložena jako nápověda vedle názvu Widgetu. Po přidání nápovědy se v záhlaví Widgetu (vedle názvu) zobrazí informační ikona. Po najetí na ikonu se zobrazí vložená nápověda. Nápověda může být pouze typu řetězec. Příklad přidání nápovědy: ``` { ...

"Dashboard:widget:somewidget": {

    ...

    "hint": "Nějaká nápověda",

    ...
},

...

} ```

Rozložení widgetu

Velikost a pozici widgetu na mřížce lze definovat pro každý widget v konfiguraci. Pokud není nastaveno, má widget své předdefinované hodnoty pro rozvržení a pozici a bude podle toho vykreslen. Widgety lze v rámci mřížky přesouvat a měnit jejich velikost prostřednictvím Výzvy k nastavení panelu >> Upravit. Tato funkce je dostupná pro uživatele se zdrojem dashboards:admin. Příklad základního nastavení rozvržení: ``` { ...

"Dashboard:widget:somewidget": {

    ...

    // Základní nastavení
    "layout:w": 4, // Šířka widgetu v jednotkách mřížky
    "layout:h": 2, // Výška widgetu v jednotkách mřížky
    "layout:x": 0, // Poloha widgetu na ose x v jednotkách mřížky
    "layout:y": 0, // Poloha widgetu na ose y v jednotkách mřížky.


    // Vlastní nastavení (nepovinné)
    "layout:minW": 2, // Minimální šířka widgetu
    "layout:minH": 2, // Minimální výška widgetu
    "layout:maxW": 6, // Maximální šířka widgetu
    "layout:maxH": "lay": 6, // Maximální výška widgetu

    ...
},

...

} Příklad pokročilého nastavení rozvržení: { ...

"Dashboard:widget:somewidget": {

    ...

    // Pokročilé nastavení (volitelné)
    "layout:isBounded": false, // Pokud je to pravda a lze přetahovat, bude se položka přesouvat pouze v rámci mřížky
    "layout:resizeHandles": ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se'], // Ve výchozím nastavení se úchyt zobrazí pouze v pravém dolním (jihovýchodním) rohu.
    "layout:static": ?boolean = false, // Upevněte widget na statickou pozici (nelze jej přesouvat ani měnit jeho velikost). Pokud je true, rovná se `isDraggable: false, isResizable: false`.
    "layout:isDraggable": ?boolean = true, // Pokud false, nebude draggable. Přepisuje `static`
    "layout:isResizable": ?boolean = true, // Pokud false, nebude možné měnit velikost. Přepíše `static`

    ...
},

...

} ```

Widgety

Příklad widgetu v konfiguračním souboru: ``` { ...

"Dashboard:widget:somewidget": {
    "datasource": "Dashboard:datasource:elastic",
    "type": "Value",
    "field": "some.variable",
    "title": "Some title",
    "layout:w": 2,
    "layout:h": 1,
    "layout:x": 0,
    "layout:y": 1
},

...

} ```

Widget Value

Běžně se používá k zobrazení jedné hodnoty, může však také zobrazit datum a filtrovanou hodnotu widgetu najednou. ``` { ...

"Dashboard:widget:valuewidget": {
    // Základní nastavení
    "datasource": "Dashboard:datasource:elastic",
    "type": "Value", // Typ widgetu
    "field": "some.variable", // Pole (hodnota) zobrazené ve widgetu
    "title": "Some title", // Název widgetu


    // Rozšířené nastavení (nepovinné)
    "onlyDateResult": true, // Zobrazí pouze datum s časem
    "units": "GB", // Jednotky hodnoty pole
    "displayWidgetDateTime": true, // Zobrazení data a času ve widgetu pod hodnotou
    "hint": "Some hint", // Zobrazení nápovědy widgetu


    // Zlidštění hodnoty (lze použít pro převod hodnot do lidsky čitelné podoby, např. bajty na GB) (nepovinné)
    "humanize": true, // Povolit komponentu Humanize
    "base": 1024, // Základ pro přepočet hodnoty pro komponentu Humanize
    "decimals": 3, // Zaokrouhlení hodnoty na n číslic v komponentě Humanize
    "displayUnits": true, // Zobrazení předpony velikosti jednotky (jako k, M, T,...) v komponentě Humanize


    // Nastavení rozložení
    "layout:w": 2,
    "layout:h": 1,
    "layout:x": 0,
    "layout:y": 1
},

...

} ```

Widget s více hodnotami

Slouží k zobrazení více hodnot v jednom widgetu ``` { ...

"Dashboard:widget:mutliplevaluewidget": {
    // Základní nastavení
    "datasource": "Dashboard:datasource:elastic",
    "type": "MultipleValue", // Typ widgetu
    "field:1": "some.variable1", // Pole (hodnoty) zobrazené ve widgetu
    "field:2": "some.variable2", // Počet polí je neomezený.
    "field:3": "date.time",
    "title": "some title", // Název widgetu


    // Rozšířené nastavení (nepovinné)
    "units": "GB", // Jednotky hodnoty pole
    "displayWidgetDateTime": true, // Zobrazení data a času ve widgetu pod hodnotou
    "hint": "Some hint", // Zobrazení nápovědy widgetu


    // Zlidštění hodnoty (lze použít pro převod hodnot do lidsky čitelné podoby, např. bajty na GB) (nepovinné)
    "humanize": true, // Povolit komponentu Humanize
    "base": 1024, // Základ pro přepočet hodnoty pro komponentu Humanize
    "decimals": 3, // Zaokrouhlení hodnoty na n číslic v komponentě Humanize
    "displayUnits": true, // Zobrazení předpony velikosti jednotky (jako k, M, T,...) v komponentě Humanize


    // Nastavení rozložení
    "layout:w": 2,
    "layout:h": 1,
    "layout:x": 0,
    "layout:y": 1
},

...

} ```

Widget indikátoru stavu

Slouží k zobrazení hodnoty a barvy stavu na základě překročení / nepřekročení mezních hodnot. Jeho jádro je podobné widgetu Hodnota. Existují 2 typy nastavení - jeden je určen pro zobrazení barev na základě číselného rozsahu, druhý je založen na zobrazení hodnot na základě řetězce. Rozsah čísel ``` { ...

"Dashboard:widget:indicatorwidget": {
    // Základní nastavení
    "datasource": "Dashboard:datasource:elastic",
    "type": "StatusIndicator", // Typ widgetu
    "field": "some.variable", // Pole (hodnota) zobrazené ve widgetu
    "title": "Some title", // Název widgetu
    "lowerBound": 4000, // Dolní mezní hranice
    "upperBound": 5000, // Horní mezní hranice


    // Rozšířené nastavení (nepovinné)
    "lowerBoundColor": "#a9f75f", // Dolní mezní barva
    "betweenBoundColor": "#ffc433", // Midst bound color (střední barva)
    "upperBoundColor": "#C70039 ", // barva horní hranice
    "nodataBoundColor": "#cfcfcf", // Barva bez údajů
    "units": "GB", // Jednotky hodnoty pole
    "displayWidgetDateTime": true, // Zobrazení času data ve widgetu pod hodnotou
    "hint": "Some hint", // Zobrazení nápovědy widgetu


    // Nastavení rozvržení
    "layout:w": 2,
    "layout:h": 1,
    "layout:x": 0,
    "layout:y": 1
},

...

} Widget #### Table Slouží k zobrazení více hodnot ve formě tabulky. { ...

"Dashboard:widget:tablewidget": {
    // Základní nastavení
    "datasource": "Dashboard:datasource:elastic",
    "type": "Table", // Typ widgetu
    "field:1": "@timestamp", // Pole (hodnoty) zobrazené ve widgetu
    "field:2": "event.dataset", // Počet polí je neomezený.
    "field:3": "host.hostname", // Pole také označuje položky zobrazené v záhlaví tabulky
    "title": "Some title", // Název widgetu


    // Rozšířené nastavení (nepovinné)
    "dataPerPage": 5, // Počet dat na stránku
    "disablePagination": true, // Zakázat stránkování
    "units": "GB", // Jednotky hodnoty pole
    "hint": "Some hint", // Zobrazení nápovědy widgetu


    // Nastavení rozvržení
    "layout:w": 3,
    "layout:h": 3,
    "layout:x": 0,
    "layout:y": 1
},

...

} Widget #### Tools Je podobný modulu Nástroje rozhraní ASAB WebUI, ale je transformován do widgetu pro použití na ovládacím panelu. { ...

"Dashboard:widget:toolswidget": {
    // Základní nastavení
    "type": "Tools", // Typ widgetu
    "title": "BitSwan", // Název widgetu
    "redirectUrl": "http://www.teskalabs.com", // Adresa URL přesměrování
    "image": "tools/bitswan.svg", // Umístění obrázku Tools (místo cesty k umístění může být uveden i řetězec base64 obrázku).


    // Nastavení rozvržení
    "layout:w": 1,
    "layout:h": 1,
    "layout:x": 0,
    "layout:y": 0
},

...

} ```

Widget Markdown

Běžně se používá k úpravě a zobrazení psaného popisu ve formátu Markdown. Tento widget umožňuje uživateli upravit a uložit popis např. konkrétního panelu pro širší vysvětlení. Pro editaci je třeba mít k dispozici alespoň zdroj dashboards:admin. ``` { ...

"Dashboard:widget:mdwidget": {
    // Základní nastavení
    "type": "Markdown", // Typ widgetu
    "title": "Some title", // Název widgetu

    // Rozšířené nastavení (nepovinné)
    "description": "Some description", // Zobrazení popisu v markdown
    "hint": "Some hint", // Zobrazení nápovědy widgetu


    // Nastavení rozvržení
    "layout:w": 2,
    "layout:h": 1,
    "layout:x": 0,
    "layout:y": 1
},

...

} ```

Widgety grafu

Slouží k zobrazení hodnot ve formuláři grafu. Další informace o použité knihovně grafů naleznete na tomto odkazu

Přesměrování na obrazovku Discover

Widgety PieChart a BarChart nabízejí ve výchozím nastavení možnost přesměrování na obrazovku Discover. Tato funkce filtruje vybrané hodnoty v grafu a přesměruje na obrazovku Objevit. Je k dispozici pouze pro seskupená data (nastavení groupBy v nastavení datového zdroje). Lze ji vypnout nastavením "disableRedirection": true ve widgetu. Pokud je v nástroji Discover použito více konfigurací, lze ve widgetu zadat název konfigurace, který bude použit v přesměrování pro filtrování na správnou konfiguraci. Pokud se v jedné aplikaci Discover používá více konfigurací, doporučuje se zadat názvy konfigurací v rámci widgetů, aby se zabránilo přesměrování na nesprávné konfigurace a datové zdroje v aplikaci Discover. To lze nastavit pomocí rekvizity widgetu "configName": "<discover-config-name>" >>> kde <discover-config-name> je název konfiguračního souboru Discover bez přípony, např. some-config.json >>> "configName": "some-config". Poznámka: Přesměrování odstraní všechny dříve filtrované položky a upraví časový rozsah data uloženého v místním úložišti pro obrazovku Discover podle vybraného v grafu Dashboard.

Barvy widgetu grafu

Všechny grafy nabízí možnost zobrazení s jedním z předdefinovaných barevných schémat. Barevné spektrum se liší podle typu grafu. Pokud není zadána žádná barva nebo je zadána špatná barva, použije se výchozí barevné spektrum. Barva je určena proměnnou color v nastavení widgetu: "Dashboard:widget:barchartwidget": { "datasource": "Dashboard:datasource:elastic", "type": "BarChart", "title": "Some title", ... "color": "západ slunce", ... }, - PieChart - pro gradientní barevná spektra - západ slunce, druhý, bezpečný, výstraha, nebezpečí, přednastaveno Příklad gradientních barev PieChart - pro smíšená barevná spektra - cold, rainbow, default Příklad smíšených barev PieChart - BarChart a další - jednobarevná spektra - západ slunce, bezpečí, výstraha, nebezpečí, předvolené Příklad barev BarChart

Widget BarChart

``` { ...

"Dashboard:widget:barchartwidget": {
    // Základní nastavení
    "datasource": "Dashboard:datasource:elastic",
    "type": "BarChart", // Typ widgetu
    "title": "Some title", // Název widgetu
    "xaxis": "@timestamp", // Hodnoty zobrazené na ose x
    "yaxis": "request.bytes", // Hodnoty zobrazené na ose y

    // Rozšířené nastavení (volitelné)
    "table": true, // Umožňuje zobrazit tabulku místo grafu (po kliknutí na tlačítko).
    "xlabel": "timestamp", // popisek osy x, výchozí je datetime
    "ylabel": "bytes", // označení osy y
    "xaxisUnit": "ts", // jednotky osy x
    "yaxisUnit": "byte", // jednotky osy y
    "xaxisDomain": ["auto", "auto"], // Rozsah pro zobrazení na ose x (výchozí [0, "auto"])
    "yaxisDomain": ["auto", "auto"], // Rozsah pro zobrazení na ose y (výchozí [0, "auto"])
    "horizontal": true, // Umožňuje zobrazit graf vodorovně.
    "width": "50%", // Šířka grafu ve widgetu
    "height": "50%", // Výška grafu ve widgetu
    "convertBy": // Hodnoty grafu budou vyděleny tímto číslem. Slouží k účelu a potřebě převodu dat např. na MHz, GB atd.
    "hint": "Some hint", // Zobrazení nápovědy widgetu
    "disableRedirection": true, // Zakáže přesměrování na obrazovku Discover (pouze pro BarChart).
    "configName": "config-name", // Název konkrétní konfigurace Discover (pouze pro BarChart)
    "color": "safe", // Specifikace barvy widgetu


    // Nastavení rozvržení
    "layout:w": 6,
    "layout:h": 3,
    "layout:x": 0,
    "layout:y": 0
},

...

} Chcete-li v grafu zobrazit agregaci, musíte ji nastavit v nastavení zdroje dat: { ...

 "Dashboard:datasource:elastic": {
    // Základní nastavení
    "type": "elasticsearch",
    "datetimeField": "@timestamp",
    "specification": "es-pattern*",
    "aggregateResult": true // Pouze grafy - požádá ES o agregované hodnoty (nepovinné).
},

...

} ```

Widget ScatterChart

Nastavení tohoto widgetu je stejné jako u widgetu BarChart. ``` { ...

"Dashboard:widget:scatterchartwidget": {
    // Základní nastavení
    ...
    "type": "ScatterChart", // Typ widgetu
    ...
},

...

} ```

Widget AreaChart

Nastavení tohoto widgetu je stejné jako u widgetu BarChart. ``` { ...

"Dashboard:widget:areachartwidget": {
    // Základní nastavení
    ...
    "type": "AreaChart", // Typ widgetu
    ...
},

...

}

##### Widget LineChart

Nastavení tohoto widgetu je stejné jako u widgetu BarChart.
{ ...

"Dashboard:widget:linechartwidget": {
    // Základní nastavení
    ...
    "type": "LineChart", // Typ widgetu
    ...
},

...

}

##### Widget Stacked BarChart

**Seskupený graf**

Konfigurace zdroje dat:
{ ...

"Dashboard:datasource:elastic-stacked": {
    // Základní nastavení
    "type": "elasticsearch",
    "datetimeField": "@timestamp",
    "specification": "pattern*",
    "groupBy": [
        "sender.address",
        "recipient.address"
    ],
    "size": // Definujte maximální velikost skupiny (výchozí hodnota je 20).
    "stackSize": 100 // Definujte maximální velikost stohovaných událostí (výchozí je top 50).

    // Pokročilé nastavení
    "matchPhrase": Pro výchozí zobrazení konkrétní shody datového zdroje: "event.dataset: microsoft-office-365" // Pro výchozí zobrazení konkrétní shody datového zdroje
},
...

} Konfigurace grafu: { ...

"Dashboard:widget:stackedbarchartwidget": {
    "datasource": "Dashboard:datasource:elastic-stacked",
    "title": "Some stacked barchart title" (Nějaký název stohovaného barchartu),
    "type": "StackedBarChart",

    // Pokročilé nastavení (nepovinné)
    "table": true, // Umožňuje zobrazit tabulku místo grafu (po kliknutí na tlačítko).
    "xlabel": "Odesílatel x příjemce", // popisek osy x, výchozí je datum
    "ylabel": "Count", // označení osy y
},
...

} **Agregovaný graf na časové škále** Konfigurace datového zdroje: { ...

"Dashboard:datasource:elastic-aggregation-stacked": {
    // Základní nastavení
    "type": "elasticsearch",
    "datetimeField": "@timestamp",
    "specification": "pattern*",
    "aggregateResult": true, // Nastavte agregaci na true
    "groupBy": "o365.audit.Workload", // Hodnota pro seskupení podle
    "aggregateEvents": [
        "device.properties.OS",
        "organization.id"
    ], // Další události pro agregaci (nepovinné, ale doporučené)
    "size": 100 // Definujte maximální velikost skupiny (výchozí je top 20).

    // Pokročilé nastavení
    "matchPhrase": Pro výchozí zobrazení konkrétní shody datového zdroje: "event.dataset: microsoft-office-365" // Pro výchozí zobrazení konkrétní shody datového zdroje
},
...

} Konfigurace grafu: { ...

"Dashboard:widget:stackedbarchartwidget": {
    "datasource": "Dashboard:datasource:elastic-aggregation-stacked",
    "title": "Some stacked barchart title" (Nějaký název stohovaného barchartu),
    "type": "StackedBarChart",

    // Pokročilé nastavení (nepovinné)
    "table": true, // Umožňuje zobrazit tabulku místo grafu (po kliknutí na tlačítko).
    "xlabel": "Odesílatel x příjemce", // popisek osy x, výchozí je datum
    "ylabel": "Count", // označení osy y
},
...

} ```

Widget PieChart

Pro zobrazení hodnot v grafu je třeba v nastavení zdroje dat nastavit groupBy. groupBy požádá ES o agregaci podle termínu definovaného v klíči "groupBy": ``` { ...

 "Dashboard:datasource:elastic-groupby": {
    // Základní nastavení
    "type": "elasticsearch",
    "datetimeField": "@timestamp",
    "specification": "es-pattern*",
    "groupBy": "user.id",
    "size": 100, // Definujte maximální velikost skupiny (výchozí je top 20).

    // Pokročilé nastavení
    "matchPhrase": Pro výchozí zobrazení konkrétní shody datového zdroje: "event.dataset: microsoft-office-365" // Pro výchozí zobrazení konkrétní shody datového zdroje
},

...

}
{ ...

"Dashboard:widget:piechartwidget": {

    // Základní nastavení
    "datasource": "Dashboard:datasource:elastic-groupby",
    "type": "PieChart", // Typ widgetu
    "title": "Some title", // Název widgetu

    // Rozšířené nastavení (nepovinné)
    "table": true, // Umožňuje zobrazit tabulku místo grafu (po kliknutí na tlačítko).
    "tooltip": true, // Ve widgetu se zobrazí buď nápověda k nástroji, nebo text (ve výchozím nastavení). Alternativně lze nastavit `tooltip: "both"`, aby se zobrazily obě možnosti.
    "useGradientColors": true, // PieChart použije přednastavené gradientní barvy - ve výchozím nastavení je nastaveno na false
    "displayUnassigned": true, // Zobrazí nepřiřazené hodnoty (prázdné řetězcové klíče nebo klíče s pomlčkou) v rámci PieChart - ve výchozím nastavení nastaveno na false
    "field": "timestamp", // Pole pro zobrazení hodnot v Piechart (pokud není groupBy definováno v datovém zdroji).
    "width": "50%", // Šířka grafu ve widgetu
    "height": "50%", // Výška grafu ve widgetu
    "hint": "Some hint", // Zobrazení nápovědy widgetu
    "disableRedirection": true, // Zakázat přesměrování na obrazovku Discover
    "configName": "config-name", // Název konkrétní konfigurace Discover,
    "color": "safe", // Specifikace barvy widgetu - spektrum a názvy se mohou lišit, pokud jsou použity gradientní barvy.

    // Nastavení rozvržení
    "layout:w": 6,
    "layout:h": 3,
    "layout:x": 0,
    "layout:y": 0
},

...

}

#### Widgety vývojového diagramu

Slouží k zobrazení vývojových diagramů ve formátu svg.

##### Widget FlowChart

Widget Flowchart je založen na vývojových diagramech mermaid.js. Více informací najdete na tomto [odkazu](https://mermaid-js.github.io){:target="_blank"}.
{ ...

"Dashboard:widget:flowchart": {
    // Základní nastavení
    "type": "FlowChart", // Typ widgetu
    "title": "Gantt chart", // Název widgetu
    "content": "gantt\ntitle Ganttův diagram\ndateFormat YYYY-MM-DD\nsection Section\nA task:a1, 2014-01-01, 30d\nAnother task:after a1,20d\nsection Another\nTask in sec:2014-01-12,12d\nanother task: 24d", // Obsah vývojového diagramu

    // Rozšířené nastavení (nepovinné)
    "hint": "Some hint", // Zobrazení nápovědy widgetu

    // Nastavení rozvržení
    "layout:w": 6,
    "layout:h": 3,
    "layout:x": 0,
    "layout:y": 0
},

...

} **Obsah vývojového diagramu** Obsah vývojového diagramu musí být typu řetězec. Jelikož je součástí JSON, musí být nové řádky **odděleny znakem `\n`. <!-- TODO: remove this comment when obtaining of the flowchart from URL or API will be implemented --> V příštích iteracích se plánuje implementace získávání obsahu vývojového diagramu z rozhraní API nebo adresy URL. Příklad převodu řetězcového vývojového diagramu mermomocí tak, aby byl kompatibilní s nastavením JSON v knihovně **Původní řetězec:** gantt název Ganttův diagram dateFormat RRRR-MM-DD section Sekce A task :a1, 2014-01-01, 30d Další úkol :po a1 , 20d sekce Jiný Úkol v sekci :2014-01-12 , 12d Další úkol : 24d **Změněný řetězec** gantt\ntitle Ganttův diagram\ndateFormat RRRR-MM-DD\oddíl Sekce\nÚkol:a1, 2014-01-01, 30d\nDalší úkol:po a1,20d\oddíl Další\nÚkol v sekci:2014-01-12,12d\další úkol: 24d ```