From 19eca797b280b16f4c84750756e7ea1118d3065a Mon Sep 17 00:00:00 2001 From: "felix.gateru" Date: Mon, 4 Mar 2024 12:36:42 +0300 Subject: [PATCH] Add resizing per chart Signed-off-by: felix.gateru --- cmd/ui/main.go | 4 +- ui/web/static/css/dashboards.css | 11 ++-- ui/web/static/js/charts.js | 105 ++++++++++++++++++++++++++++++ ui/web/static/js/dashboard.js | 106 ++----------------------------- ui/web/templates/dashboard.html | 1 - 5 files changed, 116 insertions(+), 111 deletions(-) diff --git a/cmd/ui/main.go b/cmd/ui/main.go index 239dff6b3..61a1938e7 100644 --- a/cmd/ui/main.go +++ b/cmd/ui/main.go @@ -32,13 +32,13 @@ const envPrefixGoogle = "MG_GOOGLE_" type config struct { LogLevel string `env:"MG_UI_LOG_LEVEL" envDefault:"debug"` - Port string `env:"MG_UI_PORT" envDefault:"9095"` + Port string `env:"MG_UI_PORT" envDefault:"9097"` InstanceID string `env:"MG_UI_INSTANCE_ID" envDefault:""` HTTPAdapterURL string `env:"MG_HTTP_ADAPTER_URL" envDefault:"http://localhost:8008"` ReaderURL string `env:"MG_READER_URL" envDefault:"http://localhost:9007"` ThingsURL string `env:"MG_THINGS_URL" envDefault:"http://localhost:9000"` UsersURL string `env:"MG_USERS_URL" envDefault:"http://localhost:9002"` - HostURL string `env:"MG_UI_HOST_URL" envDefault:"http://localhost:9095"` + HostURL string `env:"MG_UI_HOST_URL" envDefault:"http://localhost:9097"` BootstrapURL string `env:"MG_BOOTSTRAP_URL" envDefault:"http://localhost:9013"` DomainsURL string `env:"MG_DOMAINS_URL" envDefault:"http://localhost:8189"` InvitationsURL string `env:"MG_INVITATIONS_URL" envDefault:"http://localhost:9020"` diff --git a/ui/web/static/css/dashboards.css b/ui/web/static/css/dashboards.css index 628d3da26..11e5b6720 100644 --- a/ui/web/static/css/dashboards.css +++ b/ui/web/static/css/dashboards.css @@ -11,15 +11,12 @@ SPDX-License-Identifier: Apache-2.0 */ } .grid-editable { - position: relative; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); - grid-gap: 1rem; - padding: 1rem; - - background-size: calc(18rem + 50px) calc(18rem + 50px); + background-size: calc(10rem + 10px) calc(10rem + 10px); background-image: linear-gradient(to right, lightgrey 1px, transparent 1px), linear-gradient(to bottom, lightgrey 1px, transparent 1px); + + min-width: 100%; + min-height: 50vh; } .item { diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js index 4143f60cc..fc202134e 100644 --- a/ui/web/static/js/charts.js +++ b/ui/web/static/js/charts.js @@ -17,6 +17,7 @@ class Echart extends Chart { }; this.Content = this.#generateContent(); } + #generateContent() { return `
@@ -1835,6 +1836,13 @@ class Widget { this.widgetID = widgetID; this.config = new chartTypes[this.chartData.Type](chartData, widgetID); this.element = this.#createWidgetElement(); + this.resizeObserver = this.initResizeObserver(); + this.resizeObserver.observe(this.element); + this.previousSizes = new Map(); + this.previousChartSize = { + width: 400, + height: 400, + }; } #createWidgetElement() { @@ -1861,4 +1869,101 @@ class Widget { }); return newItem; } + + initResizeObserver() { + const resizeObserver = new ResizeObserver((entries) => { + for (let entry of entries) { + const { target } = entry; + const previousSize = previousSizes.get(target) || { + width: target.clientWidth, + height: target.clientHeight, + }; + const contentEl = target.querySelector(".item-content"); + const gridRightPosition = target.parentNode.getBoundingClientRect().right; + const widgetRightPosition = target.getBoundingClientRect().right; + const isOverflowing = widgetRightPosition > gridRightPosition; + if (isOverflowing) { + target.style.maxWidth = target.clientWidth + "px"; + target.style.maxHeight = target.clientHeight + "px"; + } else { + target.style.maxWidth = "none"; + target.style.maxHeight = "none"; + } + + if (widgetRightPosition < gridRightPosition - 5) { + // Calculate the change in width and height + var widthChange = target.clientWidth - previousSize.width; + var heightChange = target.clientHeight - previousSize.height; + var itemContentWidth = + parseInt(window.getComputedStyle(contentEl).getPropertyValue("width")) + widthChange; + var itemContentHeight = + parseInt(window.getComputedStyle(contentEl).getPropertyValue("height")) + heightChange; + + // Update the previous size for the next callback + previousSizes.set(target, { + width: target.clientWidth, + height: target.clientHeight, + }); + + target.style.width = target.clientWidth + "px"; + target.style.height = target.clientHeight + "px"; + + contentEl.style.width = itemContentWidth + "px"; + contentEl.style.height = itemContentHeight + "px"; + + // Resize apache echarts chart + const chart = echarts.getInstanceByDom(contentEl); + if (chart) { + chart.resize({ + width: itemContentWidth, + height: itemContentHeight, + }); + } else { + const cardDiv = target.querySelector(".widgetcard"); + const h5Elem = cardDiv.querySelector("h5"); + const cardBody = cardDiv.querySelector(".card-body"); + const cardFooter = cardDiv.querySelector(".card-footer"); + + if (entry.contentBoxSize) { + // The standard makes contentBoxSize an array... + if (entry.contentBoxSize[0]) { + h5Elem.style.fontSize = + Math.max(1, entry.contentBoxSize[0].inlineSize / 300) + "rem"; + if (cardBody) { + cardBody.style.fontSize = + Math.max(1.5, entry.contentBoxSize[0].inlineSize / 300) + "rem"; + } + if (cardFooter) { + cardFooter.style.fontSize = + Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem"; + } + } else { + // ...but old versions of Firefox treat it as a single item + h5Elem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize / 300) + "rem"; + if (cardBody) { + cardBody.style.fontSize = + Math.max(1.5, entry.contentBoxSize.inlineSize / 300) + "rem"; + } + if (cardFooter) { + cardFooter.style.fontSize = + Math.max(1, entry.contentBoxSize.inlineSize / 600) + "rem"; + } + } + } else { + h5Elem.style.fontSize = `${Math.max(1, entry.contentRect.width / 300)}rem`; + if (cardBody) { + cardBody.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 300)}rem`; + } + if (cardFooter) { + cardFooter.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`; + } + } + } + // grid.refreshItems(); + // grid.layout(true); + } + } + }); + return resizeObserver; + } } diff --git a/ui/web/static/js/dashboard.js b/ui/web/static/js/dashboard.js index 9f296175c..8f2dab5f2 100644 --- a/ui/web/static/js/dashboard.js +++ b/ui/web/static/js/dashboard.js @@ -1,6 +1,7 @@ // Copyright (c) Abstract Machines // SPDX-License-Identifier: Apache-2.0 const gridClass = ".grid"; +const editableGridClass = ".grid-editable"; var grid = initGrid(layout); const gridSize = 50; @@ -15,7 +16,7 @@ function cancelEdit() { function addWidget(chartData, widgetID) { let newItem = new Widget(chartData, widgetID); grid.add(newItem.element); - resizeObserver.observe(newItem.element); + // resizeObserver.observe(newItem.element); } function removeGridItem(item) { @@ -136,6 +137,8 @@ function loadLayout(savedLayout) { // widgets around the canvas function editableCanvas() { removeNoWidgetPlaceholder(); + let ltgrid = document.querySelector(".grid"); + ltgrid.classList.add("grid-editable"); try { if (grid) { grid.destroy(true); @@ -169,7 +172,7 @@ function editableCanvas() { height: widgetSize.height, }); grid.add(newItem, { layout: true }); - resizeObserver.observe(newItem); + // resizeObserver.observe(newItem); }); grid.layout(); } @@ -186,105 +189,6 @@ function editableCanvas() { return grid; } -const previousSizes = new Map(); - -const resizeObserver = new ResizeObserver((entries) => { - for (let entry of entries) { - const { target } = entry; - - let snappedWidth = Math.round(target.clientWidth / gridSize) * gridSize; - let snappedHeight = Math.round(target.clientHeight / gridSize) * gridSize; - - const previousSize = previousSizes.get(target) || { - width: snappedWidth, - height: snappedHeight, - }; - const contentEl = target.querySelector(".item-content"); - const gridRightPosition = target.parentNode.getBoundingClientRect().right; - const widgetRightPosition = target.getBoundingClientRect().right; - const isOverflowing = widgetRightPosition > gridRightPosition; - if (isOverflowing) { - target.style.maxWidth = target.clientWidth + "px"; - target.style.maxHeight = target.clientHeight + "px"; - } else { - target.style.maxWidth = "none"; - target.style.maxHeight = "none"; - } - - if (widgetRightPosition < gridRightPosition - gridSize) { - // Calculate the change in width and height - var widthChange = snappedWidth - previousSize.width; - var heightChange = snappedHeight - previousSize.height; - var itemContentWidth = - parseInt(window.getComputedStyle(contentEl).getPropertyValue("width")) + widthChange; - var itemContentHeight = - parseInt(window.getComputedStyle(contentEl).getPropertyValue("height")) + heightChange; - - // Update the previous size for the next callback - previousSizes.set(target, { - width: snappedWidth, - height: snappedHeight, - }); - - target.style.width = snappedWidth + "px"; - target.style.height = snappedHeight + "px"; - - contentEl.style.width = itemContentWidth + "px"; - contentEl.style.height = itemContentHeight + "px"; - - // Resize apache echarts chart - const chart = echarts.getInstanceByDom(contentEl); - if (chart) { - chart.resize({ - width: itemContentWidth, - height: itemContentHeight, - }); - } else { - const cardDiv = target.querySelector(".widgetcard"); - const h5Elem = cardDiv.querySelector("h5"); - const cardBody = cardDiv.querySelector(".card-body"); - const cardFooter = cardDiv.querySelector(".card-footer"); - - if (entry.contentBoxSize) { - // The standard makes contentBoxSize an array... - if (entry.contentBoxSize[0]) { - h5Elem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize / 300) + "rem"; - if (cardBody) { - cardBody.style.fontSize = - Math.max(1.5, entry.contentBoxSize[0].inlineSize / 300) + "rem"; - } - if (cardFooter) { - cardFooter.style.fontSize = - Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem"; - } - } else { - // ...but old versions of Firefox treat it as a single item - h5Elem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize / 300) + "rem"; - if (cardBody) { - cardBody.style.fontSize = - Math.max(1.5, entry.contentBoxSize.inlineSize / 300) + "rem"; - } - if (cardFooter) { - cardFooter.style.fontSize = - Math.max(1, entry.contentBoxSize.inlineSize / 600) + "rem"; - } - } - } else { - h5Elem.style.fontSize = `${Math.max(1, entry.contentRect.width / 300)}rem`; - if (cardBody) { - cardBody.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 300)}rem`; - } - if (cardFooter) { - cardFooter.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`; - } - } - } - grid.refreshItems(); - grid.layout(true); - } - } -}); - // No widget placeholder function showNoWidgetPlaceholder() { const noWidgetPlaceholder = document.querySelector(".no-widget-placeholder"); diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html index 0fcb1884c..90ded3729 100644 --- a/ui/web/templates/dashboard.html +++ b/ui/web/templates/dashboard.html @@ -59,7 +59,6 @@
-