@orbcharts/plugins-basic 3.0.0-alpha.69 → 3.0.0-alpha.71

package/src/multiGrid/plugins/OverlappingValueStackAxes.ts

@@ -10,21 +10,150 @@ import {
   iif,
   Observable,
   Subject } from 'rxjs'
-import type { ContextObserverMultiGrid, DataFormatterGrid, DataFormatterTypeMap, Layout } from '@orbcharts/core'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import type { ContextObserverMultiGrid, DataFormatterGrid, DataFormatterTypeMap, Layout } from '../../../lib/core-types'
 import {
-  defineMultiGridPlugin } from '@orbcharts/core'
+  defineMultiGridPlugin } from '../../../lib/core'
 import { DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
 import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
-import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '@orbcharts/core/src/grid/gridObservables'
+import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '../../../lib/core'
+import { LAYER_INDEX_OF_AXIS } from '../../const'
 
 const pluginName = 'OverlappingValueStackAxes'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      firstAxis: {
+        toBeTypes: ['object']
+      },
+      secondAxis: {
+        toBeTypes: ['object']
+      },
+      gridIndexes: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value) && value.length === 2
+        }
+      }
+    })
+    if (params.firstAxis) {
+      const firstAxisResult = validateColumns(params.firstAxis, {
+        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']
+        },
+        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',
+        }
+      })
+      if (firstAxisResult.status === 'error') {
+        return firstAxisResult
+      }
+    }
+    if (params.secondAxis) {
+      const secondAxisResult = validateColumns(params.secondAxis, {
+        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']
+        },
+        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',
+        }
+      })
+      if (secondAxisResult.status === 'error') {
+        return secondAxisResult
+      }
+    }
+    return result
+  }
+}
+
 // 第一個圖軸使用堆疊的資料，第二個圖軸使用原始資料
