2b:null 2c:["$","title",null,{"children":"Panoramic Dashboards | Alok Pepakayala | Observable"}] 31:T13c0,viewof Horizon = { var id = DOM.uid().id; var viewport_height = default_viewport_height; //default value, will change only on fullscreen var viewport_width = 954; //default value, will change on resizes var h_scale = viewport_height / scrollable_height; var w_scaled = (viewport_width * 1) / h_scale; var dom = html`

`; dom.value = dom.querySelector(".scrollable"); yield dom; var main = dom.querySelector(".main"); var width = w_scaled; var scrollbar = dom.querySelector(".scrollbar"); var scrollthumb = dom.querySelector(".scrollthumb"); var scrollcontainer = dom.querySelector(".scrollcontainer"); var hold_offset = 0; var scroll_bar_width = 0; var thumb = d3.select(scrollthumb); function dragstart(event, d) { var parent_bb = scrollbar.getBoundingClientRect(); var bb = scrollthumb.getBoundingClientRect(); var st = bb.x - parent_bb.x; var ed = st + bb.width; var off = event.x - st; hold_offset = off; scroll_bar_width = parent_bb.width; } function dragged(event, d) { var corrected = event.x - hold_offset; var p = (corrected / scroll_bar_width) * 100; scrollcontainer.scrollLeft = (scrollable_width * p) / 100; } thumb.call( d3 .drag() .on("start", dragstart) .on("drag", dragged) ); var on_mouse_wheel = function(event) { if (scrollcontainer.doScroll) scrollcontainer.doScroll(event.wheelDelta > 0 ? "left" : "right"); else if ((event.wheelDelta || event.detail) > 0) scrollcontainer.scrollLeft -= event.wheelDelta; else scrollcontainer.scrollLeft += -event.wheelDelta; event.preventDefault(); return false; }; var any_scroll = function() { var p = (scrollcontainer.scrollLeft / scrollable_width) * 100; mutable scroll_percentage = p; scrollthumb.style.marginLeft = p + "%"; return false; }; var on_resize = function() { console.log(viewport_height); viewport_width = (dom.parentElement && dom.parentElement.getBoundingClientRect().width) || 0; h_scale = viewport_height / scrollable_height; w_scaled = (viewport_width * 1) / h_scale; main.style.width = w_scaled + "px"; dom.style.height = viewport_height + "px"; dom.style.transform = `scale(${h_scale})`; scrollthumb.style.width = (w_scaled / scrollable_width) * 100 + "%"; }; var is_fullscreen = false; var on_fullscreen = function() { is_fullscreen = !is_fullscreen; if (is_fullscreen) { viewport_height = screen.height; } else { viewport_height = default_viewport_height; } on_resize(); }; dom.parentElement && dom.parentElement.addEventListener("fullscreenchange", on_fullscreen); window.addEventListener("resize", on_resize); scrollcontainer.addEventListener("scroll", any_scroll); scrollcontainer.addEventListener("mousewheel", on_mouse_wheel); invalidation.then(() => { dom.parentElement && dom.parentElement.removeEventListener("fullscreenchange", on_fullscreen); window.removeEventListener("resize", on_resize); scrollcontainer.removeEventListener("mousewheel", on_mouse_wheel); scrollcontainer.removeEventListener("scroll", any_scroll); }); on_resize(); scrollcontainer.scrollLeft = (scrollable_width * mutable scroll_percentage) / 100; //milestones d3.select(scrollbar) .selectAll('.milestones') .data(milestones) .join('div') .classed("milestones", true) .style('left', d => d.percentage + "%") .style('background', d => d.color) .attr('title', d => d.title) .on('click', (e, d) => { scrollcontainer.scrollLeft = (scrollable_width * d.percentage) / 100; }); }32:[{"id":"68186556cfa40b42dca9bbf8054f8406fb249cae95b35670d1ed6efe2efc24c4caf156905f72ced4c9b13c9ce910fa6ecc3b0681fe51fb478f723a20219e8e75","href":"https://static.observableusercontent.com/files/68186556cfa40b42dca9bbf8054f8406fb249cae95b35670d1ed6efe2efc24c4caf156905f72ced4c9b13c9ce910fa6ecc3b0681fe51fb478f723a20219e8e75","name":"cover.png","type":"image/png","lastModified":1600189910207.676,"size":106203},{"id":"40b9ad85c2badbe9a37060681c6bcb7113fe6bc5ff2fb63c7a1f6ddae9f3e6df540adb9261bc0c3bc8eb2f5773a56227983db0f45b507e99959419e50dcf04fd","href":"https://static.observableusercontent.com/files/40b9ad85c2badbe9a37060681c6bcb7113fe6bc5ff2fb63c7a1f6ddae9f3e6df540adb9261bc0c3bc8eb2f5773a56227983db0f45b507e99959419e50dcf04fd","name":"example@5.svg","type":"image/svg+xml","lastModified":1599386826763.882,"size":1320454}] 2f:{"id":"937336a5c1d803e1","slug":"panoramic-dashboards","title":"Panoramic Dashboards","thumbnail":"eac91f0aef1d807b7184a844b468b02ec95e0313233fb99868a0cd365659898f","access_level":"public","create_time":"$D2020-09-04T16:26:50.283Z","update_time":"$D2020-09-15T17:15:44.778Z","view_time":null,"first_public_time":"$D2020-09-06T10:16:43.506Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":828,"publish_version":828,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"6f30c1b1aa5af73a","slug":"zinzi-bi","title":"Zinzi BI","owner":{"id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala"}},"type":"notebook","body":{"title":"Panoramic Dashboards","cells":[{"id":155,"value":"md`# Panoramic Dashboards`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"cover = {\n var img = await FileAttachment(\"cover.png\").url();\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":814,"value":"md`This notebooks reusable block to generate a panoramic dashboard, the details and demo are included in the example below, along with possible options/configurations and embed codes to reuse the same.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"fullscreen = {\n const button = html`