{"id":12924,"date":"2021-03-12T21:20:53","date_gmt":"2021-03-12T20:20:53","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=12924"},"modified":"2021-03-12T21:20:53","modified_gmt":"2021-03-12T20:20:53","slug":"devextreme-pivot-grid-angular","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/","title":{"rendered":"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka"},"content":{"rendered":"

U ovom \u0107u blog postu pokazati kako implementirati DevExtreme Pivot Grid UI<\/em> komponentu u Angular<\/a><\/em> projekt. Ona omogu\u0107ava prikaz i analizu vi\u0161edimenzionalnih podataka iz lokalne pohrane ili OLAP kocke<\/a>.<\/p>\n

Fokusirat \u0107u se na prikaz podataka prema specifi\u010dnim parameterima te na\u010dinu na koji te podatke ure\u0111ivati jer Pivot Grid<\/em> nativno ne nudi takvu mogu\u0107nost.<\/p>\n

Pivot Grid prikaz podataka<\/h2>\n

Prva i osnovna zna\u010dajka Pivot Grida<\/em> je prikaz i analizu vi\u0161edimenzionalnih podataka<\/a>.<\/p>\n

U ovom \u0107u primjeru koristiti strukturu podataka prikazanu u JSON-u kojega je mogu\u0107e vidjeti ispod. S jedne strane biti \u0107e poslovnice, a s druge automobili. Cilj je prikazati koli\u010dinu naru\u010denih tj. isporu\u010denih automobila ovisno o poslovnici.<\/p>\n

Logika aplikacije nalazit \u0107e se unutar angular-devextreme.component.ts<\/strong><\/em> datoteke koja se temelji na PivotGridDataSource<\/a> objektu. Za sada \u0107e se unutar njega nalaziti samo fields<\/span> niz<\/a> i store<\/span> objekt<\/a>.<\/p>\n

Poslovnice \u0107e se nalaziti krajnje lijevo area: “row”<\/span>, a automobili na vrhu area: “column”<\/span>. Sve ostalo tj. narud\u017ebe prikazuju se kao podaci area: “data”<\/span>.<\/p>\n

import { Component, OnInit } from '@angular\/core';\r\n\r\nimport PivotGridDataSource from \"devextreme\/ui\/pivot_grid\/data_source\";\r\n\r\n@Component({\r\n  selector: 'app-narudzbe-popis',\r\n  templateUrl: '.\/narudzbe-popis.component.html',\r\n  styleUrls: ['.\/narudzbe-popis.component.scss']\r\n})\r\n\r\nexport class NarudzbePopisComponent implements OnInit {\r\n\r\n  dataSource: PivotGridDataSource;\r\n\r\n  podaciDemo = [\r\n    {\r\n      \"poslovnica_ID\": 163,\r\n      \"poslovnica_naziv\": \"POSLOVNICA VK\",\r\n      \"narudzba_ID\": 1720303,\r\n      \"narudzba_narucenakolicina\": 50,\r\n      \/\/Od 50 isporu\u010deno 49 automobila\r\n      \"narudzba_isporucenakolicina\": 49,\r\n      \"artikl_ar_ID\": 69567,\r\n      \"artikl_sifra\": 666627,\r\n      \"artikl_naziv\": \"Tesla Model S\"\r\n    },\r\n    {\r\n      \"poslovnica_ID\": 163,\r\n      \"poslovnica_naziv\": \"POSLOVNICA VK\",\r\n      \"narudzba_ID\": 83572434,\r\n      \"narudzba_narucenakolicina\": 20,\r\n      \/\/Jo\u0161 nije unesena isporu\u010dena koli\u010dina\r\n      \"narudzba_isporucenakolicina\": null,\r\n      \"artikl_ar_ID\": 69463,\r\n      \"artikl_sifra\": 555018,\r\n      \"artikl_naziv\": \"Fiat Panda\"\r\n    },\r\n    {\r\n      \"poslovnica_ID\": 163,\r\n      \"poslovnica_naziv\": \"POSLOVNICA VK\",\r\n      \"narudzba_ID\": 83572437,\r\n      \"narudzba_narucenakolicina\": 6,\r\n      \/\/Od 6 isporu\u010deno 0 automobila\r\n      \"narudzba_isporucenakolicina\": 0,\r\n      \"artikl_ar_ID\": 69610,\r\n      \"artikl_sifra\": 102836,\r\n      \"artikl_naziv\": \"Kia Rio\"\r\n    },\r\n...\r\n]\r\n\r\n  constructor() {}\r\n\r\n  ngOnInit(): void {\r\n      this.prikaziNarudzbe();\r\n  }\r\n\r\n  prikaziNarudzbe(){\r\n          this.dataSource = new PivotGridDataSource({\r\n            fields: [\r\n              {\r\n                dataField: \"poslovnica_naziv\",\r\n                dataType: \"string\",\r\n                area: \"row\",\r\n                width: 120\r\n              },\r\n              {\r\n                dataField: \"artikl_naziv\",\r\n                dataType: \"string\",\r\n                area: \"column\",\r\n                expanded: true\r\n              },\r\n              {\r\n                caption: \"Naru\u010deno\",\r\n                dataField: \"narudzba_narucenakolicina\",\r\n                dataType: \"number\",\r\n                summaryType: \"sum\",\r\n                area: \"data\"\r\n              },\r\n              {\r\n                caption: \"Isporu\u010deno\",\r\n                dataField: \"narudzba_isporucenakolicina\",\r\n                dataType: \"number\",\r\n                summaryType: \"sum\",\r\n                area: \"data\"\r\n              }\r\n            ],\r\n            store: {\r\n              type: \"array\",\r\n              data: this.podaciDemo\r\n            }\r\n        });\r\n  }\r\n\r\n}<\/pre>\n
Izgled su\u010delja biti \u0107e definiran unutar angular-devextreme.component.html<\/strong><\/em> datoteke. <\/p>\n
Od Pivot Grid UI<\/em> svojstva<\/a> koristit \u0107u ih nekoliko: <\/p>\n
  • showBorders<\/a><\/em> – \u017eelim da vanjski rubovi budu vidljivi.<\/li>\n
  • showColumnGrandTotals<\/a><\/em> – ne \u017eelim prikazivati ukupne vrijednosti za kolone. Ovo bi se ina\u010de prikazivalo krajnje desno.<\/li>\n
  • showRowGrandTotals<\/a> – \u017eelim na dnu prikazati ukupne vrijednosti.<\/li>\n
    <dx-pivot-grid\r\n            [showBorders]=\"true\"\r\n            [showColumnGrandTotals]=\"false\"\r\n            [showRowGrandTotals]=\"true\"\r\n            [dataSource]=\"dataSource\">\r\n            <dxo-field-chooser [enabled]=\"false\" [height]=\"400\"><\/dxo-field-chooser>\r\n            <dxo-scrolling\r\n                mode=\"standard\"  \r\n                [useNative]=\"false\"\r\n                [scrollByContent]=\"true\"\r\n                [scrollByThumb]=\"true\"\r\n                showScrollbar=\"always\">\r\n            <\/dxo-scrolling> <!-- \"virtual\" | \"infinite\" -->\r\n<\/dx-pivot-grid><\/pre>\n
    Sve to zajedno na kraju daje sljede\u0107e:<\/p>\n
    \"DevExtreme<\/a><\/p>\n
    Pivot Grid – promjena izgleda polja<\/h2>\n
    Ako \u017eelim dodatno prilagoditi prikaz odre\u0111enih polja to mogu napraviti koriste\u0107i onCellPrepared<\/a><\/em> metodu.<\/p>\n
    <dx-pivot-grid ...\r\n    (onCellPrepared)=\"onCellPrepared($event)\">\r\n<\/dx-pivot-grid><\/pre>\n
    U ovom slu\u010daju ho\u0107u napraviti tri grafi\u010dke izmjene. Stupac “Naru\u010deno” \u0107e imati sivu pozadinsku boju i podebljane brojeve, ukupne vrijednosti na dnu tako\u0111er \u0107e biti podebljanje, a vrijednosti koje za “Isporu\u010deno” imaju null<\/span> \u0107e imati crvenu pozadinsku boju kako bi bila uo\u010dljivija.<\/p>\n
    onCellPrepared(e){\r\n      \r\n    if(e.cell.rowType == \"GT\"){\r\n      e.cellElement.style.fontWeight = \"bold\";\r\n    }\r\n\r\n    if(e.area == 'data' && e.columnIndex % 2 == 0){\r\n          e.cellElement.style.fontWeight = \"bold\";\r\n          e.cellElement.style.backgroundColor = \"rgb(242,242,242)\";\r\n    }\r\n    \r\n    if(e.area === \"data\" && e.cell.dataIndex === 1 && e.cell.value === null && e.cell.rowType != \"GT\"){\r\n        e.cellElement.style.backgroundColor = \"rgb(255 0 0 \/ 42%)\";\r\n    }\r\n          \r\n  }<\/pre>\n
    Na ekranu bi to izgledalo ovako:<\/p>\n
    \"Pivot<\/a><\/p>\n
    Me\u0111utim, niti jedno polje nema crvenu pozadinsku boju. Razlog je \u0161to Pivot Grid<\/em> sve null<\/span> vrijednosti vidi kao 0<\/code> i zato uvjet e.cell.value === null<\/span> nije zadovoljen. Ali ako stavim e.cell.value === 0<\/span> stanje \u0107e biti puno druga\u010dije.<\/p>\n
    \"Pivot<\/a><\/p>\n
    Iz podaciDemo<\/span> niza se mo\u017ee vidjeti da narudzba_isporucenakolicina<\/span> mo\u017ee imati vrijednosti null<\/span>. To zna\u010di da bi vrijednost za “POSLOVNICA VK” i automobil “Fiat Panda” trebala imati crvenu pozadinsku boju jer je narudzba_isporucenakolicina = null<\/span>, a kombinacija POSLOVNICA VK” i “Kia Rio” ne bi trebala imati crvenu pozadinsku boju jer ima vrijednost narudzba_isporucenakolicina = 0<\/span>.<\/p>\n
    Pivot Grid – prikaz null vrijednosti<\/h2>\n
    Kako bi u PivotGridu<\/em> mogao prikazati null<\/span> vrijednosti i razlikovati ih od vrijednosti 0<\/code> koristiti \u0107u calculateCustomSummary<\/a><\/em> funkciju. Tu \u0107u funkciju vezati uz polje dataField: “narudzba_isporucenakolicina”<\/span>.<\/p>\n
    {\r\n        caption: \"Isporu\u010deno\",\r\n        dataField: \"narudzba_isporucenakolicina\",\r\n        dataType: \"number\",\r\n        \/\/summaryType: \"sum\",\r\n        area: \"data\",\r\n        summaryType: \"custom\",\r\n        calculateCustomSummary: function(options) {  \r\n          if (options.summaryProcess == 'start') {  \r\n              options.totalValue = null;  \r\n          }  \r\n          if (options.summaryProcess == 'calculate') {  \r\n              if (options.value !== null) {  \r\n                  options.totalValue += options.value;  \r\n              }  \r\n          }  \r\n        }\r\n}<\/pre>\n
    Sada se na ekranu mo\u017ee vidjeti da istovremeno imam prikazane vrijednosti za isporu\u010denu koli\u010dinu i kao null<\/code> i kao 0<\/code>.<\/p>\n
    \"Pivot<\/a><\/p>\n
    Omogu\u0107iti klik na odabrano polje<\/h2>\n
    \u017delim omogu\u0107iti klik samo na polje koje pokazuje isporu\u010denu koli\u010dinu, ali isklju\u010divo za poslovnice i automobile koji imaju unesenu naru\u010denu koli\u010dinu. Zna\u010di, ne \u017eelim da se u koloni sa isporu\u010denom koli\u010dinom mo\u017ee kliknuti na prazno polje jer nema smisla unositi isporu\u010denu koli\u010dinu ako ni\u0161ta nije naru\u010deno.<\/p>\n
    Za to \u0107u koristiti onCellClick<\/a><\/em> funkciju.<\/p>\n
    <dx-pivot-grid ...\r\n    (onCellClick)=\"onPivotCellClick($event)\">\r\n<\/dx-pivot-grid><\/pre>\n
    onPivotCellClick(e) {\r\n    \/\/Klik na polje \"narudzba_isporucenakolicina\" ako ima unesenu vrijednost\r\n    if(e.area == \"data\" && e.cell.dataIndex == 1 && e.cell.value != undefined && e.cell.rowType != \"GT\") {\r\n      console.log(e);\r\n    }\r\n    \/\/Klik na polje \"narudzba_isporucenakolicina\" ako je vrijednosti null tj. ako je polje crvene pozadinske boje\r\n    if(e.area === \"data\" && e.cell.dataIndex === 1 && e.cell.value === null && e.cell.rowType != \"GT\"){\r\n      console.log(e);\r\n    }\r\n }<\/pre>\n
    Iz prikazanog se mo\u017ee vidjeti da klik na prazno polje ne radi ni\u0161ta, klik na crveno polje dohva\u0107a vrijednost null<\/code>, a klik na polje za unesenom koli\u010dinom dohva\u0107a tu vrijednost. U ovom slu\u010daju ta vrijednost je 10<\/code>.<\/p>\n
    \"Pivot<\/a><\/p>\n
    Pivot Grid dohva\u0107anje vrijednosti polja<\/h2>\n
    Pivot Grid<\/em> je primarno kreiran s ciljem prikaza podataka tj. prema dokumentaciji nema mogu\u0107nost jednostavnog ure\u0111ivanja podataka kao \u0161to je to slu\u010daj kod Data Grida<\/a><\/em>, barem ju nisam na\u0161ao, ali sam znao da mora postojati neko rje\u0161enje.<\/p>\n
    Za po\u010detak \u017eelim prikazati nekakvu formu unutar koje \u0107e se vrijednost polja mo\u0107i urediti. Za to \u0107u iskoristiti Popup UI<\/em> komponentu<\/a>. Unutar nje definiram dxTemplate<\/a><\/em> \u0161to mi omogu\u0107ava daljnju prilagodbu su\u010delja za ure\u0111ivanje isporu\u010dene vrijednosti.<\/p>\n
    Za dohva\u0107anje vrijednosti kliknutog polja koristit \u0107u Drill Down<\/a><\/em>.<\/p>\n
    ...\r\n<\/dx-pivot-grid>\r\n        <dx-popup\r\n        [closeOnOutsideClick]=\"false\"\r\n        [showCloseButton]=\"true\"\r\n        [(visible)]=\"popupVisible\"\r\n        [title]=\"popupTitle\"\r\n        [width]=\"650\"\r\n        [height]=\"200\"\r\n        >\r\n        <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-data-grid\r\n            #drillDownDataGrid\r\n            [dataSource]=\"drillDownDataSource\"\r\n            >\r\n            <\/dx-data-grid>\r\n        <\/div>\r\n        <\/dx-popup><\/pre>\n
    import { \r\n        Component,\r\n        OnInit,\r\n        ViewChild\r\n      } \r\n      from '@angular\/core';\r\n\r\nimport { DxTextBoxComponent } from 'devextreme-angular';\r\n   ...\r\n\r\nexport class NarudzbePopisComponent implements OnInit {\r\n\r\n  popupVisible = false;\r\n  popupTitle: string;\r\n  narudzba_ID: number;\r\n  isporucenakolicina: number;\r\n  narucenaKolicinaPopup: number;\r\n\r\n  drillDownDataSource: any;\r\n\r\n  @ViewChild(\"kolicinaUnos\", { static: false }) inputName: DxTextBoxComponent;\r\n...\r\n\r\nonPivotCellClick(e) {\r\n    \/\/Klik na polje \"narudzba_isporucenakolicina\" ako ima unesenu vrijednost\r\n    if(e.area == \"data\" && e.cell.dataIndex == 1 && e.cell.value != undefined && e.cell.rowType != \"GT\") {\r\n      \/\/console.log(e);\r\n      this.drillDownDataSource = this.dataSource.createDrillDownDataSource(e.cell);\r\n        let _this = this;\r\n        this.drillDownDataSource.load().done(function(result) {\r\n          _this.narucenaKolicinaPopup = result[0].nas_kolicina;\r\n        });\r\n        this.popupTitle = e.cell.rowPath[0] + ' - ' + e.cell.columnPath[0];\r\n        this.popupVisible = true;\r\n    }\r\n    \/\/Klik na polje \"narudzba_isporucenakolicina\" ako je vrijednosti null tj. ako je polje crvene pozadinske boje\r\n    if(e.area === \"data\" && e.cell.dataIndex === 1 && e.cell.value === null && e.cell.rowType != \"GT\"){\r\n      \/\/console.log(e);\r\n      this.drillDownDataSource = this.dataSource.createDrillDownDataSource(e.cell);\r\n        let _this = this;\r\n        this.drillDownDataSource.load().done(function(result) {\r\n          _this.narucenaKolicinaPopup = result[0].nas_kolicina;\r\n        });\r\n        this.popupTitle = e.cell.rowPath[0] + ' - ' + e.cell.columnPath[0];\r\n        this.popupVisible = true;\r\n    }\r\n  }<\/pre>\n
    Klikom na polje isporu\u010dene koli\u010dine prikazat \u0107e se sljede\u0107e:<\/p>\n
    \"PivotGrid<\/a><\/p>\n
    Kao \u0161to se iz prikazanog mo\u017ee vidjeti dohva\u0107eni su podaci prikazani na vrhu blog posta.<\/p>\n
    {\r\n      \"poslovnica_ID\": 163,\r\n      \"poslovnica_naziv\": \"POSLOVNICA VK\",\r\n      \"narudzba_ID\": 1720303,\r\n      \"narudzba_narucenakolicina\": 50,\r\n      \/\/Od 50 isporu\u010deno 49 automobila\r\n      \"narudzba_isporucenakolicina\": 49,\r\n      \"artikl_ar_ID\": 69567,\r\n      \"artikl_sifra\": 666627,\r\n      \"artikl_naziv\": \"Tesla Model S\"\r\n}<\/pre>\n
    Pivot Grid ure\u0111ivanje vrijednosti polja<\/h2>\n
    Popup iz gornjeg primjera je potrebno prilagoditi na na\u010din da se kreira input polje za izmjenu isporu\u010dene koli\u010dine<\/strong>. Klikom na polje sa ve\u0107 unesenom isporu\u010denom koli\u010dinom ista \u0107e se prikazati unutar input polja. Ako je polje prazno isto \u0107e biti i input polje.<\/p>\n
    U GIF-u se mo\u017ee primjetiti da ure\u0111ivanje isporu\u010dene koli\u010dine uredno prolazi, ali uz jedan problem. Prilikom svakog spremanja isporu\u010dene koli\u010dine cijeli se Pivot Grid<\/em> osvje\u017ei i vrati u krajnju lijevu poziciju. Naravno da to nije prakti\u010dno. Uz to, prilikom otvaranja popupa<\/em> polje za unos koli\u010dine nije fokusirano (crvena podcrtana linija) nego je na njega prvo potrebno kliknuti.<\/p>\n
    U nastavku \u0107u pokazati kako rije\u0161iti oba problema.<\/p>\n
    \"Pivot<\/a><\/p>\n
    <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-data-grid\r\n            class=\"dataGridKlasa\"\r\n            #drillDownDataGrid\r\n            [dataSource]=\"drillDownDataSource\"\r\n            >\r\n                <dxi-column dataField=\"narudzba_isporucenakolicina\" caption=\"Isporu\u010dena koli\u010dina\" [visible]=\"true\" cellTemplate=\"urediKolicinu\">\r\n                    <div *dxTemplate=\"let data of 'urediKolicinu'\">\r\n                        <dx-number-box #kolicinaUnos\r\n                            style=\"text-align: center;\"\r\n                            [value]=\"data.value\"\r\n                            [placeholder]=\"data.value\"\r\n                            (onValueChanged)=\"spremiKolicinu($event, data)\"\r\n                            (onEnterKey)=\"spremiKolicinuEnter($event, data)\"\r\n                            >\r\n                        <\/dx-number-box>\r\n                    <\/div>\r\n                <\/dxi-column>\r\n                <dxi-column cellTemplate=\"gumbUrediKolicinu\">\r\n                    <div *dxTemplate=\"let data of 'gumbUrediKolicinu'\">\r\n                        <dx-button\r\n                            style=\"margin-bottom: 5px;\"\r\n                            stylingMode=\"contained\"\r\n                            text=\"SPREMI\"\r\n                            type=\"success\"\r\n                            [width]=\"120\"\r\n                            (onClick)=\"spremiKolicinuButton($event, data)\">\r\n                        <\/dx-button>\r\n                    <\/div>\r\n                <\/dxi-column>\r\n            <\/dx-data-grid>\r\n        <\/div><\/pre>\n
      spremiKolicinu(event, data){\r\n    this.isporucenakolicina = event.value;\r\n    this.narudzba_ID = data.row.cells[0].data.narudzba_ID;\r\n  }\r\n\r\n  spremiKolicinuButton(event, data){\r\n    \/\/Slanje podataka na API\r\n    \/\/if(res.success == true){\r\n      this.popupVisible = false;\r\n    \/\/} else {\r\n      \/\/Poruka o gre\u0161ci\r\n    \/\/}\r\n  }\r\n\r\n  spremiKolicinuEnter(event, data){\r\n    \/\/ this.slanjeKolicine(data.key.nas_ID, e.value);\r\n      \/\/Slanje podataka na API\r\n      \/\/if(res.success == true){\r\n        this.popupVisible = false;\r\n      \/\/} else {\r\n        \/\/Poruka o gre\u0161ci\r\n      \/\/}\r\n  }<\/pre>\n
    Osvje\u017eavanje samo ure\u0111enog podatka<\/h2>\n
    Jedan od problema koji se stvorio nakon \u0161to je omogu\u0107eno ure\u0111ivanje podataka je to \u0161to se sada cijeli ekran osvje\u017ei i onda se svaki put iznova mora skrolati do to\u010dno odre\u0111enog polja kako bi se nastavilo ure\u0111ivanje. To nikako nije prakti\u010dno i bilo je potrebno prona\u0107i rje\u0161enje. <\/p>\n
    U ovom \u0107e mi slu\u010daju pomo\u0107i ArrayStore<\/a><\/em>, ali tek kada prilagodim prikaziNarudzbe()<\/span> funkciju. Kao \u0161to se mo\u017ee vidjeti this.podaciDemo<\/span> se sada dohva\u0107aju upravo kroz ArrayStore<\/em>. Kroz key<\/span> parametar identificiram unikatnu vrijednost pomo\u0107u koje Pivot Grid mo\u017ee znati koju vrijednost \u0107e osvje\u017eiti.<\/p>\n
    Podatke nakon unosa osvje\u017eavam pomo\u0107u update(key, values)<\/span> metode<\/a> unutar funkcija spremiKolicinuButton()<\/span> i spremiKolicinuEnter()<\/span>.<\/p>\n
    import { Component, OnInit, ViewChild } from '@angular\/core';\r\n\r\nimport PivotGridDataSource from \"devextreme\/ui\/pivot_grid\/data_source\";\r\nimport ArrayStore from \"devextreme\/data\/array_store\";\r\nimport { DxTextBoxComponent,\r\n         DxPivotGridComponent } from 'devextreme-angular';\r\n...\r\n\r\n@ViewChild(DxPivotGridComponent, { static: false }) pivotGrid: DxPivotGridComponent;\r\n\r\ndataSource: PivotGridDataSource;\r\ndataStore: any;\r\n\r\n...\r\n\r\nprikaziNarudzbe(){\r\n          this.dataStore = new ArrayStore({\r\n            key: \"narudzba_ID\",\r\n            data: this.podaciDemo\r\n          });\r\n          this.dataSource = new PivotGridDataSource({\r\n            fields: [\r\n              {\r\n                dataField: \"poslovnica_naziv\",\r\n                dataType: \"string\",\r\n                area: \"row\",\r\n                width: 120\r\n              },\r\n              {\r\n                dataField: \"artikl_naziv\",\r\n                dataType: \"string\",\r\n                area: \"column\"\r\n              },\r\n              {\r\n                caption: \"Naru\u010deno\",\r\n                dataField: \"narudzba_narucenakolicina\",\r\n                dataType: \"number\",\r\n                summaryType: \"sum\",\r\n                area: \"data\"\r\n              },\r\n              {\r\n                caption: \"Isporu\u010deno\",\r\n                dataField: \"narudzba_isporucenakolicina\",\r\n                dataType: \"number\",\r\n                area: \"data\",\r\n                summaryType: \"custom\",\r\n                calculateCustomSummary: function(options) {  \r\n                  if (options.summaryProcess == 'start') {  \r\n                      options.totalValue = null;  \r\n                  }  \r\n                  if (options.summaryProcess == 'calculate') {  \r\n                      if (options.value !== null) {  \r\n                          options.totalValue += options.value;  \r\n                      }  \r\n                  }  \r\n                }\r\n              }\r\n            ],\r\n            store: this.dataStore\r\n        });\r\n  }\r\n\r\n...\r\n\r\nspremiKolicinuButton(event, data){\r\n    \/\/Slanje podataka na API\r\n    \/\/if(res.success == true){\r\n      this.dataStore.update(data.key, {\r\n        'poslovnica_ID': data.data.poslovnica_ID,\r\n        'poslovnica_naziv': data.data.poslovnica_naziv,\r\n        'artikl_ar_ID': data.data.artikl_ar_ID,\r\n        'artikl_naziv': data.data.artikl_naziv,\r\n        'artikl_sifra': data.data.artikl_sifra,\r\n        'narudzba_isporucenakolicina': this.isporucenakolicina,\r\n        'narudzba_narucenakolicina': data.data.narudzba_narucenakolicina,\r\n        'narudzba_ID': data.data.narudzba_ID\r\n      });\r\n      this.isporucenakolicina = null;\r\n      this.pivotGrid.instance.getDataSource().reload();\r\n      this.popupVisible = false;\r\n    \/\/} else {\r\n      \/\/Poruka o gre\u0161ci\r\n    \/\/}\r\n  }\r\n\r\n  spremiKolicinuEnter(event, data){\r\n    \/\/ this.slanjeKolicine(data.key.nas_ID, e.value);\r\n      \/\/Slanje podataka na API\r\n      \/\/if(res.success == true){\r\n        this.dataStore.update(data.key, {\r\n          'poslovnica_ID': data.data.poslovnica_ID,\r\n          'poslovnica_naziv': data.data.poslovnica_naziv,\r\n          'artikl_ar_ID': data.data.artikl_ar_ID,\r\n          'artikl_naziv': data.data.artikl_naziv,\r\n          'artikl_sifra': data.data.artikl_sifra,\r\n          'narudzba_isporucenakolicina': this.isporucenakolicina,\r\n          'narudzba_narucenakolicina': data.data.narudzba_narucenakolicina,\r\n          'narudzba_ID': data.data.narudzba_ID\r\n        });\r\n        this.isporucenakolicina = null;\r\n        this.pivotGrid.instance.getDataSource().reload();\r\n        this.popupVisible = false;\r\n      \/\/} else {\r\n        \/\/Poruka o gre\u0161ci\r\n      \/\/}\r\n  }<\/pre>\n
    Uz to, kada se popup<\/em> otvori polje za unos isporu\u010dene koli\u010dine nije fokusirano i prije unosa potrebno je na njega kliknuti. To tako\u0111er nije prakti\u010dno. Ovo se vrlo lako rije\u0161i kroz onShown<\/a><\/em> funkciju.<\/p>\n
    <dx-popup\r\n        [closeOnOutsideClick]=\"false\"\r\n        [showCloseButton]=\"true\"\r\n        [(visible)]=\"popupVisible\"\r\n        [title]=\"popupTitle\"\r\n        [width]=\"650\"\r\n        [height]=\"200\"\r\n        (onShown)=\"onPopupShown($event)\"\r\n        ><\/pre>\n
    onPopupShown(e) {\r\n    let a = this;\r\n    setTimeout(() => {\r\n      a.inputName.instance.focus();\r\n    }, 100);\r\n}<\/pre>\n
    Na kraju to izgleda ovako:<\/p>\n
    \"PivotGrid<\/a><\/p>\n
    Zaklju\u010dak<\/h2>\n
    Naravno, ovo je samo dio mogu\u0107nosti koje DevExtreme Pivot Grid<\/em> ima, ali dovoljno da pohvatate osnove i shvatite na koji na\u010din funkcionira.<\/p>\n","protected":false},"excerpt":{"rendered":"
    U ovom \u0107u blog postu pokazati kako implementirati DevExtreme Pivot Grid UI komponentu u Angular projekt. Ona omogu\u0107ava prikaz i analizu vi\u0161edimenzionalnih podataka iz lokalne pohrane ili OLAP kocke. Fokusirat \u0107u se na prikaz podataka prema specifi\u010dnim parameterima te na\u010dinu na koji te podatke ure\u0111ivati jer Pivot Grid nativno ne nudi takvu mogu\u0107nost. Pivot Grid … Nastavi \u010ditati DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":13031,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[566,351],"tags":[471,672,662,663],"class_list":["post-12924","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-razvoj","tag-angular","tag-devexpress","tag-devextreme","tag-pivot-grid"],"yoast_head":"\nDevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka - Tomislav Stankovi\u0107<\/title>\n<meta name=\"description\" content=\"DevExtreme Pivot Grid UI komponenta u Angular omogu\u0107ava prikaz i analizu vi\u0161edimenzionalnih podataka iz lokalne pohrane ili OLAP kocke.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"DevExtreme Pivot Grid UI komponenta u Angular omogu\u0107ava prikaz i analizu vi\u0161edimenzionalnih podataka iz lokalne pohrane ili OLAP kocke.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-12T20:20:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2021\/02\/DevExtreme-Angular-PivotGrid.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"953\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka\",\"datePublished\":\"2021-03-12T20:20:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/\"},\"wordCount\":1034,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/DevExtreme-Angular-PivotGrid.jpg\",\"keywords\":[\"Angular\",\"DevExpress\",\"DevExtreme\",\"Pivot Grid\"],\"articleSection\":[\"Frontend\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/\",\"name\":\"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/DevExtreme-Angular-PivotGrid.jpg\",\"datePublished\":\"2021-03-12T20:20:53+00:00\",\"description\":\"DevExtreme Pivot Grid UI komponenta u Angular omogu\u0107ava prikaz i analizu vi\u0161edimenzionalnih podataka iz lokalne pohrane ili OLAP kocke.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/DevExtreme-Angular-PivotGrid.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/DevExtreme-Angular-PivotGrid.jpg\",\"width\":953,\"height\":510,\"caption\":\"DevExtreme Pivot Grid & Angular\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/devextreme-pivot-grid-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka - Tomislav Stankovi\u0107","description":"DevExtreme Pivot Grid UI komponenta u Angular omogu\u0107ava prikaz i analizu vi\u0161edimenzionalnih podataka iz lokalne pohrane ili OLAP kocke.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/","og_locale":"hr_HR","og_type":"article","og_title":"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka - Tomislav Stankovi\u0107","og_description":"DevExtreme Pivot Grid UI komponenta u Angular omogu\u0107ava prikaz i analizu vi\u0161edimenzionalnih podataka iz lokalne pohrane ili OLAP kocke.","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2021-03-12T20:20:53+00:00","og_image":[{"width":953,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2021\/02\/DevExtreme-Angular-PivotGrid.jpg","type":"image\/jpeg"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"11 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka","datePublished":"2021-03-12T20:20:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/"},"wordCount":1034,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2021\/02\/DevExtreme-Angular-PivotGrid.jpg","keywords":["Angular","DevExpress","DevExtreme","Pivot Grid"],"articleSection":["Frontend","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/","name":"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2021\/02\/DevExtreme-Angular-PivotGrid.jpg","datePublished":"2021-03-12T20:20:53+00:00","description":"DevExtreme Pivot Grid UI komponenta u Angular omogu\u0107ava prikaz i analizu vi\u0161edimenzionalnih podataka iz lokalne pohrane ili OLAP kocke.","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2021\/02\/DevExtreme-Angular-PivotGrid.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2021\/02\/DevExtreme-Angular-PivotGrid.jpg","width":953,"height":510,"caption":"DevExtreme Pivot Grid & Angular"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/devextreme-pivot-grid-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"DevExtreme Pivot Grid & Angular: prikaz i analiza vi\u0161edimenzionalnih podataka"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/12924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=12924"}],"version-history":[{"count":178,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/12924\/revisions"}],"predecessor-version":[{"id":13463,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/12924\/revisions\/13463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/13031"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=12924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=12924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=12924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}