@dataloop-ai/components 0.13.18 → 0.14.3

package/src/components/DlWidget/utils.ts

@@ -1,30 +1,37 @@
-export function getTargetWidget(el: HTMLElement) {
+export function getElementAbove(el: HTMLElement, className: string) {
     //@ts-ignore
     for (; el && el !== document; el = el.parentNode) {
-        if (el.classList.contains('dl-widget-grid__item')) {
+        if (el.classList.contains(className)) {
             return el
         }
     }
 }
 
-export function equateElements(
-    sourceElement: HTMLElement,
-    targetElement: HTMLElement
+export function addMouseEnter(className: string, method: EventListenerObject) {
+    Array.from(document.getElementsByClassName(className)).forEach((widget) => {
+        widget.addEventListener('mouseenter', method)
+    })
+}
+
+export function removeMouseEnter(
+    className: string,
+    method: EventListenerObject
 ) {
-    targetElement.innerHTML = sourceElement.innerHTML
-    targetElement.style.width = `${sourceElement.offsetWidth}px`
-    targetElement.style.height = `${sourceElement.offsetHeight}px`
-    targetElement.style.top = `${
-        sourceElement.getBoundingClientRect().y + 20
-    }px`
-    targetElement.style.left = `${
-        sourceElement.getBoundingClientRect().x - 10
-    }px`
+    Array.from(document.getElementsByClassName(className)).forEach((widget) => {
+        widget.removeEventListener('mouseenter', method)
+    })
 }
 
-export function getIndex(id: string) {
-    return {
-        row: Number(id[0]),
-        column: Number(id[2])
-    }
+export function setFlexBasis() {
+    Array.from(document.getElementsByClassName('dl-grid-row')).forEach(
+        (row) => {
+            Array.from(row.children).forEach((widget: any) => {
+                widget.style.flexBasis = `${100 / row.children.length}%`
+            })
+        }
+    )
+}
+
+export function insertAfter(newNode: HTMLElement, existingNode: HTMLElement) {
+    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling)
 }

package/src/components/index.ts

@@ -50,8 +50,10 @@ import { DlDateTimeRange } from './DlDateTimeRange'
 import { DateInterval } from './DlDatePicker/types'
 import { DlSmartSearch } from './DlSmartSearch'
 import { DlWidget } from './DlWidget'
-import { DlWidgetGrid } from './DlWidget'
+import { DlGrid } from './DlWidget'
 import DlTextHolder from './DlTextHolder.vue'
+import { DlColumnChart, DlLineChart } from './DlChart'
+import DlSpinner from './DlSpinner.vue'
 
 export {
     DlAccordion,
@@ -111,8 +113,11 @@ export {
     DlDateTimeRange,
     DlSmartSearch,
     DlWidget,
-    DlWidgetGrid,
-    DlTextHolder
+    DlGrid,
+    DlTextHolder,
+    DlColumnChart,
+    DlLineChart,
+    DlSpinner
 }
 
 export type { StepState, DateInterval }

package/src/demo/BarChartDemo.vue

@@ -0,0 +1,77 @@
+<template>
+    <div
+        style="
+            display: flex;
+            width: 900px;
+            flex-wrap: wrap;
+            flex-direction: row;
+            gap: 0px;
+        "
+    >
+        <dl-bar-chart
+            :legend-props="legendProps"
+            :data="data"
+            :options="options"
+            :items-in-view="6"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import DlBarChart from '../components/DlChart/DlBarChart.vue'
+
+const labelsFn = () => {
+    const a = []
+    for (let i = 0; i < 20; i++) {
+        a.push(`${i}`)
+    }
+    return a
+}
+
+const dataFn = () => {
+    const a = []
+    for (let i = 1; i <= 20; i++) {
+        a.push(i)
+    }
+    return a
+}
+
+const data = {
+    labels: labelsFn(),
+    datasets: [
+        {
+            label: 'Data One',
+            backgroundColor: '--dl-color-secondary',
+            borderRadius: 4,
+            data: dataFn()
+        },
+        {
+            label: 'Data Two',
+            backgroundColor: '--dl-color-warning',
+            borderRadius: 4,
+            data: dataFn()
+        }
+    ]
+}
+
+const legendProps = {
+    alignItems: 'center'
+}
+
+export default defineComponent({
+    name: 'DlChartDemo',
+    components: {
+        DlBarChart
+    },
+    data() {
+        return {
+            data,
+            legendProps
+        }
+    },
+    methods: {}
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/demo/ColumnChartDemo.vue

@@ -0,0 +1,230 @@
+<template>
+    <div
+        style="
+            display: flex;
+            width: 800px;
+            flex-wrap: wrap;
+            flex-direction: row;
+            gap: 0;
+        "
+    >
+        <dl-column-chart
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data[0]"
+            :options="options[0]"
+            style="width: 50%"
+        />
+        <dl-column-chart
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data[1]"
+            :options="options[1]"
+            style="width: 50%"
+        >
+            <template #axe-x-labels="{ labels, chartWidth }">
+                <div
+                    :style="`display: flex; width: ${chartWidth}; align-self: flex-end; justify-content: space-between;`"
+                >
+                    <div
+                        v-for="(url, key) in labels"
+                        :key="key"
+                        style="
+                            display: flex;
+                            width: 100%;
+                            justify-content: center;
+                        "
+                    >
+                        <dl-avatar size="24px">
+                            <img :src="url">
+                        </dl-avatar>
+                        <div />
+                    </div>
+                </div>
+            </template>
+        </dl-column-chart>
+
+        <dl-column-chart
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data[0]"
+            :options="options[0]"
+            style="width: 100%"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import DlColumnChart from '../components/DlChart/DlColumnChart.vue'
+import DlAvatar from '../components/DlAvatar.vue'
+
+import { orderBy } from 'lodash'
+
+import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    BarElement,
+    CategoryScale,
+    LinearScale
+} from 'chart.js'
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+
+const data = [
+    {
+        labels: [
+            'JanuaryJanuaryJanuaryJanuary',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June'
+        ],
+        datasets: [
+            {
+                label: 'Data One 1',
+                backgroundColor: '--dl-color-secondary',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two 2',
+                backgroundColor: '--dl-color-warning',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            },
+            {
+                label: 'Data One 3',
+                backgroundColor: '--dl-color-negative',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two 4',
+                backgroundColor: '--dl-color-positive',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            },
+            {
+                label: 'Data One 5',
+                backgroundColor: '--dl-color-secondary',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two 6',
+                backgroundColor: '--dl-color-warning',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            },
+            {
+                label: 'Data One 7',
+                backgroundColor: '--dl-color-secondary',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two 8',
+                backgroundColor: '--dl-color-warning',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            }
+        ]
+    },
+
+    {
+        labels: [
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200'
+        ],
+        datasets: [
+            {
+                label: 'Data One',
+                backgroundColor: '--dl-color-secondary',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two',
+                backgroundColor: '--dl-color-warning',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            }
+        ]
+    }
+]
+
+const brushProps = {
+    min: 0,
+    max: orderBy(data[0].datasets, (o) => o.data.length)[0].data.length - 1
+}
+
+const options = [
+    {
+        scales: {
+            y: {
+                ticks: {
+                    callback(value: string, index: number, ticks: string[]) {
+                        return value + 's'
+                    }
+                },
+                suggestedMax: 45
+            },
+            x: {
+                min: 0,
+                max:
+                    orderBy(data[0].datasets, (o) => o.data.length)[0].data
+                        .length - 1
+            }
+        }
+    },
+
+    {
+        scales: {
+            y: {
+                ticks: {
+                    callback(value: string, index: number, ticks: string[]) {
+                        return value + 's'
+                    }
+                },
+                suggestedMax: 45
+            },
+            x: {
+                min: 0,
+                max:
+                    orderBy(data[1].datasets, (o) => o.data.length)[0].data
+                        .length - 1
+            }
+        }
+    }
+]
+
+const legendProps = {
+    alignItems: 'center'
+}
+
+export default defineComponent({
+    name: 'DlColumnChartDemo',
+    components: {
+        DlColumnChart,
+        DlAvatar
+    },
+    data() {
+        return {
+            options,
+            data,
+            brushProps,
+            legendProps
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/demo/DlButtonDemo.vue

@@ -10,7 +10,7 @@
                     <DlButton
                         :size="buttonSize"
                         color="dl-color-negative"
-                        label="COntained text"
+                        label="COntained text filled"
                         @click="log"
                     />
                     <DlButton

package/src/demo/DlChartDoughnutDemo.vue

@@ -0,0 +1,229 @@
+<template>
+    <div style="display: flex; flex-wrap: wrap; flex-direction: row; gap: 0">
+        <div>
+            <div>
+                <DlDoughnutChart
+                    :data="doughnutLessData"
+                    :animation="doughnutAnimation"
+                />
+            </div>
+            <div>
+                <DlDoughnutChart :data="doughnutData" />
+            </div>
+            <div>
+                <DlDoughnutChart
+                    :data="doughnutData"
+                    :has-summary="true"
+                />
+            </div>
+            <div class="grid grid-cols-3">
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutData"
+                        :is-small="true"
+                        :has-summary="true"
+                    />
+                </div>
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutLessData"
+                        :is-small="true"
+                    />
+                </div>
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutData"
+                        :is-small="true"
+                        :has-summary="true"
+                    />
+                </div>
+            </div>
+            <div class="grid grid-cols-2">
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutData"
+                        :is-small="true"
+                    />
+                </div>
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutLessData"
+                        :is-small="true"
+                    />
+                </div>
+            </div>
+            <div>
+                <DlDoughnutChart
+                    :data="doughnutData"
+                    :is-small="true"
+                    :has-summary="true"
+                    :animation="doughnutAnimation"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import DlDoughnutChart from '../components/DlChart/Doughnut/DlDoughnutChart.vue'
+import { DoughnutControllerChartOptions } from 'chart.js'
+import { TDoughnutChartData } from '../components/DlChart/Doughnut/types/TDoughnutChartData'
+
+export default defineComponent({
+    name: 'DlChartDoughnutDemo',
+    components: {
+        DlDoughnutChart
+    },
+    setup() {
+        const doughnutAnimation = ref<
+            DoughnutControllerChartOptions['animation']
+        >({
+            animateRotate: true,
+            animateScale: true
+        })
+
+        const doughnutData: TDoughnutChartData = {
+            labels: [
+                'Label 1 very very very very very very very long title',
+                'Label 2',
+                'Label 3',
+                'Label 4',
+                'Label 5',
+                'Label 6',
+                'Label 7',
+                'Label 8',
+                'Label 9',
+                'Label 10',
+                'Label 11',
+                'Label 12',
+                'Label 13',
+                'Label 14',
+                'Label 15',
+                'Label 16',
+                'Label 17',
+                'Label 18',
+                'Label 19',
+                'Label 20'
+            ],
+            datasets: [
+                {
+                    label: 'My Doughnut',
+                    data: [
+                        9999, 200, 300, 400, 500, 600, 700, 800, 900, 1000,
+                        1100, 1200, 1000, 1400, 1500, 1600, 1700, 1800, 1900,
+                        2000
+                    ],
+                    backgroundColor: [
+                        '#3452FF',
+                        '#4DB1D3',
+                        '#FF2F7A',
+                        '#D4E3FF',
+                        '#BECB5D',
+                        '#839E30',
+                        '#6B5935',
+                        '#752B86',
+                        '#BB96A3',
+                        '#870F49',
+                        '#CC566C',
+                        '#F0A18C',
+                        '#EDAB55',
+                        '#FF5934',
+                        '#9CD2E3',
+                        '#1481A4',
+                        '#928F80',
+                        '#575567',
+                        '#979797',
+                        '#D9D9D9'
+                    ],
+                    hoverBackgroundColor: [
+                        '#3452FF',
+                        '#4DB1D3',
+                        '#FF2F7A',
+                        '#D4E3FF',
+                        '#BECB5D',
+                        '#839E30',
+                        '#6B5935',
+                        '#752B86',
+                        '#BB96A3',
+                        '#870F49',
+                        '#CC566C',
+                        '#F0A18C',
+                        '#EDAB55',
+                        '#FF5934',
+                        '#9CD2E3',
+                        '#1481A4',
+                        '#928F80',
+                        '#575567',
+                        '#979797',
+                        '#D9D9D9'
+                    ],
+                    lightColor: [
+                        '#D6DCFF',
+                        '#EDF7FB',
+                        '#FFCBDD',
+                        '#F4F8FF',
+                        '#EFF2D7',
+                        '#E0E7CB',
+                        '#DAD5CD',
+                        '#DDCAE1',
+                        '#DDCBD1',
+                        '#DDCBD1',
+                        '#F2D5DA',
+                        '#FBE7E2',
+                        '#FBEAD5',
+                        '#FFD5CC',
+                        '#E7F4F8',
+                        '#C4DFE8',
+                        '#E4E3DF',
+                        '#D5D5D9',
+                        '#E5E5E5',
+                        '#F5F5F5'
+                    ],
+                    borderWidth: 0
+                }
+            ]
+        }
+        const doughnutLessData: TDoughnutChartData = {
+            labels: [
+                'Label 1 very very very very very very very long title',
+                'Label 2',
+                'Label 3',
+                'Label 4'
+            ],
+            datasets: [
+                {
+                    label: 'My Doughnut',
+                    data: [999, 2000, 300, 400],
+                    backgroundColor: [
+                        '--dl-color-secondary',
+                        '#4DB1D3',
+                        '#FF2F7A',
+                        '#D4E3FF'
+                    ],
+                    hoverBackgroundColor: [
+                        '--dl-color-secondary',
+                        '#4DB1D3',
+                        '#FF2F7A',
+                        '#D4E3FF'
+                    ],
+                    lightColor: [
+                        '--dl-color-link',
+                        '#EDF7FB',
+                        '#FFCBDD',
+                        '#F4F8FF'
+                    ],
+                    borderWidth: 0
+                }
+            ]
+        }
+        return {
+            doughnutData,
+            doughnutLessData,
+            doughnutAnimation
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>