@dataloop-ai/components 0.13.19 → 0.14.4

package/src/components/DlChart/DlScrollBar.vue

@@ -0,0 +1,147 @@
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlScrollBar',
+    props: {
+        itemCount: {
+            type: Number,
+            default: 0
+        },
+        itemsInView: {
+            type: Number,
+            default: 0
+        },
+        position: {
+            type: Number,
+            default: 0
+        },
+        height: {
+            type: String,
+            default: null
+        }
+    },
+    emits: ['position-update'],
+    data(): {
+        isDragging: boolean
+        mouseOffsetTop: number
+        maxHeight: number
+        previousMin: number
+    } {
+        return {
+            isDragging: false,
+            mouseOffsetTop: null,
+            maxHeight: null,
+            previousMin: 0
+        }
+    },
+    computed: {
+        heightNum(): number {
+            return parseInt(this.height)
+        },
+        scrollStep(): number {
+            return this.heightNum / this.itemCount
+        },
+        scrollTop(): number {
+            const top = this.position * this.scrollStep
+            const space =
+                this.maxHeight -
+                (this.$refs.scroll as HTMLElement)?.offsetHeight -
+                50
+            return top < space ? top : space
+        },
+        scrollClasses(): string {
+            return `scroll-bar ${this.isDragging ? 'scroll-bar__drag' : ''}`
+        },
+        scrollStyles(): Record<string, string> {
+            return {
+                marginTop: `${this.scrollTop}px`,
+                height: `${
+                    (this.itemsInView * this.heightNum) / this.itemCount
+                }px`
+            }
+        },
+        maxScroll(): number {
+            return (this.$refs as any).wrapper.offsetHeight - 50 || 1
+        }
+    },
+    mounted() {
+        window.addEventListener('mouseup', this.stopDragging)
+        this.$nextTick(() => {
+            this.maxHeight = (this.$refs.wrapper as HTMLElement).offsetHeight
+        })
+    },
+    methods: {
+        startDragging(e: MouseEvent) {
+            this.isDragging = true
+            this.mouseOffsetTop =
+                e.clientY - (this.$refs.scroll as HTMLElement).offsetTop
+            window.addEventListener('mousemove', this.moveScrollBar)
+        },
+        stopDragging() {
+            this.isDragging = false
+            window.removeEventListener('mousemove', this.moveScrollBar)
+        },
+        moveScrollBar(e: MouseEvent) {
+            if (!this.isDragging) return
+            const marginTop =
+                e.clientY -
+                (this.$refs.wrapper as HTMLElement).offsetTop -
+                this.mouseOffsetTop
+            if (
+                marginTop < 0 ||
+                marginTop >
+                    this.maxHeight -
+                        (this.$refs.scroll as HTMLElement).offsetHeight -
+                        50
+            )
+                return
+            ;(
+                this.$refs.scroll as HTMLElement
+            ).style.marginTop = `${marginTop}px`
+            this.updatePosition(marginTop)
+        },
+        updatePosition(top: number) {
+            const newMin = Math.trunc((this.itemCount * top) / this.maxScroll)
+            if (newMin !== this.previousMin + 1) {
+                this.$emit('position-update', newMin)
+            }
+        }
+    }
+})
+</script>
+
+<template>
+    <div
+        ref="wrapper"
+        class="scroll-bar-wrapper"
+    >
+        <div
+            ref="scroll"
+            :style="scrollStyles"
+            :class="scrollClasses"
+            @mousedown="startDragging"
+        />
+    </div>
+</template>
+
+<style scoped lang="scss">
+.scroll-bar-wrapper {
+    margin-top: 10px;
+    width: 1%;
+}
+.scroll-bar {
+    background: #d9d9d9;
+    width: 100%;
+    opacity: 0.8;
+    border-radius: 5px;
+    transition: margin-top 0.5s;
+    cursor: pointer;
+    &:hover {
+        background-color: #949494;
+    }
+    &__drag {
+        transition: margin-top 0s;
+    }
+}
+</style>

package/src/components/DlChart/Doughnut/DlDoughnutChart.vue

