@dataloop-ai/components 0.13.19 → 0.14.4

package/src/demo/DlLineChartDemo.vue

@@ -0,0 +1,375 @@
+<template>
+    <div
+        style="
+            display: flex;
+            width: 1000px;
+            flex-wrap: wrap;
+            flex-direction: row;
+            gap: 0;
+        "
+    >
+        <div>
+            <button @click="setResolution('hour')">
+                Hour
+            </button>
+            <button @click="setResolution('day')">
+                Day
+            </button>
+            <button @click="setResolution('week')">
+                Week
+            </button>
+            <button @click="setResolution('month')">
+                Month
+            </button>
+            <button @click="setResolution('year')">
+                Year
+            </button>
+        </div>
+
+        <dl-line-chart
+            id="example-one"
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data"
+            :options="options"
+            style="width: 100%"
+        />
+
+        <dl-line-chart
+            id="example-two"
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="noPointsData"
+            :options="options"
+            style="width: 50%"
+        />
+
+        <dl-line-chart
+            id="example-three"
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="tensionLineData"
+            :options="tensionOptions"
+            style="width: 50%"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlLineChart } from '../components'
+import { orderBy } from 'lodash'
+
+function randomIntFromInterval(min: number, max: number) {
+    return new Array(18)
+        .fill('')
+        .map(() => Math.floor(Math.random() * (max - min + 1) + min))
+}
+
+const resolutionLabels = {
+    hour: [
+        {
+            title: '8:00',
+            subtitle: 'Feb 27'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Feb 28'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 1'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 2'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 3'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 4'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 5'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 6'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 7'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 8'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 9'
+        },
+        {
+            title: '8:00 long title',
+            subtitle: 'Mar 10 long title'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 11'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 12'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 13'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 14'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 15'
+        },
+        {
+            title: '8:00',
+            subtitle: 'Mar 16'
+        }
+    ],
+    day: [
+        'Jan 1',
+        'Jan 2',
+        'Jan 3',
+        'Jan 4',
+        'Jan 5',
+        'Jan 6',
+        'Jan 7',
+        'Jan 8',
+        'Jan 9',
+        'Jan 10',
+        'Jan 11',
+        'Jan 12',
+        'Jan 13',
+        'Jan 14',
+        'Jan 15',
+        'Jan 16',
+        'Jan 17',
+        'Jan 18'
+    ],
+    week: [
+        'Week 1',
+        'Week 2',
+        'Week 3',
+        'Week 4',
+        'Week 5',
+        'Week 6',
+        'Week 7',
+        'Week 8',
+        'Week 9',
+        'Week 10',
+        'Week 11',
+        'Week 12',
+        'Week 13',
+        'Week 14',
+        'Week 15',
+        'Week 16',
+        'Week 17',
+        'Week 18'
+    ],
+    month: [
+        {
+            title: 'Ian',
+            subtitle: '2022'
+        },
+        {
+            title: 'Feb',
+            subtitle: ''
+        },
+        {
+            title: 'Mar',
+            subtitle: ''
+        },
+        {
+            title: 'Apr',
+            subtitle: ''
+        },
+        {
+            title: 'May',
+            subtitle: ''
+        },
+        {
+            title: 'Jun',
+            subtitle: ''
+        },
+        {
+            title: 'Jul',
+            subtitle: ''
+        },
+        {
+            title: 'Aug',
+            subtitle: ''
+        },
+        {
+            title: 'Sep',
+            subtitle: ''
+        },
+        {
+            title: 'Oct',
+            subtitle: ''
+        },
+        {
+            title: 'Nov',
+            subtitle: ''
+        },
+        {
+            title: 'Dec',
+            subtitle: ''
+        },
+        {
+            title: 'Ian',
+            subtitle: '2023'
+        },
+        {
+            title: 'Feb',
+            subtitle: ''
+        },
+        {
+            title: 'Mar',
+            subtitle: ''
+        },
+        {
+            title: 'Apr',
+            subtitle: ''
+        },
+        {
+            title: 'May',
+            subtitle: ''
+        },
+        {
+            title: 'Jun',
+            subtitle: ''
+        }
+    ],
+    year: [
+        '1998',
+        '1999',
+        '2000',
+        '2001',
+        '2002',
+        '2003',
+        '2004',
+        '2005',
+        '2006',
+        '2007',
+        '2008',
+        '2009',
+        '2010',
+        '2011',
+        '2012',
+        '2013',
+        '2014',
+        '2015'
+    ]
+}
+
+const data = {
+    labels: resolutionLabels['hour'],
+    datasets: [
+        {
+            label: 'Discarded',
+            backgroundColor: '--dl-color-secondary',
+            borderColor: '--dl-color-secondary',
+            pointRadius: 4,
+            data: randomIntFromInterval(0, 4)
+        },
+        {
+            label: 'Undiscarded',
+            backgroundColor: '--dl-color-warning',
+            borderColor: '--dl-color-warning',
+            pointRadius: 4,
+            data: randomIntFromInterval(2, 6)
+        },
+        {
+            label: 'Completed',
+            backgroundColor: '--dl-color-positive',
+            borderColor: '--dl-color-positive',
+            pointRadius: 4,
+            data: randomIntFromInterval(1, 5)
+        },
+        {
+            label: 'Uncompleted',
+            backgroundColor: '--dl-color-negative',
+            borderColor: '--dl-color-negative',
+            pointRadius: 4,
+            data: randomIntFromInterval(0, 5)
+        }
+    ]
+}
+
+const brushProps = {
+    min: 0,
+    max: orderBy(data.datasets, (o) => o.data.length)[0].data.length - 1
+}
+
+const options = {
+    plugins: {
+        legend: {
+            display: false
+        }
+    },
+    scales: {
+        y: {
+            suggestedMax: 9
+        }
+    }
+}
+
+const legendProps = {
+    alignItems: 'center'
+}
+
+export default defineComponent({
+    name: 'DlLineChartDemo',
+    components: {
+        DlLineChart
+    },
+    data() {
+        return {
+            resolution: 'hour',
+            options,
+            data,
+            brushProps,
+            legendProps,
+            noPointsData: {
+                ...data,
+                datasets: [
+                    { ...data.datasets[0], pointRadius: 0, borderWidth: 1 }
+                ]
+            },
+            tensionLineData: {
+                ...data,
+                datasets: [{ ...data.datasets[1], pointRadius: 0 }]
+            },
+            tensionOptions: { ...options, tension: 0.5 }
+        }
+    },
+    methods: {
+        setResolution(string: 'hour' | 'day' | 'week' | 'month' | 'year') {
+            this.resolution = string
+            this.data.labels = resolutionLabels[string] as any
+
+            this.data.datasets = this.data.datasets.map((dataset, i) => ({
+                ...dataset,
+                data: randomIntFromInterval(i + 1, 6)
+            }))
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/demo/DlMenuDemo.vue

@@ -389,7 +389,7 @@
             <h4>Sizing and styling</h4>
             <div>
                 <dl-button label="Fit Menu">
-                    <dl-menu fit>
+                    <dl-menu fit-container>
                         <dl-list>
                             <dl-list-item clickable>
                                 <dl-item-section>New tab</dl-item-section>

package/src/demo/DlOptionGroupDemo.vue

@@ -35,7 +35,7 @@
         >
             <dl-menu
                 ref="menu"
-                fit
+                fit-container
             >
                 <dl-option-group
                     v-model="switchValue"

package/src/demo/DlSelectDemo.vue

@@ -167,7 +167,7 @@
             multiselect
             search
             capitalized-options
-            fit
+            fit-container
         />
         With Label and sub label
         <dl-select

package/src/demo/DlSpinnerDemo.vue

@@ -0,0 +1,20 @@
+<template>
+    <dl-spinner
+        text="Loading data, please wait..."
+        :text-styles="{
+            marginLeft: '10px',
+            color: 'var(--dl-color-tooltip-background)'
+        }"
+    />
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+import DlSpinner from '../components/DlSpinner.vue'
+
+export default defineComponent({
+    components: {
+        DlSpinner
+    }
+})
+</script>

package/src/demo/DlTableDemo.vue

@@ -2,6 +2,9 @@
     <div style="width: 900px; align-items: inherit">
         <div>
             <div class="settings">
+                <button @click="addRowPerPage">
+                    Add Row Per Page
+                </button>
                 <dl-switch
                     left-label="bordered"
                     value="bordered"
@@ -104,105 +107,20 @@
                 :rows="rows"
                 :resizable="resizable"
                 row-key="name"
-                :pagination="{
-                    rowsPerPage: 25,
-                    maxPages: 4
-                }"
                 color="dl-color-secondary"
                 title="Table Title"
                 :virtual-scroll="vScroll"
                 style="height: 500px"
+                :rows-per-page-options="rowsPerPageOptions"
                 @row-click="log"
                 @update:selected="updateSeleted"
-            >
-                <!-- <template #top> Top Table </template> -->
-                <!-- <template #top-left> Top Table Left </template> -->
-                <!-- <template #top-right> Top Table Right </template>
-
-            <template #top-selection> Top Selection </template> -->
-
-                <!-- <template #header="props">
-                <dl-tr :props="props">
-                    <dl-th auto-width />
-                    <dl-th
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                    >
-                        {{ col.label }}
-                    </dl-th>
-                </dl-tr>
-            </template> -->
-
-                <!-- <template #header-cell="props">
-                <dl-th :props="props">
-                    {{ props.col.label }}
-                </dl-th>
-            </template>
-
-            <template #header-cell-calories="props">
-                <dl-th :props="props">
-                    custom
-                    {{ props.col.label }}
-                </dl-th>
-            </template> -->
-
-                <!-- <template #body="props">
-                <dl-tr :props="props">
-                    <dl-td auto-width>
-                        <dl-button
-                            flat
-                            size="s"
-                            text-color="dl-color-darker"
-                            style="padding: 0; border-width: 0!important; :active: border-width: 0"
-                            :icon="
-                                props.expand
-                                    ? 'icon-dl-down-chevron'
-                                    : 'icon-dl-right-chevron'
-                            "
-                            @click="props.expand = !props.expand"
-                        />
-                    </dl-td>
-                    <dl-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                    >
-                        {{ col.value }}
-                    </dl-td>
-                </dl-tr>
-                <dl-tr v-show="props.expand" :props="props">
-                    <dl-td colspan="100%" style="padding: 16px">
-                        <div class="text-left">
-                            This is expand slot for row above:
-                            {{ props.row.name }}.
-                        </div>
-                    </dl-td>
-                </dl-tr>
-            </template> -->
-
-                <!-- <template #loading> Loading ... </template> -->
-
-                <!-- <template #bottom="props">
-                <dl-pagination v-bind="props.pagination" />
-            </template> -->
-            </DlTable>
+            />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import {
-    DlTable,
-    DlOptionGroup,
-    DlSwitch,
-    DlTextInput
-    // DlTr,
-    // DlTh,
-    // DlTd,
-    // DlPagination,
-    // DlButton
-} from '../components'
+import { DlTable, DlOptionGroup, DlSwitch, DlTextInput } from '../components'
 import { defineComponent } from 'vue-demi'
 import { times } from 'lodash'
 
@@ -363,11 +281,6 @@ export default defineComponent({
         DlSwitch,
         DlOptionGroup,
         DlTextInput
-        // DlTr,
-        // DlTh,
-        // DlPagination,
-        // DlTd,
-        // DlButton
     },
     data() {
         return {
@@ -386,10 +299,16 @@ export default defineComponent({
             resizableState: [] as boolean[],
             rows,
             draggable: 'both',
-            columns
+            columns,
+            rowsPerPageOptions: [10, 12, 14, 16]
         }
     },
     methods: {
+        addRowPerPage() {
+            this.rowsPerPageOptions.push(
+                this.rowsPerPageOptions[this.rowsPerPageOptions.length - 1] + 2
+            )
+        },
         updateSeleted(payload: any) {
             this.selected = payload
         },