@dataloop-ai/components 0.17.78 → 0.17.79

package/package.json

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

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

@@ -88,7 +88,7 @@ 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 +99,18 @@ 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 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'
 
@@ -154,15 +162,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,
@@ -235,6 +243,46 @@ export default defineComponent({
             )
         )
 
+        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 +295,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 +339,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 +388,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
@@ -461,9 +511,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()
         }

package/src/demos/ColumnChartDemo.vue

@@ -38,6 +38,21 @@
                         <dl-avatar size="24px">
                             <img :src="url">
                         </dl-avatar>
+                        <dl-tooltip>
+                            <div
+                                style="
+                                    display: flex;
+                                    flex-direction: column;
+                                    align-items: center;
+                                    padding: 10px;
+                                "
+                            >
+                                <dl-avatar size="24px">
+                                    <img :src="url">
+                                </dl-avatar>
+                                <p>rotem.shaham@dataloop.com</p>
+                            </div>
+                        </dl-tooltip>
                         <div />
                     </div>
                 </div>
@@ -56,7 +71,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import { DlAvatar, DlColumnChart } from '../components'
+import { DlAvatar, DlColumnChart, DlTooltip } from '../components'
 
 import { orderBy } from 'lodash'
 
@@ -213,7 +228,8 @@ export default defineComponent({
     name: 'DlColumnChartDemo',
     components: {
         DlColumnChart,
-        DlAvatar
+        DlAvatar,
+        DlTooltip
     },
     data() {
         return {