@dataloop-ai/components 0.19.245 → 0.19.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.245",
+  "version": "0.19.249",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -22,11 +22,12 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.0.66",
+    "@dataloop-ai/icons": "^3.0.70",
     "@types/flat": "^5.0.2",
     "@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/components/compound/DlTable/components/DlTd.vue

@@ -75,6 +75,7 @@ export default defineComponent({
                 )
             }
             if (vm.vnode.key === 'visibleColumnsSlot') {
+                // todo: this assumes that if a column is actions slot then its always sticky. we need to see if its true
                 styles = styles.concat(
                     'position: sticky; right: 0; z-index: 101;'
                 )

package/src/components/essential/DlSpinner/DlSpinner.vue

@@ -9,11 +9,7 @@
             :icon-size="iconSize"
             :icon-color="iconColor"
         />
-        <div
-            v-if="text"
-            class="dl-spinner-text"
-            :style="textStyles"
-        >
+        <div v-if="text" class="dl-spinner-text" :style="textStyles">
             <span>{{ text }}</span>
         </div>
     </div>
@@ -25,7 +21,6 @@ import DlSpinnerGrid from './components/DlSpinnerGrid.vue'
 import DlSpinnerCircle from './components/DlSpinnerCircle.vue'
 import DlSpinnerClock from './components/DlSpinnerClock.vue'
 import DlSpinnerDots from './components/DlSpinnerDots.vue'
-import DlSpinnerLogo from './components/DlSpinnerLogo.vue'
 import { DlSpinnerTypes } from './types'
 
 export default defineComponent({
@@ -33,8 +28,7 @@ export default defineComponent({
         DlSpinnerGrid,
         DlSpinnerCircle,
         DlSpinnerClock,
-        DlSpinnerDots,
-        DlSpinnerLogo
+        DlSpinnerDots
     },
     props: {
         text: {
@@ -85,9 +79,8 @@ export default defineComponent({
                     return 'DlSpinnerDots'
                 case DlSpinnerTypes.CLOCK:
                     return 'DlSpinnerClock'
-                case DlSpinnerTypes.LOGO:
                 default:
-                    return 'DlSpinnerLogo'
+                    return 'DlSpinnerGrid'
             }
         }
     }

package/src/components/essential/DlSpinner/types.ts

@@ -2,6 +2,5 @@ export enum DlSpinnerTypes {
     GRID = 'grid',
     CIRCLE = 'circle',
     DOTS = 'dots',
-    CLOCK = 'clock',
-    LOGO = 'logo'
+    CLOCK = 'clock'
 }

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

package/src/demos/DlDemoPage.vue

@@ -10,13 +10,22 @@
             >
                 <div
                     style="
-                        background-image: url(https://dataloop.ai/wp-content/uploads/2020/03/logo.svg);
+                        background-image: url(https://dataloop.ai/wp-content/uploads/2024/02/dataloop-logo-main.svg);
                         width: 160px;
-                        height: 28px;
+                        height: 48px;
                         display: inline-block;
+                        background-repeat: no-repeat;
                     "
                 />
-                Components library
+                <div
+                    style="
+                        position: relative;
+                        top: -12px;
+                        display: inline-block;
+                    "
+                >
+                    Components library
+                </div>
             </dl-typography>
             <div style="display: flex; align-items: center">
                 <dl-icon
@@ -26,10 +35,7 @@
                         !darkMode ? 'dl-color-secondary' : 'dl-color-darker'
                     "
                 />
-                <dl-switch
-                    v-model="darkMode"
-                    style="margin: 0 20px"
-                />
+                <dl-switch v-model="darkMode" style="margin: 0 20px" />
                 <dl-icon
                     icon="icon-dl-dark-theme"
                     size="20px"
@@ -45,10 +51,7 @@
                     style="margin-bottom: 5px"
                 />
 
-                <dl-button
-                    v-if="activeDemo"
-                    outlined
-                >
+                <dl-button v-if="activeDemo" outlined>
                     <span style="text-transform: capitalize">
                         Selected: {{ computeDemoName(activeDemo.name) }}
                     </span>

package/src/components/essential/DlSpinner/components/DlSpinnerLogo.vue

@@ -1,152 +0,0 @@
-<template>
-    <div class="dl-spinner-wrapper">
-        <div
-            class="dl-spinner"
-            :style="spinnerStyles"
-        >
-            <div class="dl-spin-bg">
-                <svg
-                    id="dl-Layer_2"
-                    data-name="Layer 2"
-                    viewBox="0 0 140 140"
-                >
-                    <g
-                        id="Layer_1-2"
-                        data-name="Layer 1"
-                    >
-                        <path
-                            class="dl-svg"
-                            d="M70,0C31.33,0,0,31.33,0,70s31.33,70,70,70,70-31.33,70-70S108.67,0,70,0Zm0,131.97c-34.2,0-61.97-27.77-61.97-61.97S35.8,8.03,70,8.03s61.97,27.77,61.97,61.97-27.77,61.97-61.97,61.97Z"
-                        />
-                    </g>
-                </svg>
-            </div>
-            <div class="dl-spin-loader">
-                <svg
-                    id="dl-Layer_2"
-                    data-name="Layer 2"
-                    viewBox="0 0 140 140"
-                >
-                    <defs>
-                        <linearGradient
-                            id="linear-gradient"
-                            x1="12.53"
-                            y1="229.07"
-                            x2="119.46"
-                            y2="229.07"
-                            gradientTransform="translate(0 246.89) scale(1 -1)"
-                            gradientUnits="userSpaceOnUse"
-                        >
-                            <stop
-                                offset="0"
-                                :stop-color="color"
-                                stop-opacity="0"
-                            />
-                            <stop
-                                offset=".12"
-                                :stop-color="color"
-                                stop-opacity="0"
-                            />
-                            <stop
-                                offset=".34"
-                                :stop-color="color"
-                            />
-                            <stop
-                                offset=".69"
-                                :stop-color="color"
-                            />
-                            <stop
-                                offset=".91"
-                                :stop-color="color"
-                                stop-opacity="0"
-                            />
-                        </linearGradient>
-                    </defs>
-                    <g
-                        id="dl-Layer_1-2"
-                        data-name="Layer 1"
-                    >
-                        <g>
-                            <path
-                                class="dl-spinner-color-bg"
-                                d="M70,0C31.33,0,0,31.33,0,70s31.33,70,70,70,70-31.33,70-70S108.67,0,70,0Zm0,131.97c-34.2,0-61.97-27.77-61.97-61.97S35.8,8.03,70,8.03s61.97,27.77,61.97,61.97-27.77,61.97-61.97,61.97Z"
-                            />
-                            <path
-                                class="dl-spinner-color"
-                                d="M114.87,25.82c1.38-1.38,2.87-2.75,4.25-4.13,.46-.34,.46-1.03,0-1.49C106.49,7.69,89.16,0,70,0,46.36,0,25.48,11.7,12.74,29.72c-.34,.46-.23,.92,.11,1.38l4.25,4.25c.46,.46,1.15,.34,1.61-.11,11.25-16.52,29.95-27.2,51.3-27.2,16.98,0,32.25,6.77,43.49,17.79,.34,.34,1.03,.34,1.38,0Z"
-                            />
-                        </g>
-                    </g>
-                </svg>
-            </div>
-            <div class="dl-spinner-icon">
-                <svg
-                    viewBox="0 0 51 45"
-                    fill="none"
-                >
-                    <path
-                        d="M23.2962 0.558083H0.830566V32.2536L10.1727 44.284H23.2962V38.5002H12.6195L6.39136 30.4028V6.11058H23.2962V0.558083Z"
-                        :fill="iconColor"
-                    />
-                    <path
-                        d="M27.5224 6.11058V0.558083C33.3056 -0.137737 52.8796 3.56565 50.6553 25.0816C48.9091 41.9727 34.3436 44.901 27.5224 44.284V38.5002C41.2242 39.4256 45.0945 29.1689 45.3169 23.9249C46.2067 8.19281 33.8246 5.49365 27.5224 6.11058Z"
-                        :fill="iconColor"
-                    />
-                    <path
-                        d="M23.2962 19.0664V13.5139H13.0643V27.3952L16.8457 31.7909H23.2962V26.2384H19.07L18.6251 25.5443V19.0664H23.2962Z"
-                        :fill="iconColor"
-                    />
-                    <path
-                        d="M27.5224 19.0664V13.5139C31.2296 13.2054 38.644 14.5782 38.644 22.5367C38.644 30.4953 31.2296 32.0223 27.5224 31.7909V26.2384C29.3018 26.7782 33.3056 26.9038 33.3056 22.9994C33.3056 19.0664 29.5984 18.758 27.5224 19.0664Z"
-                        :fill="iconColor"
-                    />
-                </svg>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue-demi'
-
-export default defineComponent({
-    props: {
-        size: {
-            type: String,
-            default: '140px'
-        },
-        iconSize: {
-            type: String,
-            default: '50px'
-        },
-        borderColor: {
-            type: String,
-            default: 'var(--dl-color-separator)'
-        },
-        color: {
-            type: String,
-            default: 'var(--dl-color-secondary)'
-        },
-        iconColor: {
-            type: String,
-            default: 'var(--dl-color-tooltip-background)'
-        }
-    },
-    computed: {
-        spinnerStyles() {
-            return {
-                '--dl-spinner-size': this.size,
-                '--dl-spinner-icon-size': this.iconSize,
-                '--dl-spinner-border-color': this.borderColor,
-                '--icon-top': `${
-                    parseInt(this.size) / 2 -
-                    parseInt(this.iconSize) / 2 +
-                    parseInt(this.iconSize) / 25
-                }px`
-            }
-        }
-    }
-})
-</script>
-
-<style lang="scss" src="../styles/spinnerStyles.scss" />