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

package/src/series/plugins/Rose.ts

@@ -10,22 +10,24 @@ import {
   Observable,
   Subject,
   BehaviorSubject } 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 { D3PieDatum } from '../seriesUtils'
 import type { RoseParams } from '../types'
 import {
-  defineSeriesPlugin } from '@orbcharts/core'
+  defineSeriesPlugin } from '../../../lib/core'
 import { DEFAULT_ROSE_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'
 
 // @Q@ 暫時先寫在這裡，之後pie一起重構後再放到seriesUtils
 export interface PieDatum extends D3PieDatum {
@@ -40,6 +42,39 @@ const roseInnerRadius = 0
 const roseStartAngle = 0
 const roseEndAngle = Math.PI * 2
 
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_ROSE_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_ROSE_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      outerRadius: {
+        toBeTypes: ['number'],
+      },
+      padAngle: {
+        toBeTypes: ['number'],
+      },
+      strokeColorType: {
+        toBeOption: 'ColorType'
+      },
+      strokeWidth: {
+        toBeTypes: ['number']
+      },
+      cornerRadius: {
+        toBeTypes: ['number']
+      },
+      arcScaleType: {
+        toBe: '"area" | "radius"',
+        test: (value: any) => value === 'area' || value === 'radius'
+      },
+      angleIncreaseWhileHighlight: {
+        toBeTypes: ['number']
+      }
+    })
+    return result
+  }
+}
+
 function makeTweenArcFn ({ cornerRadius, outerRadius, axisWidth, maxValue, arcScaleType, fullParams }: {
   // interpolateRadius: (t: number) => number
   outerRadius: number
@@ -424,7 +459,7 @@ function createEachRose (pluginName: string, context: {
   }
 }
 
-export const Rose = defineSeriesPlugin(pluginName, DEFAULT_ROSE_PARAMS)(({ selection, name, subject, observer }) => {
+export const Rose = defineSeriesPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const { seriesCenterSelection$ } = seriesCenterSelectionObservable({

package/src/series/plugins/RoseLabels.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 { RoseLabelsParams } from '../types'
 import type { PieDatum } from '../seriesUtils'
 import { DEFAULT_ROSE_LABELS_PARAMS } from '../defaults'
@@ -24,6 +25,7 @@ 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'
 
 interface RenderDatum {
   pieDatum: PieDatum
@@ -50,6 +52,33 @@ const textClassName = getClassName(pluginName, 'text')
 
 const pieOuterCentroid = 2
 
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_ROSE_LABELS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_ROSE_LABELS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_LABEL,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      outerRadius: {
+        toBeTypes: ['number'],
+      },
+      labelCentroid: {
+        toBeTypes: ['number'],
+      },
+      labelFn: {
+        toBeTypes: ['Function'],
+      },
+      labelColorType: {
+        toBeOption: 'ColorType'
+      },
+      arcScaleType: {
+        toBe: '"area" | "radius"',
+        test: (value: any) => value === 'area' || value === 'radius'
+      },
+    })
+    return result
+  }
+}
+
 function makeRenderData ({ pieData, labelCentroid, arcScaleType, maxValue, axisWidth, outerRadius, lineStartCentroid, fullParams }: {
   pieData: PieDatum[]
   // arc: d3.Arc<any, d3.DefaultArcObject>
@@ -512,7 +541,7 @@ function createEachPieLabel (pluginName: string, context: {
 }
 
 
-export const RoseLabels = defineSeriesPlugin(pluginName, DEFAULT_ROSE_LABELS_PARAMS)(({ selection, observer, subject }) => {
+export const RoseLabels = defineSeriesPlugin(pluginConfig)(({ selection, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/series/plugins/SeriesLegend.ts

@@ -6,14 +6,51 @@ import {
   takeUntil,
   Observable,
   Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineSeriesPlugin } from '@orbcharts/core'
+  defineSeriesPlugin } from '../../../lib/core'
 import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
 import { createBaseLegend } from '../../base/BaseLegend'
+import { LAYER_INDEX_OF_INFO } from '../../const'
 
 const pluginName = 'SeriesLegend'
 
-export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_SERIES_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_SERIES_LEGEND_PARAMS,
+  layerIndex: LAYER_INDEX_OF_INFO,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      padding: {
+        toBeTypes: ['number']
+      },
+      backgroundFill: {
+        toBeOption: 'ColorType',
+      },
+      backgroundStroke: {
+        toBeOption: 'ColorType',
+      },
+      gap: {
+        toBeTypes: ['number']
+      },
+      listRectWidth: {
+        toBeTypes: ['number']
+      },
+      listRectHeight: {
+        toBeTypes: ['number']
+      },
+      listRectRadius: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  }
+}
+
+export const SeriesLegend = defineSeriesPlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/series/seriesObservables.ts

@@ -14,7 +14,7 @@ import {
   distinctUntilChanged
 } from 'rxjs'
 import type {
-  SeriesContainerPosition } from '@orbcharts/core'
+  SeriesContainerPosition } from '../../lib/core-types'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 
 function createSeriesSelection ({ selection, pluginName, separateSeries$, seriesLabels$ }: {

package/src/series/seriesUtils.ts

@@ -1,5 +1,5 @@
 import * as d3 from 'd3'
-import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '@orbcharts/core'
+import type { ComputedDataSeries, ComputedDatumSeries, EventName, EventSeries, HighlightTarget } from '../../lib/core-types'
 // import type { D3PieDatum, PieDatum } from '../types'
 
 // 由d3.pie()建出來的資料格式

package/src/series/types.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 { BaseLegendParams } from '../base/BaseLegend'
 
 export type ArcScaleType = 'area' | 'radius'

package/src/tree/plugins/TreeLegend.ts

@@ -6,14 +6,51 @@ import {
   takeUntil,
   Observable,
   Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineTreePlugin } from '@orbcharts/core'
+  defineTreePlugin } from '../../../lib/core'
 import { DEFAULT_TREE_LEGEND_PARAMS } from '../defaults'
 import { createBaseLegend } from '../../base/BaseLegend'
+import { LAYER_INDEX_OF_INFO } from '../../const'
 
 const pluginName = 'TreeLegend'
 
-export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_TREE_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_TREE_LEGEND_PARAMS,
+  layerIndex: LAYER_INDEX_OF_INFO,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      padding: {
+        toBeTypes: ['number']
+      },
+      backgroundFill: {
+        toBeOption: 'ColorType',
+      },
+      backgroundStroke: {
+        toBeOption: 'ColorType',
+      },
+      gap: {
+        toBeTypes: ['number']
+      },
+      listRectWidth: {
+        toBeTypes: ['number']
+      },
+      listRectHeight: {
+        toBeTypes: ['number']
+      },
+      listRectRadius: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  }
+}
+
+export const TreeLegend = defineTreePlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/tree/plugins/TreeMap.ts

@@ -9,17 +9,45 @@ import {
   combineLatest,
   debounceTime,
   distinctUntilChanged } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineTreePlugin } from '@orbcharts/core'
-import type { Layout, ComputedDataTree, DataFormatterTree, ChartParams } from '@orbcharts/core'
+  defineTreePlugin } from '../../../lib/core'
+import type { Layout, ComputedDataTree, DataFormatterTree, ChartParams } from '../../../lib/core-types'
 import type { TreeMapParams } from '../types'
 import { DEFAULT_TREE_MAP_PARAMS } from '../defaults'
 import { getClassName, getColor } from '../../utils/orbchartsUtils'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
 const pluginName = 'TreeMap'
 const treeClassName = getClassName(pluginName, 'tree')
 const tileClassName = getClassName(pluginName, 'tile')
 
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_TREE_MAP_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_TREE_MAP_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      paddingInner: {
+        toBeTypes: ['number']
+      },
+      paddingOuter: {
+        toBeTypes: ['number']
+      },
+      labelColorType: {
+        toBeOption: 'ColorType'
+      },
+      squarifyRatio: {
+        toBeTypes: ['number']
+      },
+      sort: {
+        toBeTypes: ['Function']
+      }
+    })
+    return result
+  }
+}
+
 function renderTree ({ selection, treeData, fullParams, fullChartParams, textSizePx }: {
   selection: d3.Selection<any, any, any, any>
   treeData: d3.HierarchyRectangularNode<ComputedDataTree>[]
@@ -144,7 +172,7 @@ function highlight ({ selection, ids, fullChartParams }: {
     })
 }
 
-export const TreeMap = defineTreePlugin(pluginName, DEFAULT_TREE_MAP_PARAMS)(({ selection, name, subject, observer }) => {
+export const TreeMap = defineTreePlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const treeData$ = combineLatest({

package/src/tree/types.ts

@@ -1,4 +1,4 @@
-import type { ColorType, ComputedDataTree } from '@orbcharts/core'
+import type { ColorType, ComputedDataTree } from '../../lib/core-types'
 
 export interface TreeMapParams {
   paddingInner: number

package/src/utils/orbchartsUtils.ts

@@ -4,7 +4,7 @@ import type {
   ChartParams,
   ComputedDatumBase,
   ComputedDatumSeriesValue,
-  ComputedDatumCategoryValue } from '@orbcharts/core'
+  ComputedDatumCategoryValue } from '../../lib/core-types'
 import { getMinAndMax } from './commonUtils'
 
 // 取得最小及最大值 - datum格式陣列資料