@dataloop-ai/components 0.17.134 → 0.18.1

package/src/components/compound/DlCard/components/DescriptionModal.vue

@@ -0,0 +1,137 @@
+<template>
+    <div @click="stopPropagationEvent">
+        <DlButton
+            flat
+            icon-color="dl-color-darker"
+            icon="icon-dl-edit"
+            size="s"
+            round
+            @click="openModal"
+        />
+        <dl-dialog-box
+            ref="modalOne"
+            v-model="isOpenedModal"
+        >
+            <template #header>
+                <dl-dialog-box-header
+                    title="Description"
+                    @onClose="closeModal"
+                />
+            </template>
+            <template #body>
+                <dl-text-area
+                    v-model="descriptionValueComputed"
+                    required
+                    show-counter
+                    enable-resize
+                    placeholder="Type an item description"
+                    :max-length="1000"
+                    clear-button-tooltip
+                    :error-message="errorMessage"
+                    @focus="onFocusTextarea"
+                    @blur="textAreaFocused = false"
+                />
+            </template>
+            <template #footer>
+                <dl-dialog-box-footer>
+                    <dl-button
+                        :disabled="isDisabledApplyButton"
+                        @click="updateDescription"
+                    >
+                        Apply
+                    </dl-button>
+                </dl-dialog-box-footer>
+            </template>
+        </dl-dialog-box>
+    </div>
+</template>
+
+<script lang="ts">
+import {
+    defineComponent,
+    ref,
+    computed,
+    onMounted,
+    watch,
+    toRef
+} from 'vue-demi'
+import { DlButton, DlTextArea } from '../../../../components'
+import DlDialogBox from '../../../compound/DlDialogBox/DlDialogBox.vue'
+import DlDialogBoxHeader from '../../../compound/DlDialogBox/components/DlDialogBoxHeader.vue'
+import DlDialogBoxFooter from '../../../compound/DlDialogBox/components/DlDialogBoxFooter.vue'
+
+export default defineComponent({
+    name: 'DescriptionModal',
+    components: {
+        DlButton,
+        DlDialogBox,
+        DlDialogBoxHeader,
+        DlDialogBoxFooter,
+        DlTextArea
+    },
+    props: {
+        description: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['onSubmit'],
+    setup(props, ctx) {
+        const isOpenedModal = ref<boolean>(false)
+        const textAreaValue = ref<string>('')
+        const textAreaFocused = ref<boolean>(false)
+        const errorMessage = ref<string>('')
+        const isDisabledApplyButton = ref<boolean>(true)
+        const MIN_LENGTH = 3
+        const descriptionRef = toRef(props, 'description')
+
+        const openModal = (): void => {
+            isOpenedModal.value = true
+        }
+        const closeModal = (): void => {
+            isOpenedModal.value = false
+        }
+        const updateDescription = (): void => {
+            ctx.emit('onSubmit', textAreaValue.value)
+            closeModal()
+        }
+        const onFocusTextarea = (): void => {
+            textAreaFocused.value = true
+        }
+        const descriptionValueComputed = computed<string>({
+            get() {
+                return descriptionRef.value
+            },
+            set(value) {
+                textAreaValue.value = value
+            }
+        })
+        const stopPropagationEvent: any = (event: MouseEvent) => {
+            event.stopPropagation()
+        }
+        watch(textAreaValue, (value) => {
+            isDisabledApplyButton.value = value.length < MIN_LENGTH
+        })
+        onMounted(() => {
+            isDisabledApplyButton.value =
+                descriptionValueComputed.value?.length <= 1
+        })
+
+        return {
+            isOpenedModal,
+            openModal,
+            closeModal,
+            textAreaValue,
+            textAreaFocused,
+            errorMessage,
+            isDisabledApplyButton,
+            updateDescription,
+            onFocusTextarea,
+            descriptionValueComputed,
+            stopPropagationEvent
+        }
+    }
+})
+</script>
+
+<style scoped></style>

package/src/components/compound/DlCard/types.ts

@@ -0,0 +1,38 @@
+export type DlCardTagType = {
+    label: string
+    color?: string
+    textColor?: string
+}
+
+export type DlCardImageType = {
+    src: string
+    styles?: string
+    alt?: string
+    link?: {
+        href: string
+        icon: string
+        color?: string
+        backgroundColor?: string
+        size?: string
+    }
+}
+
+export type DlCardIconType = {
+    icon: string
+    color?: string
+    size?: string
+    styles: string
+}
+
+export type DlCardHintType = {
+    icon: string
+    color?: string
+}
+
+export type DlCardLinkType = {
+    title: string
+    href: string
+    icon?: string
+    newtab?: boolean
+    external?: boolean
+}

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

@@ -4,7 +4,22 @@
             class="canvas-container"
             :style="`height: ${wrapperHeight}`"
         >
+            <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>
             <Bar
+                v-if="!isEmpty"
                 :id="id"
                 ref="barChart"
                 :class="chartClasses"
@@ -15,7 +30,7 @@
                 @wheel.native="handleChartScroll"
             />
             <dl-chart-scroll-bar
-                v-if="maxItems > thisItemsInView"
+                v-if="!isEmpty || (maxItems > thisItemsInView && !isEmpty)"
                 :wrapper-styles="{
                     marginTop: '10px'
                 }"
