@orbcharts/core 3.0.6 → 4.0.0-pre-alpha.0

package/src/chart/createTreeData.ts

@@ -0,0 +1,344 @@
+import type { RawData, RawDataColumn, Encoding, ModelDataTree, ModelDatumTree, Theme } from '../types'
+import { aggregate } from '../utils/aggregateUtils'
+import { getColorByFrom } from '../utils/colorUtils'
+
+export const createTreeData = (rawData: RawData, encoding: Encoding, theme: Theme): ModelDataTree[] => {
+  // 依據 dataset 欄位將資料分組
+  const datasetMap = new Map<string, RawDataColumn[]>()
+  
+  // 判斷是一維陣列還是二維陣列
+  const is2DArray = Array.isArray(rawData[0])
+  
+  if (is2DArray) {
+    // 二維陣列：每個子陣列代表一個 dataset
+    (rawData as RawDataColumn[][]).forEach((datasetArray, datasetIndex) => {
+      datasetArray.forEach((d) => {
+        const datasetKey = (d as any)[encoding.dataset.from] || `dataset-${datasetIndex}`
+        if (!datasetMap.has(datasetKey)) {
+          datasetMap.set(datasetKey, [])
+        }
+        datasetMap.get(datasetKey)!.push(d)
+      })
+    })
+  } else {
+    // 一維陣列：依據 dataset 欄位分組
+    (rawData as RawDataColumn[]).forEach((d) => {
+      const datasetKey = (d as any)[encoding.dataset.from] || 'default'
+      if (!datasetMap.has(datasetKey)) {
+        datasetMap.set(datasetKey, [])
+      }
+      datasetMap.get(datasetKey)!.push(d)
+    })
+  }
+
+  // 建立排序後的 dataset 名稱陣列
+  let sortedDatasetNames: string[] = Array.from(datasetMap.keys())
+  if (Array.isArray(encoding.dataset.sort)) {
+    sortedDatasetNames = encoding.dataset.sort.filter(name => datasetMap.has(name))
+      .concat(sortedDatasetNames.filter(name => !encoding.dataset.sort.includes(name)))
+  } else if (encoding.dataset.sort === 'original') {
+    const datasetOrder: string[] = []
+    if (is2DArray) {
+      (rawData as RawDataColumn[][]).forEach((datasetArray, datasetIndex) => {
+        datasetArray.forEach((d) => {
+          const datasetKey = (d as any)[encoding.dataset.from] || `dataset-${datasetIndex}`
+          if (!datasetOrder.includes(datasetKey)) {
+            datasetOrder.push(datasetKey)
+          }
+        })
+      })
+    } else {
+      (rawData as RawDataColumn[]).forEach((d) => {
+        const datasetKey = (d as any)[encoding.dataset.from] || 'default'
+        if (!datasetOrder.includes(datasetKey)) {
+          datasetOrder.push(datasetKey)
+        }
+      })
+    }
+    sortedDatasetNames = datasetOrder
+  } else if (encoding.dataset.sort === 'alphabetical') {
+    sortedDatasetNames.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
+  }
+
+  // 對每個 dataset 進行 tree 資料的處理
+  const result: ModelDataTree[] = []
+  sortedDatasetNames.forEach((datasetName, datasetIndex) => {
+    const data = datasetMap.get(datasetName)!
+    
+    // 建立 dataset 內排序後的 series 名稱陣列（僅作為屬性與色彩來源，不做拆樹）
+    const seriesMap = new Map<string, RawDataColumn[]>()
+    data.forEach((d) => {
+      const seriesKey = (d as any)[encoding.series.from] || 'default'
+      if (!seriesMap.has(seriesKey)) {
+        seriesMap.set(seriesKey, [])
+      }
+      seriesMap.get(seriesKey)!.push(d)
+    })
+    let sortedSeriesNames: string[] = Array.from(seriesMap.keys())
+    if (Array.isArray(encoding.series.sort)) {
+      sortedSeriesNames = encoding.series.sort.filter(name => seriesMap.has(name))
+        .concat(sortedSeriesNames.filter(name => !encoding.series.sort.includes(name)))
+    } else if (encoding.series.sort === 'original') {
+      const seriesOrder: string[] = []
+      data.forEach((d) => {
+        const seriesKey = (d as any)[encoding.series.from] || 'default'
+        if (!seriesOrder.includes(seriesKey)) {
+          seriesOrder.push(seriesKey)
+        }
+      })
+      sortedSeriesNames = seriesOrder
+    } else if (encoding.series.sort === 'alphabetical') {
+      sortedSeriesNames.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
+    }
+
+    // 建立 dataset 內排序後的 category 名稱陣列（僅作為屬性與色彩來源，不做拆樹）
+    const categoryMap = new Map<string, RawDataColumn[]>()
+    data.forEach((d) => {
+      const categoryKey = (d as any)[encoding.category.from] || 'default'
+      if (!categoryMap.has(categoryKey)) {
+        categoryMap.set(categoryKey, [])
+      }
+      categoryMap.get(categoryKey)!.push(d)
+    })
+    let sortedCategoryNames: string[] = Array.from(categoryMap.keys())
+    if (Array.isArray(encoding.category.sort)) {
+      sortedCategoryNames = encoding.category.sort.filter(name => categoryMap.has(name))
+        .concat(sortedCategoryNames.filter(name => !encoding.category.sort.includes(name)))
+    } else if (encoding.category.sort === 'original') {
+      const categoryOrder: string[] = []
+      data.forEach((d) => {
+        const categoryKey = (d as any)[encoding.category.from] || 'default'
+        if (!categoryOrder.includes(categoryKey)) {
+          categoryOrder.push(categoryKey)
+        }
+      })
+      sortedCategoryNames = categoryOrder
+    } else if (encoding.category.sort === 'alphabetical') {
+      sortedCategoryNames.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
+    }
+
+    // 收集所有節點並依據 id 進行聚合（同一 dataset 內）
+    const nodeMap = new Map<string, RawDataColumn[]>()
+    data.forEach((d) => {
+      const nodeId = d.id || 'unknown'
+      if (!nodeMap.has(nodeId)) {
+        nodeMap.set(nodeId, [])
+      }
+      nodeMap.get(nodeId)!.push(d)
+    })
+
+    let globalNodeIndex = 0
+    const defaultSeriesName = sortedSeriesNames[0] || 'default'
+    const defaultSeriesIndex = sortedSeriesNames.indexOf(defaultSeriesName)
+
+    // 為每個 id 建立 ModelDatumTree，並進行聚合
+    const treeNodeMap = new Map<string, ModelDatumTree>()
+    
+    Array.from(nodeMap.entries()).forEach(([nodeId, nodeItems]) => {
+      const firstItem = nodeItems[0]
+      const seriesName = (firstItem as any)[encoding.series.from] || 'default'
+      const seriesIndex = sortedSeriesNames.indexOf(seriesName)
+      const categoryName = (firstItem as any)[encoding.category.from] || 'default'
+      const categoryIndex = sortedCategoryNames.indexOf(categoryName)
+        
+      if (encoding.value.aggregate === 'none') {
+        // 不聚合，使用第一筆資料
+        const value = (firstItem as any)[encoding.value.from]
+        const treeNode: ModelDatumTree = {
+          id: nodeId,
+          index: globalNodeIndex++,
+          modelType: 'tree',
+          name: firstItem.name || nodeId,
+          data: firstItem.data,
+          value: typeof value === 'number' ? value : null,
+          color: getColorByFrom(encoding.color.from, {
+            index: globalNodeIndex - 1,
+            seriesIndex,
+            categoryIndex,
+            datasetIndex
+          }, theme),
+          parent: firstItem.parent || null,
+          parentIndex: null, // 稍後設定
+          depth: 0, // 稍後計算
+          seq: 0, // 稍後計算
+          children: [],
+          series: seriesName,
+          seriesIndex,
+          category: categoryName,
+          categoryIndex,
+        }
+        treeNodeMap.set(nodeId, treeNode)
+      } else {
+        // 進行聚合，將相同 dataset, id 的資料合併
+        const values: (number | null)[] = nodeItems.map(d => {
+          if (encoding.value.aggregate === 'count') {
+            return 1 // count 聚合時每筆資料計為 1
+          }
+          const value = (d as any)[encoding.value.from]
+          return typeof value === 'number' ? value : null
+        })
+
+        const aggregatedValue = aggregate(values, encoding.value.aggregate)
+
+        const treeNode: ModelDatumTree = {
+          id: nodeId,
+          index: globalNodeIndex++,
+          modelType: 'tree',
+          name: firstItem.name || nodeId,
+          data: firstItem.data,
+          value: aggregatedValue,
+          color: getColorByFrom(encoding.color.from, {
+            index: globalNodeIndex - 1,
+            seriesIndex,
+            categoryIndex,
+            datasetIndex
+          }, theme),
+          parent: firstItem.parent || null,
+          parentIndex: null, // 稍後設定
+          depth: 0, // 稍後計算
+          seq: 0, // 稍後計算
+          children: [],
+          series: seriesName,
+          seriesIndex,
+          category: categoryName,
+          categoryIndex,
+        }
+        treeNodeMap.set(nodeId, treeNode)
+      }
+    })
+
+    // 建立樹狀結構
+    const allNodes = Array.from(treeNodeMap.values())
+    const nodeIndexMap = new Map<string, number>()
+    allNodes.forEach(node => {
+      nodeIndexMap.set(node.id, node.index)
+    })
+
+    // 設定 parentIndex
+    allNodes.forEach(node => {
+      if (node.parent && nodeIndexMap.has(node.parent)) {
+        node.parentIndex = nodeIndexMap.get(node.parent)!
+      }
+    })
+
+    // 建立父子關係
+    const rootNodes: ModelDatumTree[] = []
+    const childrenMap = new Map<string, ModelDatumTree[]>()
+    
+    allNodes.forEach(node => {
+      if (node.parent === null) {
+        rootNodes.push(node)
+      } else {
+        if (!childrenMap.has(node.parent)) {
+          childrenMap.set(node.parent, [])
+        }
+        childrenMap.get(node.parent)!.push(node)
+      }
+    })
+
+    // 遞迴建立完整樹狀結構並計算 depth 和 seq
+    function buildTree(node: ModelDatumTree, depth: number): ModelDatumTree {
+      node.depth = depth
+      const children = childrenMap.get(node.id) || []
+      
+      // 根據 value.sort 對子節點進行排序
+      if (encoding.value.sort === 'asc') {
+        children.sort((a, b) => {
+          if (a.value === null && b.value === null) return 0
+          if (a.value === null) return 1
+          if (b.value === null) return -1
+          return a.value - b.value
+        })
+      } else if (encoding.value.sort === 'desc') {
+        children.sort((a, b) => {
+          if (a.value === null && b.value === null) return 0
+          if (a.value === null) return 1
+          if (b.value === null) return -1
+          return b.value - a.value
+        })
+      }
+      // 'original' 不需要額外排序，保持原始順序
+      
+      // 設定 seq
+      children.forEach((child, index) => {
+        child.seq = index
+      })
+      
+      // 遞迴處理子節點
+      node.children = children.map(child => buildTree(child, depth + 1))
+      
+      return node
+    }
+
+    // 建立完整的樹
+    const trees = rootNodes.map(root => buildTree(root, 0))
+    
+    // 如果有多個根節點，建立一個虛擬根節點
+    if (trees.length === 0) {
+      // 沒有資料，建立空樹
+      result.push({
+        id: `empty-${datasetName}`,
+        index: globalNodeIndex++,
+        modelType: 'tree',
+        name: 'Empty Tree',
+        data: {},
+        value: null,
+        color: getColorByFrom(encoding.color.from, {
+          index: globalNodeIndex - 1,
+          seriesIndex: defaultSeriesIndex < 0 ? 0 : defaultSeriesIndex,
+          categoryIndex: 0,
+          datasetIndex
+        }, theme),
+        parent: null,
+        parentIndex: null,
+        depth: 0,
+        seq: 0,
+        children: [],
+        series: defaultSeriesName,
+        seriesIndex: defaultSeriesIndex < 0 ? 0 : defaultSeriesIndex,
+        category: 'default',
+        categoryIndex: 0,
+      })
+    } else if (trees.length === 1) {
+      // 單一根節點
+      result.push(trees[0])
+    } else {
+      const virtualRoot: ModelDatumTree = {
+        id: `virtual-root-${datasetName}`,
+        index: globalNodeIndex++,
+        modelType: 'tree',
+        name: `Virtual Root (${datasetName})`,
+        data: {},
+        value: null,
+        color: getColorByFrom(encoding.color.from, {
+          index: globalNodeIndex - 1,
+          seriesIndex: defaultSeriesIndex < 0 ? 0 : defaultSeriesIndex,
+          categoryIndex: 0,
+          datasetIndex
+        }, theme),
+        parent: null,
+        parentIndex: null,
+        depth: 0,
+        seq: 0,
+        children: trees.map((tree, index) => {
+          const updateDepth = (node: ModelDatumTree, newDepth: number): ModelDatumTree => {
+            node.depth = newDepth
+            if (newDepth === 1) {
+              node.seq = index
+            }
+            node.children = node.children.map(child => updateDepth(child, newDepth + 1))
+            return node
+          }
+          return updateDepth(tree, 1)
+        }),
+        series: defaultSeriesName,
+        seriesIndex: defaultSeriesIndex < 0 ? 0 : defaultSeriesIndex,
+        category: 'default',
+        categoryIndex: 0,
+      }
+      result.push(virtualRoot)
+    }
+  })
+
+  return result
+}