-export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginName, DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS)(({ selection, name, subject, observer }) => {
+export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []

package/src/multiGrid/types.ts

@@ -7,7 +7,7 @@ import type { BaseDotsParams } from '../base/BaseDots'
 import type { BaseGroupAxisParams } from '../base/BaseGroupAxis'
 import type { BaseValueAxisParams } from '../base/BaseValueAxis'
 import type {
-  ChartParams, Layout, ColorType } from '@orbcharts/core'
+  ChartParams, Layout, ColorType } from '../../lib/core-types'
 
 export interface MultiGridLegendParams {
   position: 'top' | 'bottom' | 'left' | 'right'

package/src/noneData/defaults.ts

@@ -1,5 +1,5 @@
 import type { ContainerPluginParams, TooltipParams } from './types'
-import type { EventBaseSeriesValue, EventBaseGridValue, EventBaseCategoryValue } from '@orbcharts/core'
+import type { EventTypeMap, EventBaseSeriesValue, EventBaseGridValue, EventBaseCategoryValue } from '../../lib/core-types'
 
 export const CONTAINER_PLUGIN_PARAMS: ContainerPluginParams = {
   header: {
@@ -23,10 +23,10 @@ export const TOOLTIP_PARAMS: TooltipParams = {
   padding: 10,
   textRenderFn: (eventData) => {
     if (eventData.highlightTarget === 'datum' && eventData.datum) {
-      return [`${eventData.datum.label}: ${eventData.datum.value}`]
+      return [`${(eventData as EventTypeMap<'series'>).datum.label}: ${(eventData as EventTypeMap<'series'>).datum.value}`]
     } else if (eventData.highlightTarget === 'series') {
-      const label = (eventData as EventBaseSeriesValue<any, any>).seriesLabel
-      const valueArr = (eventData as EventBaseSeriesValue<any, any>).series
+      const label = (eventData as EventBaseSeriesValue).seriesLabel
+      const valueArr = (eventData as EventBaseSeriesValue).series
         .filter(d => d.visible == true)
         .map(d => {
           return d.value
@@ -36,8 +36,8 @@ export const TOOLTIP_PARAMS: TooltipParams = {
         : valueArr.join(',')
       return [label, value]
     } else if (eventData.highlightTarget === 'group') {
-      const label = (eventData as EventBaseGridValue<any, any>).groupLabel
-      const valueArr = (eventData as EventBaseGridValue<any, any>).series
+      const label = (eventData as EventBaseGridValue<'grid'>).groupLabel
+      const valueArr = (eventData as EventBaseGridValue<'grid'>).series
         .filter(d => d.visible == true)
         .map(d => {
           return d.value
@@ -47,8 +47,8 @@ export const TOOLTIP_PARAMS: TooltipParams = {
         : valueArr.join(',')
       return [label, value]
     } else if (eventData.highlightTarget === 'category') {
-      const label = (eventData as EventBaseCategoryValue<any, any>).categoryLabel
-      const valueArr = (eventData as EventBaseCategoryValue<any, any>).category
+      const label = (eventData as EventBaseCategoryValue<any>).categoryLabel
+      const valueArr = (eventData as EventBaseCategoryValue<'multiValue'>).category
         .filter(d => d.visible == true)
         .map(d => {
           return d.value

package/src/noneData/plugins/Container.ts

@@ -1,9 +1,26 @@
 import * as d3 from 'd3'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineNoneDataPlugin } from '@orbcharts/core'
+  defineNoneDataPlugin } from '../../../lib/core'
 import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_BG } from '../../const'
 
-export const Container = defineNoneDataPlugin('Container', CONTAINER_PLUGIN_PARAMS)(({ selection }) => {
+const pluginName = 'Container'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof CONTAINER_PLUGIN_PARAMS> = {
+  name: pluginName,
+  defaultParams: CONTAINER_PLUGIN_PARAMS,
+  layerIndex: LAYER_INDEX_OF_BG,
+  validator: (params, { validateColumns }) => {
+    return {
+      status: 'success',
+      columnName: '',
+      expectToBe: '',
+    }
+  }
+}
+
+export const Container = defineNoneDataPlugin(pluginConfig)(({ selection }) => {
   
   return function unsubscribe () {
     

package/src/noneData/plugins/Tooltip.ts

@@ -11,13 +11,14 @@ import {
   Subject, 
   Observable,
   distinctUntilChanged } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import type {
-  EventTypeMap, PluginConstructor, ChartType } from '@orbcharts/core'
-import { defineNoneDataPlugin } from '@orbcharts/core'
+  EventTypeMap, PluginConstructor, ChartType } from '../../../lib/core-types'
+import { defineNoneDataPlugin, textSizePxObservable } from '../../../lib/core'
 import { getSvgGElementSize, appendSvg } from '../../utils/d3Utils'
 import { getColor, getClassName } from '../../utils/orbchartsUtils'
 import { TOOLTIP_PARAMS } from '../defaults'
-import { textSizePxObservable } from '@orbcharts/core'
+import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
 
 interface TooltipStyle {
   backgroundColor: string
@@ -205,7 +206,48 @@ function renderTooltip ({ rootSelection, pluginName, rootWidth, rootHeight, svgS
 
 }
 
-export const Tooltip: PluginConstructor<any, string, any> = defineNoneDataPlugin(pluginName, TOOLTIP_PARAMS)(({ selection, rootSelection, name, chartType, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof TOOLTIP_PARAMS> = {
+  name: pluginName,
+  defaultParams: TOOLTIP_PARAMS,
+  layerIndex: LAYER_INDEX_OF_TOOLTIP,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      backgroundColorType: {
+        toBeOption: 'ColorType',
+      },
+      backgroundOpacity: {
+        toBeTypes: ['number']
+      },
+      strokeColorType: {
+        toBeOption: 'ColorType',
+      },
+      offset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      },
+      textRenderFn: {
+        toBeTypes: ['Function']
+      },
+      svgRenderFn: {
+        toBeTypes: ['Function']
+      }
+    })
+    return result
+  }
+}
+
+export const Tooltip = defineNoneDataPlugin(pluginConfig)(({ selection, rootSelection, name, chartType, observer, subject }) => {
   const destroy$ = new Subject()
 
   // 事件觸發

package/src/noneData/types.ts

@@ -1,4 +1,4 @@
-import type { ColorType, ChartType, EventTypeMap, EventBase } from '@orbcharts/core'
+import type { ColorType, ChartType, EventTypeMap, EventBase } from '../../lib/core-types'
 
 export interface ContainerPluginParams {
   header: {

package/src/series/defaults.ts

@@ -1,4 +1,4 @@
-import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
+import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '../../lib/core-types'
 import type {
   BubblesParams,
   PieParams,

package/src/series/plugins/Bubbles.ts

@@ -9,6 +9,7 @@ import {
   Observable,
   distinctUntilChanged,
   shareReplay} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import type {
   ChartParams,
   DatumValue,
@@ -16,12 +17,13 @@ import type {
   EventName,
   ComputedDataSeries,
   ComputedDatumSeries,
-  SeriesContainerPosition } from '@orbcharts/core'
+  SeriesContainerPosition } from '../../../lib/core-types'
 import {
-  defineSeriesPlugin } from '@orbcharts/core'
+  defineSeriesPlugin } from '../../../lib/core'
 import type { BubblesParams, ArcScaleType } from '../types'
 import { DEFAULT_BUBBLES_PARAMS } from '../defaults'
 import { renderCircleText } from '../../utils/d3Graphics'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
 interface BubblesDatum extends ComputedDatumSeries {
   x: number
@@ -32,6 +34,61 @@ interface BubblesDatum extends ComputedDatumSeries {
 
 type BubblesSimulationDatum = BubblesDatum & d3.SimulationNodeDatum
 
+const pluginName = 'Bubbles'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_BUBBLES_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      force: {
+        toBeTypes: ['object']
+      },
+      bubbleText: {
+        toBeTypes: ['object']
+      },
+      arcScaleType: {
+        toBe: '"area" | "radius"',
+        test: (value) => value === 'area' || value === 'radius'
+      }
+    })
+    if (params.force) {
+      const forceResult = validateColumns(params.force, {
+        velocityDecay: {
+          toBeTypes: ['number']
+        },
+        collisionSpacing: {
+          toBeTypes: ['number']
+        },
+        strength: {
+          toBeTypes: ['number']
+        },
+      })
+      if (forceResult.status === 'error') {
+        return forceResult
+      }
+    }
+    if (params.bubbleText) {
+      const bubbleTextResult = validateColumns(params.bubbleText, {
+        fillRate: {
+          toBeTypes: ['number']
+        },
+        lineHeight: {
+          toBeTypes: ['number']
+        },
+        lineLengthMin: {
+          toBeTypes: ['number']
+        },
+      })
+      if (bubbleTextResult.status === 'error') {
+        return bubbleTextResult
+      }
+    }
+    return result
+  }
+}
+
 let force: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
 
 function makeForce (bubblesSelection: d3.Selection<SVGGElement, any, any, any>, fullParams: BubblesParams) {
@@ -320,7 +377,8 @@ function highlight ({ bubblesSelection, highlightIds, fullChartParams }: {
   })
 }
 
-export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({ selection, name, observer, subject }) => {
+
+export const Bubbles = defineSeriesPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/series/plugins/Pie.ts

@@ -8,26 +8,65 @@ import {
   shareReplay,
   Observable,
   Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import type {
   ComputedDataSeries,
   ComputedDatumSeries,
   SeriesContainerPosition,
   ChartParams,
   EventSeries,
-  Layout } from '@orbcharts/core'
+  Layout } from '../../../lib/core-types'
 import type { PieDatum } from '../seriesUtils'
 import type { PieParams } from '../types'
 import {
-  defineSeriesPlugin } from '@orbcharts/core'
+  defineSeriesPlugin } from '../../../lib/core'
 import { DEFAULT_PIE_PARAMS } from '../defaults'
 import { makePieData } from '../seriesUtils'
 import { getD3TransitionEase, makeD3Arc } from '../../utils/d3Utils'
 import { getDatumColor, getClassName } from '../../utils/orbchartsUtils'
 import { seriesCenterSelectionObservable } from '../seriesObservables'
-
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
 const pluginName = 'Pie'
 
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_PIE_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_PIE_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      outerRadius: {
+        toBeTypes: ['number'],
+      },
+      innerRadius: {
+        toBeTypes: ['number'],
+      },
+      outerRadiusWhileHighlight: {
+        toBeTypes: ['number'],
+      },
+      startAngle: {
+        toBeTypes: ['number'],
+      },
+      endAngle: {
+        toBeTypes: ['number'],
+      },
+      padAngle: {
+        toBeTypes: ['number'],
+      },
+      strokeColorType: {
+        toBeTypes: ['string'],
+      },
+      strokeWidth: {
+        toBeTypes: ['number'],
+      },
+      cornerRadius: {
+        toBeTypes: ['number'],
+      }
+    })
+
+    return result
+  }
+}
 
 function makeTweenPieRenderDataFn ({ enter, exit, data, lastTweenData, fullParams }: {
   enter: d3.Selection<d3.EnterElement, PieDatum, any, any>
@@ -524,7 +563,7 @@ function createEachPie (pluginName: string, context: {
   }
 }
 
-export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selection, name, subject, observer }) => {
+export const Pie = defineSeriesPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const { seriesCenterSelection$ } = seriesCenterSelectionObservable({

package/src/series/plugins/PieEventTexts.ts

@@ -8,21 +8,22 @@ import {
   distinctUntilChanged,
   Observable,
   Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import type { Subscription } from 'rxjs'
 import {
-  defineSeriesPlugin} from '@orbcharts/core'
+  defineSeriesPlugin} from '../../../lib/core'
 import type {
   ComputedDatumSeries,
   ChartParams,
   SeriesContainerPosition,
   EventName,
-  EventSeries } from '@orbcharts/core'
+  EventSeries } from '../../../lib/core-types'
 import type { PieEventTextsParams } from '../types'
 import { DEFAULT_PIE_EVENT_TEXTS_PARAMS } from '../defaults'
 import { getD3TransitionEase } from '../../utils/d3Utils'
 import { getClassName } from '../../utils/orbchartsUtils'
 import { seriesCenterSelectionObservable } from '../seriesObservables'
-
+import { LAYER_INDEX_OF_LABEL } from '../../const'
 
 type TextDatum = {
   text: string
@@ -33,6 +34,26 @@ type TextDatum = {
 const pluginName = 'PieEventTexts'
 const textClassName = getClassName(pluginName, 'text')
 
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_PIE_EVENT_TEXTS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_PIE_EVENT_TEXTS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_LABEL,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      eventFn: {
+        toBeTypes: ['Function'],
+      },
+      textAttrs: {
+        toBeTypes: ['object[]'],
+      },
+      textStyles: {
+        toBeTypes: ['object[]'],
+      }
+    })
+    return result
+  }
+}
+
 function renderText (
   selection: d3.Selection<SVGGElement, unknown, any, any>,
   data: Array<TextDatum>
@@ -205,7 +226,7 @@ function createEachPieEventTexts (pluginName: string, context: {
   }
 }
 
-export const PieEventTexts = defineSeriesPlugin(pluginName, DEFAULT_PIE_EVENT_TEXTS_PARAMS)(({ selection, name, observer, subject }) => {
+export const PieEventTexts = defineSeriesPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
   const destroy$ = new Subject()
 
   const { seriesCenterSelection$ } = seriesCenterSelectionObservable({

package/src/series/plugins/PieLabels.ts

@@ -9,13 +9,14 @@ import {
   distinctUntilChanged,
   Subject,
   BehaviorSubject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineSeriesPlugin } from '@orbcharts/core'
+  defineSeriesPlugin } from '../../../lib/core'
 import type {
   ComputedDatumSeries,
   SeriesContainerPosition,
   EventSeries,
-  ChartParams } from '@orbcharts/core'
+  ChartParams } from '../../../lib/core-types'
 import type { PieLabelsParams } from '../types'
 import type { PieDatum } from '../seriesUtils'
 import { DEFAULT_PIE_LABELS_PARAMS } from '../defaults'
@@ -24,6 +25,8 @@ import { makeD3Arc } from '../../utils/d3Utils'
 import { getDatumColor, getClassName } from '../../utils/orbchartsUtils'
 import { seriesCenterSelectionObservable } from '../seriesObservables'
 import { renderTspansOnQuadrant } from '../../utils/d3Graphics'
+import { LAYER_INDEX_OF_LABEL } from '../../const'
+import {} from '../../../lib/core'
 
 interface RenderDatum {
   pieDatum: PieDatum
@@ -50,6 +53,39 @@ const textClassName = getClassName(pluginName, 'text')
 
 const pieOuterCentroid = 2
 
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_PIE_LABELS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_PIE_LABELS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_LABEL,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      outerRadius: {
+        toBeTypes: ['number'],
+      },
+      outerRadiusWhileHighlight: {
+        toBeTypes: ['number'],
+      },
+      startAngle: {
+        toBeTypes: ['number'],
+      },
+      endAngle: {
+        toBeTypes: ['number'],
+      },
+      labelCentroid: {
+        toBeTypes: ['number'],
+      },
+      labelFn: {
+        toBeTypes: ['Function'],
+      },
+      labelColorType: {
+        toBeOption: 'ColorType'
+      }
+    })
+    return result
+  }
+}
+
+
 function makeRenderData ({ pieData, arc, arcMouseover, labelCentroid, lineStartCentroid, fullParams }: {
   pieData: PieDatum[]
   arc: d3.Arc<any, d3.DefaultArcObject>
@@ -546,7 +582,7 @@ function createEachPieLabel (pluginName: string, context: {
 }
 
 
-export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAMS)(({ selection, observer, subject }) => {
+export const PieLabels = defineSeriesPlugin(pluginConfig)(({ selection, observer, subject }) => {
   
   const destroy$ = new Subject()