@orbcharts/plugins-basic 3.0.0-alpha.70 → 3.0.0-alpha.72

package/src/grid/plugins/ScalingArea.ts

@@ -9,27 +9,38 @@ import {
   takeUntil,
   debounceTime,
   Subject } from 'rxjs'
-import type { DataFormatterGrid } from '@orbcharts/core'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import type { DataFormatterGrid } from '../../../lib/core-types'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin, createAxisLinearScale } from '../../../lib/core'
 import { DEFAULT_SCALING_AREA_PARAMS } from '../defaults'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-import { createAxisPointScale, createAxisLinearScale } from '@orbcharts/core'
+import { LAYER_INDEX_OF_ROOT } from '../../const'
 
 const pluginName = 'ScalingArea'
 const rectClassName = getClassName(pluginName, 'rect')
 
-export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PARAMS)(({ selection, rootSelection, name, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_SCALING_AREA_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_SCALING_AREA_PARAMS,
+  layerIndex: LAYER_INDEX_OF_ROOT,
+  validator: (params, { validateColumns }) => {
+    return {
+      status: 'success',
+      columnName: '',
+      expectToBe: ''
+    }
+  }
+}
+
+export const ScalingArea = defineGridPlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
 
   const destroy$ = new Subject()
 
-  const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
-    .insert('rect', 'g')
-    .classed(rectClassName, true)
-    .attr('opacity', 0)
-    // .attr('pointer-events', 'none')
-  //   .attr('clip-path', 'url(#bpcharts__clipPath-box)')
-  // const dataAreaSelection: d3.Selection<SVGGElement, any, any, any> = axisSelection.append('g')
+  // const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
+  //   .append('rect')
+  //   .classed(rectClassName, true)
+  //   .attr('opacity', 0)
 
   // 紀錄zoom最後一次的transform
   let lastTransform = {
@@ -37,18 +48,19 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
     x: 0,
     y: 0
   }
-
-  observer.layout$.pipe(
-    takeUntil(destroy$),
-  ).subscribe(d => {
-    rootRectSelection
-      .attr('width', d.width)
-      .attr('height', d.height)
-      .attr('x', d.left)
-      .attr('y', d.top)
-  })
-
-  const groupMaxIndex$ = observer.computedData$.pipe(
+  // let lastDomain: [number, number] = [0, 0]
+
+  // observer.layout$.pipe(
+  //   takeUntil(destroy$),
+  // ).subscribe(d => {
+  //   rootRectSelection
+  //     .attr('width', d.width)
+  //     .attr('height', d.height)
+  //     .attr('x', d.left)
+  //     .attr('y', d.top)
+  // })
+
+  const groupMax$ = observer.computedData$.pipe(
     map(d => d[0] ? d[0].length - 1 : 0),
     distinctUntilChanged()
   )
@@ -63,45 +75,56 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
   //     store.fullDataFormatter$.next(fullDataFormatter)
   //   })
 
-  combineLatest({
-    initGroupAxis: observer.fullDataFormatter$.pipe(
-      map(d => d.grid.groupAxis),
-      // 只用第一次資料來計算scale才不會造成每次變動都受到影響
-      first()
-    ),
-    // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
+  const initGroupAxis$ = observer.fullDataFormatter$.pipe(
+    map(d => d.grid.groupAxis),
+    // 只用第一次資料來計算scale才不會造成每次變動都受到影響
+    first()
+  )
+
+
+  const groupScale$ = combineLatest({
+    initGroupAxis: initGroupAxis$,
     fullDataFormatter: observer.fullDataFormatter$,
-    groupMaxIndex: groupMaxIndex$,
+    groupMax: groupMax$,
     layout: observer.layout$,
     axisSize: observer.gridAxesSize$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+    map(data => {
+      // const groupMin = 0
+      const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] - data.initGroupAxis.scalePadding
+      const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'max'
+        ? data.groupMax + data.initGroupAxis.scalePadding
+        : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
+
+      const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
+        maxValue: data.groupMax,
+        minValue: 0,
+        axisWidth: data.axisSize.width,
+        scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
+        scaleRange: [0, 1]
+      })
+
+      return groupScale
+    })
+  )
+
+  combineLatest({
+    groupScale: groupScale$,
+    // initGroupAxis: initGroupAxis$,
+    // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
+    fullDataFormatter: observer.fullDataFormatter$,
+    groupMax: groupMax$,
+    // layout: observer.layout$,
+    // axisSize: observer.gridAxesSize$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
   ).subscribe(data => {
     const groupMin = 0
-    const groupMax = data.groupMaxIndex
-    // const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] === 'min'
-    //   ? groupMin - data.initGroupAxis.scalePadding
-    //   : data.initGroupAxis.scaleDomain[0] as number - data.initGroupAxis.scalePadding
-    const groupScaleDomainMin = data.initGroupAxis.scaleDomain[0] - data.initGroupAxis.scalePadding
-    const groupScaleDomainMax = data.initGroupAxis.scaleDomain[1] === 'max'
-      ? groupMax + data.initGroupAxis.scalePadding
-      : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
-
-    // const scaleRange: [number, number] = data.fullDataFormatter.grid.valueAxis.position === 'left' || data.fullDataFormatter.grid.valueAxis.position === 'top'
-    //   ? [0, 1]
-    //   : [1, 0]
-
-    const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-      maxValue: data.groupMaxIndex,
-      minValue: 0,
-      axisWidth: data.axisSize.width,
-      scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
-      // scaleDomain: [groupMin, groupMax],
-      scaleRange: [0, 1]
-    })
 
-    const shadowScale = groupScale.copy()
+    const shadowScale = data.groupScale.copy()
 
     const zoom = d3.zoom()
       // .scaleExtent([1, data.groupMaxIndex])
@@ -110,11 +133,29 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
         // debugger
         // console.log('event', event)
         const t = event.transform;
-        // console.log('t', t)
+
+        // if (event.sourceEvent.type === 'mousemove') {
+        //   // 當進行平移時，反向計算 x 軸
+        //   const dx = event.transform.x - currentTransform.x; // 本次平移增量
+        //   const reversedX = currentTransform.x - dx;         // 反向累積平移
+        //   // 更新變換狀態
+        //   currentTransform = d3.zoomIdentity
+        //     .translate(reversedX, event.transform.y)
+        //     .scale(event.transform.k);
+        // } else {
+        //   // 縮放操作：只更新縮放比例
+        //   currentTransform = d3.zoomIdentity
+        //     .translate(currentTransform.x, currentTransform.y)
+        //     .scale(event.transform.k);
+        // }
+        // console.log('currentTransform', currentTransform)
+
+        // console.log('t.x', t.x)
         const mapGroupindex = (d: number) => {
           const n = Math.round(d)
-          return Math.min(groupMax, Math.max(groupMin, n));
+          return Math.min(data.groupMax, Math.max(groupMin, n));
         }
+        
         const zoomedDomain = data.fullDataFormatter.grid.groupAxis.position === 'bottom' || data.fullDataFormatter.grid.groupAxis.position === 'top'
           ? t.rescaleX(shadowScale)
             .domain()
@@ -123,8 +164,9 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
           .domain()
           .map(mapGroupindex)
 
+
         // domain超過極限值
-        if (zoomedDomain[0] <= groupMin && zoomedDomain[1] >= groupMax) {
+        if (zoomedDomain[0] <= groupMin && zoomedDomain[1] >= data.groupMax) {
           // 繼續縮小
           if (t.k < lastTransform.k) {
             // 維持前一次的transform
@@ -142,12 +184,12 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
             t.y = lastTransform.y
           }
         }
+
         // 紀錄transform
         lastTransform.k = t.k
         lastTransform.x = t.x
         lastTransform.y = t.y
-// console.log(String(data.fullDataFormatter.visibleFilter))
-        // console.log('zoomedDomain', zoomedDomain)
+
 
         const newDataFormatter: DataFormatterGrid = {
           ...data.fullDataFormatter,
@@ -157,20 +199,20 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
               ...data.fullDataFormatter.grid.groupAxis,
               scaleDomain: zoomedDomain
             }
-          },
+          }
         }
         subject.dataFormatter$.next(newDataFormatter)
       })
 
     // 傳入外層selection
     // subject.selection.call(zoom as any)