package/src/chart/defaults.ts

@@ -0,0 +1,100 @@
+import type { Encoding, Theme, SizeConfig } from '../types'
+
+// export const DEFAULT_CHART_WIDTH = 800
+
+// export const DEFAULT_CHART_HEIGHT = 500
+
+export const DEFAULT_SIZE_CONFIG: SizeConfig = {
+  width: 'auto',
+  height: 'auto',
+  resizeDebounce: 50
+}
+
+export const DEFAULT_DATA_ENCODING: Encoding = {
+  dataset: {
+    from: 'dataset',
+    sort: 'original'
+  },
+  series: {
+    from: 'series',
+    sort: 'original'
+  },
+  category: {
+    from: 'category',
+    sort: 'original'
+  },
+  value: {
+    from: 'value',
+    sort: 'original',
+    aggregate: 'none'
+  },
+  multivariate: [
+    { from: 'x', name: 'x' },
+    { from: 'y', name: 'y' },
+    { from: 'z', name: 'z' },
+  ],
+  color: {
+    from: 'series',
+  }
+}
+
+export const DEFAULT_THEME: Theme = {
+  // colorScheme: 'light',
+  // colors: {
+  //   light: {
+  //     data: ['#5B8FF9', '#61DDAA', '#65789B', '#F6BD16', '#7262FD', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4'],
+  //     primary: '#000000',
+  //     secondary: '#595959',
+  //     dataContrast: ['#FF4D4F', '#FAAD14', '#52C41A', '#1890FF', '#722ED1', '#EB2F96', '#13C2C2', '#FA541C', '#2F54EB', '#A0D911'],
+  //     background: '#FFFFFF'
+  //   },
+  //   dark: {
+  //     data: ['#5B8FF9', '#61DDAA', '#65789B', '#F6BD16', '#7262FD', '#78D3F8', '#9661BC', '#F6903D', '#008685', '#F08BB4'],
+  //     primary: '#FFFFFF',
+  //     secondary: '#BFBFBF',
+  //     dataContrast: ['#FF4D4F', '#FAAD14', '#52C41A', '#1890FF', '#722ED1', '#EB2F96', '#13C2C2', '#FA541C', '#2F54EB', '#A0D911'],
+  //     background: '#1F1F1F'
+  //   }
+  // },
+  // fontSize: '12px'
+  colorScheme: 'light',
+  colors: {
+    light: {
+      data: [
+        "#0088FF",
+        "#FF3232",
+        "#38BEA8",
+        "#6F3BD5",
+        "#314285",
+        "#42C724",
+        "#D52580",
+        "#F4721B",
+        "#D117EA",
+        "#7E7D7D"
+      ],
+      primary: '#000000',
+      secondary: '#e0e0e0',
+      dataContrast: ['#ffffff', '#000000'],
+      background: '#FFFFFF'
+    },
+    dark: {
+      data: [
+        "#4BABFF",
+        "#FF6C6C",
+        "#7DD3C4",
+        "#8E6BC9",
+        "#5366AC",
+        "#86DC72",
+        "#FF72BB",
+        "#F9B052",
+        "#EF76FF",
+        "#C4C4C4"
+      ],
+      primary: '#FFFFFF',
+      secondary: '#e0e0e0',
+      dataContrast: ['#ffffff', '#000000'],
+      background: '#000000'
+    }
+  },
+  fontSize: '0.875rem'
+}

