@dataloop-ai/components 0.19.245 → 0.19.248

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.245",
+  "version": "0.19.248",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -27,6 +27,7 @@
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",
     "chart.js": "^3.9.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "flat": "^5.0.2",
     "highlight.js": "^11.8.0",
     "lodash": "^4.17.21",
@@ -40,8 +41,7 @@
     "vanilla-jsoneditor": "^0.10.2",
     "vue-demi": "^0.14.5",
     "vue-sortable": "^0.1.3",
-    "vue2-teleport": "^1.0.1",
-    "zero-md": "^2.5.3"
+    "vue2-teleport": "^1.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",

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

@@ -1,21 +1,9 @@
 <template>
     <div :class="chartWrapperClasses">
-        <div
-            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"
-                    />
+        <div 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
@@ -26,11 +14,12 @@
                 :style="chartStyles"
                 :data="chartData"
                 :options="chartOptions"
+                :plugins="chartPlugins"
                 @mouseout="onChartLeave"
                 @wheel.native="handleChartScroll"
             />
             <dl-chart-scroll-bar
-                v-if="!isEmpty || (maxItems > thisItemsInView && !isEmpty)"
+                v-if="maxItems > thisItemsInView && !isEmpty"
                 :wrapper-styles="{
                     marginTop: '10px'
                 }"
@@ -391,6 +380,8 @@ export default defineComponent({
             )
         )
 
+        const chartPlugins = props.plugins
+
         watch(
             () => chart.value?.scales?.x?.width,
             (val: string) => {
@@ -541,13 +532,14 @@ export default defineComponent({
                 )
             )
 
-            chart.value.update()
+            chart.value.update?.()
         })
 
         return {
             variables,
             chartData,
             chartOptions,
+            chartPlugins,
             xLabels,
             barChart,
             maxItems,

package/src/demos/BarChartDemo.vue

@@ -4,7 +4,7 @@
             display: flex;
             width: 900px;
             flex-wrap: wrap;
-            flex-direction: row;
+            flex-direction: column;
             gap: 0px;
         "
     >
@@ -22,6 +22,19 @@
             :items-in-view="6"
             is-empty
         />
+
+        <div style="color: var(--dl-color-darker); margin-bottom: 30px">
+            Customized DlBarChart with data labels
+        </div>
+        <!-- @vue-ignore -->
+        <dl-bar-chart
+            :data="cdlData"
+            :options="cdlOptions"
+            :plugins="cdlPlugins"
+            :items-in-view="data.labels.length + 1"
+        >
+            <template #legend><span /></template>
+        </dl-bar-chart>
     </div>
 </template>
 
@@ -29,6 +42,7 @@
 import { defineComponent } from 'vue-demi'
 import { ChartOptions } from 'chart.js'
 import { DlBarChart } from '../components'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
 
 const labelsFn = () => {
     const a = []
@@ -78,6 +92,76 @@ const options: ChartOptions = {
     }
 }
 
+const cdlData = {
+    labels: labelsFn().map((l) => `Data [${l}]:`),
+    datasets: [
+        {
+            label: 'Duh',
+            backgroundColor: '--dl-color-secondary',
+            borderRadius: 4,
+            data: dataFn(),
+            datalabels: {
+                align: 'end',
+                anchor: 'start'
+            }
+        },
+        {
+            label: 'Duh',
+            backgroundColor: '--dl-color-info-background',
+            borderRadius: 4,
+            data: dataFn().map((n) => 20 - n),
+            datalabels: {
+                align: 'start',
+                anchor: 'end'
+            }
+        }
+    ]
+}
+
+const cdlOptions: ChartOptions = {
+    plugins: {
+        datalabels: {
+            color: '--dl-color-darker',
+            font: {
+                weight: 'bold'
+            },
+            formatter (value, context) {
+                switch (context.datasetIndex) {
+                    case 0:
+                        return context.chart.data.labels[context.dataIndex]
+                    case 1:
+                        return (
+                            'Value is ' +
+                            context.chart.data.datasets[0].data[
+                                context.dataIndex
+                            ]
+                        )
+                }
+            }
+        },
+        tooltip: {
+            callbacks: {
+                label (tooltipItem) {
+                    return 'Value is ' + tooltipItem.formattedValue
+                }
+            },
+            filter (tooltipItem) {
+                return tooltipItem.datasetIndex === 0
+            }
+        }
+    },
+    scales: {
+        x: {
+            stacked: true,
+            display: false
+        },
+        y: {
+            stacked: true,
+            display: false
+        }
+    }
+}
+
 export default defineComponent({
     name: 'DlChartDemo',
     components: {
@@ -85,6 +169,9 @@ export default defineComponent({
     },
     data() {
         return {
+            cdlData,
+            cdlOptions,
+            cdlPlugins: [ChartDataLabels],
             data,
             options,
             legendProps