Merge pull request #2 from Cole-T-Harris/fix-image-overflow

Fixes #1: Prevent overflow of image
mesak · Nov 29, 2024 · 8b48daf · 8b48daf
2 parents 30782eb + 659155f
commit 8b48daf
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.4 (release)
+
+adjust image responsive scaling
+
 ## 1.0.3 (release)
 
 add workflow

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mesak-imagesave-panel",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Image Save Panel Plugin for Grafana",
   "scripts": {
     "build": "grafana-toolkit plugin:build",

diff --git a/src/ImageSavePanel.tsx b/src/ImageSavePanel.tsx
@@ -15,8 +15,16 @@ export const ImageSavePanel: React.FC<Props> = ({ options, width, height }) => {
   let { image: imageContext }: ImageData = options.context;
   const imageAttr: any = {};
   if (options.showIsResponsive) {
-    imageAttr.width = picWidth;
+    const windowAspectRatio = picWidth / picHeight;
+    const imageAspectRatio = options.context.width / options.context.height;
+
+    if (imageAspectRatio > windowAspectRatio) {
+      imageAttr.width = picWidth;
+    } else {
+      imageAttr.width = picHeight * imageAspectRatio;
+    }
     if (!options.showIsRatio) {
+      imageAttr.width = picWidth;
       imageAttr.height = picHeight;
     }
   }