@dataloop-ai/components 0.19.10 → 0.19.11

package/package.json

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

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

@@ -54,7 +54,10 @@
                             class="legend-avatar"
                             :src="labelImages[index]"
                         >
-                        <span v-else>
+                        <span
+                            v-else
+                            class="label"
+                        >
                             {{ label }}
                         </span>
                         <dl-tooltip :offset="[0, 0]">
@@ -121,10 +124,7 @@
                         </div>
                     </div>
                 </div>
-                <div
-                    class="x-axis"
-                    style="margin-top: 10px"
-                >
+                <div class="x-axis">
                     <div
                         v-for="(label, index) in visibleLabels"
                         :key="index"
@@ -133,6 +133,7 @@
                             flex-grow: 100;
                             width: 100%;
                             justify-content: center;
+                            overflow: hidden;
                         "
                     >
                         <span
@@ -156,16 +157,20 @@
                                     class="legend-avatar"
                                     :src="labelImages[index]"
                                 >
-                                <span v-else>
+                                <span
+                                    v-else
+                                    class="label"
+                                >
                                     {{ label }}
                                 </span>
                             </span>
-                            <dl-tooltip
-                                self="top middle"
-                                :offset="debouncedCalculateXAxisElOffset(index)"
-                            >
-                                {{ labelStrings[index] }}</dl-tooltip>
                         </span>
+                        <dl-tooltip
+                            self="top middle"
+                            :offset="debouncedCalculateXAxisElOffset(index)"
+                        >
+                            {{ labelStrings[index] }}
+                        </dl-tooltip>
                     </div>
                 </div>
                 <dl-brush
@@ -292,7 +297,7 @@ export default defineComponent({
     },
     setup(props) {
         const vm = getCurrentInstance()
-        const { variables } = useThemeVariables()
+        const { variables, isDark = { value: false } } = useThemeVariables()
         const currentBrushState = ref<{ min: number; max: number }>({
             min: 0,
             max: Math.min(props.matrix.length, props.cellDisplayLimit)
@@ -312,13 +317,22 @@ export default defineComponent({
         }
 
         const getCellTextColor = (value: number) => {
-            const isDark =
-                document.documentElement.getAttribute('data-theme') ===
-                'dark-mode'
-            if (isDark) return 'var(--dl-color-text-buttons)'
+            if (isDark.value) return 'var(--dl-color-text-buttons)'
             return `var(--dl-color-text${value < 0.5 ? '-darker' : ''}-buttons)`
         }
 
+        const gradationDarkColor = computed(() => {
+            return isDark.value
+                ? getCellBackground()
+                : 'var(--dl-color-secondary)'
+        })
+
+        const gradationLightColor = computed(() => {
+            return isDark.value
+                ? 'var(--dl-color-text-darker-buttons)'
+                : 'var(--dl-color-text-buttons)'
+        })
+
         const calculateXAxisElOffset = (index: number): number[] => {
             let el = vm.refs[`xAxis-${index}`] as HTMLElement
             if (!el) return null
@@ -330,7 +344,7 @@ export default defineComponent({
             }
             const height = el.clientHeight
             const offsetHeight = -1 * (height / 2)
-            return [0, offsetHeight]
+            return [0, offsetHeight + 30]
         }
 
         const debouncedCalculateXAxisElOffset = computed(() => {
@@ -350,7 +364,9 @@ export default defineComponent({
             rotateXLabels,
             calculateXAxisElOffset,
             debouncedCalculateXAxisElOffset,
-            isDisposed
+            isDisposed,
+            gradationDarkColor,
+            gradationLightColor
         }
     },
     computed: {
@@ -384,7 +400,8 @@ export default defineComponent({
             return {
                 '--matrix-rows': this.matrix.length,
                 '--cell-dimensions': `${this.cellWidth}px`,
-                '--general-color': this.getCellBackground()
+                '--gradation-dark': this.gradationDarkColor,
+                '--gradation-light': this.gradationLightColor
             }
         },
         gradationValues(): number[] {
@@ -524,6 +541,12 @@ export default defineComponent({
     align-items: center;
 }
 
+.label {
+    transform: translateX(40%);
+    display: block;
+    text-align: start;
+}
+
 .label-tag {
     font-size: 0.8em;
     color: var(--dl-color-medium);
@@ -541,7 +564,7 @@ export default defineComponent({
     width: 100%;
     display: flex;
     justify-content: space-evenly;
-    margin-top: 10px;
+    margin: 10px 0px 15px 0px;
     min-height: 100px;
     max-height: 100px;
     &__element {
@@ -568,6 +591,7 @@ export default defineComponent({
 }
 .y-axis-outer {
     overflow: hidden;
+    margin-right: 10px;
     width: 200px;
 }
 .y-axis,
@@ -615,8 +639,8 @@ export default defineComponent({
     &__gradient {
         width: 40%;
         background-image: linear-gradient(
-            var(--general-color),
-            var(--dl-color-text-buttons)
+            var(--gradation-dark),
+            var(--gradation-light)
         );
     }
     &__gradation {

package/src/demos/DlConfusionMatrixDemo.vue

@@ -61,7 +61,13 @@ const getMatrix = (size: number) => {
 }
 
 const getLabels = (size: number) => {
-    const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
+    const items = [
+        'Van',
+        'Truck',
+        'MotorcycleLooooooooooooooooooooooooooong',
+        'Car',
+        'Bus'
+    ]
 
     // const items = [
     //     { title: 'Van', image: 'https://picsum.photos/200/200' },

package/src/hooks/use-theme.ts

@@ -1,8 +1,8 @@
 import { getRootStyles } from '../utils/getRootStyles'
-import { inject, watch, reactive } from 'vue-demi'
+import { inject, watch, reactive, Ref } from 'vue-demi'
 
 export const useThemeVariables = () => {
-    const isDark = inject('theme')
+    const isDark = inject('theme') as Ref
 
     const variables = reactive(getRootStyles())
 
@@ -14,6 +14,6 @@ export const useThemeVariables = () => {
         { deep: true }
     )
 
-    if (variables) return { variables }
+    if (variables) return { variables, isDark }
     return
 }