@dataloop-ai/components 0.13.19 → 0.14.3

package/src/components/DlChart/props.ts

@@ -0,0 +1,348 @@
+import type { PropType } from 'vue-demi'
+import type {
+    ChartType,
+    ChartData,
+    ChartOptions,
+    Plugin,
+    UpdateMode,
+    DatasetChartOptions
+} from 'chart.js'
+import { TDoughnutProps } from './Doughnut/types/TDoughnutChartProps'
+import { TDoughnutChartData } from './Doughnut/types/TDoughnutChartData'
+
+export const CommonProps = {
+    data: {
+        type: Object as PropType<ChartData>,
+        required: true
+    },
+    options: {
+        type: Object as PropType<ChartOptions>,
+        default: () => ({})
+    },
+    plugins: {
+        type: Array as PropType<Plugin[]>,
+        default: () => [] as Plugin[]
+    },
+    datasetIdKey: {
+        type: String,
+        default: 'label'
+    },
+    updateMode: {
+        type: String as PropType<UpdateMode>,
+        default: undefined as UpdateMode
+    }
+} as const
+
+export const Props = {
+    type: {
+        type: String as PropType<ChartType>,
+        required: true
+    },
+    ...CommonProps
+} as const
+
+export const ColumnChartProps = {
+    displayBrush: {
+        type: Boolean,
+        default: true
+    },
+    displayLabels: {
+        type: Boolean,
+        default: true
+    },
+    displayLegend: {
+        type: Boolean,
+        default: true
+    },
+    rootClass: {
+        type: String,
+        default: ''
+    },
+    chartClass: {
+        type: String,
+        default: ''
+    },
+    chartStyles: {
+        type: String,
+        default: ''
+    },
+    brushClass: {
+        type: String,
+        default: ''
+    },
+    wrapperHeight: {
+        type: String,
+        default: '400px'
+    },
+    brushProps: {
+        type: Object,
+        default: () => ({
+            width: '100%',
+            min: 0,
+            max: 100,
+            thumbSize: '20px',
+            trackSize: '18px',
+            step: 1,
+            dragRange: true
+        })
+    },
+    legendClass: {
+        type: String,
+        default: ''
+    },
+    legendProps: {
+        type: Object,
+        default: () => ({
+            datasets: [] as unknown as DatasetChartOptions,
+            width: '100%',
+            alignItems: 'center'
+        })
+    }
+}
+
+export const defaultColumnChartProps = {
+    brushProps: {
+        width: '100%',
+        thumbSize: '20px',
+        trackSize: '18px',
+        step: 1,
+        dragRange: true
+    },
+    legendProps: {
+        alignItems: 'center'
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: {
+            duration: 100,
+            easing: 'linear'
+        },
+        plugins: {
+            legend: {
+                display: false
+            }
+        },
+        scales: {
+            y: {
+                title: {
+                    color: '--dl-color-medium',
+                    display: true,
+                    font: {
+                        size: 12
+                    },
+                    text: 'Axis Y (sec)'
+                },
+                ticks: {
+                    font: {
+                        size: 12
+                    },
+                    color: '--dl-color-darker'
+                },
+                grid: {
+                    color: '--dl-color-separator'
+                }
+            },
+            x: {
+                title: {
+                    font: {
+                        size: 12
+                    },
+                    color: '--dl-color-medium',
+                    display: false,
+                    text: 'Axis X'
+                },
+                min: 0,
+                ticks: {
+                    font: {
+                        size: 12
+                    },
+                    display: false,
+                    color: '--dl-color-darker'
+                },
+                grid: {
+                    color: '--dl-color-separator'
+                }
+            }
+        }
+    }
+}
+
+export const defaultBarChartProps = {
+    legendProps: {
+        alignItems: 'center'
+    },
+    options: {
+        indexAxis: 'y',
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            }
+        },
+        scales: {
+            y: {
+                title: {
+                    color: '--dl-color-medium',
+                    display: true,
+                    text: 'Axis Y (sec)'
+                },
+                ticks: {
+                    color: '--dl-color-darker'
+                },
+                grid: {
+                    color: '--dl-color-separator'
+                },
+                min: 0
+            },
+            x: {
+                title: {
+                    color: '--dl-color-medium',
+                    display: true,
+                    text: 'Axis X'
+                },
+                min: 0,
+                ticks: {
+                    display: true,
+                    color: '--dl-color-darker'
+                },
+                grid: {
+                    color: '--dl-color-separator'
+                }
+            }
+        }
+    }
+}
+
+export const BarChartProps = {
+    rootClass: {
+        type: String,
+        default: ''
+    },
+    chartClass: {
+        type: String,
+        default: ''
+    },
+    chartStyles: {
+        type: String,
+        default: ''
+    },
+    wrapperHeight: {
+        type: String,
+        default: '600px'
+    },
+    legendClass: {
+        type: String,
+        default: ''
+    },
+    legendProps: {
+        type: Object,
+        default: () => ({
+            datasets: [] as unknown as DatasetChartOptions,
+            width: '100%',
+            alignItems: 'center'
+        })
+    }
+}
+
+export const defaultLineChartProps = {
+    brushProps: {
+        width: '100%',
+        thumbSize: '20px',
+        trackSize: '18px',
+        step: 1,
+        dragRange: true
+    },
+    legendProps: {
+        alignItems: 'center'
+    },
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: {
+            duration: 100,
+            easing: 'linear'
+        },
+        plugins: {
+            legend: {
+                display: false
+            },
+            tooltip: {
+                callbacks: {
+                    beforeTitle(context: any) {
+                        const label =
+                            context[0]?.chart?.data?.labels[
+                                context[0]?.dataIndex
+                            ] || context[0].label
+                        if (typeof label === 'string') {
+                            context[0].label = label
+                        } else {
+                            context[0].label = Object.values(label)
+                                .filter((item) => !!item)
+                                .join(' | ')
+                        }
+                    }
+                }
+            }
+        },
+        scales: {
+            y: {
+                title: {
+                    color: '--dl-color-medium',
+                    display: true,
+                    font: {
+                        size: 12
+                    },
+                    text: 'Axis Y (sec)'
+                },
+                ticks: {
+                    font: {
+                        size: 12
+                    },
+                    color: '--dl-color-darker'
+                },
+                grid: {
+                    color: '--dl-color-separator'
+                }
+            },
+            x: {
+                title: {
+                    font: {
+                        size: 12
+                    },
+                    color: '--dl-color-medium',
+                    display: false,
+                    text: 'Axis X'
+                },
+                min: 0,
+                ticks: {
+                    font: {
+                        size: 12
+                    },
+                    display: false,
+                    color: '--dl-color-darker'
+                },
+                grid: {
+                    display: false,
+                    color: '--dl-color-separator'
+                }
+            }
+        }
+    }
+}
+
+export const defaultDoughnutChartProps: TDoughnutProps = {
+    data: <TDoughnutChartData>{},
+    isSmall: false,
+    hasSummary: false,
+    options: {
+        responsive: true,
+        cutout: undefined,
+        circumference: 360,
+        animation: {
+            animateRotate: true,
+            animateScale: false
+        }
+    }
+}

