diff --git a/cmd/ui/main.go b/cmd/ui/main.go index 619a7703..82df0ac4 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 628d3da2..11e5b672 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 4143f60c..343654db 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,8 @@ class Widget { this.widgetID = widgetID; this.config = new chartTypes[this.chartData.Type](chartData, widgetID); this.element = this.#createWidgetElement(); + this.previousSizes = new Map(); + this.initResizeObserver(); } #createWidgetElement() { @@ -1861,4 +1864,59 @@ class Widget { }); return newItem; } + + initResizeObserver() { + const resizeObserver = new ResizeObserver((entries) => { + for (let entry of entries) { + const { target } = entry; + const previousSize = this.previousSizes.get(target) || { width: 0, height: 0 }; + 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) { + let widthChange = target.clientWidth - previousSize.width; + let heightChange = target.clientHeight - previousSize.height; + + this.previousSizes.set(target, { + width: target.clientWidth, + height: target.clientHeight, + }); + + this.resizeChart(target.clientWidth, target.clientHeight); + } + } + }); + + resizeObserver.observe(this.element); + } + + resizeChart(newWidth, newHeight) { + this.config.Style.width = this.config.Style.width + newWidth + "px"; + this.config.Style.height = this.config.Style.height + newHeight + "px"; + console.log(this.config.Style.width, this.config.Style.height); + + // Update the HTML element with the new width and height + const chartElement = document.getElementById(this.config.ID); + console.log("chartElement", chartElement); + if (chartElement) { + console.log("new width", this.config.Style.width, "new height", this.config.Style.height); + chartElement.style.width = this.config.Style.width; + chartElement.style.height = this.config.Style.height; + + // Optionally, if the charting library requires, reinitialize or update the chart here + // For example, with echarts you might need to call resize method on the echarts instance + // if you have access to it here, something like: + // this.echartsInstance.resize(); + } + } } diff --git a/ui/web/static/js/singleDashboard.js b/ui/web/static/js/singleDashboard.js index b404ff1c..09c6bae1 100644 --- a/ui/web/static/js/singleDashboard.js +++ b/ui/web/static/js/singleDashboard.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) { @@ -142,6 +143,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); @@ -175,7 +178,7 @@ function editableCanvas() { height: widgetSize.height, }); grid.add(newItem, { layout: true }); - resizeObserver.observe(newItem); + // resizeObserver.observe(newItem); }); grid.layout(); } @@ -192,105 +195,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 d5446e96..9eabb57c 100644 --- a/ui/web/templates/dashboard.html +++ b/ui/web/templates/dashboard.html @@ -59,7 +59,6 @@
-