30: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; }); }31:[{"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}] 2e:{"title":"Panoramic Dashboards","cells":[{"id":155,"value":"md`# Panoramic Dashboards`","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"cover = {\n var img = await FileAttachment(\"cover.png\").url();\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":8,"value":"fullscreen = {\n const button = html`