{"id":481088,"date":"2026-05-26T11:43:21","date_gmt":"2026-05-26T11:43:21","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=481088"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=481088","title":{"rendered":"\u041e\u0434\u0438\u043d \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0447\u0442\u043e\u0431 \u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435\u043c\u0438, \u043e\u0434\u0438\u043d \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0447\u0442\u043e\u0431 \u0432\u0441\u0435\u0445 \u043d\u0430\u0439\u0442\u0438: 1 \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430, \u0440\u0430\u0437\u043d\u044b\u0435 BI"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7fe\/b96\/614\/7feb96614ede4d671f7ca4a647526d2d.png\" width=\"1280\" height=\"720\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/7fe\/b96\/614\/7feb96614ede4d671f7ca4a647526d2d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7fe\/b96\/614\/7feb96614ede4d671f7ca4a647526d2d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u0433\u043e\u0440\u044c \u041a\u0440\u0430\u0441\u0430\u0432\u0438\u043d, \u0438 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 VK. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c, \u043a\u0430\u043a \u043c\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e BI-\u0441\u0438\u0441\u0442\u0435\u043c (DataLens, Superset \u0438 Redash) \u043f\u043e\u0434 \u043e\u0434\u043d\u0438\u043c UI, \u043a\u0430\u043a \u0440\u0435\u0448\u0430\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043e SPA-\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439, \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u0442\u0435\u043a\u0430\u043c\u0438, \u043d\u0430 \u043a\u0430\u043a\u0438\u0435 \u0433\u0440\u0430\u0431\u043b\u0438 \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b\u0438, \u0438 \u0447\u0442\u043e \u043d\u0430\u043c, \u0432 \u0438\u0442\u043e\u0433\u0435, \u044d\u0442\u043e \u0434\u0430\u043b\u043e. \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0445\u043e\u0436\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<h2>\u041a\u0430\u043a \u0432\u0441\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u043e\u0441\u044c\u2026<\/h2>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u043a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438\u043b\u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u044e\u043d\u0438\u0442 VK \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u043b\u0438 BI-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438. \u041a\u043e\u043c\u0430\u043d\u0434\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0432\u043d\u0435\u0434\u0440\u044f\u043b\u0438 open-source Superset, Redash, DataLens. \u041a\u0430\u0436\u0434\u044b\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u044e\u043d\u0438\u0442 \u0441\u0430\u043c \u0441\u0442\u0430\u0432\u0438\u043b BI, \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u044b\u0432\u0430\u043b \u0441 \u043e\u0442\u0434\u0435\u043b\u043e\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u044f\u0446\u0438\u0439 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043e\u0442\u0447\u0451\u0442\u043e\u0432 \u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432. \u0412\u0441\u0435 \u044d\u0442\u0438 BI-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0438 \u043f\u043e\u0434 \u0441\u0435\u0431\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u0438\u0445 \u0438 \u0442\u0435\u0445 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0440\u0435\u0434\u044b \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u043b\u0438\u044f\u043d\u0438\u0439 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u044f\u0446\u0438\u0438 \u043e\u0442 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0441\u0438\u0441\u0442\u0435\u043c: Superset, Redash \u0438 DataLens.<\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0438 \u0436\u0438\u0442\u044c \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u043e \u043d\u0430 \u0442\u0440\u0451\u0445 BI-\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445? \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u044f\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438: \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0440\u043e\u043b\u0438, \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0438\u0437\u043d\u0435\u0441-\u044e\u043d\u0438\u0442\u043e\u0432, \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430\u043c\u0438 \u0438 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u0435 \u043e\u0442\u0447\u0451\u0442\u044b \u043f\u043e \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438. \u041e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0430\u0448\u0431\u043e\u0440\u0434 \u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u2014 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0432 \u0442\u0440\u0451\u0445 BI, \u0438\u0437\u2011\u0437\u0430 \u0447\u0435\u0433\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0438 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0430 \u0432 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445.\u00a0<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0443 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430, \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0440\u043e\u043b\u0438 \u0432 BI-\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445, \u0440\u043e\u043b\u0438 \u043d\u0430 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0435, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0434\u043e\u0431\u0440\u0435\u043d\u0438\u0435 \u043e\u0442 \u0418\u0411 \u0438 \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0430 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0432\u043e\u0440\u043a\u0431\u0443\u043a \u2014 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u0434\u0430\u0442\u0430\u0441\u0435\u0442\u044b, \u0447\u0430\u0440\u0442\u044b \u0438 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u044b. \u0421\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430 \u043c\u043e\u0433\u0443\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430. \u0422\u0435\u0440\u043c\u0438\u043d \u043f\u0440\u0438\u0448\u0451\u043b \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 DataLens.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0446\u0435\u043b\u0435\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u0442 \u043e\u0441\u043d\u043e\u0432\u043e\u0439 \u0434\u043b\u044f \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445. \u0412\u044b\u0431\u043e\u0440 \u0441\u0442\u043e\u044f\u043b \u043c\u0435\u0436\u0434\u0443 DataLens \u0438 Superset. DataLens \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432, \u043d\u043e \u043c\u044b \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u0434\u0432\u0443\u0445 \u0433\u043b\u0430\u0432\u043d\u044b\u0445.\u00a0<\/p>\n<ul>\n<li>\n<p>DataLens \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 no-code \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u043e\u0432.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 Superset \u0441 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u043c \u0440\u0430\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u0432 \u043f\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c \u0438 \u0447\u0435\u0440\u0435\u0437 \u0438\u043c\u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0446\u0438\u044e, DataLens \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 RBAC (\u043c\u043e\u0434\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u043e\u043b\u0435\u0439) \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c DataLens \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u0443, \u0442\u043e \u043a\u0430\u043a \u0436\u0435 \u043d\u0430\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 BI-\u0441\u0438\u0441\u0442\u0435\u043c\u044b? \u041a\u0430\u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u044b, \u043d\u0430\u043c \u0432\u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u0430\u0436\u043d\u0430 UI-\u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u0430\u0436\u043d\u043e \u043e\u0446\u0435\u043d\u0438\u0442\u044c <s>\u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0441\u043b\u043e\u0439<\/s>: UX, \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0442\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0433\u043a\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<h2>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u044a\u044f\u0442\u043d\u043e\u0435<\/h2>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0432\u0443\u0445 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c, \u0441\u0440\u0430\u0432\u043d\u0438\u043c \u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u0447\u0442\u043e-\u0442\u043e \u043e\u0431\u0449\u0435\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.<\/p>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432 DataLens, \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f united-storage (\u0434\u0430\u043b\u0435\u0435 \u2014 US) \u0432 \u0432\u0438\u0434\u0435 JSON-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041d\u0438\u0436\u0435 \u2014 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"json\">{  \"shared\": {    \"type\": \"datalens\",                 \/\/ \u0442\u0438\u043f\/\u0444\u043e\u0440\u043c\u0430\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438    \"version\": \"10\",                    \/\/ \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0445\u0435\u043c\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0430    \"visualization\": {      \"id\": \"flatTable\",      \"type\": \"table\"                   \/\/ \u0442\u0438\u043f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u0442\u0430\u0431\u043b\u0438\u0446\u0430\/\u0433\u0440\u0430\u0444\u0438\u043a \u0438 \u0442. \u043f.)    },    \"datasetsIds\": [\"&lt;dataset-id&gt;\"],    \/\/ \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u043c\/\u0434\u0430\u0442\u0430\u0441\u0435\u0442\u0430\u043c    \"filters\": [\/* ... *\/],             \/\/ \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u043a \u0434\u0430\u043d\u043d\u044b\u043c    \"sort\": [\/* ... *\/],                \/\/ \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430    \"extraSettings\": {                  \/\/ \u043f\u0440\u043e\u0447\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u0438\u043c\u0438\u0442\u044b\/\u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f)      \"pagination\": \"on\",      \"limit\": 100    }  }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0447\u0430\u0440\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 POST-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \/api\/run, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f ID \u0447\u0430\u0440\u0442\u0430 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432). \u0421\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0438\u0437 US, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 (\u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0438\u0441 datalens-data-api) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432 \u043e\u0442\u0432\u0435\u0442\u0435 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0433\u043e\u0442\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e Highcharts (\u043d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f DataLens \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 d3.js), \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f, \u0432 Superset \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0447\u0430\u0440\u0442\u0430 \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a QueryContext \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f POST-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u043d\u0430 \/api\/v1\/chart\/data \u0447\u0435\u0440\u0435\u0437 SupersetClient (\u043e\u0431\u0451\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 <code>fetch<\/code> \u0441 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043e\u0448\u0438\u0431\u043e\u043a).\u00a0<\/p>\n<p>\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0435\u043b\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"json\">{    datasource: { id, type },    force: false,    queries: [QueryObject],  \/\/ \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u044c\u044e query-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432    result_format: 'json',    result_type: 'full',  }<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 Superset \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0431\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445: \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 SQL (\u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430), \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u043b\u043e\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0411\u0414 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Superset \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043d\u0430 ECharts (\u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432).<\/p>\n<p>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b Superset \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 DataLens, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 SQL-first \u043f\u043e\u0434\u0445\u043e\u0434\u0435. \u0414\u0430\u0448\u0431\u043e\u0440\u0434\u044b, \u0447\u0430\u0440\u0442\u044b, \u0434\u0430\u0442\u0430\u0441\u0435\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u043f\u043b\u043e\u0441\u043a\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0430\u043d\u043d\u044b\u043c. DataLens, \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430.<\/p>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 React, React Router, \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430: DataLens UI-node \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0439 HTML, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0438\u0434\u0451\u0442 \u0447\u0438\u0441\u0442\u043e\u0435 SPA. Superset \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430: \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0447\u0435\u0440\u0435\u0437 Flask, \u0430 \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a SPA \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u043e\u043c \u0447\u0435\u0440\u0435\u0437 React Router. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432: \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b (ANTD \u0438 Gravity-UI) \u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 Redux, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u0434\u0430 \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u0432 \u0438 \u043d\u0435 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043a\u0443\u0447\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435.<\/p>\n<h2>\u0420\u0435\u0448\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041e\u0442\u0431\u0440\u043e\u0441\u0438\u0432 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0435\u0439, \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 iframe \u043a\u0430\u043a \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c\u0438 \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c:\u00a0<\/p>\n<ul>\n<li>\n<p>\u041d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043a \u0435\u0434\u0438\u043d\u043e\u043c\u0443 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0443.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <code>window<\/code>, <code>localStorage<\/code> \u0438 <code>sessionStorage<\/code>. \u041f\u0440\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430\u043c (\u043a\u043b\u044e\u0447\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b). Iframe \u0434\u0430\u0451\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u00ab\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443\u00bb, \u0447\u0442\u043e \u0441\u043d\u0438\u043c\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0443 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443; iframe \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0438 \u043d\u0435 \u00ab\u0441\u043a\u043b\u0435\u0438\u0432\u0430\u0442\u044c\u00bb \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 SPA.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u043f\u043e\u0448\u043b\u0438 \u043f\u043e \u043f\u0443\u0442\u0438:<\/p>\n<ol>\n<li>\n<p>\u041c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u2014 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u043a\u0430: \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 \u0432\u0435\u0440\u0441\u0438\u0439, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0448\u0430\u0440\u0438\u043d\u0433\u0430, \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430.\u00a0<\/p>\n<\/li>\n<li>\n<p>Web Components + Shadow DOM \u2014 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0435\u0448\u0430\u044e\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e UI, \u043d\u043e \u043d\u0435 \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u044e\u0442 JS-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435: \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 window \u0438 storage-\u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f.\u00a0<\/p>\n<\/li>\n<\/ol>\n<p>\u0421\u0430\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u043e\u0431\u0451\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 \u0442\u0435\u0433\u043e\u043c <code>iframe<\/code> \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c URL-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043e\u0434\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e.\u00a0<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0438 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b Supeset. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u043b\u043e\u0436\u0438\u043c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\u043c \u0432 Superset-\u0441\u0438\u0441\u0442\u0435\u043c\u0435: \u0437\u0430\u0432\u0435\u0434\u0451\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043b\u044f \u043c\u0430\u043f\u043f\u0438\u043d\u0433\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0441 ID \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u043e\u0432, \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0438.\u00a0<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8e3\/03b\/08f\/8e303b08f7d9b8b916a8ce52ff6560d6.jpeg\" alt=\"\u0421\u0445\u0435\u043c\u0430 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u043e\u043c \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\" title=\"\u0421\u0445\u0435\u043c\u0430 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u043e\u043c \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\" width=\"1280\" height=\"753\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/8e3\/03b\/08f\/8e303b08f7d9b8b916a8ce52ff6560d6.jpeg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8e3\/03b\/08f\/8e303b08f7d9b8b916a8ce52ff6560d6.jpeg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0445\u0435\u043c\u0430 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u043e\u043c \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0430 \u0440\u0430\u0437\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\u043c \u043e\u0442\u0432\u0435\u0447\u0430\u043b \u043a\u043e\u043b\u043b\u0435\u0433\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043b\u044c\u0448\u0435 \u0434\u0430\u043c \u043b\u0438\u0448\u044c \u0432\u0435\u0440\u0445\u043d\u0435\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0431\u0435\u0437 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u043e\u0440\u043a\u0431\u0443\u043a \u2014 \u044d\u0442\u043e \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0430 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0438 \u043f\u043e \u0441\u0432\u044f\u0437\u043d\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 (\u0434\u0430\u0448\u0431\u043e\u0440\u0434, \u0447\u0430\u0440\u0442, \u0434\u0430\u0442\u0430\u0441\u0435\u0442, \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435) \u0438 \u0441\u0447\u0438\u0442\u0430\u043b\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0433\u0440\u0430\u0444 \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u043e\u0440\u043a\u0431\u0443\u043a. \u0415\u0441\u043b\u0438 \u0433\u0440\u0430\u0444 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u043e\u0431\u0438\u043b\u0438 \u0435\u0433\u043e \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u043d\u044c\u0448\u0438\u0445.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u0440\u0443 \u044d\u043d\u0434\u043f\u043e\u0439\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0441\u0430\u043c\u044b\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443 \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430. \u0418 \u0432\u043e\u0442 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0440\u043a\u0431\u0443\u043a \u0434\u043b\u044f \u0441\u0443\u043f\u0435\u0440\u0441\u0435\u0442\u0430.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/352\/856\/719\/35285671924642a5c72d6fc10d2c029a.png\" alt=\"UI \u0434\u043b\u044f Superset \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\" title=\"UI \u0434\u043b\u044f Superset \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\" width=\"1970\" height=\"954\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/352\/856\/719\/35285671924642a5c72d6fc10d2c029a.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/352\/856\/719\/35285671924642a5c72d6fc10d2c029a.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>UI \u0434\u043b\u044f Superset \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u043e\u0443\u0442 <a href=\"https:\/\/onebi\/sunset\/*%60\"><code>https:\/\/onebi\/sunset\/*<\/code><\/a> \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 Superset \u0447\u0435\u0440\u0435\u0437 iframe. (\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: <strong>sunset <\/strong>\u044d\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f Superset). \u041d\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ce8\/821\/fcc\/ce8821fccfc22637b5650535ae93eb2e.png\" alt=\"\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u0430\u0448\u0431\u043e\u0440\u0434 Superset \u0432\u043d\u0443\u0442\u0440\u0438 DataLens\" title=\"\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u0430\u0448\u0431\u043e\u0440\u0434 Superset \u0432\u043d\u0443\u0442\u0440\u0438 DataLens\" width=\"2976\" height=\"1164\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/ce8\/821\/fcc\/ce8821fccfc22637b5650535ae93eb2e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ce8\/821\/fcc\/ce8821fccfc22637b5650535ae93eb2e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u0430\u0448\u0431\u043e\u0440\u0434 Superset \u0432\u043d\u0443\u0442\u0440\u0438 DataLens<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0437\u0430\u0432\u0435\u0434\u0451\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f UI, \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c CSS-\u043a\u043b\u0430\u0441\u0441\u044b \u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 iframe.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/256\/04d\/559\/25604d55991fba7feefa30545b1de6c4.jpeg\" alt=\"\u0421\u0445\u0435\u043c\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f iframe \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c\" title=\"\u0421\u0445\u0435\u043c\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f iframe \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c\" width=\"1280\" height=\"334\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/256\/04d\/559\/25604d55991fba7feefa30545b1de6c4.jpeg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/256\/04d\/559\/25604d55991fba7feefa30545b1de6c4.jpeg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0445\u0435\u043c\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f iframe \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0440\u0430\u0431\u043e\u0442\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0443\u043a\u0442, \u043d\u043e \u043d\u0435\u0442. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u0438\u0441\u044c.<\/p>\n<h3>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 i18n \u0438 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u044f<\/h3>\n<p>\u0423 Superset \u0438 DataLens \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430, \u0430 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b (\u0441\u0432\u0435\u0442\u043b\u0430\u044f, \u0442\u0451\u043c\u043d\u0430\u044f, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u0430\u044f).<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430: Post Message.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u0430\u043d\u0430\u043b\u0430 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f (\u0430\u043d\u0430\u043b\u043e\u0433 hand-shake) shell-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0435 \u0442\u0435\u043c\u044b \u0438 \u044f\u0437\u044b\u043a\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0430 \u043e\u043d\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u044d\u0442\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 embedded app. \u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0443 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:\u00a0<\/p>\n<ul>\n<li>\n<p>AppManager \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 iframe;<\/p>\n<\/li>\n<li>\n<p>AppManager \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 embedded app \u0447\u0435\u0440\u0435\u0437 handshake;<\/p>\n<\/li>\n<li>\n<p>AppManager \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u0442\u0435\u043c\u0430 \u0438 \u044f\u0437\u044b\u043a);<\/p>\n<\/li>\n<li>\n<p>AppManager \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 <code>SettingsPayload<\/code>.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/969\/6cc\/229\/9696cc229f96a7206eaa8f3fea049c19.jpeg\" alt=\"\u0421\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b AppManager \u043a\u043b\u0430\u0441\u0441\u0430\" title=\"\u0421\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b AppManager \u043a\u043b\u0430\u0441\u0441\u0430\" width=\"1280\" height=\"1118\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/969\/6cc\/229\/9696cc229f96a7206eaa8f3fea049c19.jpeg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/969\/6cc\/229\/9696cc229f96a7206eaa8f3fea049c19.jpeg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b AppManager \u043a\u043b\u0430\u0441\u0441\u0430<\/figcaption><\/div>\n<\/figure>\n<h2>\u0421\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0438\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443: \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 iframe \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u043c \u0432 iframe:<\/p>\n<ul>\n<li>\n<p>URL \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 iframe.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u043e \u043f\u0440\u044f\u043c\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435: \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432 iframe \u043d\u0443\u0436\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043e\u043a Back \u0438\u043b\u0438 Forward \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 iframe.<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0430\u043b\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <code>location<\/code> \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 <code>PostMessage<\/code> \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435, \u043f\u043e\u0434\u043c\u0435\u0448\u0438\u0432\u0430\u044f \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u0443\u0442\u044c:<\/p>\n<p><a href=\"https:\/\/onebi.ru\/sunset\/XXX%60\"><code>https:\/\/onebi.ru\/sunset\/XXX<\/code><\/a>, \u0433\u0434\u0435 XXX \u2014 \u044d\u0442\u043e \u043f\u0443\u0442\u044c \u0434\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>93biyl2lzdjmt\/superset\/dashboard\/8980<\/code><strong>. <\/strong>\u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 <\/p>\n<p><a href=\"https:\/\/onebi.ru\/sunset\/93biyl2lzdjmt\/superset\/dashboard\/8980%60\"><code>https:\/\/onebi.ru\/sunset\/93biyl2lzdjmt\/superset\/dashboard\/8980<\/code><\/a>.<strong> <\/strong>\u0421 \u0434\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0441\u043a\u043e\u043c\u044b\u0439 \u043f\u0443\u0442\u044c \u0438\u0437 URL \u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 iframe \u0434\u043e \u043d\u0443\u0436\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<pre><code class=\"xml\">&lt;iframe src=\u2019https:\/\/superset.com\/93biyl2lzdjmt\/superset\/dashboard\/8980?workbookId=93biyl2lzdjmt\u2019<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u044d\u0442\u043e \u043c\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/093\/f8d\/145\/093f8d145c8b8eb9c160cece5937ed0c.jpeg\" alt=\"\u0421\u0445\u0435\u043c\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430\" title=\"\u0421\u0445\u0435\u043c\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430\" width=\"1280\" height=\"967\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/093\/f8d\/145\/093f8d145c8b8eb9c160cece5937ed0c.jpeg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/093\/f8d\/145\/093f8d145c8b8eb9c160cece5937ed0c.jpeg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0445\u0435\u043c\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430<\/figcaption><\/div>\n<\/figure>\n<p><code>AppManager<\/code> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c <code>PatchedHistory<\/code>, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 monkey\u2011patch \u043c\u0435\u0442\u043e\u0434\u043e\u0432 History API, \u0438 \u043c\u0435\u0442\u043e\u0434 <code>handleHistoryChanged<\/code>. \u041c\u0435\u0442\u043e\u0434 <code>handleHistoryChanged<\/code> \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f history \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0438 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0432\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 iframe \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0412 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 <code>handleHistoryChanged<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 <code>channelWrapper<\/code> \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438\u0437 iframe \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u0438\u0445 \u043a history \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e URL \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fe1\/ace\/ab9\/fe1aceab95ec39ab6f7b7e56b55f1169.jpeg\" alt=\"\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430\" title=\"\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430\" width=\"1280\" height=\"954\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/fe1\/ace\/ab9\/fe1aceab95ec39ab6f7b7e56b55f1169.jpeg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fe1\/ace\/ab9\/fe1aceab95ec39ab6f7b7e56b55f1169.jpeg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430<\/figcaption><\/div>\n<\/figure>\n<h3>\u041d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u043a\u043b\u0430\u0434\u043e\u043a<\/h3>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u0438\u0448\u0451\u043b \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0443: \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u043b\u043e\u0441\u044c \u0438\u043c\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0443\u0436\u0435 \u043e\u0442\u043b\u0430\u0436\u0435\u043d, \u0442\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0447\u0435\u0440\u0435\u0437 <code>MutationObserver<\/code> \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043a\u0430\u043d\u0430\u043b\u0443 \u0441\u0432\u044f\u0437\u0438.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f45\/362\/8e0\/f453628e0cffcef3e5c9ebaaf6bb000a.jpeg\" alt=\"\u0421\u0445\u0435\u043c\u0430 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438\" title=\"\u0421\u0445\u0435\u043c\u0430 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438\" width=\"866\" height=\"1280\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/f45\/362\/8e0\/f453628e0cffcef3e5c9ebaaf6bb000a.jpeg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f45\/362\/8e0\/f453628e0cffcef3e5c9ebaaf6bb000a.jpeg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0445\u0435\u043c\u0430 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 markdown<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0430\u043a\u043e\u0433\u043e \u0447\u0443\u0434\u043e\u0432\u0438\u0449\u0430 \u0424\u0440\u0430\u043d\u043a\u0435\u043d\u0448\u0442\u0435\u0439\u043d\u0430 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441 \u043d\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439: \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e BI-\u0441\u0438\u0441\u0442\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 markdown-\u0432\u0438\u0434\u0436\u0435\u0442\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043b\u044e\u0431\u044f\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b: \u0442\u0430\u0441\u043a\u0438 \u0432 Jira, \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 Confluence \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u041d\u043e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0441\u0430\u0439\u0442 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432 iframe, \u0430 \u043d\u0435 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0420\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0441\u0441\u044b\u043b\u043a\u0438, \u043e\u0442\u043c\u0435\u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0447\u0435\u0440\u0435\u0437 <code>preventDefault<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 <code>PostMessage<\/code> \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0436\u0435 \u043e\u0442\u043a\u0440\u043e\u0435\u0442 \u0435\u0433\u043e.<\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0431 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 iframe. \u0422\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0430\u0442\u044c \u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438. \u041f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430,\u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 iframe, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0438 \u0438\u0445 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0431\u043e\u0433\u0430\u0449\u0435\u043d\u0438\u044f \u0438 \u0443\u0436\u0435 \u043e\u0442\u0442\u0443\u0434\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u0441\u0435\u0440\u0432\u0438\u0441 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438.<\/p>\n<h3>\u041e\u0448\u0438\u0431\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0430<\/h3>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0430\u0441\u044c \u0432 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u043e\u0448\u0438\u0431\u043e\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0432\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u0438 \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442\u0435. \u041f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u043f\u0440\u0430\u0432 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c Superset \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0432\u043e\u0440\u043a\u0431\u0443\u043a DataLens \u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439 \u043f\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u043f\u0440\u0430\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 iframe, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0432\u0438\u0434\u0438\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430: \u0432\u043e\u0440\u043a\u0431\u0443\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u0435\u0439\u0441\u0430, \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0448\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"typescript\">const FORBIDDEN_PREFIXES = ['\/workbooks\/', '\/collections'];export function useOpenAsIframeProtection() {   useEffect(() =&gt; {       const isForbidded = FORBIDDEN_PREFIXES.some((prefix) =&gt;           window.location.pathname.startsWith(prefix),       );       if (window.top &amp;&amp; isIframe() &amp;&amp; isForbidded) {           window.top.location = window.location;       }   }, []);}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0431\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 (IDM), \u0434\u0435\u0442\u0430\u043b\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 SSO \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0432\u0435\u0440\u044f\u044e\u0442 \u043e\u0434\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0443, \u0430 iframe \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0443\u044e \u0441\u0435\u0441\u0441\u0438\u044e.<\/p>\n<h3>\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0443\u0441\u043f\u0435\u0445\u0438 \u0438 \u0435\u0434\u0438\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 Superset \u043c\u044b \u043f\u0440\u0438\u043d\u044f\u043b\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c Redash \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u043c \u0434\u0430\u043d\u043d\u044b\u0445. \u0422\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0443\u0436\u0435 \u0431\u044b\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u0432 Redash.<\/p>\n<p>\u0414\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0447\u0442\u043e\u0431\u044b:<\/p>\n<ul>\n<li>\n<p>\u043d\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043d\u043e\u0432\u044b\u0435 \u0444\u0438\u0447\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043b\u0438\u0448\u044c \u043f\u043e\u0434\u043d\u044f\u0432 \u0432\u0435\u0440\u0441\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 package.json.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5a7\/755\/0f2\/5a77550f2ea3a331e23300af2812df0d.jpeg\" alt=\"\u0421\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439\" title=\"\u0421\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439\" width=\"1280\" height=\"649\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/5a7\/755\/0f2\/5a77550f2ea3a331e23300af2812df0d.jpeg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5a7\/755\/0f2\/5a77550f2ea3a331e23300af2812df0d.jpeg 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u044b\u0448\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 \u0441\u0445\u0435\u043c\u0430 \u0434\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0412 \u0435\u0451 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0445\u043e\u0434\u0438\u0442:<\/p>\n<ol>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0430\u043d\u0430\u043b\u0430 \u0441\u0432\u044f\u0437\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 <code>PostMessage<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 History Stack \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 (\u0448\u0430\u0433 \u043d\u0430\u0437\u0430\u0434 \u0438\u043b\u0438 \u0432\u043f\u0435\u0440\u0451\u0434 \u043f\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438) \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 document title.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u043c\u0435\u0436\u0434\u0443 shell \u0438 embedded \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u0434<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"typescript\">\/* eslint-disable @typescript-eslint\/member-ordering *\/import type {Theme} from '@gravity-ui\/uikit';import {Disposer} from 'hz\/shared\/libs\/disposer';import {PatchedHistory} from 'hz\/shared\/libs\/patched-history';import {getCurrentUrl, parseAppUrl, stripRoutePrefix} from 'hz\/shared\/libs\/url-parser';import logger from 'libs\/logger';import {Language} from 'shared';import {isEqual, withoutHost} from 'ufo';import {DL} from 'ui';import {type DLStore, getStore} from 'ui\/store';import {type TAnalyticsPayload} from '.\/analytics.model';import {ChannelWrapper} from '.\/channel-wrapper';import {metadataEventPayloadSchema} from '.\/metadata.model';import {Metadata, type TMetadataEventSchemaPayload} from '.\/metadata.model';import {restoreAppManager, setChannelStatus, setController, setIframeStatus} from '.\/store';import {CHANNEL_STATUS, type ChildApp, IFRAME_STATUS} from '.\/type';type TNavigate = {    url: string;    replace?: boolean;    openInNewWindow?: boolean;    state?: object;};export class AppManager {    private history: PatchedHistory;    private disposer = new Disposer();    private store: DLStore;    private app: ChildApp;    private metadata: Metadata&lt;TMetadataEventSchemaPayload&gt;;    private id = 'app-manager';    static current: Maybe&lt;AppManager&gt;;    channelWrapper = ChannelWrapper;    private checkConnectionTimer: NodeJS.Timeout;    private channelInitialized = false;    \/\/ \u041a\u044d\u0448 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439    private lastUserSettings: {theme: Theme; lang?: Language};    \/\/ Analytics subscribers    private analyticsSubscribers: Set&lt;(data: TAnalyticsPayload) =&gt; void&gt; = new Set();    \/\/ \u0428\u0430\u0433 1.5: \u0427\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442?    \/\/ \u0417\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0441\u0432\u043e\u0438\u043c \u043f\u0430\u0442\u0447\u0435\u043c;    \/\/ \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e ifame \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d, \u0442\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u0430\u043d\u0430\u043b\u0430 (ChannelWrapper)    \/\/ \u0414\u0435\u043b\u0430\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c handleHistoryChanged    \/\/ \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u044f\u0437\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0441\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u0438 \u044f\u0437\u044b\u043a)    \/\/ \u041d\u0430 \u044d\u0442\u043e\u043c \u0441\u0447\u0438\u0442\u0430\u0435\u043c, \u0447\u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430    constructor(app: ChildApp) {        this.app = app;        this.store = getStore();        this.history = new PatchedHistory();        this.metadata = new Metadata(metadataEventPayloadSchema);        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u044d\u0448 \u0442\u0435\u043a\u0443\u0449\u0438\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438        this.lastUserSettings = this.getCurrentUserSettings();        this.history.subscribe((data) =&gt;            logger.log('History changed', {                data,                state: window.history.state ?? {},                url: getCurrentUrl(),            }),        );        let previousIframeStatus = this.store.getState().appManager.iframeStatus;        \/\/ \u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 1: \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f iframeStatus \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u043d\u0430\u043b\u0430        const unsubIframeStatus = this.store.subscribe(() =&gt; {            const currentState = this.store.getState().appManager;            const currentIframeStatus = currentState.iframeStatus;            if (                currentIframeStatus === IFRAME_STATUS.RENDERED &amp;&amp;                previousIframeStatus === IFRAME_STATUS.NOT_EXIST            ) {                logger.log('Setup PostMessage communication');                \/\/ Update previousIframeStatus before calling initChannelWrapper to prevent re-entrancy                previousIframeStatus = currentIframeStatus;                this.initChannelWrapper();            }            previousIframeStatus = currentIframeStatus;        });        this.disposer.add(this.history.subscribe(this.handleHistoryChanged));        this.disposer.add(unsubIframeStatus);        let previousChannelStatus = this.store.getState().appManager.channelStatus;        \/\/ \u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 2: \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a        const unsubChannelStatus = this.store.subscribe(() =&gt; {            const currentChannelStatus = this.store.getState().appManager.channelStatus;            \/\/ \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f            if (                currentChannelStatus === CHANNEL_STATUS.LISTEN &amp;&amp;                previousChannelStatus === CHANNEL_STATUS.IDLE            ) {                logger.log('Channel connected, sending initial appSettings');                this.sendCurrentAppSettings();            }            previousChannelStatus = currentChannelStatus;        });        \/\/ \u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 3: \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f user store (\u0442\u0435\u043c\u0430 \u0438 \u044f\u0437\u044b\u043a)        const unsubUserStore = this.store.subscribe(() =&gt; {            const currentUserSettings = this.getCurrentUserSettings();            this.handleUserSettingsChange(currentUserSettings);        });        this.disposer.add(unsubChannelStatus);        this.disposer.add(unsubUserStore);        this.checkConnectionTimer = setTimeout(() =&gt; {            if (this.store.getState().appManager.iframeStatus !== IFRAME_STATUS.RENDERED) {                this.store.dispatch(setIframeStatus(IFRAME_STATUS.NOT_LOADED));            }        }, app.loadTime);        this.disposer.add(() =&gt; {            clearTimeout(this.checkConnectionTimer!);        });    }    dispose() {        this.disposer.dispose();        this.history.dispose();        this.metadata.dispose();    }    \/\/ \u0428\u0430\u0433 1: \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440, \u043f\u043e\u0441\u043b\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 constructor,    \/\/ \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c constructor    static init(app: ChildApp) {        if (this.current) {            return this.current;        }        logger.log('Init app manager');        this.current = new AppManager(app);        return AppManager.current;    }    \/\/ \u0421\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435: \u0447\u0435\u0440\u0442\u043e\u0432 react \u0438 \u0435\u0433\u043e rereder \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0432 dev mode +    \/\/ \u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0443\u0442\u0430\u043c\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0430\u0437\u0440\u044b\u0432 channel, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u043e \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438!!!!    static destroy() {        logger.log('Destroy app manager');        this.current?.channelWrapper.destroy();        this.current?.dispose();        getStore().dispatch(restoreAppManager());        this.current = undefined;    }    \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u0437 user store    private getCurrentUserSettings(): {theme: Theme; lang?: Language} {        const userState = this.store.getState().user;        return {            theme: userState.theme,            lang: DL.USER_LANG === Language.En ? Language.En : Language.Ru,        };    }    \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f user settings    private handleUserSettingsChange(current: {theme: Theme; lang?: Language}) {        const themeChanged = current.theme !== this.lastUserSettings.theme;        const langChanged = current.lang !== this.lastUserSettings.lang;        if (themeChanged || langChanged) {            logger.log('User settings changed', {                theme: {from: this.lastUserSettings.theme, to: current.theme},                lang: {from: this.lastUserSettings.lang, to: current.lang},            });            \/\/ \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u043a\u0430\u043d\u0430\u043b \u0430\u043a\u0442\u0438\u0432\u0435\u043d            if (this.store.getState().appManager.channelStatus === CHANNEL_STATUS.LISTEN) {                this.sendCurrentAppSettings();            }        }        \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u044d\u0448        this.lastUserSettings = current;    }    \/\/ \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432 embedded app    private sendCurrentAppSettings() {        const userSettings = this.getCurrentUserSettings();        if (userSettings.lang) {            ChannelWrapper.sendAppSettings({                theme: userSettings.theme,                lang: userSettings.lang,            });        }    }    \/\/ \u0414\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f 1 \u0420\u0410\u0417    \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u0430\u043d\u0430\u043b \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 PostMessage API \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438.    \/\/ \u041f\u0435\u0440\u0435\u0434\u0430\u0435\u043c Controller \u0432 state, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043c \u0432 ui.    \/\/ Controller \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 mount \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b BI.    \/\/ \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e handshake \u0432 Controller.Channel \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d, \u0442\u044b \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u043e\u0431\u0449\u0435\u043d\u0438\u0435.    \/\/ \u0414\u0435\u043b\u0430\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (appSettings) \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0445 \u043f\u0440\u0438 \u0438\u043d\u0438\u0442\u0435 \u0438 \u043b\u044e\u0431\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 appSettings.    \/\/ \u0414\u0435\u043b\u0430\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 url \u043e\u0442 embedded app (\u0442\u043e \u0435\u0441\u0442\u044c embedded \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430\u043c \u0441\u0432\u043e\u0439 url, \u0430 \u043c\u044b \u0435\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c)    private initChannelWrapper() {        if (this.channelInitialized) {            return;        }        this.channelInitialized = true;        const instance = this.channelWrapper.init(this.app);        const currentController = this.store.getState().appManager.controller;        if (!currentController) {            this.store.dispatch(setController(instance.controller));        }        instance.channel.onStatus(({status}) =&gt; {            const currentChannelStatus = this.store.getState().appManager.channelStatus;            const newStatus = status === 'connected' ? CHANNEL_STATUS.LISTEN : CHANNEL_STATUS.IDLE;            if (currentChannelStatus !== newStatus) {                this.store.dispatch(setChannelStatus(newStatus));            }        });        this.listenEmbeddedAppUrl();        this.listenMetadataApp();        this.listenExternalLinks();        this.listenAnalytics();        this.listenDocumentTitle();    }    private listenEmbeddedAppUrl() {        if (!this.channelWrapper.current) {            return;        }        if (this.app.disableHistory) {            return;        }        const unsubHistoryHandle = this.channelWrapper.onGotoEvent((data) =&gt; {            const parsed = parseAppUrl();            if (!parsed) {                return undefined;            }            \/\/ Extract route prefix from current URL if configured            const currentRoutePrefix = this.app.routePrefix ?? '';            const currentRestPath = stripRoutePrefix(parsed.restPath, currentRoutePrefix);            \/\/ \u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043f\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438            const areEqualUrls = isEqual(currentRestPath, data.url, {leadingSlash: false});            logger.log('[app-manager] Are urls equal?', {                areEqualUrls,                current: currentRestPath,                fromEmbedded: data.url,                routePrefix: currentRoutePrefix,            });            if (!areEqualUrls) {                const historyStatePayload = {                    idx: new Date().getTime(),                    key: `key_${new Date().getTime()}`,                    usr: {current: data.url},                    responsible: this.id,                };                \/\/ Prepend route prefix to the URL from embedded app                const urlFromEmbedded = currentRoutePrefix                    ? `\/${this.app.name}\/${currentRoutePrefix}${data.url}`                    : `\/${this.app.name}${data.url}`;                if (data.replace) {                    window.history.replaceState(historyStatePayload, '', urlFromEmbedded);                } else {                    window.history.pushState(historyStatePayload, '', urlFromEmbedded);                }            }            return undefined;        });        if (unsubHistoryHandle) {            this.disposer.add(unsubHistoryHandle);        }    }    private listenMetadataApp() {        if (!this.channelWrapper.current) {            return;        }        const unsubMetadataListening = this.channelWrapper.onBiMetadataEvent((data) =&gt; {            this.metadata.updateMetadata(data);            return undefined;        });        if (unsubMetadataListening) {            this.disposer.add(unsubMetadataListening);        }    }    private listenExternalLinks() {        if (!this.channelWrapper.current) {            return;        }        const unsubExternalLink = this.channelWrapper.onExternalLinkEvent((data) =&gt; {            this.openExternalLink(data.url, data.openInNewWindow);            return undefined;        });        if (unsubExternalLink) {            this.disposer.add(unsubExternalLink);        }    }    private listenAnalytics() {        if (!this.channelWrapper.current) {            return;        }        const unsubAnalytics = this.channelWrapper.onAnalyticsEvent((data) =&gt; {            this.handleAnalytics(data);            return undefined;        });        if (unsubAnalytics) {            this.disposer.add(unsubAnalytics);        }    }    private handleAnalytics(data: TAnalyticsPayload) {        \/\/ Notify all subscribers        this.analyticsSubscribers.forEach((subscriber) =&gt; {            subscriber(data);        });    }    private listenDocumentTitle() {        if (!this.channelWrapper.current) {            return;        }        const unsubDocumentTitle = this.channelWrapper.onDocumentTitleEvent((data) =&gt; {            document.title = `${data.title} - ${window.DL.serviceName}`;            return undefined;        });        if (unsubDocumentTitle) {            this.disposer.add(unsubDocumentTitle);        }    }    \/\/ https:\/\/github.com\/remix-run\/history\/blob\/dev\/packages\/history\/index.ts#L1010C1-L1016C2    promptBeforeUnload = (event: BeforeUnloadEvent) =&gt; {        \/\/ Cancel the event.        event.preventDefault();        \/\/ Chrome (and legacy IE) requires returnValue to be set.        event.returnValue = '';    };    subscribeMetadataInfo(fn: (data: TMetadataEventSchemaPayload) =&gt; void) {        return this.metadata.subscribe(fn);    }    \/**     * \u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043c\u0435\u0442\u0443 \u043e\u0442 BI \u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0430\u043c\u0430 \u0440\u0435\u0448\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u0443\u0448\u0430\u0435\u043c.     * \u0422\u0438\u043f \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 biSystem \u0438 entryScope,     * \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a {@link https:\/\/www.typescriptlang.org\/docs\/handbook\/2\/narrowing.html#discriminated-unions discriminated-unions}     *     * @example \u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 BI     * {     *     biMetadata: {     *         biSystem: 'superset',     *         entryMetadata: {     *             entryScope: EntryScope.Widget,     *             name: 'Chart 1',     *             workbookId: '123',     *         },     *     },     * }     *  \/\/ \u043f\u043e\u043a\u0438\u043d\u0443\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c null     * {     *     biMetadata: {     *         biSystem: 'superset',     *         entryMetadata: null,     *     }     * }     **\/    static subscribeMetadataInfo = (fn: (data: TMetadataEventSchemaPayload) =&gt; void) =&gt; {        return AppManager.current?.subscribeMetadataInfo(fn);    };    \/**     * \u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0443 \u043e\u0442 BI \u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0430\u043c\u0430 \u0440\u0435\u0448\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u0443\u0448\u0430\u0435\u043c.     *     * @example \u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 BI     * {     *     biSystem: 'superset',     *     eventType: 'dashboard_view_finish_loading',     *     params: {     *         dashboard_id: '2',     *         time: 1770128891337,     *         have_error: false,     *         use_extract: false,     *     }     * }     *\/    subscribeAnalytics(fn: (data: TAnalyticsPayload) =&gt; void) {        this.analyticsSubscribers.add(fn);        return () =&gt; {            this.analyticsSubscribers.delete(fn);        };    }    static subscribeAnalytics = (fn: (data: TAnalyticsPayload) =&gt; void) =&gt; {        return AppManager.current?.subscribeAnalytics(fn);    };    \/**     * Navigates to a specified URL with various options. Before use, you should answer the question:     * Is it possible to solve the task via react-router useNavigate + Link Component? If yes \u2014 don't use navigate at all.     *     * @param {TNavigate} params - Navigation parameters     * @param {string} params.url - The target URL to navigate to     * @param {boolean} [params.replace=false] - Whether to replace the current history entry     * @param {boolean} [params.openInNewWindow=false] - Whether to open in a new window\/tab     * @param {object} [params.state] - Optional state object to pass with navigation     *     * @description     * - If a current instance exists, delegates navigation to that instance     * - If openInNewWindow is true, opens URL in a new window\/tab     * - Otherwise, navigates to URL in the current window     * - Falls back to window.open if no current instance is available     *\/    static navigate(params: TNavigate) {        const {url, openInNewWindow} = params;        \/\/ \u043d\u0435\u0442 \u0438\u043d\u0441\u0442\u0430\u043d\u0441\u0430, \u043c\u044b \u043d\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 BI        if (this.current) {            this.current.navigate(params);            return;        }        if (openInNewWindow) {            window.open(url, '_blank');            return;        }        window.open(url, '_self');    }    static readyToSubscribe() {        return Boolean(AppManager.current);    }    navigate({url, replace, state, openInNewWindow = false}: TNavigate) {        const parsed = parseAppUrl(withoutHost(url));        if (!parsed || openInNewWindow) {            window.open(url, '_blank');            return;        }        \/\/ \u043c\u044b \u043e\u0442\u043a\u0440\u044b\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u043e\u0438\u0441\u043a\u0430\/sunset, \u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u0443 \u043d\u0430\u0441 \u043d\u0430 daylight        const canWeOpenUrlNow = parsed.appName === this.app.name;        if (canWeOpenUrlNow) {            const currentRoutePrefix = this.app.routePrefix ?? '';            const urlToEmbedded = stripRoutePrefix(parsed.restPath, currentRoutePrefix);            this.channelWrapper.gotoTo({                url: urlToEmbedded,                replace: false,            });            return;        }        if (replace) {            window.history.replaceState({responsible: this.id, ...state}, '', url);        } else {            window.history.pushState({responsible: this.id, ...state}, '', url);        }    }    private openExternalLink(url: string, openInNewWindow = false) {        try {            const parsedUrl = new URL(url);            if (!['http:', 'https:'].includes(parsedUrl.protocol)) {                logger.logError('Unsupported protocol for external link', new Error(), {url});                return;            }            if (openInNewWindow) {                window.open(url, '_blank');            } else {                window.location.href = url;            }        } catch (error) {            logger.logError('Failed to open external link', error as Error, {url});        }    }    \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u0430\u043c \u0432\u0430\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c iframe \u0441\u043e\u0431\u044b\u0442\u0438\u0435,    \/\/ \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0445\u043e\u0447\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430\u0437\u0430\u0434 \u0438\u043b\u0438 \u0432\u043f\u0435\u0440\u0435\u0434    private handleHistoryChanged: Parameters&lt;PatchedHistory['subscribe']&gt;[0] = ({type, params}) =&gt; {        const currentRoutePrefix = this.app.routePrefix ?? '';        switch (type) {            case 'pop':            case 'forward':            case 'back': {                const parsed = parseAppUrl();                if (!parsed || parsed.appName !== this.app.name) {                    break;                }                this.channelWrapper.gotoTo({                    url: stripRoutePrefix(parsed.restPath, currentRoutePrefix),                    replace: true,                });                break;            }            case 'pushState': {                const parsed = parseAppUrl();                const currentState = params[0];                if (                    !parsed ||                    currentState?.responsible === this.id ||                    parsed.appName !== this.app.name                ) {                    break;                }                this.channelWrapper.gotoTo({                    url: stripRoutePrefix(parsed.restPath, currentRoutePrefix),                    replace: false,                });                break;            }            case 'replaceState':            default: {                break;            }        }    };}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<\/div>\n<\/details>\n<h2>\u0427\u0442\u043e \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442<\/h2>\n<p>\u041d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c Superset, \u0432\u0441\u0442\u0440\u043e\u0438\u0432 \u0435\u0433\u043e \u0432 DataLens \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0432 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u0434\u0432\u0438\u0436\u043a\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043c\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 Redash \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e SQL-\u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0430. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0436\u0438\u0432\u0451\u0442 \u0432 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0435 \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u043e\u0432 \u0441 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0432\u044b\u0434\u0430\u0447\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u0432 \u043a \u0434\u0430\u043d\u043d\u044b\u043c.<\/p>\n<p>Iframe \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043d\u043e \u043f\u0440\u0438\u043d\u0451\u0441 \u0440\u044f\u0434 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441:<\/p>\n<ul>\n<li>\n<p>\u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435\u043c \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0442\u044f\u0436\u0451\u043b\u043e\u0433\u043e \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430 \u0432\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0417\u0430 \u0441\u0447\u0451\u0442 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043e\u043a (AppManager \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439) \u043c\u044b \u0437\u0430\u043a\u0440\u044b\u043b\u0438 \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439: \u0443\u043c\u0435\u0435\u043c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c workbook ID, \u0442\u0435\u043c\u0443 \u0438 \u044f\u0437\u044b\u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f; \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c history \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442\u044b \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0430.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0442\u044f\u0436\u0451\u043b\u044b\u0445 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430\u0445 \u0438 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0435 API DataLens, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u044b \u043a API Superset \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u0415\u0441\u043b\u0438 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0431\u044b\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432 read-only, \u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0443\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430.<\/p>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 iframe \u2014 \u044d\u0442\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043a\u0432\u043e\u0437\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438: \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438, \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0431\u0430 \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u0447\u0442\u043e \u0434\u0430\u0451\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 iframe \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439 feedback \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u043d\u043e \u0432 \u043f\u0440\u043e\u0434\u0435 \u0437\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u044d\u0442\u0438 \u043c\u0435\u0441\u0442\u0430 \u0435\u0449\u0451 \u043f\u0440\u0435\u0434\u0441\u0442\u043e\u0438\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c.\u00a0<\/p>\n<p>\u0410 \u043a\u0430\u043a \u0431\u044b \u0432\u044b \u0440\u0435\u0448\u0430\u043b\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443? \u041f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u043c\u043d\u0435\u043d\u0438\u0435\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1039482\/\">https:\/\/habr.com\/ru\/articles\/1039482\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u0433\u043e\u0440\u044c \u041a\u0440\u0430\u0441\u0430\u0432\u0438\u043d, \u0438 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 VK. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c, \u043a\u0430\u043a \u043c\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e BI-\u0441\u0438\u0441\u0442\u0435\u043c (DataLens, Superset \u0438 Redash) \u043f\u043e\u0434 \u043e\u0434\u043d\u0438\u043c UI, \u043a\u0430\u043a \u0440\u0435\u0448\u0430\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043e SPA-\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439, \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u0442\u0435\u043a\u0430\u043c\u0438, \u043d\u0430 \u043a\u0430\u043a\u0438\u0435 \u0433\u0440\u0430\u0431\u043b\u0438 \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b\u0438, \u0438 \u0447\u0442\u043e \u043d\u0430\u043c, \u0432 \u0438\u0442\u043e\u0433\u0435, \u044d\u0442\u043e \u0434\u0430\u043b\u043e. \u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0445\u043e\u0436\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.\u041a\u0430\u043a \u0432\u0441\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u043e\u0441\u044c\u2026\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u043a\u0430\u0436\u0434\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438\u043b\u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u044e\u043d\u0438\u0442 VK \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u043b\u0438 BI-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438. \u041a\u043e\u043c\u0430\u043d\u0434\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0432\u043d\u0435\u0434\u0440\u044f\u043b\u0438 open-source Superset, Redash, DataLens. \u041a\u0430\u0436\u0434\u044b\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u044e\u043d\u0438\u0442 \u0441\u0430\u043c \u0441\u0442\u0430\u0432\u0438\u043b BI, \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u044b\u0432\u0430\u043b \u0441 \u043e\u0442\u0434\u0435\u043b\u043e\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438.\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u044f\u0446\u0438\u0439 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043e\u0442\u0447\u0451\u0442\u043e\u0432 \u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432. \u0412\u0441\u0435 \u044d\u0442\u0438 BI-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0438 \u043f\u043e\u0434 \u0441\u0435\u0431\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u0438\u0445 \u0438 \u0442\u0435\u0445 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0440\u0435\u0434\u044b \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0441\u043b\u0438\u044f\u043d\u0438\u0439 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u044f\u0446\u0438\u0438 \u043e\u0442 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0441\u0438\u0441\u0442\u0435\u043c: Superset, Redash \u0438 DataLens.\u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0438 \u0436\u0438\u0442\u044c \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u043e \u043d\u0430 \u0442\u0440\u0451\u0445 BI-\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445? \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u044f\u0435\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438: \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0440\u043e\u043b\u0438, \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0438\u0437\u043d\u0435\u0441-\u044e\u043d\u0438\u0442\u043e\u0432, \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430\u043c\u0438 \u0438 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u0435 \u043e\u0442\u0447\u0451\u0442\u044b \u043f\u043e \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438. \u041e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0430\u0448\u0431\u043e\u0440\u0434 \u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0438\u043c \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u2014 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0432 \u0442\u0440\u0451\u0445 BI, \u0438\u0437\u2011\u0437\u0430 \u0447\u0435\u0433\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0438 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0430 \u0432 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445.\u00a0\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0443 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430, \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0440\u043e\u043b\u0438 \u0432 BI-\u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445, \u0440\u043e\u043b\u0438 \u043d\u0430 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0435, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u0434\u043e\u0431\u0440\u0435\u043d\u0438\u0435 \u043e\u0442 \u0418\u0411 \u0438 \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0430 \u0434\u0430\u043d\u043d\u044b\u0445.\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0432\u043e\u0440\u043a\u0431\u0443\u043a \u2014 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u0434\u0430\u0442\u0430\u0441\u0435\u0442\u044b, \u0447\u0430\u0440\u0442\u044b \u0438 \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u044b. \u0421\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430 \u043c\u043e\u0433\u0443\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430. \u0422\u0435\u0440\u043c\u0438\u043d \u043f\u0440\u0438\u0448\u0451\u043b \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 DataLens.\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0446\u0435\u043b\u0435\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0441\u043b\u0443\u0436\u0438\u0442 \u043e\u0441\u043d\u043e\u0432\u043e\u0439 \u0434\u043b\u044f \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445. \u0412\u044b\u0431\u043e\u0440 \u0441\u0442\u043e\u044f\u043b \u043c\u0435\u0436\u0434\u0443 DataLens \u0438 Superset. DataLens \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432, \u043d\u043e \u043c\u044b \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u0434\u0432\u0443\u0445 \u0433\u043b\u0430\u0432\u043d\u044b\u0445.\u00a0DataLens \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 no-code \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u043e\u0432.\u00a0\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 Superset \u0441 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u043c \u0440\u0430\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u0432 \u043f\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c \u0438 \u0447\u0435\u0440\u0435\u0437 \u0438\u043c\u043f\u0435\u0440\u0441\u043e\u043d\u0430\u0446\u0438\u044e, DataLens \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 RBAC (\u043c\u043e\u0434\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u043e\u043b\u0435\u0439) \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u043e\u0432.\u0418\u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u043c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c DataLens \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u0443, \u0442\u043e \u043a\u0430\u043a \u0436\u0435 \u043d\u0430\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 BI-\u0441\u0438\u0441\u0442\u0435\u043c\u044b? \u041a\u0430\u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u044b, \u043d\u0430\u043c \u0432\u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u0430\u0436\u043d\u0430 UI-\u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u0430\u0436\u043d\u043e \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0441\u043b\u043e\u0439: UX, \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0442\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0433\u043a\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u044a\u044f\u0442\u043d\u043e\u0435\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0432\u0443\u0445 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c, \u0441\u0440\u0430\u0432\u043d\u0438\u043c \u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u0447\u0442\u043e-\u0442\u043e \u043e\u0431\u0449\u0435\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432 DataLens, \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f united-storage (\u0434\u0430\u043b\u0435\u0435 \u2014 US) \u0432 \u0432\u0438\u0434\u0435 JSON-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041d\u0438\u0436\u0435 \u2014 \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:{  &#171;shared&#187;: {    &#171;type&#187;: &#171;datalens&#187;,                 \/\/ \u0442\u0438\u043f\/\u0444\u043e\u0440\u043c\u0430\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438    &#171;version&#187;: &#171;10&#187;,                    \/\/ \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0445\u0435\u043c\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0430    &#171;visualization&#187;: {      &#171;id&#187;: &#171;flatTable&#187;,      &#171;type&#187;: &#171;table&#187;                   \/\/ \u0442\u0438\u043f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u0442\u0430\u0431\u043b\u0438\u0446\u0430\/\u0433\u0440\u0430\u0444\u0438\u043a \u0438 \u0442. \u043f.)    },    &#171;datasetsIds&#187;: [&#171;&lt;dataset-id&gt;&#187;],    \/\/ \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u043c\/\u0434\u0430\u0442\u0430\u0441\u0435\u0442\u0430\u043c    &#171;filters&#187;: [\/* &#8230; *\/],             \/\/ \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u043a \u0434\u0430\u043d\u043d\u044b\u043c    &#171;sort&#187;: [\/* &#8230; *\/],                \/\/ \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430    &#171;extraSettings&#187;: {                  \/\/ \u043f\u0440\u043e\u0447\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u0438\u043c\u0438\u0442\u044b\/\u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f)      &#171;pagination&#187;: &#171;on&#187;,      &#171;limit&#187;: 100    }  }}\u041f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0447\u0430\u0440\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 POST-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \/api\/run, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f ID \u0447\u0430\u0440\u0442\u0430 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432). \u0421\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0438\u0437 US, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 (\u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0440\u0432\u0438\u0441 datalens-data-api) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0432 \u043e\u0442\u0432\u0435\u0442\u0435 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e:\u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438;\u0433\u043e\u0442\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e Highcharts (\u043d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f DataLens \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 d3.js), \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c.\u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f, \u0432 Superset \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0447\u0430\u0440\u0442\u0430 \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a QueryContext \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f POST-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u043d\u0430 \/api\/v1\/chart\/data \u0447\u0435\u0440\u0435\u0437 SupersetClient (\u043e\u0431\u0451\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 fetch \u0441 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043e\u0448\u0438\u0431\u043e\u043a).\u00a0\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0435\u043b\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f:{    datasource: { id, type },    force: false,    queries: [QueryObject],  \/\/ \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u044c\u044e query-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432    result_format: &#8216;json&#8217;,    result_type: &#8216;full&#8217;,  }\u041d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 Superset \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0431\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445: \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 SQL (\u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0434\u0440\u0430\u0439\u0432\u0435\u0440\u0430), \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u0441\u043b\u043e\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0411\u0414 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Superset \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043d\u0430 ECharts (\u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432).\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0431\u043e\u0442\u044b Superset \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 DataLens, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 SQL-first \u043f\u043e\u0434\u0445\u043e\u0434\u0435. \u0414\u0430\u0448\u0431\u043e\u0440\u0434\u044b, \u0447\u0430\u0440\u0442\u044b, \u0434\u0430\u0442\u0430\u0441\u0435\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u043f\u043b\u043e\u0441\u043a\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0430\u043d\u043d\u044b\u043c. DataLens, \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430.\u0421\u0438\u0441\u0442\u0435\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 React, React Router, \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430: DataLens UI-node \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0439 HTML, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0438\u0434\u0451\u0442 \u0447\u0438\u0441\u0442\u043e\u0435 SPA. Superset \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430: \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0447\u0435\u0440\u0435\u0437 Flask, \u0430 \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a SPA \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u043e\u043c \u0447\u0435\u0440\u0435\u0437 React Router. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432: \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b (ANTD \u0438 Gravity-UI) \u0438 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 Redux, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u0434\u0430 \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432.\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0434\u0438\u043d \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043b\u043e\u043c\u0430\u0432 \u0438 \u043d\u0435 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 \u043a\u0443\u0447\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0443\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435.\u0420\u0435\u0448\u0435\u043d\u0438\u0435\u041e\u0442\u0431\u0440\u043e\u0441\u0438\u0432 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0435\u0439, \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 iframe \u043a\u0430\u043a \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438.\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c\u0438 \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c:\u00a0\u041d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043a \u0435\u0434\u0438\u043d\u043e\u043c\u0443 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0443.\u041e\u0431\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 window, localStorage \u0438 sessionStorage. \u041f\u0440\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430\u043c (\u043a\u043b\u044e\u0447\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b). Iframe \u0434\u0430\u0451\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u00ab\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443\u00bb, \u0447\u0442\u043e \u0441\u043d\u0438\u043c\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439.\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0443 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443; iframe \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0438 \u0438 \u043d\u0435 \u00ab\u0441\u043a\u043b\u0435\u0438\u0432\u0430\u0442\u044c\u00bb \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 SPA.\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u043f\u043e\u0448\u043b\u0438 \u043f\u043e \u043f\u0443\u0442\u0438:\u041c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b \u2014 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u043a\u0430: \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u043e\u0432, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 \u0432\u0435\u0440\u0441\u0438\u0439, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0448\u0430\u0440\u0438\u043d\u0433\u0430, \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430.\u00a0Web Components + Shadow DOM \u2014 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0435\u0448\u0430\u044e\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e UI, \u043d\u043e \u043d\u0435 \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u044e\u0442 JS-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435: \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 window \u0438 storage-\u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f.\u00a0\u0421\u0430\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u043e\u0431\u0451\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 \u0442\u0435\u0433\u043e\u043c iframe \u0441 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c URL-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043e\u0434\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e.\u00a0\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0438 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b Supeset. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u043b\u043e\u0436\u0438\u043c \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\u043c \u0432 Superset-\u0441\u0438\u0441\u0442\u0435\u043c\u0435: \u0437\u0430\u0432\u0435\u0434\u0451\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043b\u044f \u043c\u0430\u043f\u043f\u0438\u043d\u0433\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0441 ID \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u043e\u0432, \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0438.\u00a0\u0421\u0445\u0435\u043c\u0430 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u0438\u0437\u043d\u0430\u043a\u043e\u043c \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\u0417\u0430 \u0440\u0430\u0437\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\u043c \u043e\u0442\u0432\u0435\u0447\u0430\u043b \u043a\u043e\u043b\u043b\u0435\u0433\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043b\u044c\u0448\u0435 \u0434\u0430\u043c \u043b\u0438\u0448\u044c \u0432\u0435\u0440\u0445\u043d\u0435\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0431\u0435\u0437 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u043e\u0440\u043a\u0431\u0443\u043a \u2014 \u044d\u0442\u043e \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0430 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0438 \u043f\u043e \u0441\u0432\u044f\u0437\u043d\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 (\u0434\u0430\u0448\u0431\u043e\u0440\u0434, \u0447\u0430\u0440\u0442, \u0434\u0430\u0442\u0430\u0441\u0435\u0442, \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435) \u0438 \u0441\u0447\u0438\u0442\u0430\u043b\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0433\u0440\u0430\u0444 \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u043e\u0440\u043a\u0431\u0443\u043a. \u0415\u0441\u043b\u0438 \u0433\u0440\u0430\u0444 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c, \u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u043e\u0431\u0438\u043b\u0438 \u0435\u0433\u043e \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u043d\u044c\u0448\u0438\u0445.\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0430\u0440\u0443 \u044d\u043d\u0434\u043f\u043e\u0439\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0441\u0430\u043c\u044b\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0443 \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430. \u0418 \u0432\u043e\u0442 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0440\u043a\u0431\u0443\u043a \u0434\u043b\u044f \u0441\u0443\u043f\u0435\u0440\u0441\u0435\u0442\u0430.UI \u0434\u043b\u044f Superset \u0432\u043e\u0440\u043a\u0431\u0443\u043a\u0430\u0422\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u043e\u0443\u0442 https:\/\/onebi\/sunset\/* \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 Superset \u0447\u0435\u0440\u0435\u0437 iframe. (\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: sunset \u044d\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f Superset). \u041d\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u0430\u0448\u0431\u043e\u0440\u0434 Superset \u0432\u043d\u0443\u0442\u0440\u0438 DataLens\u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043d\u0430\u0434 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0437\u0430\u0432\u0435\u0434\u0451\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f UI, \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c CSS-\u043a\u043b\u0430\u0441\u0441\u044b \u043e\u0431\u0451\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 iframe.\u0421\u0445\u0435\u043c\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f iframe \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0440\u0430\u0431\u043e\u0442\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0443\u043a\u0442, \u043d\u043e \u043d\u0435\u0442. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u0438\u0441\u044c.\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 i18n \u0438 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u044f\u0423 Superset \u0438 DataLens \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430, \u0430 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b (\u0441\u0432\u0435\u0442\u043b\u0430\u044f, \u0442\u0451\u043c\u043d\u0430\u044f, \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u0430\u044f).\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430: Post Message.\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043a\u0430\u043d\u0430\u043b\u0430 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f (\u0430\u043d\u0430\u043b\u043e\u0433 hand-shake) shell-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0435 \u0442\u0435\u043c\u044b \u0438 \u044f\u0437\u044b\u043a\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0430 \u043e\u043d\u043e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u044d\u0442\u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 embedded app. \u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0443 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:\u00a0AppManager \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 iframe;AppManager \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 embedded app \u0447\u0435\u0440\u0435\u0437 handshake;AppManager \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u0442\u0435\u043c\u0430 \u0438 \u044f\u0437\u044b\u043a);AppManager \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 SettingsPayload.\u0421\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b AppManager \u043a\u043b\u0430\u0441\u0441\u0430\u0421\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0448\u0438\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443: \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 iframe \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c.\u00a0\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u043c&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-481088","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/481088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=481088"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/481088\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=481088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=481088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=481088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}