package/src/components/DlChart/typedCharts.ts

@@ -0,0 +1,88 @@
+import { defineComponent, shallowRef, computed } from 'vue-demi'
+import type { ChartType, ChartComponentLike, DefaultDataPoint } from 'chart.js'
+import {
+    Chart as ChartJS,
+    BarController,
+    BubbleController,
+    DoughnutController,
+    LineController,
+    PieController,
+    PolarAreaController,
+    RadarController,
+    ScatterController
+} from 'chart.js'
+import type { TypedChartComponent, ChartComponentRef } from './types'
+import { CommonProps } from './props'
+import { Chart } from './chart'
+import { compatProps } from './utils'
+
+const template = `<Chart v-bind="{...allProps}" />`
+
+export function createTypedChart<
+    TType extends ChartType = ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+>(
+    type: TType,
+    registerables: ChartComponentLike
+): TypedChartComponent<TType, TData, TLabel> {
+    ChartJS.register(registerables)
+
+    return defineComponent({
+        components: {
+            Chart
+        },
+        props: CommonProps,
+        setup(props) {
+            const canvasRef = shallowRef<ChartJS | null>(null)
+            const reforwardRef = (chartRef: ChartComponentRef) => {
+                canvasRef.value = chartRef?.chart
+            }
+
+            const allProps = computed(() => {
+                return compatProps(
+                    {
+                        ref: reforwardRef as any
+                    },
+                    {
+                        type,
+                        ...props
+                    }
+                )
+            })
+
+            return {
+                allProps
+            }
+        },
+        template
+    }) as any
+}
+
+export const Bar = /* #__PURE__ */ createTypedChart('bar', BarController)
+
+export const Doughnut = /* #__PURE__ */ createTypedChart(
+    'doughnut',
+    DoughnutController
+)
+
+export const Line = /* #__PURE__ */ createTypedChart('line', LineController)
+
+export const Pie = /* #__PURE__ */ createTypedChart('pie', PieController)
+
+export const PolarArea = /* #__PURE__ */ createTypedChart(
+    'polarArea',
+    PolarAreaController
+)
+
+export const Radar = /* #__PURE__ */ createTypedChart('radar', RadarController)
+
+export const Bubble = /* #__PURE__ */ createTypedChart(
+    'bubble',
+    BubbleController
+)
+
+export const Scatter = /* #__PURE__ */ createTypedChart(
+    'scatter',
+    ScatterController
+)

package/src/components/DlChart/types.ts

@@ -0,0 +1,63 @@
+import type {
+    Chart as ChartJS,
+    ChartType,
+    ChartData,
+    ChartOptions,
+    DefaultDataPoint,
+    Plugin,
+    UpdateMode
+} from 'chart.js'
+
+export interface ChartProps<
+    TType extends ChartType = ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+> {
+    /**
+     * Chart.js chart type
+     */
+    type: TType
+    /**
+     * The data object that is passed into the Chart.js chart
+     * @see https://www.chartjs.org/docs/latest/getting-started/
+     */
+    data: ChartData<TType, TData, TLabel>
+    /**
+     * The options object that is passed into the Chart.js chart
+     * @see https://www.chartjs.org/docs/latest/general/options.html
+     * @default {}
+     */
+    options?: ChartOptions<TType>
+    /**
+     * The plugins array that is passed into the Chart.js chart
+     * @see https://www.chartjs.org/docs/latest/developers/plugins.html
+     * @default []
+     */
+    plugins?: Plugin<TType>[]
+    /**
+     * Key name to identificate dataset
+     * @default 'label'
+     */
+    datasetIdKey?: string
+    /**
+     * A mode string to indicate transition configuration should be used.
+     * @see https://www.chartjs.org/docs/latest/developers/api.html#update-mode
+     */
+    updateMode?: UpdateMode
+}
+
+export interface ChartComponentRef<
+    TType extends ChartType = ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+> {
+    chart: ChartJS<TType, TData, TLabel> | null
+}
+
+export type ChartComponent = any
+
+export type TypedChartComponent<
+    TType extends ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+> = any

package/src/components/DlChart/utils.ts