-    rootSelection.call(zoom as any)
+    rootSelection.call(zoom)
 
   })
   
   return () => {
     destroy$.next(undefined)
-    rootRectSelection.remove()
+    // rootRectSelection.remove()
     
     rootSelection.call(d3.zoom().on('zoom', null))
   }

package/src/grid/plugins/ValueAxis.ts

@@ -5,15 +5,72 @@ import {
   distinctUntilChanged,
   shareReplay
 } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
 import { DEFAULT_VALUE_AXIS_PARAMS } from '../defaults'
-
+import { LAYER_INDEX_OF_AXIS } from '../../const'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
 
 const pluginName = 'ValueAxis'
 
-export const ValueAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_VALUE_AXIS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_VALUE_AXIS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      labelOffset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      labelColorType: {
+        toBeOption: 'ColorType',
+      },
+      axisLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      axisLineColorType: {
+        toBeOption: 'ColorType',
+      },
+      ticks: {
+        toBeTypes: ['number', 'null']
+      },
+      tickFormat: {
+        toBeTypes: ['string', 'Function']
+      },
+      tickLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      tickPadding: {
+        toBeTypes: ['number']
+      },
+      tickFullLine: {
+        toBeTypes: ['boolean']
+      },
+      tickFullLineDasharray: {
+        toBeTypes: ['string']
+      },
+      tickColorType: {
+        toBeOption: 'ColorType',
+      },
+      tickTextRotate: {
+        toBeTypes: ['number']
+      },
+      tickTextColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  }
+}
+
+export const ValueAxis = defineGridPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/grid/plugins/ValueStackAxis.ts

