@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -3,8 +3,22 @@
         :style="`max-width: ${maxWidth}`"
         class="confusion-matrix-container"
     >
+        <dl-empty-state
+            v-if="isEmpty"
+            v-bind="emptyStateProps"
+        >
+            <template
+                v-for="(_, slot) in $slots"
+                #[slot]="props"
+            >
+                <slot
+                    :name="slot"
+                    v-bind="props"
+                />
+            </template>
+        </dl-empty-state>
         <div
-            v-if="isValidMatrix"
+            v-else-if="isValidMatrix"
             ref="wrapper"
             :style="matrixStyles"
             class="wrapper"
@@ -61,11 +75,7 @@
                             class="matrix__cell"
                             :style="`background-color: ${getCellBackground(
                                 cell.value
-                            )}; color: var(--dl-color-text${
-                                cell.value < 0.5 ? '-darker' : ''
-                            }-buttons)`"
-                            @mouseenter="handleShowTooltip(cell, $event)"
-                            @mouseleave="handleHideTooltip"
+                            )}; color: ${getCellTextColor(cell.value)}`"
                             @mousedown="openLink(cell)"
                         >
                             {{
@@ -75,16 +85,52 @@
                                         : cell.unnormalizedValue
                                     : null
                             }}
+                            <dl-tooltip
+                                id="MatrixTooltip"
+                                class="matrix-tooltip"
+                                background-color="dl-color-shadow"
+                                color="dl-color-tooltip-background"
+                                :offset="[5, 5]"
+                            >
+                                <div class="matrix-tooltip__body">
+                                    <span>{{ cell.xLabel }}</span>
+                                    <span>{{ cell.yLabel }}</span>
+                                    <span class="matrix-tooltip__value">
+                                        <span
+                                            v-if="cell.value"
+                                            class="matrix-tooltip__color"
+                                            :style="`background-color: ${getCellBackground(
+                                                cell.value
+                                            )}`"
+                                        />
+                                        {{
+                                            normalized
+                                                ? `Normalized ${cell.value}`
+                                                : `Unnormalized ${cell.unnormalizedValue}`
+                                        }}
+                                    </span>
+                                </div>
+                            </dl-tooltip>
                         </div>
                     </div>
                 </div>
-                <div class="x-axis">
+                <div
+                    class="x-axis"
+                    style="margin-top: 10px"
+                >
                     <span
                         v-for="(label, index) in visibleLabels"
+                        :ref="`xAxis-${index}`"
                         :key="index"
                         class="x-axis__element"
                         :style="`${
-                            !labelImages[0] ? 'transform: rotate(70deg);' : ''
+                            !labelImages[0]
+                                ? `transform: rotate(${
+                                    rotateXLabels ? '70' : '0'
+                                }deg); line-height: ${
+                                    rotateXLabels ? 100 : 10
+                                }px`
+                                : ''
                         }`"
                     >
                         <span class="x-axis__element--text">
@@ -96,8 +142,12 @@
                             <span v-else>
                                 {{ label }}
                             </span>
-                            <dl-tooltip> {{ labelStrings[index] }}</dl-tooltip>
                         </span>
+                        <dl-tooltip
+                            self="top middle"
+                            :offset="calculateXAxisElOffset(index)"
+                        >
+                            {{ labelStrings[index] }}</dl-tooltip>
                     </span>
                 </div>
                 <dl-brush
@@ -136,32 +186,13 @@
         >
             The given props cannot create a valid matrix.
         </div>
-        <div
-            v-if="tooltipVisible"
-            :style="tooltipStyles"
-            class="tooltip"
-        >
-            <span class="tooltip__x">{{ tooltipState.xLabel }}</span>
-            <span class="tooltip__y">{{ tooltipState.yLabel }}</span>
-            <span>
-                <span
-                    v-if="tooltipState.value"
-                    class="tooltip__color"
-                    :style="`background-color: ${getCellBackground(
-                        tooltipState.value
-                    )}`"
-                />
-                {{ normalized ? 'Normalized' : 'Unnormalized' }}
-                {{ tooltipState.value }}
-            </span>
-        </div>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue-demi'
 import DlBrush from '../../components/DlBrush.vue'
-import DlTooltip from '../../../../essential/DlTooltip/DlTooltip.vue'
+import { DlTooltip } from '../../../../shared'
 import {
     DlConfusionMatrixCell,
     DlConfusionMatrixLabel,
@@ -169,6 +200,8 @@ import {
 } from '../../types'
 import { hexToRgbA } from '../../../../../utils/colors'
 import { colorNames } from '../../../../../utils/css-color-names'
+import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
+import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
 import { useThemeVariables } from '../../../../../hooks/use-theme'
 import {
     getGradationValues,
@@ -181,7 +214,8 @@ import { debounce, isObject } from 'lodash'
 export default defineComponent({
     components: {
         DlBrush,
-        DlTooltip
+        DlTooltip,
+        DlEmptyState
     },
     props: {
         labels: {
@@ -213,14 +247,22 @@ export default defineComponent({
         maxWidth: {
             type: String,
             default: '800px'
+        },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
         }
     },
     setup(props) {
         const { variables } = useThemeVariables()
 
         const tooltipState = ref<{
-            x: string
-            y: string
+            value?: number
+            xLabel?: string
+            yLabel?: string
+            x?: number
+            y?: number
             visible?: boolean
         } | null>(null)
         const currentBrushState = ref<{ min: number; max: number }>({
@@ -228,6 +270,8 @@ export default defineComponent({
             max: props.matrix.length
         })
         const cellWidth = ref<number | null>(null)
+        const rotateXLabels = ref(true)
+        const resizeObserver = ref<ResizeObserver>(null)
 
         const getCellBackground = (value: number = 1): string => {
             const object: { [key: string]: any } = {
@@ -237,20 +281,28 @@ export default defineComponent({
             const hex = object[props.color]
             return hexToRgbA(hex, value)
         }
+
+        const getCellTextColor = (value: number) => {
+            const isDark =
+                document.documentElement.getAttribute('data-theme') ===
+                'dark-mode'
+            if (isDark) return 'var(--dl-color-text-buttons)'
+            return `var(--dl-color-text${value < 0.5 ? '-darker' : ''}-buttons)`
+        }
+
         return {
+            resizeObserver,
             variables,
             getCellBackground,
+            getCellTextColor,
             cellWidth,
-            tooltipState,
-            currentBrushState
+            currentBrushState,
+            rotateXLabels
         }
     },
     computed: {
-        tooltipVisible(): boolean {
-            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,
@@ -275,33 +327,71 @@ export default defineComponent({
         flattenedMatrix(): DlConfusionMatrixCell[] {
             return flattenConfusionMatrix(this.matrix, this.labelStrings)
         },
-        matrixStyles(): object {
+        matrixStyles(): Record<string, number | string> {
             return {
                 '--matrix-rows': this.matrix.length,
                 '--cell-dimensions': `${this.cellWidth}px`,
                 '--general-color': this.getCellBackground()
             }
         },
-        tooltipStyles(): object {
-            return {
-                left: `${this.tooltipState?.x + 10}px`,
-                top: `${this.tooltipState?.y + 15}px`
-            }
-        },
         gradationValues(): number[] {
             return this.normalized
                 ? [1, 0.8, 0.6, 0.4, 0.2, 0]
                 : getGradationValues(this.matrix)
         }
     },
+    watch: {
+        matrix: {
+            handler(value) {
+                this.currentBrushState.max = value.length
+                this.resizeMatrix()
+            }
+        },
+        currentBrushState() {
+            const longest = Math.max(
+                ...this.visibleLabels.map(
+                    (el: DlConfusionMatrixLabel) =>
+                        (isObject(el) ? el.title : `${el}`).length
+                )
+            )
+            this.rotateXLabels = longest * 12 > getCellWidth()
+        },
+        isEmpty(val) {
+            this.handleResizeObserver({ dispose: !val })
+        }
+    },
     mounted() {
         if (!this.isValidMatrix) return
-        this.resizeMatrix()
-        const resizeObserver = new ResizeObserver(this.resizeMatrix)
-        resizeObserver.observe(this.$refs.wrapper as Element)
-        window.onresize = this.resizeMatrix
+        if (this.isEmpty) return
+
+        this.handleResizeObserver()
     },
     methods: {
+        calculateXAxisElOffset(index: number): number[] {
+            let el = this.$refs[`xAxis-${index}`] as HTMLElement
+            if (!el) return null
+            if (Array.isArray(el)) {
+                el = el[0]
+            }
+            const height = el.clientHeight
+            const offsetHeight = -1 * (height / 2)
+            return [0, offsetHeight]
+        },
+        handleResizeObserver(options: { dispose?: boolean } = {}) {
+            const { dispose } = options
+            if (dispose && this.resizeObserver) {
+                this.resizeObserver.unobserve(this.$refs.wrapper as Element)
+                this.resizeObserver.disconnect()
+                this.resizeObserver = null
+            } else {
+                this.resizeMatrix()
+                if (!this.resizeObserver) {
+                    this.resizeObserver = new ResizeObserver(this.resizeMatrix)
+                    this.resizeObserver.observe(this.$refs.wrapper as Element)
+                    window.onresize = this.resizeMatrix
+                }
+            }
+        },
         resizeMatrix() {
             const colorSpectrum = this.$refs.colorSpectrum as HTMLElement
             const verticalWrapper = this.$refs.verticalWrapper as HTMLElement
@@ -328,9 +418,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()
             },
@@ -340,32 +430,10 @@ export default defineComponent({
             const yAxis = this.$refs.yAxis as HTMLElement
             yAxis.style.height = `${getCellWidth() * this.matrix.length}px`
         },
-        handleMatrixScroll(e: MouseEvent) {
+        handleMatrixScroll(e: MouseEvent | UIEvent) {
             const target = e.target as HTMLElement
             ;(this.$refs.yAxisOuter as HTMLElement).scroll(0, target.scrollTop)
         },
-        handleShowTooltip(cell: DlConfusionMatrixCell, e: MouseEvent) {
-            this.showTooltip(this, cell, e)
-        },
-        handleHideTooltip() {
-            this.hideTooltip(this)
-        },
-        showTooltip: debounce(
-            (ctx: any, cell: DlConfusionMatrixCell, e: MouseEvent) => {
-                ctx.tooltipState = {
-                    value: ctx.normalized ? cell.value : cell.unnormalizedValue,
-                    xLabel: cell.xLabel,
-                    yLabel: cell.yLabel,
-                    x: e.pageX,
-                    y: e.pageY,
-                    visible: true
-                }
-            },
-            200
-        ),
-        hideTooltip: debounce((ctx: any) => {
-            if (ctx?.tooltipState) ctx.tooltipState.visible = false
-        }, 200),
         openLink(cell: DlConfusionMatrixCell) {
             if (!cell.link) return
             window.open(cell.link, '_blank')
@@ -407,15 +475,17 @@ export default defineComponent({
 .x-axis {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-evenly;
     margin-top: 10px;
     min-height: 100px;
     max-height: 100px;
     &__element {
         width: var(--cell-dimensions);
-        line-height: 100px;
         overflow: hidden;
         text-overflow: ellipsis;
+        &--text {
+            font-size: 12px;
+        }
     }
 }
 .y-axis {
@@ -428,6 +498,7 @@ export default defineComponent({
         line-height: var(--cell-dimensions);
         overflow: hidden;
         text-overflow: ellipsis;
+        font-size: 12px;
     }
 }
 .y-axis-outer {
@@ -461,7 +532,7 @@ export default defineComponent({
     grid-template-columns: repeat(var(--matrix-rows), 1fr);
 
     &__cell {
-        font-size: 80%;
+        font-size: 12px;
         cursor: pointer;
         border: 1px solid var(--dl-color-separator);
         box-sizing: border-box;
@@ -501,16 +572,25 @@ export default defineComponent({
     }
 }
 
-.tooltip {
-    position: absolute;
-    border: 1px solid var(--dl-color-separator);
-    padding: 8px;
-    font-size: 0.8em;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--dl-color-shadow);
-    border-radius: 3px;
-    animation: fadeIn 0.4s;
+#MatrixTooltip {
+    padding: 0;
+}
+
+.matrix-tooltip {
+    &__body {
+        border: 1px solid var(--dl-color-separator);
+        padding: 8px;
+        font-size: 10px;
+        line-height: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    &__value {
+        display: flex;
+        align-items: center;
+    }
 
     &__color {
         display: inline-block;

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/utils.ts

@@ -2,7 +2,8 @@ import { isObject } from 'lodash'
 import { DlConfusionMatrixCell, DlConfusionMatrixLabel } from '../../types'
 
 export function getCellWidth() {
-    return document.querySelector('.matrix__cell').getBoundingClientRect().width
+    return document.querySelector('.matrix__cell')?.getBoundingClientRect()
+        .width
 }
 
 export function setZoom(zoom: number, el: HTMLElement) {

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

@@ -3,8 +3,22 @@
         ref="dlDoughnutChartWidgetRef"
         class="dl_doughnut"
     >
+        <dl-empty-state
+            v-if="isEmpty"
+            v-bind="emptyStateProps"
+        >
+            <template
+                v-for="(_, slot) in $slots"
+                #[slot]="props"
+            >
+                <slot
+                    :name="slot"
+                    v-bind="props"
+                />
+            </template>
+        </dl-empty-state>
         <div
-            v-if="itemsCount"
+            v-if="itemsCount && !isEmpty"
             class="dl_doughnut__wrapper"
             :class="classFlexLg"
         >
@@ -52,7 +66,7 @@
                 </div>
             </div>
         </div>
-        <div v-else>
+        <div v-else-if="!itemsCount && !isEmpty">
             No data
         </div>
     </div>
@@ -88,12 +102,15 @@ import { updateNestedArrayValues } from '../../../../../utils/update-key'
 import DlDoughnutChartLegend from './components/DlDoughnutChartLegend.vue'
 import { defaultDoughnutChartProps } from '../../types/props'
 import { TDoughnutWithOriginalColor } from './types/TDoughnutWithOriginalColor'
+import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
+import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
 
 export default defineComponent({
     name: 'DlDoughnutChart',
     components: {
         Doughnut,
-        DlDoughnutChartLegend
+        DlDoughnutChartLegend,
+        DlEmptyState
     },
     props: {
         data: {
@@ -112,7 +129,14 @@ export default defineComponent({
             type: Object as PropType<
                 DoughnutControllerChartOptions['animation']
             >,
+            default: () =>
+                Object as PropType<DoughnutControllerChartOptions['animation']>,
             required: false
+        },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
         }
     },
     setup(props) {
@@ -269,6 +293,23 @@ export default defineComponent({
                     plugins: {
                         legend: {
                             display: false
+                        },
+                        tooltip: {
+                            yAlign: 'none',
+                            callbacks: {
+                                labelColor(
+                                    tooltipItem: { dataIndex: string | number },
+                                    chart: any
+                                ) {
+                                    return {
+                                        backgroundColor:
+                                            chartRefValue.value.data.datasets[0]
+                                                .hoverBackgroundColor[
+                                                tooltipItem.dataIndex
+                                            ]
+                                    }
+                                }
+                            }
                         }
                     }
                 },

package/src/components/compound/DlCharts/charts/DlDoughnutChart/DlDoughnutChartWidget.vue

@@ -26,14 +26,13 @@
 import { defineComponent, PropType } from 'vue-demi'
 import DlDoughnutChart from './DlDoughnutChart.vue'
 import { TDoughnutChartData } from './types/TDoughnutChartData'
-import { DlWidget, DlGridRow, DlGrid } from '../../../../basic'
+import { DlWidget, DlGrid } from '../../../../basic'
 
 export default defineComponent({
     name: 'DlDoughnutChartWidget',
     components: {
         DlDoughnutChart,
         DlGrid,
-        DlGridRow,
         DlWidget
     },
     props: {

package/src/components/compound/DlCharts/charts/DlDoughnutChart/components/DlDoughnutChartLegend.vue

@@ -15,12 +15,6 @@
                 @mouseenter="emitMouseOverLegend(index)"
                 @mouseleave="emitMouseLeaveLegend(index)"
             >
-                <dl-tooltip
-                    self="top middle"
-                    anchor="top middle"
-                >
-                    {{ data.labels[index] }}
-                </dl-tooltip>
                 <div class="wrapper__legend__item__label">
                     <div>
                         <div
@@ -28,14 +22,12 @@
                             :style="{ backgroundColor: getColor(index, badge) }"
                         />
                     </div>
-                    <dl-typography>
-                        <div
-                            :class="legendLabelClass"
-                            :style="{ color: getColor(index, text) }"
-                        >
-                            {{ data.labels[index] }}
-                        </div>
-                    </dl-typography>
+                    <div
+                        :class="legendLabelClass"
+                        :style="{ color: getColor(index, text) }"
+                    >
+                        <dl-ellipsis :text="data.labels[index]" />
+                    </div>
                 </div>
                 <div
                     class="wrapper__legend__item__counter truncate"
@@ -50,7 +42,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
-import { DlTypography, DlTooltip } from '../../../../../essential'
+import { DlEllipsis } from '../../../../../essential'
 import { TDoughnutChartData } from '../types/TDoughnutChartData'
 
 enum EBadgeText {
@@ -62,8 +54,7 @@ type TBadgeText = EBadgeText.badge | EBadgeText.text
 export default defineComponent({
     name: 'DlDoughnutChartLegend',
     components: {
-        DlTypography,
-        DlTooltip
+        DlEllipsis
     },
     props: {
         data: {
@@ -108,7 +99,7 @@ export default defineComponent({
             ]
         },
         itemsCount(): number | undefined {
-            return this.data?.datasets[0]?.data?.length
+            return (this.data?.datasets?.[0]?.data || []).length
         }
     },
     mounted(): void {