@dataloop-ai/components 0.17.94 → 0.17.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.94",
+  "version": "0.17.96",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlCharts/charts/DlScatterChart/DlScatterChart.vue

@@ -0,0 +1,665 @@
+<template>
+    <div
+        :style="cssVars"
+        :class="chartWrapperClasses"
+    >
+        <DLScatter
+            :id="id"
+            ref="scatterChart"
+            :class="chartClasses"
+            :style="(chartStyles, `max-height: ${wrapperHeight}`)"
+            :data="chartData"
+            :options="chartOptions"
+            @mouseout="onChartLeave"
+        />
+        <slot
+            v-if="displayLabels"
+            v-bind="{ ...labelStyles, labels: xLabels, chartWidth }"
+            name="axe-x-labels"
+        >
+            <dl-chart-labels
+                :font-size="labelStyles.fontSize"
+                :title="labelStyles.title"
+                :title-size="labelStyles.titleSize"
+                :title-color="labelStyles.titleColor"
+                :label-color="labelStyles.labelColor"
+                :width="chartWidth"
+                :labels="xLabels"
+            />
+        </slot>
+        <slot
+            v-if="displayBrush"
+            v-bind="{
+                chartWidth,
+                modelValue: brush.value,
+                handleBrushUpdate,
+                brushClasses,
+                ...brushProperties
+            }"
+            name="brush"
+        >
+            <dl-brush
+                :model-value="brush.value"
+                :width="chartWidth"
+                :min="brushProperties.min"
+                :max="brushProperties.max"
+                :class="brushClasses"
+                :thumb-size="brushProperties.thumbSize"
+                :track-size="brushProperties.trackSize"
+                :step="brushProperties.step"
+                :drag-range="brushProperties.dragRange"
+                @update:model-value="handleBrushUpdate"
+            />
+        </slot>
+        <slot
+            v-if="displayLegend"
+            v-bind="{
+                data: legendDatasets,
+                chartWidth,
+                onHide: hideData,
+                onHoverLegend,
+                onLeaveLegend,
+                ...legendProperties
+            }"
+            name="legend"
+        >
+            <dl-chart-legend
+                :datasets="legendDatasets"
+                :width="chartWidth"
+                :class="legendClasses"
+                :align-items="legendProperties.alignItems"
+                @hide="hideData"
+                @on-hover="onHoverLegend"
+                @on-leave="onLeaveLegend"
+            />
+        </slot>
+    </div>
+</template>
+
+<script lang="ts">
+import { Scatter as DLScatter } from '../../types/typedCharts'
+import {
+    CommonProps,
+    ColumnChartProps,
+    defaultLineChartProps
+} from '../../types/props'
+import { defineComponent, reactive, watch, ref, computed } from 'vue-demi'
+import DlBrush from '../../components/DlBrush.vue'
+import DlChartLegend from '../../components/DlChartLegend.vue'
+import DlChartLabels from '../../components/DlChartLabels.vue'
+import { updateKeys } from '../../../../../utils/update-key'
+import { hexToRgbA } from '../../../../../utils'
+import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    BarElement,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarControllerDatasetOptions,
+    TimeScale
+} from 'chart.js'
+import type {
+    Chart,
+    ChartMeta,
+    ChartDataset,
+    ActiveElement,
+    ChartData,
+    DatasetController,
+    ScatterControllerDatasetOptions
+} from 'chart.js'
+import { orderBy, merge, isEqual, unionBy, cloneDeep } from 'lodash'
+import { useThemeVariables } from '../../../../../hooks/use-theme'
+
+ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    BarElement,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    TimeScale
+)
+
+export default defineComponent({
+    name: 'DlScatterChart',
+    components: {
+        DlBrush,
+        DlChartLegend,
+        DLScatter,
+        DlChartLabels
+    },
+    props: {
+        id: {
+            type: String,
+            default: null
+        },
+        ...CommonProps,
+        ...ColumnChartProps
+    },
+    setup(props, { slots }) {
+        const { variables } = useThemeVariables()
+
+        const chartWidth = ref('100%')
+
+        const chartHoverDataset: { value: null | ChartMeta } = {
+            value: null
+        }
+
+        const onResize = (
+            chart: Chart,
+            size: { height: number; width: number }
+        ) => {
+            if (chart?.scales?.x?.width) {
+                chartWidth.value = `${
+                    parseInt(chart.scales.x.width as unknown as string) -
+                    parseInt(brushProperties.value.thumbSize) / 4
+                }px`
+            }
+        }
+
+        const chart = computed(() => {
+            return scatterChart.value?.chart?.value || {}
+        })
+
+        const replaceColor = (key: keyof typeof variables) =>
+            variables[key] || key
+
+        const scatterChart = ref(null)
+
+        const brush = reactive({
+            value: {
+                min: 0,
+                max:
+                    orderBy(props.data.datasets, (o) => o.data.length)[0].data
+                        .length - 1
+            }
+        })
+
+        const getChartBackup = () => {
+            if (!chart.value) {
+                return {
+                    data: {},
+                    options: {}
+                }
+            }
+            const datasets: DatasetController<'scatter'> = updateKeys(
+                props.data.datasets,
+                [
+                    'backgroundColor',
+                    'pointBackgroundColor',
+                    'pointBorderColor',
+                    'borderColor',
+                    'hoverBorderColor',
+                    'hoverBackgroundColor',
+                    'pointHoverBackgroundColor',
+                    'pointHoverBorderColor'
+                ],
+                replaceColor
+            ).map((item: ScatterControllerDatasetOptions) => {
+                return {
+                    ...item,
+                    hoverBackgroundColor:
+                        item.hoverBackgroundColor ||
+                        hexToRgbA(item.backgroundColor as string, 0.2),
+                    hoverBorderColor:
+                        item.hoverBorderColor ||
+                        hexToRgbA(item.backgroundColor as string, 0.2)
+                }
+            })
+
+            const chartProps = cloneDeep({
+                options: props.options,
+                data: {
+                    ...props.data,
+                    datasets
+                }
+            })
+
+            return chartProps
+        }
+
+        const chartWrapperClasses = computed(() => {
+            const classes = 'dl-scatter-chart-wrapper'
+
+            if (props.rootClass) {
+                classes.concat(' ', props.rootClass)
+            }
+
+            return classes
+        })
+
+        const chartClasses = computed(() => {
+            const classes = 'dl-scatter-chart'
+
+            if (props.chartClass) {
+                classes.concat(' ', props.chartClass)
+            }
+
+            return classes
+        })
+
+        const brushClasses = computed(() => {
+            const classes = 'dl-brush'
+
+            if (props.brushClass) {
+                classes.concat(' ', props.brushClass)
+            }
+
+            return classes
+        })
+
+        const legendClasses = computed(() => {
+            const classes = 'dl-legend'
+
+            if (props.legendClass) {
+                classes.concat(' ', props.legendClass)
+            }
+
+            return classes
+        })
+
+        const brushProperties = computed(() => {
+            return merge(defaultLineChartProps.brushProps, props.brushProps)
+        })
+
+        const legendProperties = computed(() => {
+            return merge(defaultLineChartProps.legendProps, props.legendProps)
+        })
+
+        const cssVars = computed(() => {
+            return {
+                '--dl-brush-thumb-size':
+                    parseInt(brushProperties.value.thumbSize) / 4 + 'px'
+            }
+        })
+
+        const replaceDataColors = (data: ChartData) =>
+            updateKeys(
+                data,
+                [
+                    'backgroundColor',
+                    'pointBackgroundColor',
+                    'pointBorderColor',
+                    'borderColor',
+                    'hoverBorderColor',
+                    'hoverBackgroundColor',
+                    'pointHoverBackgroundColor',
+                    'pointHoverBorderColor'
+                ],
+                replaceColor
+            )
+
+        const chartData = ref(replaceDataColors(props.data))
+
+        const legendDatasets = ref(
+            unionBy(
+                props.legendProps?.datasets || [],
+                props.data?.datasets || [],
+                'label'
+            )
+        )
+
+        const onChartLeave = () => {
+            if (chartHoverDataset.value) {
+                const filteredItems = chart.value.data.datasets
+                    .map((d: ChartDataset, i: number) => ({
+                        ...d,
+                        index: i
+                    }))
+                    .filter(
+                        (dataset: ChartDataset) =>
+                            dataset.label !== chartHoverDataset.value.label
+                    )
+
+                const backup = getChartBackup()
+
+                for (const dataset of filteredItems) {
+                    chart.value.data.datasets[dataset.index].backgroundColor = (
+                        backup.data as ChartData<'scatter'>
+                    ).datasets[dataset.index].backgroundColor
+                    chart.value.data.datasets[dataset.index].borderColor = (
+                        backup.data as ChartData<'scatter'>
+                    ).datasets[dataset.index].borderColor
+                }
+                chartHoverDataset.value = null
+
+                chart.value.update()
+            }
+        }
+
+        const onHover = (
+            event: Event,
+            items: ActiveElement[],
+            chartJS: Chart
+        ) => {
+            if (event.type !== 'mousemove') {
+                return
+            }
+            if (
+                items.length === 0 ||
+                chartJS.getElementsAtEventForMode(
+                    event,
+                    'nearest',
+                    {
+                        intersect: true
+                    },
+                    true
+                ).length === 0
+            ) {
+                if (chartHoverDataset.value) {
+                    const filteredItems = chartJS.data.datasets
+                        .map((d: ChartDataset, i: number) => ({
+                            ...d,
+                            index: i
+                        }))
+                        .filter(
+                            (dataset: ChartDataset) =>
+                                dataset.label !== chartHoverDataset.value.label
+                        )
+                    const backup = getChartBackup()
+                    for (const dataset of filteredItems) {
+                        chartJS.data.datasets[dataset.index].backgroundColor = (
+                            backup.data as ChartData<'scatter'>
+                        ).datasets[dataset.index].backgroundColor
+
+                        chartJS.data.datasets[dataset.index].borderColor = (
+                            backup.data as ChartData<'scatter'>
+                        ).datasets[dataset.index].borderColor
+                    }
+
+                    chartHoverDataset.value = null
+
+                    chartJS.update()
+                }
+                return
+            } else {
+                const item = items[0]
+                const datasetItem = chartJS.getDatasetMeta(item.datasetIndex)
+                if (!chartHoverDataset.value) {
+                    const filteredDatasets = chartJS.data.datasets
+                        .map((d: ChartDataset, i: number) => ({
+                            ...d,
+                            index: i
+                        }))
+                        .filter(
+                            (ds: ChartDataset) => ds.label !== datasetItem.label
+                        )
+                    for (const dataset of filteredDatasets) {
+                        chartJS.data.datasets[dataset.index].backgroundColor =
+                            hexToRgbA(dataset.backgroundColor as string, 0.2)
+
+                        chart.value.data.datasets[dataset.index].borderColor =
+                            dataset?.hoverBorderColor ||
+                            hexToRgbA(dataset.backgroundColor as string, 0.2)
+                    }
+
+                    chartHoverDataset.value = datasetItem
+
+                    chartJS.update()
+
+                    return
+                }
+                if (!isEqual(chartHoverDataset.value, datasetItem)) {
+                    const filteredItems = chartJS.data.datasets
+                        .map((d: ChartDataset, i: number) => ({
+                            ...d,
+                            index: i
+                        }))
+                        .filter(
+                            (dataset: ChartDataset) =>
+                                dataset.label !== chartHoverDataset.value.label
+                        )
+
+                    const backup = getChartBackup()
+                    for (const dataset of filteredItems) {
+                        chartJS.data.datasets[dataset.index].backgroundColor = (
+                            backup.data as ChartData<'scatter'>
+                        ).datasets[dataset.index].backgroundColor
+
+                        chartJS.data.datasets[dataset.index].borderColor = (
+                            backup.data as ChartData<'scatter'>
+                        ).datasets[dataset.index].borderColor
+                    }
+                    chartHoverDataset.value = datasetItem
+                    const allFilteredItems = chartJS.data.datasets
+                        .map((d: ChartDataset, i: number) => ({
+                            ...d,
+                            index: i
+                        }))
+                        .filter(
+                            (dataset: ChartDataset) =>
+                                dataset.label !== datasetItem.label
+                        )
+                    for (const dataset of allFilteredItems) {
+                        chartJS.data.datasets[dataset.index].backgroundColor =
+                            hexToRgbA(dataset.backgroundColor as string, 0.2)
+                    }
+                    chartJS.update()
+                }
+            }
+        }
+
+        const chartOptions = reactive(
+            updateKeys(
+                merge(
+                    { onResize, onHover },
+                    defaultLineChartProps.options,
+                    props.options
+                ),
+                ['color'],
+                replaceColor
+            )
+        )
+
+        watch(
+            () => chart.value?.scales?.x?.width,
+            (val: string) => {
+                if (val) {
+                    chartWidth.value = `${
+                        parseInt(val as unknown as string) -
+                        parseInt(brushProperties.value.thumbSize) / 4
+                    }px`
+                }
+            },
+            { deep: true }
+        )
+
+        const handleBrushUpdate = (value: { min: number; max: number }) => {
+            brush.value.min = value.min
+            brush.value.max = value.max
+
+            chart.value.options.scales.x.min = value.min
+            chart.value.options.scales.x.max = value.max
+
+            xLabels.value = chart.value.data.labels.slice(
+                value.min,
+                value.max + brushProperties.value.step
+            )
+
+            chart.value.update()
+        }
+
+        const xLabels = ref(props.data.labels)
+
+        const onHoverLegend = (
+            item: BarControllerDatasetOptions,
+            index: number
+        ) => {
+            const filteredItems = chart.value.data.datasets
+                .map((d: ChartDataset, i: number) => ({
+                    ...d,
+                    index: i
+                }))
+                .filter(
+                    (dataset: ChartDataset & { index: number }) =>
+                        dataset.index! !== index
+                )
+
+            for (const dataset of filteredItems) {
+                chart.value.data.datasets[dataset.index].backgroundColor =
+                    dataset?.hoverBackgroundColor ||
+                    hexToRgbA(dataset.backgroundColor, 0.2)
+
+                chart.value.data.datasets[dataset.index].borderColor =
+                    dataset?.hoverBorderColor ||
+                    hexToRgbA(dataset.backgroundColor, 0.2)
+            }
+
+            chart.value.update()
+        }
+
+        const onLeaveLegend = (
+            item: BarControllerDatasetOptions,
+            index: number
+        ) => {
+            const filteredItems = chart.value.data.datasets
+                .map((d: ChartDataset, i: number) => ({
+                    ...d,
+                    index: i
+                }))
+                .filter(
+                    (dataset: ChartDataset & { index: number }) =>
+                        dataset.index !== index
+                )
+
+            const backup = getChartBackup()
+
+            for (const dataset of filteredItems) {
+                chart.value.data.datasets[dataset.index].backgroundColor = (
+                    backup.data as ChartData<'scatter'>
+                ).datasets[dataset.index].backgroundColor
+
+                chart.value.data.datasets[dataset.index].borderColor = (
+                    backup.data as ChartData<'scatter'>
+                ).datasets[dataset.index].borderColor
+            }
+            chart.value.update()
+        }
+
+        const labelStyles = computed(() => {
+            const options = merge(
+                {},
+                defaultLineChartProps.options,
+                props.options
+            )
+
+            return {
+                title: options.scales.x.title.text,
+                titleSize: `${options.scales.x.title.font.size}px`,
+                titleColor: options.scales.x.title.color.replace('--', ''),
+                labelColor: options.scales.x.ticks.color.replace('--', ''),
+                fontSize: `${options.scales.x.ticks.font.size}px`
+            }
+        })
+
+        const hideData = (item: BarControllerDatasetOptions, index: number) => {
+            onLeaveLegend(item, index)
+
+            chart.value.data.datasets[index].hidden = !!item.hidden
+
+            legendDatasets.value.splice(index, 1, {
+                ...legendDatasets.value[index],
+                hidden: !!item.hidden
+            })
+
+            chart.value.update()
+        }
+
+        watch(variables, () => {
+            merge(chart.value.data, getChartBackup().data)
+
+            merge(
+                chart.value.options,
+                updateKeys(
+                    merge(
+                        { onResize, onHover },
+                        defaultLineChartProps.options,
+                        props.options
+                    ),
+                    ['color'],
+                    replaceColor
+                )
+            )
+
+            chart.value.options.scales.x.min = brush.value.min
+            chart.value.options.scales.x.max = brush.value.max
+
+            chart.value.update()
+        })
+
+        watch(
+            [props.data, props.options],
+            ([newData = {}, newOptions = {}]) => {
+                chartData.value = replaceDataColors(newData as ChartData)
+
+                xLabels.value = (newData as ChartData)?.labels
+
+                chartOptions.value = updateKeys(
+                    merge(
+                        { onResize, onHover },
+                        defaultLineChartProps.options,
+                        newOptions
+                    ),
+                    ['color'],
+                    replaceColor
+                )
+            },
+            { deep: true }
+        )
+
+        return {
+            variables,
+            chartData,
+            chartOptions,
+            brush,
+            xLabels,
+            scatterChart,
+            handleBrushUpdate,
+            chartWrapperClasses,
+            chartClasses,
+            brushClasses,
+            legendClasses,
+            brushProperties,
+            legendDatasets,
+            legendProperties,
+            hideData,
+            chartWidth,
+            onHoverLegend,
+            onLeaveLegend,
+            onChartLeave,
+            chart,
+            labelStyles,
+            cssVars
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-scatter-chart-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+}
+
+.dl-brush {
+    margin-top: 10px;
+}
+
+.dl-legend {
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+.dl-brush,
+.dl-legend {
+    align-self: flex-end;
+    margin-right: var(--dl-brush-thumb-size);
+}
+</style>

package/src/components/compound/DlCharts/charts/DlScatterChart/index.ts

@@ -0,0 +1,2 @@
+import DlScatterChart from './DlScatterChart.vue'
+export { DlScatterChart }

package/src/components/compound/DlCharts/charts/index.ts

@@ -2,4 +2,5 @@ export * from './DlBarChart'
 export * from './DlColumnChart'
 export * from './DlDoughnutChart'
 export * from './DlLineChart'
+export * from './DlScatterChart'
 export * from './DlConfusionMatrix'

package/src/components/compound/DlDateTime/DlDatePicker/DlDatePicker.vue

@@ -103,6 +103,10 @@ export default defineComponent({
             type: Object as PropType<Partial<DateInterval> | null>,
             default: null
         },
+        singleSelection: {
+            type: Boolean,
+            default: false
+        },
         normalizeCalendars: Boolean,
         disabled: Boolean
     },
@@ -245,7 +249,11 @@ export default defineComponent({
 
             this.dateInterval = { from: date, to: date }
 
-            this.isSelectionMode = true
+            if (this.singleSelection) {
+                this.isSelectionMode = true
+            } else {
+                this.updateModelValue(this.dateInterval)
+            }
         },
 
         handleMouseenter(date: Date) {

package/src/components/compound/DlSearches/DlSmartSearch/DlSmartSearch.vue

@@ -343,7 +343,9 @@ export default defineComponent({
         const handleInputModel = (value: string) => {
             inputModel.value = value
             const json = toJSON(removeBrackets(value))
-            emit('update:modelValue', json)
+            if (!isEqual(json, props.modelValue)) {
+                emit('update:modelValue', json)
+            }
             const stringified = JSON.stringify(json)
             const newQuery = replaceWithAliases(stringified, props.aliases)
             activeQuery.value.query = newQuery
@@ -356,10 +358,23 @@ export default defineComponent({
 
         const debouncedInputModel = debounce(handleInputModel, 300)
 
+        const isValidJSON = (item: string | Object): boolean => {
+            let value = typeof item !== 'string' ? JSON.stringify(item) : item
+            try {
+                value = JSON.parse(value)
+            } catch (e) {
+                return false
+            }
+
+            return typeof value === 'object' && value !== null
+        }
+
         const toJSON = (value: string) => {
-            return parseSmartQuery(
+            const json = parseSmartQuery(
                 replaceWithJsDates(value) ?? inputModel.value
             )
+
+            return isValidJSON(json) ? json : inputModel.value
         }
 
         const setFocused = (value: boolean) => {
@@ -383,7 +398,9 @@ export default defineComponent({
                     return
                 }
                 const stringQuery = stringifySmartQuery(val)
-                debouncedInputModel(stringQuery)
+                if (stringQuery !== inputModel.value.trim()) {
+                    debouncedInputModel(stringQuery)
+                }
             }
         })
 

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -117,7 +117,10 @@
             :offset="[0, 3]"
         >
             <div class="dl-smart-search-input__date-picker-wrapper">
-                <dl-date-picker @change="handleDateSelectionUpdate" />
+                <dl-date-picker
+                    :single-selection="false"
+                    @change="handleDateSelectionUpdate"
+                />
             </div>
         </dl-menu>
     </div>

package/src/components/compound/DlSearches/DlSmartSearch/utils/index.ts

@@ -2,19 +2,10 @@ export * from './highlightSyntax'
 export * from './utils'
 
 import { DateInterval } from '../../../DlDateTime/types'
-
-const startDatePattern = new RegExp(
-    /\(from\s?\d{2}\/\d{2}\/\d{4}\s?\)|\(from\s?dd\/mm\/yyyy\s?\)/,
-    'gi'
-)
-const endDatePattern = new RegExp(
-    /\(to\s?\d{2}\/\d{2}\/\d{4}\s?\)|\(to\s?dd\/mm\/yyyy\s?\)/,
-    'gi'
-)
-const dateIntervalPattern = new RegExp(
-    /\((from\s?\(\d{2}\/\d{2}\/\d{4}\)\s?to\s?\(\d{2}\/\d{2}\/\d{4}\))\)|\((from\s?\(dd\/mm\/yyyy\)\s?to\s?\(dd\/mm\/yyyy\))\)/,
-    'gi'
-)
+import {
+    datePattern,
+    datePatternNoBrackets
+} from '../../../../../hooks/use-suggestions'
 
 export const isEndOfString = (str: string, pattern: RegExp): boolean => {
     const trimmed = str.trim()
@@ -23,40 +14,21 @@ export const isEndOfString = (str: string, pattern: RegExp): boolean => {
     if (!matches || !matches.length) return false
 
     const lastMatch = matches[matches.length - 1]
+
     return trimmed.lastIndexOf(lastMatch) + lastMatch.length === trimmed.length
 }
 
 export const isEndingWithDateIntervalPattern = (str: string) => {
-    return (
-        isEndOfString(str, dateIntervalPattern) ||
-        isEndOfString(str, startDatePattern) ||
-        isEndOfString(str, endDatePattern)
-    )
+    return isEndOfString(str, datePattern)
 }
 
-export const replaceDateInterval = (
-    str: string,
-    dateInterval: DateInterval
-) => {
-    const dateFrom = new Date(dateInterval.from)
-    const dateTo = new Date(dateInterval.to)
-    const values = str.match(/\((.*?)\)/g)
-    let newStr = ''
-    if (!values) return str
-
-    if (values.length > 1) {
-        newStr = `(From (${formatDate(dateFrom)}) To (${formatDate(dateTo)}))`
-        return replaceLastOccurrence(str, newStr, dateIntervalPattern)
-    } else if (values[0].includes('From')) {
-        newStr = `(From ${formatDate(dateFrom)})`
-        return replaceLastOccurrence(str, newStr, startDatePattern)
-    } else if (values[0].includes('To')) {
-        newStr = `(To ${formatDate(dateTo)})`
-        return replaceLastOccurrence(str, newStr, endDatePattern)
-    }
+export const replaceDateInterval = (str: string, date: DateInterval) => {
+    const newStr = `${formatDate(date.from)}`
+    return replaceLastOccurrence(str, newStr, datePatternNoBrackets)
 }
 
 const formatDate = (date: Date): string => {
+    if (!date) return
     return `${addZero(date.getDate())}/${addZero(
         date.getMonth() + 1
     )}/${date.getFullYear()}`

package/src/components/compound/DlSearches/DlSmartSearch/utils/utils.ts

@@ -2,9 +2,7 @@ import { ColorSchema, SyntaxColorSchema, Filters } from '../types'
 import {
     operators,
     Alias,
-    startDatePattern,
-    endDatePattern,
-    dateIntervalPattern
+    datePattern
 } from '../../../../../hooks/use-suggestions'
 
 export function getTabItems(filters: Filters) {
@@ -25,37 +23,22 @@ export function getTabItems(filters: Filters) {
 }
 
 export function replaceWithJsDates(str: string) {
-    const intervals = str.match(dateIntervalPattern)
-    const starts = str.match(startDatePattern)
-    const ends = str.match(endDatePattern)
+    const dates = str.match(datePattern)
 
-    intervals?.forEach((interval) => {
-        str = str.replaceAll(interval, formatToDateObj(interval))
-    })
-    starts?.forEach((start) => {
-        str = str.replaceAll(start, formatToDateObj(start))
-    })
-    ends?.forEach((end) => {
-        str = str.replaceAll(end, formatToDateObj(end))
+    dates?.forEach((date) => {
+        str = str.replaceAll(date, formatToNumericDate(date))
     })
+
     return str
 }
 
-function formatToDateObj(str: string) {
-    const [day, month, year] = str.split(' ')[1].split('/')
-    const date = new Date(parseInt(year), parseInt(month), parseInt(day))
-    if (!isValidDate(date)) return str
-    const [toDay, toMonth, toYear] = str.split(' ')[3]?.split('/') || []
-    const toDate = new Date(
-        parseInt(toYear),
-        parseInt(toMonth),
-        parseInt(toDay)
-    )
-    if (!isValidDate(toDate)) return date.toISOString()
-    return JSON.stringify({
-        from: date.toISOString(),
-        to: toDate.toISOString()
-    })
+function formatToNumericDate(str: string) {
+    const dateInfo = str.split('/')
+    const day = parseInt(dateInfo[0])
+    const month = parseInt(dateInfo[1])
+    const year = parseInt(dateInfo[2])
+    const newDate = new Date(year, month, day)
+    return newDate.getTime().toString()
 }
 
 function isValidDate(d: Date) {

package/src/demos/DlScatterChartDemo.vue

@@ -0,0 +1,161 @@
+<template>
+    <div
+        style="
+            display: flex;
+            width: 1000px;
+            flex-wrap: wrap;
+            flex-direction: row;
+            gap: 0;
+        "
+    >
+        <dl-scatter-chart
+            id="example-one"
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data"
+            :options="options"
+            style="width: 100%"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlScatterChart } from '../components'
+import { orderBy } from 'lodash'
+
+const data = {
+    labels: [
+        {
+            title: '0.1'
+        },
+        {
+            title: '0.2'
+        },
+        {
+            title: '0.3'
+        },
+        {
+            title: '0.4'
+        },
+        {
+            title: '0.5'
+        },
+        {
+            title: '0.6'
+        },
+        {
+            title: '0.7'
+        },
+        {
+            title: '0.8'
+        },
+        {
+            title: '0.9'
+        },
+        {
+            title: '1'
+        }
+    ],
+    datasets: [
+        {
+            label: 'Scatter Dataset',
+            data: [
+                { x: 0.1, y: 0.1 },
+                { x: 0.2, y: 0.1 },
+                { x: 0.3, y: 0.2 },
+                { x: 0.4, y: 0.3 },
+                { x: 0.5, y: 0.35 },
+                { x: 0.6, y: 0.39 },
+                { x: 0.7, y: 0.4 },
+                { x: 0.8, y: 0.8 },
+                { x: 0.9, y: 0.8 }
+            ],
+            backgroundColor: 'rgb(255, 99, 132)',
+            borderColor: 'rgba(255, 99, 132, 1)',
+            pointRadius: 5,
+            showLine: true
+        },
+        {
+            label: 'Dataset 2',
+            data: [
+                { x: 0.2, y: 0.1 },
+                { x: 0.2, y: 0.2 },
+                { x: 0.4, y: 0.2 },
+                { x: 0.4, y: 0.3 },
+                { x: 0.6, y: 0.65 },
+                { x: 0.6, y: 0.85 },
+                { x: 0.8, y: 0.6 },
+                { x: 0.8, y: 0.7 },
+                { x: 0.9, y: 0.8 }
+            ],
+            backgroundColor: 'rgba(45, 162, 50, 1)',
+            borderColor: 'rgba(45, 162, 50, 1)',
+            pointRadius: 5,
+            showLine: true
+        }
+    ]
+}
+
+const brushProps = {
+    min: 0,
+    max: orderBy(data.datasets, (o) => o.data.length)[0].data.length - 1
+}
+
+const options = {
+    scales: {
+        x: {
+            type: 'linear',
+            position: 'bottom',
+            axis: 'Recall',
+            scaleLabel: {
+                display: true,
+                labelString: 'Recall'
+            }
+        },
+        y: {
+            type: 'linear',
+            position: 'left',
+            axis: 'Precision',
+            scaleLabel: {
+                display: true,
+                labelString: 'Precision'
+            }
+        }
+    }
+}
+
+const legendProps = {
+    alignItems: 'center'
+}
+
+export default defineComponent({
+    name: 'DlScatterChartDemo',
+    components: {
+        DlScatterChart
+    },
+    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: {}
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/demos/index.ts

@@ -46,6 +46,7 @@ import DlSwitchDemo from './DlSwitchDemo.vue'
 import DlToastDemo from './DlToastDemo.vue'
 import DlChartDoughnutDemo from './DlChartDoughnutDemo.vue'
 import DlLineChartDemo from './DlLineChartDemo.vue'
+import DlScatterChartDemo from './DlScatterChartDemo.vue'
 import DlSpinner from './DlSpinnerDemo.vue'
 import DlConfusionMatrix from './DlConfusionMatrixDemo.vue'
 import DlToggleButtonDemo from './DlToggleButtonDemo.vue'
@@ -107,6 +108,7 @@ export default {
     DlChartDoughnutDemo,
     DlBarChartDemo,
     DlLineChartDemo,
+    DlScatterChartDemo,
     DlSpinner,
     DlConfusionMatrix,
     DlToggleButtonDemo,

package/src/hooks/use-suggestions.ts

@@ -71,24 +71,50 @@ type Expression = {
 }
 
 const space = ' '
-const dateStartSuggestionString = '(From dd/mm/yyyy)'
-const dateEndSuggestionString = '(To dd/mm/yyyy)'
-const dateIntervalSuggestionString = '(From (dd/mm/yyyy) To (dd/mm/yyyy))'
+const dateSuggestionPattern = '(dd/mm/yyyy)'
 
 let localSuggestions: Suggestion[] = []
 
-export const startDatePattern = new RegExp(
-    /(from\s?\d{2}\/\d{2}\/\d{4}\s?|from\s?dd\/mm\/yyyy\s?)/,
-    'gi'
-)
-export const endDatePattern = new RegExp(
-    /(to\s?\d{2}\/\d{2}\/\d{4}\s?|to\s?dd\/mm\/yyyy\s?)/,
-    'gi'
-)
-export const dateIntervalPattern = new RegExp(
-    /(from\s?\d{2}\/\d{2}\/\d{4}\s?to\s?\d{2}\/\d{2}\/\d{4})|(from\s?dd\/mm\/yyyy\s?to\s?dd\/mm\/yyyy)/,
+export const datePattern = new RegExp(
+    /(\(\d{2}\/\d{2}\/\d{4}\)\s?|\s?\(dd\/mm\/yyyy\)\s?)/,
     'gi'
 )
+export const datePatternNoBrackets =
+    /(\d{2}\/\d{2}\/\d{4}\s?|\s?dd\/mm\/yyyy\s?)/
+
+const mergeWords = (words: string[]) => {
+    const result: string[] = []
+    let merging = false
+    let mergeIndex = -1
+
+    for (let i = 0; i < words.length; ++i) {
+        const currentItem = words[i]
+
+        if (currentItem === 'IN' || currentItem === 'NOT-IN') {
+            merging = true
+            mergeIndex = i + 1
+            result.push(currentItem)
+            continue
+        } else if (
+            Object.values(Logical).includes(currentItem as any) ||
+            Object.values(operators).includes(currentItem as any)
+        ) {
+            merging = false
+        }
+
+        if (merging) {
+            if (!result[mergeIndex]) {
+                result[mergeIndex] = ''
+            }
+            result[mergeIndex] += ' ' + currentItem
+            continue
+        }
+
+        result.push(currentItem)
+    }
+
+    return result
+}
 
 export const useSuggestions = (
     schema: Schema,
@@ -123,7 +149,8 @@ export const useSuggestions = (
         localSuggestions = sortedSuggestions
 
         const words = splitByQuotes(input, space)
-        const expressions = mapWordsToExpressions(words)
+        const mergedWords = mergeWords(words)
+        const expressions = mapWordsToExpressions(mergedWords)
 
         for (const { field, operator, value, keyword } of expressions) {
             let matchedField: Suggestion | null = null
@@ -191,11 +218,7 @@ export const useSuggestions = (
                 dataType === 'date' ||
                 dataType === 'time'
             ) {
-                localSuggestions = [
-                    dateIntervalSuggestionString,
-                    dateStartSuggestionString,
-                    dateEndSuggestionString
-                ]
+                localSuggestions = [dateSuggestionPattern]
 
                 if (!value) continue
 
@@ -356,11 +379,7 @@ const validateBracketValues = (value: string) => {
 }
 
 const isValidDateIntervalPattern = (str: string) => {
-    return (
-        !!str.match(dateIntervalPattern) ||
-        !!str.match(startDatePattern) ||
-        !!str.match(endDatePattern)
-    )
+    return !!str.match(datePatternNoBrackets)
 }
 
 const isValidNumber = (str: string) => {
@@ -509,11 +528,7 @@ const getValueSuggestions = (dataType: string | string[], operator: string) => {
             case 'date':
             case 'time':
             case 'datetime':
-                suggestion.push(
-                    dateIntervalSuggestionString,
-                    dateStartSuggestionString,
-                    dateEndSuggestionString
-                )
+                suggestion.push(dateSuggestionPattern)
             default:
                 // do nothing
                 break