@@ -7,15 +7,72 @@ import {
   iif,
   Observable,
   Subject } from 'rxjs'
-import type { ComputedDataGrid } from '@orbcharts/core'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
 import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_AXIS } from '../../const'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
 
 const pluginName = 'ValueStackAxis'
 
-export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_VALUE_STACK_AXIS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_VALUE_STACK_AXIS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      labelOffset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      labelColorType: {
+        toBeOption: 'ColorType',
+      },
+      axisLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      axisLineColorType: {
+        toBeOption: 'ColorType',
+      },
+      ticks: {
+        toBeTypes: ['number', 'null']
+      },
+      tickFormat: {
+        toBeTypes: ['string', 'Function']
+      },
+      tickLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      tickPadding: {
+        toBeTypes: ['number']
+      },
+      tickFullLine: {
+        toBeTypes: ['boolean']
+      },
+      tickFullLineDasharray: {
+        toBeTypes: ['string']
+      },
+      tickColorType: {
+        toBeOption: 'ColorType',
+      },
+      tickTextRotate: {
+        toBeTypes: ['number']
+      },
+      tickTextColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  }
+}
+
+export const ValueStackAxis = defineGridPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/grid/types.ts

@@ -1,4 +1,4 @@
-import type { ColorType } from '@orbcharts/core'
+import type { ColorType } from '../../lib/core-types'
 // import type { BaseLegendParams } from '../base/BaseLegend'
 
 // export type LineType = 'line' | 'area' | 'gradientArea'

package/src/multiGrid/multiGridObservables.ts

@@ -15,7 +15,7 @@ import type {
   ComputedDataGrid,
   DataFormatterGrid,
   ContextObserverGridDetail,
-  ContextObserverMultiGridDetail } from '@orbcharts/core'
+  ContextObserverMultiGridDetail } from '../../lib/core-types'
 
 // 可設定多個gridIndex的params
 interface MultiGridPluginParams {

package/src/multiGrid/plugins/MultiBarStack.ts

@@ -6,18 +6,46 @@ import {
   shareReplay,
   takeUntil
 } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineMultiGridPlugin } from '@orbcharts/core'
+  defineMultiGridPlugin } from '../../../lib/core'
 import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
 import { createBaseBarStack } from '../../base/BaseBarStack'
 import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
 const pluginName = 'MultiBarStack'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
