@dataloop-ai/components 0.19.96 → 0.19.97

package/package.json

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

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

@@ -546,6 +546,10 @@ export default defineComponent({
     transform: translateX(40%);
     display: block;
     text-align: start;
+    width: 60px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .label-tag {

package/src/components/compound/DlCharts/charts/DlScatterChart/DlScatterChart.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>
         <DLScatter
+            v-if="!isEmpty"
             :id="id"
             ref="scatterChart"
             :class="chartClasses"
@@ -77,6 +92,7 @@
 </template>
 
 <script lang="ts">
+import { DlEmptyStateProps } from '../../../../basic/DlEmptyState/types'
 import { Scatter as DLScatter } from '../../types/typedCharts'
 import {
     CommonProps,
@@ -89,8 +105,10 @@ import {
     watch,
     ref,
     computed,
-    toRefs
+    toRefs,
+    PropType
 } from 'vue-demi'
+import DlEmptyState from '../../../../basic/DlEmptyState/DlEmptyState.vue'
 import DlBrush from '../../components/DlBrush.vue'
 import DlChartLegend from '../../components/DlChartLegend.vue'
 import DlChartLabels from '../../components/DlChartLabels.vue'
@@ -121,6 +139,11 @@ import type {
 import { orderBy, merge, isEqual, unionBy, cloneDeep } from 'lodash'
 import { useThemeVariables } from '../../../../../hooks/use-theme'
 
+const scatterChartEmptyStateProps = {
+    subtitle:
+        'There was a problem processing the request. Please refresh the page.'
+}
+
 ChartJS.register(
     Title,
     Tooltip,
@@ -139,13 +162,19 @@ export default defineComponent({
         DlBrush,
         DlChartLegend,
         DLScatter,
-        DlChartLabels
+        DlChartLabels,
+        DlEmptyState
     },
     props: {
         id: {
             type: String,
             default: null
         },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            default: () => scatterChartEmptyStateProps
+        },
         ...CommonProps,
         ...ColumnChartProps
     } as { [key: string]: any },
@@ -611,11 +640,11 @@ export default defineComponent({
                     replaceColor
                 )
             )
-
-            chart.value.options.scales.x.min = brush.value.min
-            chart.value.options.scales.x.max = brush.value.max
-
-            chart.value.update()
+            if (chart?.value?.options?.scales) {
+                chart.value.options.scales.x.min = brush.value.min
+                chart.value.options.scales.x.max = brush.value.max
+                chart.value.update()
+            }
         })
 
         watch(

package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimeRange.vue

@@ -275,7 +275,6 @@ export default defineComponent({
                         to: thisMonth
                     }
                 },
-                { title: 'custom by month', key: MONTH_SIDEBAR_OPTION.custom },
                 {
                     title: 'custom by day',
                     key: MONTH_SIDEBAR_OPTION.custom_by_day,
@@ -287,7 +286,8 @@ export default defineComponent({
                             .startOf('day')
                             .toDate()
                     }
-                }
+                },
+                { title: 'custom by month', key: MONTH_SIDEBAR_OPTION.custom }
             ]
         },
         sidebarDayOptions(): DayTypeOption[] {

package/src/demos/DlScatterChartDemo.vue

@@ -16,6 +16,19 @@
             :options="options"
             style="width: 100%"
         />
+
+        <dl-scatter-chart
+            id="example-two"
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data"
+            :options="options"
+            style="width: 100%"
+            is-empty
+            :display-labels="false"
+            :display-legend="false"
+            :display-brush="false"
+        />
     </div>
 </template>