@@ -0,0 +1,448 @@
+<template>
+    <div
+        ref="dlDoughnutChartWidgetRef"
+        class="dl_doughnut"
+    >
+        <div
+            v-if="itemsCount"
+            class="dl_doughnut__wrapper"
+            :class="classFlexLg"
+        >
+            <div
+                v-if="doughnutData"
+                class="dl_doughnut__wrapper__container"
+                :class="classFlexDirection"
+            >
+                <div
+                    class="dl_doughnut__wrapper__container__chart"
+                    :style="styleDoughnutWidth"
+                    @mouseover="setHoverLight"
+                    @mouseleave="resetColors"
+                >
+                    <Doughnut
+                        ref="doughnutChartRef"
+                        :data="doughnutData"
+                        :options="doughnutOptions"
+                        :plugins="doughnutPlugins"
+                    />
+                    <div
+                        v-if="hasSummary"
+                        ref="dlDoughnutChartSummaryRef"
+                        class="dl_doughnut__wrapper__container__chart__summary text-center"
+                    >
+                        <div :class="classSummaryLabel">
+                            Total items
+                        </div>
+                        <div :class="classSummaryCount">
+                            {{ itemsCount }}
+                        </div>
+                    </div>
+                </div>
+                <div class="dl_doughnut__wrapper__legend">
+                    <div class="dl_doughnut__wrapper__legend__row">
+                        <dl-doughnut-chart-legend
+                            :data="doughnutData"
+                            :hidden-indexes="hiddenIndexes"
+                            :is-small="isSmall"
+                            @hide="hideData"
+                            @mouseOverLegend="darkHighlight"
+                            @mouseLeaveLegend="resetColors"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-else>
+            No data
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import {
+    computed,
+    defineComponent,
+    ref,
+    reactive,
+    PropType,
+    onMounted
+} from 'vue-demi'
+
+import {
+    Chart as ChartJS,
+    Tooltip,
+    Legend,
+    DoughnutController,
+    ArcElement,
+    ChartData,
+    DoughnutControllerChartOptions
+} from 'chart.js'
+
+ChartJS.register(Tooltip, Legend, DoughnutController, ArcElement)
+
+import { cloneDeep, merge } from 'lodash'
+import { Doughnut } from '../index'
+import { useThemeVariables } from '../../../hooks/use-theme'
+import { updateNestedArrayValues } from '../../../utils/update-key'
+import DlDoughnutChartLegend from './DlDoughnutChartLegend.vue'
+import { defaultDoughnutChartProps } from '../props'
+import { TDoughnutWithOriginalColor } from './types/TDoughnutWithOriginalColor'
+
+export default defineComponent({
+    name: 'DlDoughnutChart',
+    components: {
+        Doughnut,
+        DlDoughnutChartLegend
+    },
+    props: {
+        data: {
+            type: Object as PropType<ChartData<'doughnut'>>,
+            required: true
+        },
+        isSmall: {
+            type: Boolean,
+            default: false
+        },
+        hasSummary: {
+            type: Boolean,
+            default: false
+        },
+        animation: {
+            type: Object as PropType<
+                DoughnutControllerChartOptions['animation']
+            >,
+            required: false
+        }
+    },
+    setup(props) {
+        /** Data */
+        const doughnutChartRef = ref(null)
+        const dlDoughnutChartWidgetRef = ref(null)
+        const doughnutChartWidgetWidth = ref()
+        const doughnutChartWidgetHeight = ref()
+        const dlDoughnutChartSummaryRef = ref<HTMLDivElement>(null)
+        const defaultOptions = cloneDeep(defaultDoughnutChartProps.options)
+
+        const sizePercents = 70
+
+        const chartRefValue = computed(() => {
+            return doughnutChartRef.value?.chart?.value || {}
+        })
+
+        const hiddenIndexes = ref([])
+
+        const { variables } = useThemeVariables()
+        const replaceColor = (key: keyof typeof variables) =>
+            variables[key] || key
+
+        const setDoughnutData = () => {
+            let dumpPropsData: TDoughnutWithOriginalColor =
+                {} as TDoughnutWithOriginalColor
+
+            if (
+                props.data?.datasets?.length &&
+                (props.data.datasets[0]?.backgroundColor as any)?.length
+            ) {
+                dumpPropsData = cloneDeep(
+                    props.data
+                ) as TDoughnutWithOriginalColor
+                dumpPropsData.datasets[0] = updateNestedArrayValues(
+                    cloneDeep(props.data.datasets[0]),
+                    ['backgroundColor', 'hoverBackgroundColor', 'lightColor'],
+                    replaceColor
+                )
+
+                dumpPropsData.datasets[0].originalBackgroundColor = cloneDeep(
+                    dumpPropsData?.datasets[0]?.backgroundColor
+                )
+            }
+
+            return dumpPropsData
+        }
+
+        const doughnutData = ref(setDoughnutData())
+
+        const doughnutPlugins = reactive([
+            {
+                id: 'centerSummary',
+                afterDraw(chart: any, args: any, options: any) {
+                    const {
+                        ctx,
+                        chartArea: { top, width, height }
+                    } = chart
+                    ctx.save()
+
+                    const slotDiv: HTMLDivElement =
+                        dlDoughnutChartSummaryRef.value
+
+                    if (!slotDiv) {
+                        return
+                    }
+                    const summaryHeight = height / 2
+                    const divHeight = summaryHeight / 8
+                    const summaryTop = (summaryHeight + divHeight) * -1
+
+                    slotDiv.style.position = 'relative'
+                    slotDiv.style.top = `${summaryTop}px`
+                    slotDiv.style.textAlign = 'center'
+
+                    ctx.restore()
+                }
+            }
+        ])
+        /** Computed */
+        const itemsCount = computed(() =>
+            props.data?.datasets?.length &&
+            props.data?.datasets[0]?.data?.length
+                ? props.data?.datasets[0]?.data?.length
+                : 0
+        )
+
+        onMounted(() => {
+            const resizeObserver = new ResizeObserver(getDimensions)
+            resizeObserver.observe(dlDoughnutChartWidgetRef.value)
+            getDimensions()
+        })
+        const classFlexLg = computed(() => (props.isSmall ? 'flex' : ''))
+        const classFlexDirection = computed(() =>
+            props.isSmall
+                ? 'flex-column dl_doughnut__wrapper__container__gap__sm'
+                : 'flex-row dl_doughnut__wrapper__container__gap__lg'
+        )
+        const styleDoughnutWidth = computed(() =>
+            props.isSmall
+                ? {
+                      'justify-content': 'end',
+                      width: getPixelsFromPercents(
+                          doughnutChartWidgetWidth.value,
+                          sizePercents,
+                          'px'
+                      ),
+                      height: getPixelsFromPercents(
+                          doughnutChartWidgetHeight.value,
+                          sizePercents / 1.8,
+                          'px'
+                      )
+                  }
+                : {
+                      height: getPixelsFromPercents(
+                          doughnutChartWidgetHeight.value,
+                          sizePercents,
+                          'px'
+                      ),
+                      width: getPixelsFromPercents(
+                          doughnutChartWidgetHeight.value,
+                          sizePercents,
+                          'px'
+                      )
+                  }
+        )
+
+        const classSummaryLabel = computed(
+            () =>
+                `dl_doughnut__wrapper__container__chart__summary__label_${
+                    props.isSmall ? 'sm' : 'lg'
+                }`
+        )
+
+        const classSummaryCount = computed(
+            () =>
+                `dl_doughnut__wrapper__container__chart__summary__count__${
+                    props.isSmall ? 'sm' : 'lg'
+                }`
+        )
+
+        const mergedAnimation = computed(() =>
+            merge(defaultOptions.animation, props.animation)
+        )
+        defaultOptions.animation = mergedAnimation.value
+
+        const doughnutOptions = computed(() =>
+            merge(
+                {
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    }
+                },
+                defaultOptions
+            )
+        )
+
+        /** Methods */
+        const hideData = (item: { index: number; hidden: boolean }) => {
+            chartRefValue.value._metasets[0].data[item.index].hidden =
+                item.hidden
+            chartRefValue.value.update()
+
+            if (item.hidden) {
+                hiddenIndexes.value.push(item.index)
+                return
+            }
+
+            const indexOfItem = hiddenIndexes.value.indexOf(item.index)
+            if (indexOfItem > -1) {
+                hiddenIndexes.value.splice(indexOfItem, 1)
+            }
+        }
+
+        const setHoverLight = () => {
+            chartRefValue.value.data.datasets[0].backgroundColor = cloneDeep(
+                (doughnutData.value.datasets[0] as any)?.lightColor
+            )
+            chartRefValue.value.update()
+        }
+
+        const resetColors = () => {
+            const originalBackgroundColor = (
+                doughnutData.value.datasets[0] as any
+            )?.originalBackgroundColor
+            chartRefValue.value.data.datasets[0].backgroundColor = cloneDeep(
+                originalBackgroundColor
+            )
+            chartRefValue.value.update()
+        }
+
+        const darkHighlight = (backgroundColorIndex: number): void => {
+            resetColors()
+            setHoverLight()
+            chartRefValue.value.data.datasets[0].backgroundColor[
+                backgroundColorIndex
+            ] = cloneDeep(
+                (doughnutData.value?.datasets[0] as any)?.hoverBackgroundColor[
+                    backgroundColorIndex
+                ]
+            )
+            chartRefValue.value.update()
+        }
+
+        const getDimensions = () => {
+            doughnutChartWidgetWidth.value =
+                dlDoughnutChartWidgetRef.value?.clientWidth
+            doughnutChartWidgetHeight.value =
+                dlDoughnutChartWidgetRef.value?.clientHeight
+        }
+
+        const getPixelsFromPercents = (
+            totalPixels: number,
+            percents: number,
+            unit: string
+        ): string => {
+            if (!totalPixels || !percents) {
+                return
+            }
+            const result = (percents / 100) * totalPixels
+            return `${result.toFixed(0)}${unit}`
+        }
+
+        return {
+            doughnutChartRef,
+            dlDoughnutChartWidgetRef,
+            doughnutChartWidgetWidth,
+            doughnutChartWidgetHeight,
+            doughnutData,
+            doughnutOptions,
+            dlDoughnutChartSummaryRef,
+            itemsCount,
+            hiddenIndexes,
+            classFlexLg,
+            classFlexDirection,
+            styleDoughnutWidth,
+            classSummaryLabel,
+            classSummaryCount,
+            hideData,
+            darkHighlight,
+            resetColors,
+            setHoverLight,
+            doughnutPlugins
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl_doughnut {
+    border: 1px solid #cccccc;
+    border-radius: 3px;
+    text-align: center;
+    align-items: center;
+    padding: 25px;
+
+    &__wrapper {
+        display: flex;
+        height: 510px;
+        text-align: center;
+        justify-content: center;
+        overflow: hidden;
+
+        &__container {
+            display: flex;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+
+            &__gap {
+                &__lg {
+                    gap: 0 70px;
+                }
+
+                &__sm {
+                    gap: 25px 0;
+                }
+            }
+
+            &__chart {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                text-align: center;
+
+                &__summary {
+                    height: 1px;
+
+                    &__label_lg {
+                        font-weight: normal;
+                        color: var(--dl-color-medium);
+                        font-size: var(--dl-font-size-h3);
+                        line-height: 18.75px;
+                    }
+
+                    &__label_sm {
+                        font-weight: normal;
+                        color: var(--dl-color-medium);
+                        font-size: var(--dl-font-size-small);
+                        line-height: 12px;
+                    }
+
+                    &__count {
+                        font-weight: normal;
+                        color: var(--dl-color-darker);
+
+                        &__lg {
+                            font-size: var(--dl-font-size-h1);
+                            line-height: 35px;
+                        }
+
+                        &__sm {
+                            font-size: var(--dl-font-size-h4);
+                            line-height: 16px;
+                        }
+                    }
+                }
+            }
+        }
+
+        &__legend {
+            text-align: initial;
+
+            &__row {
+                display: flex;
+                max-width: 350px;
+            }
+        }
+    }
+}
+</style>