-export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_BAR_STACK_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_BAR_STACK_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      gridIndexes: {
+        toBe: 'number[] | "all"',
+        test: (value: any) => {
+          return value === 'all' || (Array.isArray(value) && value.every((v: any) => typeof v === 'number'))
+        }
+      },
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barGroupPadding: {
+        toBeTypes: ['number']
+      },
+      barRadius: {
+        toBeTypes: ['number', 'boolean']
+      }
+    })
+    return result
+  }
+}
+
+export const MultiBarStack = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []

package/src/multiGrid/plugins/MultiBars.ts

@@ -6,18 +6,49 @@ import {
   shareReplay,
   takeUntil
 } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineMultiGridPlugin } from '@orbcharts/core'
+  defineMultiGridPlugin } from '../../../lib/core'
 import { DEFAULT_MULTI_BARS_PARAMS } from '../defaults'
 import { createBaseBars } from '../../base/BaseBars'
 import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
 const pluginName = 'MultiBars'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
-export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_PARAMS)(({ selection, name, subject, observer }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_BARS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_BARS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      gridIndexes: {
+        toBe: 'number[] | "all"',
+        test: (value: any) => {
+          return value === 'all' || (Array.isArray(value) && value.every((v: any) => typeof v === 'number'))
+        }
+      },
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barPadding: {
+        toBeTypes: ['number']
+      },
+      barGroupPadding: {
+        toBeTypes: ['number']
+      },
+      barRadius: {
+        toBeTypes: ['number', 'boolean']
+      }
+    })
+    return result
+  }
+}
+
+export const MultiBars = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []

package/src/multiGrid/plugins/MultiBarsTriangle.ts

@@ -6,18 +6,55 @@ import {
   shareReplay,
   takeUntil
 } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineMultiGridPlugin } from '@orbcharts/core'
+  defineMultiGridPlugin } from '../../../lib/core'
 import { DEFAULT_MULTI_BARS_TRIANGLE_PARAMS } from '../defaults'
 import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
 import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
 const pluginName = 'MultiBarsTriangle'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
-export const MultiBarsTriangle = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_TRIANGLE_PARAMS)(({ selection, name, subject, observer }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_BARS_TRIANGLE_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_BARS_TRIANGLE_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      gridIndexes: {
+        toBe: 'number[] | "all"',
+        test: (value: any) => {
+          return value === 'all' || (Array.isArray(value) && value.every((v: any) => typeof v === 'number'))
+        }
+      },
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barPadding: {
+        toBeTypes: ['number']
+      },
+      barGroupPadding: {
+        toBeTypes: ['number']
+      },
+      linearGradientOpacity: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      }
+    })
+    return result
+  }
+}
+
+export const MultiBarsTriangle = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
   
   const unsubscribeFnArr: (() => void)[] = []

package/src/multiGrid/plugins/MultiDots.ts

@@ -2,18 +2,55 @@ import * as d3 from 'd3'
 import {
   takeUntil,
   Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineMultiGridPlugin } from '@orbcharts/core'
+  defineMultiGridPlugin } from '../../../lib/core'
 import { DEFAULT_MULTI_DOTS_PARAMS } from '../defaults'
 import { createBaseDots } from '../../base/BaseDots'
 import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
+import { LAYER_INDEX_OF_GRAPHIC_COVER } from '../../const'
 
 const pluginName = 'MultiDots'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
-export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PARAMS)(({ selection, name, subject, observer }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_DOTS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_DOTS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC_COVER,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      gridIndexes: {
+        toBe: 'number[] | "all"',
+        test: (value: any) => {
+          return value === 'all' || (Array.isArray(value) && value.every((v: any) => typeof v === 'number'))
+        }
+      },
+      radius: {
+        toBeTypes: ['number']
+      },
+      fillColorType: {
+        toBeOption: 'ColorType',
+      },
+      strokeColorType: {
+        toBeOption: 'ColorType',
+      },
+      strokeWidth: {
+        toBeTypes: ['number']
+      },
+      // strokeWidthWhileHighlight: {
+      //   toBeTypes: ['number']
+      // },
+      onlyShowHighlighted: {
+        toBeTypes: ['boolean']
+      }
+    })
+    return result
+  }
+}
+
+export const MultiDots = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []