@dataloop-ai/components 0.18.0 → 0.18.2

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,
@@ -46,7 +63,7 @@
                 :datasets="legendDatasets"
                 :width="chartWidth"
                 :class="legendClasses"
-                :align-items="legendProperties.alignItems"
+                :align-items="legendProps.alignItems"
                 @hide="hideData"
                 @on-hover="onHoverLegend"
                 @on-leave="onLeaveLegend"
@@ -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) {
@@ -225,6 +257,9 @@ export default defineComponent({
             if (event.type !== 'mousemove') {
                 return
             }
+            const hover = !!document.querySelector('.drag-clone')
+            chartJS.options.plugins.tooltip.enabled = !hover
+            if (hover) return
             if (
                 items.length === 0 ||
                 chartJS.getElementsAtEventForMode(

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,12 +28,12 @@
             @mouseout="onChartLeave"
         />
         <slot
-            v-if="displayLabels"
+            v-if="!isEmpty || displayLabels"
             v-bind="{ ...labelStyles, labels: xLabels, chartWidth }"
             name="axe-x-labels"
         >
             <dl-chart-labels
-                :font-size="labelStyles.labelSize"
+                :font-size="labelStyles.fontSize"
                 :title="labelStyles.title"
                 :title-size="labelStyles.titleSize"
                 :title-color="labelStyles.titleColor"
@@ -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,14 +96,23 @@ 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'
 import { updateKey } from '../../../../../utils/update-key'
-import { rgba2hex, hexToRgbA, revertRGBAOpacity } from '../../../../../utils'
+import { hexToRgbA } from '../../../../../utils'
 import {
     Chart as ChartJS,
     Title,
@@ -99,10 +123,20 @@ import {
     LinearScale,
     PointElement,
     LineElement,
+    DatasetController,
     BarControllerDatasetOptions
 } from 'chart.js'
-import type { Chart, ChartMeta, ChartDataset, ActiveElement } from 'chart.js'
-import { unionBy, orderBy, merge, isEqual } from 'lodash'
+import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
+import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
+import type {
+    Chart,
+    ChartMeta,
+    ChartDataset,
+    ActiveElement,
+    ChartData
+} from 'chart.js'
+import { unionBy, orderBy, merge, isEqual, cloneDeep } from 'lodash'
+import { updateKeys } from '../../../../../utils/update-key'
 import { useThemeVariables } from '../../../../../hooks/use-theme'
 import { getMaxDatasetValue } from '../../utils'
 
@@ -117,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%')
@@ -144,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 = `${
@@ -154,15 +201,15 @@ export default defineComponent({
             }
         }
 
-        const chart = computed(() => {
-            return columnChart.value?.chart?.value || {}
-        })
-
         const replaceColor = (key: keyof typeof variables) =>
             variables[key] || key
 
         const columnChart = ref(null)
 
+        const chart = computed(() => {
+            return columnChart.value?.chart?.value || {}
+        })
+
         const brush = reactive({
             value: {
                 min: 0,
@@ -232,9 +279,49 @@ export default defineComponent({
                 props.legendProps?.datasets || [],
                 props.data?.datasets || [],
                 'label'
-            )
+            ) as { [key: string]: any }[]
         )
 
+        const getChartBackup = () => {
+            if (!chart.value) {
+                return {
+                    data: {},
+                    options: {}
+                }
+            }
+            const datasets: DatasetController<'bar'> = updateKeys(
+                props.data.datasets,
+                [
+                    'backgroundColor',
+                    'pointBackgroundColor',
+                    'pointBorderColor',
+                    'borderColor',
+                    'hoverBorderColor',
+                    'hoverBackgroundColor',
+                    'pointHoverBackgroundColor',
+                    'pointHoverBorderColor'
+                ],
+                replaceColor
+            ).map((item: BarControllerDatasetOptions) => {
+                return {
+                    ...item,
+                    backgroundColor:
+                        item.backgroundColor ||
+                        hexToRgbA(item.backgroundColor as string, 0.2)
+                }
+            })
+
+            const chartProps = cloneDeep({
+                options: props.options,
+                data: {
+                    ...props.data,
+                    datasets
+                }
+            })
+
+            return chartProps
+        }
+
         const onChartLeave = () => {
             if (chartHoverDataset.value) {
                 const filteredItems = chart.value.data.datasets
@@ -247,11 +334,16 @@ export default defineComponent({
                             dataset.label !== chartHoverDataset.value.label
                     )
 
+                const backup = getChartBackup()
+
                 for (const dataset of filteredItems) {
-                    chart.value.data.datasets[dataset.index].backgroundColor =
-                        rgba2hex(revertRGBAOpacity(dataset.backgroundColor))
+                    chart.value.data.datasets[dataset.index].backgroundColor = (
+                        backup.data as ChartData<'line'>
+                    ).datasets[dataset.index].backgroundColor
                 }
+
                 chart.value.update()
+
                 chartHoverDataset.value = null
             }
         }
@@ -286,13 +378,11 @@ export default defineComponent({
                                 dataset.label !== chartHoverDataset.value.label
                         )
 
+                    const backup = getChartBackup()
                     for (const dataset of filteredItems) {
-                        chartJS.data.datasets[dataset.index].backgroundColor =
-                            rgba2hex(
-                                revertRGBAOpacity(
-                                    dataset.backgroundColor as string
-                                )
-                            )
+                        chartJS.data.datasets[dataset.index].backgroundColor = (
+                            backup.data as ChartData<'bar'>
+                        ).datasets[dataset.index].backgroundColor
                     }
                     chartJS.update()
 
@@ -337,13 +427,12 @@ export default defineComponent({
                                 dataset.label !== chartHoverDataset.value.label
                         )
 
+                    const backup = getChartBackup()
+
                     for (const dataset of filteredItems) {
-                        chartJS.data.datasets[dataset.index].backgroundColor =
-                            rgba2hex(
-                                revertRGBAOpacity(
-                                    dataset.backgroundColor as string
-                                )
-                            )
+                        chartJS.data.datasets[dataset.index].backgroundColor = (
+                            backup.data as ChartData<'bar'>
+                        ).datasets[dataset.index].backgroundColor
                     }
 
                     chartHoverDataset.value = datasetItem
@@ -420,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
@@ -448,7 +537,7 @@ export default defineComponent({
         })
 
         const onLeaveLegend = (
-            item: BarControllerDatasetOptions,
+            _item: BarControllerDatasetOptions,
             index: number
         ) => {
             const filteredItems = chart.value.data.datasets
@@ -461,9 +550,12 @@ export default defineComponent({
                         dataset.index !== index
                 )
 
+            const backup = getChartBackup()
+
             for (const dataset of filteredItems) {
-                chart.value.data.datasets[dataset.index].backgroundColor =
-                    rgba2hex(revertRGBAOpacity(dataset.backgroundColor))
+                chart.value.data.datasets[dataset.index].backgroundColor = (
+                    backup.data as ChartData<'bar'>
+                ).datasets[dataset.index].backgroundColor
             }
             chart.value.update()
         }