feat(#1300722): [Source Field] Manage Geopoint Attribute - skateboard

Author: matthias-goupil

front/example-app/package.json

@@ -10,6 +10,7 @@
     "@mui/material": "5.10.6",
     "@mui/x-data-grid": "5.17.4",
     "classnames": "2.3.2",
+    "date-fns": "3.6.0",
     "lodash.debounce": "4.0.8",
     "react": "18.x",
     "react-dom": "18.x",

front/example-app/src/components/Facets/Facet.styled.ts renamed to front/example-app/src/components/Facets/Facet.styled.tsx

@@ -101,6 +101,24 @@ function Facet(props: IProps): JSX.Element {
             onChange={onChange}
           />
         )
+      case AggregationType.HISTOGRAM:
+        return (
+          <FacetLoadMore
+            filter={filter}
+            id={id}
+            loadMore={loadMore}
+            moreOptions={moreOptions}
+            renderOption={(option): JSX.Element => (
+              <FacetChoice
+                key={String(option.value)}
+                activeOptions={activeOptions}
+                filter={filter}
+                onChange={onChange}
+                option={option}
+              />
+            )}
+          />
+        )
 
       default:
         return (

front/example-app/src/components/Facets/Facet.tsx

@@ -47,8 +47,16 @@ function Facets(props: IProps): JSX.Element {
           const filterIndex = prevState.findIndex(
             (activeFilter) => activeFilter.filter.field === filter.field
           )
+
           if (filterIndex !== -1) {
-            clone.splice(filterIndex, 1, { filter, value })
+            // For the following type, if the value is the same from the previous, we remove the filter from the array
+            if (
+              prevState[filterIndex].value === value
+            ) {
+              clone.splice(filterIndex, 1)
+            } else {
+              clone.splice(filterIndex, 1, { filter, value })
+            }
             return clone
           }
         }

front/example-app/src/components/Facets/Facets.tsx

@@ -36,7 +36,7 @@ export function useProducts(
   const [sort, sortOrder, sortOptions, setSort, setSortOrder] = useProductSort()
   const [activeFilters, setActiveFilters] = useState<IActiveFilters>([])
   const [moreOptions, setMoreOptions] = useState<IFilterMoreOptions>(new Map())
-  const queryFilters: IProductFieldFilterInput = useMemo(
+  const queryFilters: IProductFieldFilterInput[] = useMemo(
     () => getProductFilters(activeFilters),
     [activeFilters]
   )
@@ -111,15 +111,18 @@ export function useProducts(
         aggregation: filter.field,
         localizedCatalog: String(localizedCatalogId),
       }
+      const categoryIdFilter = queryFilters.find(
+        (value) => Object.keys(value)[0] === 'category__id'
+      )
       if (search) {
         variables.search = search
       }
       if (currentCategoryId) {
         variables.currentCategoryId = currentCategoryId
       }
-      if (queryFilters.category__id) {
+      if (categoryIdFilter) {
         variables.currentCategoryId = (
-          queryFilters.category__id as ICategoryTypeDefaultFilterInputType
+          categoryIdFilter.category_id as ICategoryTypeDefaultFilterInputType
         ).eq
       }
       graphqlApi<IGraphqlViewMoreProductFacetOptions>(

front/example-app/src/hooks/useProducts.ts

@@ -8,11 +8,30 @@ import {
 } from '@elastic-suite/gally-admin-shared'
 
 import { IActiveFilters } from '../types'
+import { add, format, parse } from 'date-fns'
 
+type DurationKey = 'Y' | 'M' | 'W' | 'D' | 'H' | 'm' | 'S'
+
+const durationFormat: Record<DurationKey, string> = {
+  Y: 'years',
+  M: 'months',
+  W: 'weeks',
+  D: 'days',
+  H: 'hours',
+  m: 'minutes',
+  S: 'seconds',
+}
+
+/* eslint-disable no-underscore-dangle */
 export function getProductFilters(
   activeFilters: IActiveFilters
-): IProductFieldFilterInput {
-  return activeFilters.reduce<IProductFieldFilterInput>((acc, activeFilter) => {
+): IProductFieldFilterInput[] {
+  const data: IProductFieldFilterInput[] = []
+  activeFilters.forEach((activeFilter) => {
+    const precAcc = data.find(
+      (value) => Object.keys(value)[0] === activeFilter.filter.field
+    )
+    const acc: IProductFieldFilterInput = precAcc || {}
     if (activeFilter.filter.type === AggregationType.CATEGORY) {
       acc[activeFilter.filter.field as keyof IProductFieldFilterInput] = {
         eq: activeFilter.value,
@@ -36,7 +55,67 @@ export function getProductFilters(
           activeFilter.filter.field as keyof IProductFieldFilterInput
         ] as ISelectTypeDefaultFilterInputType
       ).in.push(activeFilter.value)
+    } else if (activeFilter.filter.type === AggregationType.HISTOGRAM_DATE) {
+      if (!acc.boolFilter?._should) {
+        acc.boolFilter = { _should: [] }
+      }
+      const field = activeFilter.filter.field as keyof IProductFieldFilterInput
+      const date = parse(
+        activeFilter.value,
+        activeFilter.filter.date_format,
+        new Date()
+      )
+      // TODO: use default_date_range_interval in graphql endpoint
+      const incrementString = activeFilter.filter.default_date_range_interval || '1Y'
+      const incrementNumber = Number(
+        incrementString.substring(0, incrementString.length - 1)
+      )
+      const incrementType = incrementString.substring(
+        incrementString.length - 1
+      ) as DurationKey
+
+      const gt = format(date, activeFilter.filter.date_format)
+      const lt = format(
+        add(date, {
+          [durationFormat[incrementType]]: incrementNumber,
+        }),
+        activeFilter.filter.date_format
+      )
+
+      acc.boolFilter._should.push({
+        [field]: {
+          gt,
+          lt,
+        },
+      })
+    } else if (activeFilter.filter.type === AggregationType.HISTOGRAM) {
+      if (!acc.boolFilter?._should) {
+        acc.boolFilter = { _should: [] }
+      }
+      const field = activeFilter.filter.field as keyof IProductFieldFilterInput
+      const arrayValue = activeFilter.value.split('-')
+      const [firstValue, secondValue] = arrayValue
+
+      if (arrayValue.length > 1) {
+        const isFirstValueIsAsterisk = firstValue === '*'
+        const isSecondValueIsAsterisk = secondValue === '*'
+        let data: Record<string, number> = {}
+
+        if (isFirstValueIsAsterisk && !isSecondValueIsAsterisk) {
+          data = { lt: Number(secondValue) }
+        } else if (!isFirstValueIsAsterisk && !isSecondValueIsAsterisk) {
+          data = { gte: Number(firstValue), lte: Number(secondValue) }
+        } else {
+          data = { gt: Number(firstValue) }
+        }
+
+        acc.boolFilter._should.push({
+          [field]: data,
+        })
+      }
     }
-    return acc
-  }, {})
-}
+    if (!precAcc) data.push(acc)
+  })
+
+  return data
+}