@dataloop-ai/components 0.17.42 → 0.17.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.42",
+  "version": "0.17.43",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

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

@@ -96,8 +96,9 @@
                             <span v-else>
                                 {{ label }}
                             </span>
-                            <dl-tooltip> {{ labelStrings[index] }}</dl-tooltip>
                         </span>
+                        <dl-tooltip self="top middle">
+                            {{ labelStrings[index] }}</dl-tooltip>
                     </span>
                 </div>
                 <dl-brush
@@ -250,7 +251,7 @@ export default defineComponent({
             return this.tooltipState?.visible
         },
         visibleLabels(): DlConfusionMatrixLabel[] {
-            if (isObject(this.labels[0])) {
+            if (this.labels[0]) {
                 const arr = this.labels as DlConfusionMatrixLabel[]
                 return arr.slice(
                     this.currentBrushState.min,
@@ -328,9 +329,9 @@ export default defineComponent({
                     ctx.matrix.length / (brush.max - brush.min),
                     ctx.$refs.matrix
                 )
-                const scroll = brush.min * getCellWidth() + 2
+                const scroll = brush.min * (getCellWidth() - 2)
                 const container = ctx.$refs.matrixWrapper
-                container.scroll(scroll, scroll)
+                container.scroll(scroll, 0)
                 ctx.currentBrushState = brush
                 ctx.resizeYAxis()
             },
@@ -416,6 +417,9 @@ export default defineComponent({
         line-height: 100px;
         overflow: hidden;
         text-overflow: ellipsis;
+        &--text {
+            font-size: 12px;
+        }
     }
 }
 .y-axis {
@@ -428,6 +432,7 @@ export default defineComponent({
         line-height: var(--cell-dimensions);
         overflow: hidden;
         text-overflow: ellipsis;
+        font-size: 12px;
     }
 }
 .y-axis-outer {
@@ -461,7 +466,7 @@ export default defineComponent({
     grid-template-columns: repeat(var(--matrix-rows), 1fr);
 
     &__cell {
-        font-size: 80%;
+        font-size: 60%;
         cursor: pointer;
         border: 1px solid var(--dl-color-separator);
         box-sizing: border-box;

package/src/demos/DlConfusionMatrixDemo.vue

@@ -8,44 +8,55 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlConfusionMatrix } from '../components'
-export default defineComponent({
-    components: {
-        DlConfusionMatrix
-    },
-    setup() {
-        const matrix = []
-        const labels = []
-        const size = 10
 
-        const getLink = (number: number) => {
-            return `www.confusion-matrix.com/cell-${number}`
-        }
+const getLink = (number: number) => {
+    return `www.confusion-matrix.com/cell-${number}`
+}
+
+const getMatrix = (size: number) => {
+    const newMatrix = []
 
-        for (let i = 0; i < size; i++) {
-            const row = []
-            for (let j = 0; j < size; j++) {
-                const value = Math.floor(Math.random() * 10)
-                row.push({
-                    value,
-                    link: getLink(value)
-                })
-            }
-            matrix.push(row)
+    for (let i = 0; i < size; i++) {
+        const row = []
+        for (let j = 0; j < size; j++) {
+            const value = Math.floor(Math.random() * 10)
+            row.push({
+                value,
+                link: getLink(value)
+            })
         }
+        newMatrix.push(row)
+    }
+    return newMatrix
+}
 
-        // const items = [
-        //     { title: 'Van', image: 'https://picsum.photos/200/200' },
-        //     { title: 'Truck', image: 'https://picsum.photos/200/200' },
-        //     { title: 'Motorcycle', image: 'https://picsum.photos/200/200'},
-        //     { title: 'Car', image: 'https://picsum.photos/200/200'},
-        //     { title: 'Bus', image: 'https://picsum.photos/200/200'}
-        // ]
+const getLabels = (size: number) => {
+    const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
 
-        const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
+    // const items = [
+    //     { title: 'Van', image: 'https://picsum.photos/200/200' },
+    //     { title: 'Truck', image: 'https://picsum.photos/200/200' },
+    //     { title: 'Motorcycle', image: 'https://picsum.photos/200/200'},
+    //     { title: 'Car', image: 'https://picsum.photos/200/200'},
+    //     { title: 'Bus', image: 'https://picsum.photos/200/200'}
+    // ]
+    const newLabels = []
 
-        for (let i = 0; i < size; i++) {
-            labels.push(items[Math.floor(Math.random() * items.length)])
-        }
+    for (let i = 0; i < size; i++) {
+        newLabels.push(items[Math.floor(Math.random() * items.length)])
+    }
+
+    return newLabels
+}
+
+export default defineComponent({
+    components: {
+        DlConfusionMatrix
+    },
+    setup() {
+        const SIZE = 10
+        const matrix = getMatrix(SIZE)
+        const labels = getLabels(SIZE)
 
         return { matrix, labels, getLink }
     }