package/src/defineCanvasLayer.ts

@@ -0,0 +1,24 @@
+import type { ChartContext, DefineLayerConfig, LayerEntity, ExtendableContext, LayerEnableProps } from "./types"
+import { createLayer } from "./layer/createLayer"
+
+export const defineCanvasLayer = <
+  ExtendContext extends ExtendableContext,
+  PluginParams extends Record<string, any>,
+  LayerParams extends Record<string, any>,
+>(config: DefineLayerConfig<'canvas', ExtendContext, PluginParams, LayerParams>) => {
+  return class Layer implements LayerEntity<ExtendContext, PluginParams, LayerParams> {
+    _name: string
+    _defaultParams: LayerParams
+    _layerIndex: number
+    _initShow: boolean
+    _enable: (enableProps: LayerEnableProps<'canvas', ExtendContext, PluginParams, LayerParams>) => void
+    _disable: () => void
+    _updateParams: (params: Partial<LayerParams>) => void
+    _forceReplaceParams: (params: LayerParams) => void
+    _getParams: () => Readonly<LayerParams>
+    _destroy: () => void
+    constructor () {
+      return createLayer<ExtendContext, PluginParams, LayerParams>('canvas', config)
+    }
+  }
+}

package/src/defineCanvasPlugin.ts

@@ -0,0 +1,39 @@
+import type { DeepPartial, DefinePluginConfig, PluginEntity, ChartContext, ExtendableContext } from './types'
+import { createPlugin } from './plugin/createPlugin'
+
+export const defineCanvasPlugin = <
+  ExtendContext extends ExtendableContext,
+  PluginParams extends Record<string, any>,
+  AllLayerParams extends Record<string, any>,
+>(config: DefinePluginConfig<ExtendContext, PluginParams, AllLayerParams>) => {
+  return class Plugin implements PluginEntity<'canvas', PluginParams, AllLayerParams> {
+    _name: string
+    _elementType: 'canvas'
+    _getId: () => string
+    _setId: (id: string) => void
+    _injectContext: (context: ChartContext<{}>) => void
+    show: (names: (keyof AllLayerParams) | (keyof AllLayerParams)[]) => void
+    showOnly: (names: (keyof AllLayerParams) | (keyof AllLayerParams)[]) => void
+    showAll: () => void
+    hide: (names: (keyof AllLayerParams) | (keyof AllLayerParams)[]) => void
+    hideAll: () => void
+    toggle: (names: (keyof AllLayerParams) | (keyof AllLayerParams)[]) => void
+    // setLayers: (partial: DeepPartial<PluginParams>) => void
+    getShownLayerNames: () => (keyof AllLayerParams)[]
+    updateParams: (patch: DeepPartial<PluginParams | AllLayerParams>) => void
+    forceReplaceParams: (full: PluginParams | AllLayerParams) => void
+    getParams: () => Readonly<PluginParams | AllLayerParams>
+    // layer: <LayerName extends keyof PluginParams>(name: LayerName) => {
+    //   // set: (partial: DeepPartial<PluginParams[LayerName]>) => void
+    //   update: (patch: DeepPartial<PluginParams[LayerName]>) => void
+    //   replace: (full: PluginParams[LayerName]) => void
+    //   show: () => void
+    //   hide: () => void
+    //   toggle: () => void
+    // }
+    destroy: () => void
+    constructor (params?: DeepPartial<PluginParams | AllLayerParams>) {
+      return createPlugin('canvas', config, params)
+    }
+  }
+}

package/src/defineSVGLayer.ts

@@ -0,0 +1,24 @@
+import type { ChartContext, DefineLayerConfig, LayerEntity, ExtendableContext, LayerEnableProps } from "./types"
+import { createLayer } from "./layer/createLayer"
+
+export const defineSVGLayer = <
+  ExtendContext extends ExtendableContext,
+  PluginParams extends Record<string, any>,
+  LayerParams extends Record<string, any>,
+>(config: DefineLayerConfig<'svg', ExtendContext, PluginParams, LayerParams>) => {
+  return class Layer implements LayerEntity<ExtendContext, PluginParams, LayerParams> {
+    _name: string
+    _defaultParams: LayerParams
+    _layerIndex: number
+    _initShow: boolean
+    _enable: (enableProps: LayerEnableProps<'svg', ExtendContext, PluginParams, LayerParams>) => void
+    _disable: () => void
+    _updateParams: (params: Partial<LayerParams>) => void
+    _forceReplaceParams: (params: LayerParams) => void
+    _getParams: () => Readonly<LayerParams>
+    _destroy: () => void
+    constructor () {
+      return createLayer<ExtendContext, PluginParams, LayerParams>('svg', config)
+    }
+  }
+}

package/src/defineSVGPlugin.ts

@@ -0,0 +1,39 @@
+import type { DeepPartial, DefinePluginConfig, PluginEntity, ChartContext, ExtendableContext } from './types'
+import { createPlugin } from './plugin/createPlugin'
+
+export const defineSVGPlugin = <
+  ExtendContext extends ExtendableContext,
+  PluginParams extends Record<string, any>,
+  AllLayerParams extends Record<string, any>,
+>(config: DefinePluginConfig<ExtendContext, PluginParams, AllLayerParams>) => {
+  return class Plugin implements PluginEntity<'svg', PluginParams, AllLayerParams> {
+    _name: string
+    _elementType: 'svg'
+    _getId: () => string
+    _setId: (id: string) => void
+    _injectContext: (context: ChartContext<{}>) => void
+    show: (names: (keyof AllLayerParams) | (keyof AllLayerParams)[]) => void
+    showOnly: (names: (keyof AllLayerParams) | (keyof AllLayerParams)[]) => void
+    showAll: () => void
+    hide: (names: (keyof AllLayerParams) | (keyof AllLayerParams)[]) => void
+    hideAll: () => void
+    toggle: (names: (keyof AllLayerParams) | (keyof AllLayerParams)[]) => void
+    // setLayers: (partial: DeepPartial<PluginParams>) => void
+    getShownLayerNames: () => (keyof AllLayerParams)[]
+    updateParams: (patch: DeepPartial<PluginParams | AllLayerParams>) => void
+    forceReplaceParams: (full: PluginParams | AllLayerParams) => void
+    getParams: () => Readonly<PluginParams | AllLayerParams>
+    // layer: <LayerName extends keyof PluginParams>(name: LayerName) => {
+    //   // set: (partial: DeepPartial<PluginParams[LayerName]>) => void
+    //   update: (patch: DeepPartial<PluginParams[LayerName]>) => void
+    //   replace: (full: PluginParams[LayerName]) => void
+    //   show: () => void
+    //   hide: () => void
+    //   toggle: () => void
+    // }
+    destroy: () => void
+    constructor (params?: DeepPartial<PluginParams | AllLayerParams>) {
+      return createPlugin('svg', config, params)
+    }
+  }
+}

