@dataloop-ai/components 0.13.19 → 0.14.4

package/src/components/DlChart/DlChartLabels.vue

@@ -0,0 +1,279 @@
+<template>
+    <div
+        :style="labelStyles"
+        class="dl-chart-labels-container"
+    >
+        <div class="dl-chart-labels">
+            <div
+                v-for="(label, index) in labels"
+                :key="index"
+                class="dl-chart-labels--label"
+            >
+                <dl-tooltip v-if="isOverflowing[index]">
+                    {{ stringVerification(label.title, label) }}
+                </dl-tooltip>
+                <dl-typography
+                    v-if="isVue2"
+                    ref="textRef"
+                    :size="fontSize"
+                    :data-index="index"
+                    :color="labelColor"
+                >
+                    {{ label.title || label }}
+                </dl-typography>
+                <dl-typography
+                    v-else
+                    :ref="(el) => forwardChildEl(el, 'textRef', index)"
+                    :data-index="index"
+                    :size="fontSize"
+                    :color="labelColor"
+                >
+                    {{ stringVerification(label.title, label) }}
+                </dl-typography>
+            </div>
+        </div>
+        <div
+            v-if="hasSubtitles"
+            class="dl-chart-labels"
+        >
+            <div
+                v-for="(label, index) in labels"
+                :key="index"
+                class="dl-chart-labels--label"
+            >
+                <dl-tooltip v-if="isOverFlowingSubtitles[index]">
+                    {{ stringVerification(label.subtitle) }}
+                </dl-tooltip>
+                <dl-typography
+                    v-if="isVue2"
+                    ref="subtitleRef"
+                    :size="fontSize"
+                    :data-index="index"
+                    color="dl-color-medium"
+                >
+                    {{ stringVerification(label.subtitle) }}
+                </dl-typography>
+                <dl-typography
+                    v-else
+                    :ref="(el) => forwardChildEl(el, 'subtitleRef', index)"
+                    :data-index="index"
+                    :size="fontSize"
+                    color="dl-color-medium"
+                >
+                    {{ stringVerification(label.subtitle) }}
+                </dl-typography>
+            </div>
+        </div>
+        <div
+            v-if="title"
+            class="dl-chart-labels-title"
+        >
+            <dl-typography
+                :size="titleSize"
+                :color="titleColor"
+            >
+                {{ title }}
+            </dl-typography>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent, PropType, isVue2 } from 'vue-demi'
+import { isEllipsisActive } from '../../utils/is-ellipsis-active'
+import DlTypography from '../DlTypography.vue'
+import DlTooltip from '../DlTooltip.vue'
+
+type ObserverRefs = {
+    ref: 'resizeObserverTitle' | 'resizeObserverSubtitle'
+    elementRef: 'textRef' | 'subtitleRef'
+    state: 'isOverflowing' | 'isOverFlowingSubtitles'
+}
+
+const observerRefs = [
+    {
+        ref: 'resizeObserverTitle',
+        elementRef: 'textRef',
+        state: 'isOverflowing'
+    },
+    {
+        ref: 'resizeObserverSubtitle',
+        elementRef: 'subtitleRef',
+        state: 'isOverFlowingSubtitles'
+    }
+] as ObserverRefs[]
+
+export default defineComponent({
+    name: 'DlChartLabels',
+    components: {
+        DlTooltip,
+        DlTypography
+    },
+    props: {
+        width: {
+            type: String,
+            default: '100%'
+        },
+        fontSize: {
+            type: String,
+            default: '12px'
+        },
+        title: {
+            type: String,
+            default: null
+        },
+        titleSize: {
+            type: String,
+            default: '12px'
+        },
+        titleColor: {
+            type: String,
+            default: '#000'
+        },
+        labelColor: {
+            type: String,
+            default: '#000'
+        },
+        labels: {
+            type: Array as PropType<
+                string[] | { title: string; subtitle: string }[]
+            >,
+            default: () =>
+                [] as unknown as
+                    | string[]
+                    | { title: string; subtitle: string }[]
+        }
+    },
+    data(): {
+        uuid: string
+        isOverflowing: boolean[]
+        isOverFlowingSubtitles: boolean[]
+        textRef: Element[]
+        subtitleRef: Element[]
+        resizeObserverTitle: ResizeObserver | null
+        resizeObserverSubtitle: ResizeObserver | null
+    } {
+        return {
+            uuid: `dl-chart-legent-${v4()}`,
+            isOverflowing: [],
+            isOverFlowingSubtitles: [],
+            textRef: [],
+            subtitleRef: [],
+            resizeObserverTitle: null,
+            resizeObserverSubtitle: null
+        }
+    },
+    computed: {
+        labelStyles(): Record<string, string> {
+            return {
+                '--dl-chart-labels-width': this.width
+            }
+        },
+        hasSubtitles(): boolean {
+            return this.labels.some(
+                (e: string | Record<string, string>) =>
+                    typeof e === 'object' && !!e.subtitle
+            )
+        },
+        isVue2(): boolean {
+            return isVue2
+        }
+    },
+    mounted() {
+        observerRefs.forEach(({ ref, state }) => {
+            this[ref] = new ResizeObserver((entries) => {
+                const tempArr = [...this[state]]
+                this.getEllipsedElements(entries, tempArr)
+                this[state] = tempArr
+            })
+        })
+        observerRefs.forEach(({ elementRef, ref }) => {
+            const elements = isVue2
+                ? (((this.$refs[elementRef] as any[]) || []).map(
+                      (ref: any) => ref.$el
+                  ) as Element[])
+                : this[elementRef]
+            for (const el of elements as Element[]) {
+                (this[ref] as ResizeObserver).observe(el)
+            }
+        })
+    },
+    beforeUnmount() {
+        observerRefs.forEach(({ ref }) => {
+            (this[ref] as ResizeObserver).disconnect()
+            this[ref] = null
+        })
+    },
+    methods: {
+        stringVerification(value: string, fallback = '') {
+            return value || fallback
+        },
+        getEllipsedElements(elements: ResizeObserverEntry[], state: boolean[]) {
+            for (const entry of elements) {
+                const index = parseInt(
+                    (entry.target as any).dataset.index ?? '0'
+                )
+                state[index] = isEllipsisActive(entry.target)
+            }
+        },
+        forwardChildEl(
+            el: { $el: Element },
+            refName: 'textRef' | 'subtitleRef',
+            index: number
+        ) {
+            if (el?.$el) {
+                (this[refName] as Element[])[index] = el.$el
+            }
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-chart-labels-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .dl-chart-labels-title {
+        width: 100%;
+        display: flex;
+        align-self: flex-end;
+        justify-content: center;
+        margin-top: 10px;
+        max-width: var(--dl-chart-labels-width);
+    }
+
+    .dl-chart-labels {
+        display: flex;
+        align-self: flex-end;
+        justify-content: space-between;
+        max-width: var(--dl-chart-labels-width);
+        width: 100%;
+
+        &--label {
+            display: flex;
+            width: 100%;
+            justify-content: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            align-items: flex-start;
+
+            & > .dl-typography {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            & > div,
+            .dl-typography {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+}
+</style>

package/src/components/DlChart/DlChartLegend.vue

@@ -0,0 +1,141 @@
+<template>
+    <div
+        :style="legendStyles"
+        class="dl-chart-legend"
+    >
+        <div
+            v-for="(item, index) in datasets"
+            :key="index"
+            class="dl-chart-legend--item"
+            :style="{
+                '--dl-chart-badge-color': getColor(
+                    item.backgroundColor.replace('--', '')
+                )
+            }"
+            @click="hideData($event, item, index)"
+            @mouseenter="onMouseEnter(item, index)"
+            @mouseleave="onMouseLeave(item, index)"
+        >
+            <dl-badge
+                :color="
+                    item.hidden
+                        ? 'var(--dl-color-disabled)'
+                        : getColor(item.backgroundColor.replace('--', ''))
+                "
+            />
+            <dl-typography
+                size="small"
+                :color="item.hidden ? 'dl-color-disabled' : 'dl-color-darker'"
+            >
+                {{ item.label }}
+            </dl-typography>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import type { LegendItem, DatasetChartOptions } from 'chart.js'
+import { getColor } from '../../utils'
+import DlBadge from '../DlBadge.vue'
+import DlTypography from '../DlTypography.vue'
+
+const positions = {
+    left: 'flex-start',
+    right: 'flex-end',
+    center: 'center'
+}
+
+export default defineComponent({
+    name: 'DlChartLegend',
+    components: {
+        DlBadge,
+        DlTypography
+    },
+    props: {
+        width: {
+            type: String,
+            default: '100%'
+        },
+        datasets: {
+            type: Array,
+            default: () => [] as unknown as DatasetChartOptions
+        },
+        alignItems: {
+            type: String as PropType<'left' | 'right' | 'center'>,
+            default: 'center'
+        }
+    },
+    emits: ['hide', 'on-hover', 'on-leave'],
+    computed: {
+        legendStyles(): Record<string, string> {
+            return {
+                '--dl-chart-legend-width': this.width,
+                '--dl-chart-legend-position': positions[this.alignItems]
+            }
+        }
+    },
+    methods: {
+        onMouseEnter(item: LegendItem, index: number) {
+            if (!item.hidden) {
+                this.$emit('on-hover', item, index)
+            }
+        },
+        onMouseLeave(item: LegendItem, index: number) {
+            if (!item.hidden) {
+                this.$emit('on-leave', item, index)
+            }
+        },
+        hideData(event: Event, item: LegendItem, index: number) {
+            this.$emit(
+                'hide',
+                {
+                    ...item,
+                    hidden: !item.hidden
+                },
+                index
+            )
+        },
+        getColor
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: var(--dl-chart-legend-position);
+    max-width: var(--dl-chart-legend-width);
+    width: 100%;
+    gap: 10px;
+
+    &--item {
+        display: flex;
+        gap: 5px;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+
+        .dl-badge {
+            font-size: 8px;
+            line-height: 8px;
+            min-height: 8px;
+        }
+
+        .dl-typography--small:hover {
+            color: var(--dl-color-darker) !important;
+        }
+
+        &:hover {
+            .dl-badge {
+                background-color: var(--dl-chart-badge-color) !important;
+            }
+
+            .dl-typography--small {
+                color: var(--dl-color-darker) !important;
+            }
+        }
+    }
+}
+</style>