@dataloop-ai/components 0.19.257 → 0.19.258

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.257",
+  "version": "0.19.258",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -22,7 +22,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.0.74",
+    "@dataloop-ai/icons": "^3.0.84",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -204,7 +204,6 @@ import {
     getGradationValues,
     validateMatrix,
     setZoom,
-    getCellWidth,
     flattenConfusionMatrix
 } from './utils'
 import { debounce, isObject } from 'lodash'
@@ -421,7 +420,7 @@ export default defineComponent({
                         (isObject(el) ? el.title : `${el}`).length
                 )
             )
-            this.rotateXLabels = longest * 12 > getCellWidth()
+            this.rotateXLabels = longest * 12 > this.getMatrixCellWidth()
         },
         handleResizeObserver(options: { dispose?: boolean } = {}) {
             if (this.isDisposed) return
@@ -466,7 +465,7 @@ export default defineComponent({
                     ctx.matrix.length / (brush.max - brush.min),
                     ctx.$refs.matrix
                 )
-                const scroll = brush.min * getCellWidth()
+                const scroll = brush.min * ctx.getMatrixCellWidth()
                 const container = ctx.$refs.matrixWrapper
                 container.scroll(scroll, 0)
                 ctx.currentBrushState = brush
@@ -476,7 +475,15 @@ export default defineComponent({
         ),
         resizeYAxis() {
             const yAxis = this.$refs.yAxis as HTMLElement
-            yAxis.style.height = `${getCellWidth() * this.matrix.length}px`
+            yAxis.style.height = `${this.getMatrixWidth()}px`
+        },
+        getMatrixWidth() {
+            const matrixElement = this.$refs.matrix as HTMLElement
+            const width = matrixElement.getBoundingClientRect().width
+            return width
+        },
+        getMatrixCellWidth() {
+            return this.getMatrixWidth() / this.matrix.length
         },
         handleMatrixScroll(e: MouseEvent | UIEvent) {
             const target = e.target as HTMLElement