package/src/index.ts

@@ -1,20 +1,8 @@
-
-export { SeriesChart } from './SeriesChart'
-export { GridChart } from './GridChart'
-export { MultiGridChart } from './MultiGridChart'
-export { MultiValueChart } from './MultiValueChart'
-export { RelationshipChart } from './RelationshipChart'
-export { TreeChart } from './TreeChart'
-
-export { defineSeriesPlugin } from './defineSeriesPlugin'
-export { defineGridPlugin } from './defineGridPlugin'
-export { defineMultiGridPlugin } from './defineMultiGridPlugin'
-export { defineMultiValuePlugin } from './defineMultiValuePlugin'
-export { defineNoneDataPlugin } from './defineNoneDataPlugin'
-export { defineRelationshipPlugin } from './defineRelationshipPlugin'
-export { defineTreePlugin } from './defineTreePlugin'
-
-export * from './utils'
-export * from './defaults'
-
-
+
+export { OrbCharts } from './OrbCharts'
+export { defineSVGPlugin } from './defineSVGPlugin'
+export { defineSVGLayer } from './defineSVGLayer'
+export { defineCanvasPlugin } from './defineCanvasPlugin'
+export { defineCanvasLayer } from './defineCanvasLayer'
+export * from './types'
+export * from './utils'