@@ -28,10 +43,12 @@
             />
         </div>
         <slot
+            v-if="!isEmpty"
             v-bind="{ labels: xLabels, chartWidth }"
             name="axe-x-labels"
         />
         <slot
+            v-if="!isEmpty"
             v-bind="{
                 data: legendDatasets,
                 chartWidth,
@@ -62,7 +79,14 @@ import {
     BarChartProps,
     defaultBarChartProps
 } from '../../types/props'
-import { defineComponent, reactive, ref, watch, computed } from 'vue-demi'
+import {
+    defineComponent,
+    reactive,
+    ref,
+    watch,
+    computed,
+    PropType
+} from 'vue-demi'
 import DlChartLegend from '../../components/DlChartLegend.vue'
 import DlChartScrollBar from '../../components/DlChartScrollBar.vue'
 import { updateKey } from '../../../../../utils/update-key'
@@ -82,6 +106,8 @@ import type { Chart, ChartMeta, ChartDataset, ActiveElement } from 'chart.js'
 import { isEqual, merge } from 'lodash'
 import { rgba2hex, hexToRgbA, revertRGBAOpacity } from '../../../../../utils'
 import { useThemeVariables } from '../../../../../hooks/use-theme'
+import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
+import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
 
 ChartJS.register(
     CategoryScale,
@@ -98,7 +124,8 @@ export default defineComponent({
     components: {
         Bar,
         DlChartScrollBar,
-        DlChartLegend
+        DlChartLegend,
+        DlEmptyState
     },
     props: {
         ...CommonProps,
@@ -110,6 +137,11 @@ export default defineComponent({
         id: {
             type: String,
             default: null
+        },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
         }
     },
     setup(props) {

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

@@ -3,7 +3,22 @@
         :style="cssVars"
         :class="chartWrapperClasses"
     >
+        <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>
         <Bar
+            v-if="!isEmpty"
             :id="id"
             ref="columnChart"
             :class="chartClasses"
@@ -13,7 +28,7 @@
             @mouseout="onChartLeave"
         />
         <slot
-            v-if="displayLabels"
+            v-if="!isEmpty || displayLabels"
             v-bind="{ ...labelStyles, labels: xLabels, chartWidth }"
             name="axe-x-labels"
         >
@@ -28,7 +43,7 @@
             />
         </slot>
         <slot
-            v-if="displayBrush"
+            v-if="displayBrush || !isEmpty"
             v-bind="{
                 chartWidth,
                 modelValue: brush.value,
@@ -52,7 +67,7 @@
             />
         </slot>
         <slot
-            v-if="displayLegend"
+            v-if="displayLegend || !isEmpty"
             v-bind="{
                 data: legendDatasets,
                 chartWidth,
@@ -81,9 +96,18 @@ import { Bar } from '../../types/typedCharts'
 import {
     CommonProps,
     ColumnChartProps,
-    defaultColumnChartProps
+    defaultColumnChartProps,
+    CommonPropsType,
+    ColumnChartPropsType
 } from '../../types/props'
-import { defineComponent, reactive, watch, ref, computed } from 'vue-demi'
+import {
+    defineComponent,
+    reactive,
+    watch,
+    ref,
+    computed,
+    PropType
+} from 'vue-demi'
 import DlBrush from '../../components/DlBrush.vue'
 import DlChartLegend from '../../components/DlChartLegend.vue'
 import DlChartLabels from '../../components/DlChartLabels.vue'
@@ -102,6 +126,8 @@ import {
     DatasetController,
     BarControllerDatasetOptions
 } from 'chart.js'
+import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
+import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
 import type {
     Chart,
     ChartMeta,
@@ -125,23 +151,36 @@ ChartJS.register(
     LineElement
 )
 
+type ComponentType = {
+    id: string
+    isEmpty: boolean
+    emptyStateProps: DlEmptyStateProps
+} & CommonPropsType &
+    ColumnChartPropsType
+
 export default defineComponent({
     name: 'DlColumnChart',
     components: {
         DlBrush,
         DlChartLegend,
         Bar,
-        DlChartLabels
+        DlChartLabels,
+        DlEmptyState
     },
     props: {
         id: {
             type: String,
             default: null
         },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: null
+        },
         ...CommonProps,
         ...ColumnChartProps
-    },
-    setup(props, { slots }) {
+    } as { [key: string]: any },
+    setup(props) {
         const { variables } = useThemeVariables()
 
         const chartWidth = ref('100%')
@@ -152,7 +191,7 @@ export default defineComponent({
 
         const onResize = (
             chart: Chart,
-            size: { height: number; width: number }
+            _size: { height: number; width: number }
         ) => {
             if (chart?.scales?.x?.width) {
                 chartWidth.value = `${
@@ -240,7 +279,7 @@ export default defineComponent({
                 props.legendProps?.datasets || [],
                 props.data?.datasets || [],
                 'label'
-            )
+            ) as { [key: string]: any }[]
         )
 
         const getChartBackup = () => {
@@ -470,7 +509,7 @@ export default defineComponent({
         const xLabels = ref(props.data.labels)
 
         const onHoverLegend = (
-            item: BarControllerDatasetOptions,
+            _item: BarControllerDatasetOptions,
             index: number
         ) => {
             const filteredItems = chart.value.data.datasets
@@ -498,7 +537,7 @@ export default defineComponent({
         })
 
         const onLeaveLegend = (
-            item: BarControllerDatasetOptions,
+            _item: BarControllerDatasetOptions,
             index: number
         ) => {
             const filteredItems = chart.value.data.datasets

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"
@@ -72,6 +86,7 @@
                                     : null
                             }}
                             <dl-tooltip
+                                id="MatrixTooltip"
                                 class="matrix-tooltip"
                                 background-color="dl-color-shadow"
                                 color="dl-color-tooltip-background"
@@ -105,7 +120,7 @@
                 >
                     <span
                         v-for="(label, index) in visibleLabels"
-                        ref="xAxis"
+                        :ref="`xAxis-${index}`"
                         :key="index"
                         class="x-axis__element"
                         :style="`${
@@ -128,7 +143,10 @@
                                 {{ label }}
                             </span>
                         </span>
-                        <dl-tooltip self="top middle">
+                        <dl-tooltip
+                            self="top middle"
+                            :offset="calculateXAxisElOffset(index)"
+                        >
                             {{ labelStrings[index] }}</dl-tooltip>
                     </span>
                 </div>
@@ -182,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,
@@ -194,7 +214,8 @@ import { debounce, isObject } from 'lodash'
 export default defineComponent({
     components: {
         DlBrush,
-        DlTooltip
+        DlTooltip,
+        DlEmptyState
     },
     props: {
         labels: {
@@ -226,18 +247,23 @@ 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
-            visible?: boolean
             value?: number
-            yLabel?: string
             xLabel?: string
+            yLabel?: string
+            x?: number
+            y?: number
+            visible?: boolean
         } | null>(null)
         const currentBrushState = ref<{ min: number; max: number }>({
             min: 0,
@@ -245,6 +271,7 @@ export default defineComponent({
         })
         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 } = {
@@ -264,6 +291,7 @@ export default defineComponent({
         }
 
         return {
+            resizeObserver,
             variables,
             getCellBackground,
             getCellTextColor,
@@ -327,16 +355,43 @@ export default defineComponent({
                 )
             )
             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
@@ -517,9 +572,11 @@ export default defineComponent({
     }
 }
 
-.matrix-tooltip {
-    --dl-tooltip-padding: 0px;
+#MatrixTooltip {
+    padding: 0;
+}
 
+.matrix-tooltip {
     &__body {
         border: 1px solid var(--dl-color-separator);
         padding: 8px;

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) {
@@ -273,7 +297,7 @@ export default defineComponent({
                         tooltip: {
                             yAlign: 'none',
                             callbacks: {
-                                labelColor (
+                                labelColor(
                                     tooltipItem: { dataIndex: string | number },
                                     chart: any
                                 ) {

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

@@ -99,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 {