@@ -0,0 +1,153 @@
+import { toRaw, isVue2 } from 'vue-demi'
+import type {
+    Chart,
+    ChartType,
+    ChartData,
+    ChartDataset,
+    ChartOptions,
+    DefaultDataPoint
+} from 'chart.js'
+
+const isProxy = (obj: any) => {
+    try {
+        postMessage(obj, '*')
+    } catch (error: Error | any) {
+        if (error?.code === 25) return false
+    }
+    return true
+}
+
+export const compatProps = isVue2
+    ? <I extends {}, T extends {}>(internals: I, props: T) =>
+          Object.assign(internals, props) as unknown as I & T
+    : <I extends {}, T extends {}>(internals: I, props: T) =>
+          Object.assign(internals, props)
+
+export function toRawIfProxy<T>(obj: T) {
+    return isProxy(obj) ? toRaw(obj) : obj
+}
+
+export function cloneProxy<T extends object>(obj: T, src = obj) {
+    return isProxy(src) ? new Proxy(obj, {}) : obj
+}
+
+export function setOptions<
+    TType extends ChartType = ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+>(chart: Chart<TType, TData, TLabel>, nextOptions: ChartOptions<TType>) {
+    const options = chart.options
+
+    if (options && nextOptions) {
+        Object.assign(options, nextOptions)
+    }
+}
+
+export function setLabels<
+    TType extends ChartType = ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+>(
+    currentData: ChartData<TType, TData, TLabel>,
+    nextLabels: TLabel[] | undefined
+) {
+    currentData.labels = nextLabels
+}
+
+export function setDatasets<
+    TType extends ChartType = ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+>(
+    currentData: ChartData<TType, TData, TLabel>,
+    nextDatasets: ChartDataset<TType, TData>[],
+    datasetIdKey: string
+) {
+    const addedDatasets: ChartDataset<TType, TData>[] = []
+
+    currentData.datasets = nextDatasets.map(
+        (nextDataset: Record<string, unknown>) => {
+            // given the new set, find it's current match
+            const currentDataset = currentData.datasets.find(
+                (dataset: Record<string, unknown>) =>
+                    dataset[datasetIdKey] === nextDataset[datasetIdKey]
+            )
+
+            // There is no original to update, so simply add new one
+            if (
+                !currentDataset ||
+                !nextDataset.data ||
+                addedDatasets.includes(currentDataset)
+            ) {
+                return { ...nextDataset } as ChartDataset<TType, TData>
+            }
+
+            addedDatasets.push(currentDataset)
+
+            Object.assign(currentDataset, nextDataset)
+
+            return currentDataset
+        }
+    )
+}
+
+export function cloneData<
+    TType extends ChartType = ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+>(data: ChartData<TType, TData, TLabel>, datasetIdKey: string) {
+    const nextData: ChartData<TType, TData, TLabel> = {
+        labels: [],
+        datasets: []
+    }
+
+    setLabels(nextData, data.labels)
+    setDatasets(nextData, data.datasets, datasetIdKey)
+
+    return nextData
+}
+
+/**
+ * Get dataset from mouse click event
+ * @param chart - Chart.js instance
+ * @param event - Mouse click event
+ * @returns Dataset
+ */
+export function getDatasetAtEvent(chart: Chart, event: MouseEvent) {
+    return chart.getElementsAtEventForMode(
+        event,
+        'dataset',
+        { intersect: true },
+        false
+    )
+}
+
+/**
+ * Get single dataset element from mouse click event
+ * @param chart - Chart.js instance
+ * @param event - Mouse click event
+ * @returns Dataset
+ */
+export function getElementAtEvent(chart: Chart, event: MouseEvent) {
+    return chart.getElementsAtEventForMode(
+        event,
+        'nearest',
+        { intersect: true },
+        false
+    )
+}
+
+/**
+ * Get all dataset elements from mouse click event
+ * @param chart - Chart.js instance
+ * @param event - Mouse click event
+ * @returns Dataset
+ */
+export function getElementsAtEvent(chart: Chart, event: MouseEvent) {
+    return chart.getElementsAtEventForMode(
+        event,
+        'index',
+        { intersect: true },
+        false
+    )
+}