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

package/src/grid/plugins/BarStack.ts

@@ -5,14 +5,35 @@ import {
   takeUntil,
   Subject,
   Observable } from 'rxjs'
-import { defineGridPlugin } from '@orbcharts/core'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import { defineGridPlugin } from '../../../lib/core'
 import { DEFAULT_BAR_STACK_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 import { createBaseBarStack } from '../../base/BaseBarStack'
 
 const pluginName = 'BarStack'
 
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BAR_STACK_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_BAR_STACK_PARAMS,
+  layerIndex: 5,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barGroupPadding: {
+        toBeTypes: ['number']
+      },
+      barRadius: {
+        toBeTypes: ['number', 'boolean']
+      }
+    })
+    return result
+  }
+}
 
-export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)(({ selection, name, subject, observer }) => {
+export const BarStack = defineGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeBaseBars = createBaseBarStack(pluginName, {

package/src/grid/plugins/Bars.ts

@@ -6,14 +6,39 @@ import {
   shareReplay,
   takeUntil
 } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
 import { DEFAULT_BARS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 import { createBaseBars } from '../../base/BaseBars'
 
 const pluginName = 'Bars'
 
-export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selection, name, subject, observer }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BARS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_BARS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barPadding: {
+        toBeTypes: ['number']
+      },
+      barGroupPadding: {
+        toBeTypes: ['number']
+      },
+      barRadius: {
+        toBeTypes: ['number', 'boolean']
+      }
+    })
+    return result
+  }
+}
+
+export const Bars = defineGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeBaseBars = createBaseBars(pluginName, {

package/src/grid/plugins/BarsPN.ts

@@ -2,14 +2,39 @@ import {
   of,
   Subject,
   Observable } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
 import { DEFAULT_BARS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 import { createBaseBars } from '../../base/BaseBars'
 
 const pluginName = 'BarsPN'
 
-export const BarsPN = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selection, name, subject, observer }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BARS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_BARS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barPadding: {
+        toBeTypes: ['number']
+      },
+      barGroupPadding: {
+        toBeTypes: ['number']
+      },
+      barRadius: {
+        toBeTypes: ['number', 'boolean']
+      }
+    })
+    return result
+  }
+}
+
+export const BarsPN = defineGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeBaseBars = createBaseBars(pluginName, {

package/src/grid/plugins/BarsTriangle.ts

@@ -6,13 +6,44 @@ import {
   distinctUntilChanged,
   shareReplay
 } from 'rxjs'
-import { defineGridPlugin } from '@orbcharts/core'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import { defineGridPlugin } from '../../../lib/core'
 import { DEFAULT_BARS_TRIANGLE_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 import { createBaseBarsTriangle } from '../../base/BaseBarsTriangle'
 
 const pluginName = 'BarsTriangle'
 
-export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_PARAMS)(({ selection, name, subject, observer }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BARS_TRIANGLE_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_BARS_TRIANGLE_PARAMS,
+  layerIndex: 5,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      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 BarsTriangle = defineGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeBaseBars = createBaseBarsTriangle(pluginName, {

package/src/grid/plugins/Dots.ts

@@ -1,13 +1,44 @@
 import {
   Subject } from 'rxjs'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import { DEFAULT_DOTS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_GRAPHIC_COVER } from '../../const'
 import { createBaseDots } from '../../base/BaseDots'
 
 const pluginName = 'Dots'
 
-export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PARAMS)(({ selection, name, subject, observer }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_DOTS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_DOTS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC_COVER,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      radius: {
+        toBeTypes: ['number']
+      },
+      fillColorType: {
+        toBeOption: 'ColorType',
+      },
+      strokeColorType: {
+        toBeOption: 'ColorType',
+      },
+      strokeWidth: {
+        toBeTypes: ['number']
+      },
+      // strokeWidthWhileHighlight: {
+      //   toBeTypes: ['number']
+      // },
+      onlyShowHighlighted: {
+        toBeTypes: ['boolean']
+      }
+    })
+    return result
+  }
+}
+
+export const Dots = defineGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   
   const destroy$ = new Subject()
 

package/src/grid/plugins/GridLegend.ts

@@ -7,13 +7,50 @@ import {
   Observable,
   Subject } from 'rxjs'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import { DEFAULT_GRID_LEGEND_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_INFO } from '../../const'
 import { createBaseLegend } from '../../base/BaseLegend'
 
 const pluginName = 'GridLegend'
 
-export const GridLegend = defineGridPlugin(pluginName, DEFAULT_GRID_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GRID_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_GRID_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 GridLegend = defineGridPlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/grid/plugins/GroupAux.ts

@@ -14,11 +14,12 @@ import {
   Subject,
   Observable } from 'rxjs'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import type {
   TransformData,
   DataFormatterGrid,
-  ChartParams } from '@orbcharts/core'
+  ChartParams } from '../../../lib/core-types'
 import { DEFAULT_GROUP_AREA_PARAMS } from '../defaults'
 import { parseTickFormatValue } from '../../utils/d3Utils'
 import { measureTextWidth } from '../../utils/commonUtils'
@@ -28,6 +29,7 @@ import { gridGroupPosition } from '../gridObservables'
 import type { GroupAuxParams } from '../types'
 import { gridSelectionsObservable } from '../gridObservables'
 import { renderTspansOnAxis } from '../../utils/d3Graphics'
+import { LAYER_INDEX_OF_AUX } from '../../const'
 
 interface LineDatum {
   id: string
@@ -50,6 +52,44 @@ interface LabelDatum {
 const pluginName = 'GroupAux'
 const labelClassName = getClassName(pluginName, 'label-box')
 
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GROUP_AREA_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_GROUP_AREA_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AUX,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      showLine: {
+        toBeTypes: ['boolean']
+      },
+      showLabel: {
+        toBeTypes: ['boolean']
+      },
+      lineDashArray: {
+        toBeTypes: ['string']
+      },
+      lineColorType: {
+        toBeOption: 'ColorType'
+      },
+      labelColorType: {
+        toBeOption: 'ColorType'
+      },
+      labelTextColorType: {
+        toBeOption: 'ColorType'
+      },
+      labelTextFormat: {
+        toBeTypes: ['string', 'Function']
+      },
+      labelPadding: {
+        toBeTypes: ['number']
+      },
+      labelRotate: {
+        toBeTypes: ['number']
+      }
+    })
+    return result
+  }
+}
+
 function createLineData ({ groupLabel, axisX, axisHeight, fullParams }: {
   groupLabel: string
   axisX: number
@@ -199,50 +239,93 @@ function renderLabel ({ selection, labelData, fullParams, fullDataFormatter, ful
       rectY = - rectHeight + 2
     }
 
-    const rectUpdate = d3.select(n[i])
+    // -- rect --
+    d3.select(n[i])
       .selectAll<SVGRectElement, LabelDatum>('rect')
       .data([datum])
-    const rectEnter = rectUpdate
-      .enter()
-      .append('rect')
+      .join(
+        enter => enter.append('rect')
+          .style('cursor', 'pointer')
+          .attr('rx', 5)
+          .attr('ry', 5),
+        update => update,
+        exit => exit.remove()
+      )
+      .attr('width', d => `${rectWidth}px`)
       .attr('height', `${rectHeight}px`)
       .attr('fill', d => getColor(fullParams.labelColorType, fullChartParams))
       .attr('x', rectX)
       .attr('y', rectY - 3) // 奇怪的偏移修正
-      .attr('rx', 5)
-      .attr('ry', 5)
-      .style('cursor', 'pointer')
-      // .style('pointer-events', 'none')
-    const rect = rectUpdate.merge(rectEnter)
-      .attr('width', d => `${rectWidth}px`)
       .style('transform', textReverseTransformWithRotate)
-    rectUpdate.exit().remove()
 
-    const textUpdate = d3.select(n[i])
+    // const rectUpdate = d3.select(n[i])
+    //   .selectAll<SVGRectElement, LabelDatum>('rect')
+    //   .data([datum])
+    // const rectEnter = rectUpdate
+    //   .enter()
+    //   .append('rect')
+    //   .attr('height', `${rectHeight}px`)
+    //   .attr('fill', d => getColor(fullParams.labelColorType, fullChartParams))
+    //   .attr('x', rectX)
+    //   .attr('y', rectY - 3) // 奇怪的偏移修正
+    //   .attr('rx', 5)
+    //   .attr('ry', 5)
+    //   .style('cursor', 'pointer')
+    //   // .style('pointer-events', 'none')
+    // const rect = rectUpdate.merge(rectEnter)
+    //   .attr('width', d => `${rectWidth}px`)
+    //   .style('transform', textReverseTransformWithRotate)
+    // rectUpdate.exit().remove()
+
+    // -- text --
+    d3.select(n[i])
       .selectAll<SVGTextElement, LabelDatum>('text')
       .data([datum])
-    const textEnter = textUpdate
-      .enter()
-      .append('text')
-      .style('dominant-baseline', 'hanging')
-      .style('cursor', 'pointer')
-      // .style('pointer-events', 'none')
-    const text = textUpdate.merge(textEnter)
-      // .text(d => d.text)
+      .join(
+        enter => enter.append('text')
+          .style('dominant-baseline', 'hanging')
+          .style('cursor', 'pointer'),
+        update => update,
+        exit => exit.remove()
+      )
       .style('transform', textReverseTransformWithRotate)
       .attr('fill', d => getColor(fullParams.labelTextColorType, fullChartParams))
       .attr('font-size', fullChartParams.styles.textSize)
       .attr('x', rectX + 6)
       .attr('y', rectY)
-    textUpdate.exit().remove()
-
-    text.each((d, i, n) => {
-      renderTspansOnAxis(d3.select(n[i]), {
-        textArr: datum.textArr,
-        textSizePx,
-        groupAxisPosition: fullDataFormatter.grid.groupAxis.position
+      .each((d, i, n) => {
+        renderTspansOnAxis(d3.select(n[i]), {
+          textArr: datum.textArr,
+          textSizePx,
+          groupAxisPosition: fullDataFormatter.grid.groupAxis.position
+        })
       })
-    })
+
+    // const textUpdate = d3.select(n[i])
+    //   .selectAll<SVGTextElement, LabelDatum>('text')
+    //   .data([datum])
+    // const textEnter = textUpdate
+    //   .enter()
+    //   .append('text')
+    //   .style('dominant-baseline', 'hanging')
+    //   .style('cursor', 'pointer')
+    //   // .style('pointer-events', 'none')
+    // const text = textUpdate.merge(textEnter)
+    //   // .text(d => d.text)
+    //   .style('transform', textReverseTransformWithRotate)
+    //   .attr('fill', d => getColor(fullParams.labelTextColorType, fullChartParams))
+    //   .attr('font-size', fullChartParams.styles.textSize)
+    //   .attr('x', rectX + 6)
+    //   .attr('y', rectY)
+    // textUpdate.exit().remove()
+
+    // text.each((d, i, n) => {
+    //   renderTspansOnAxis(d3.select(n[i]), {
+    //     textArr: datum.textArr,
+    //     textSizePx,
+    //     groupAxisPosition: fullDataFormatter.grid.groupAxis.position
+    //   })
+    // })
   })
 
   return axisLabelSelection
@@ -256,7 +339,8 @@ function removeLabel (selection: d3.Selection<any, string, any, unknown>) {
   gUpdate.exit().remove()
 }
 
-export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(({ selection, rootSelection, name, subject, observer }) => {
+
+export const GroupAux = defineGridPlugin(pluginConfig)(({ selection, rootSelection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   let isLabelMouseover = false

package/src/grid/plugins/GroupAxis.ts

@@ -5,14 +5,75 @@ import {
   distinctUntilChanged,
   shareReplay
 } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
 import { DEFAULT_GROUP_AXIS_PARAMS } from '../defaults'
 import { createBaseGroupAxis } from '../../base/BaseGroupAxis'
+import { LAYER_INDEX_OF_AXIS } from '../../const'
 
 const pluginName = 'GroupAxis'
 
-export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUP_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_GROUP_AXIS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_GROUP_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: {
+        toBe: 'number | null | "all"',
+        test: (value: any) => {
+          return value === null || value === 'all' || typeof value === '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',
+      }
+    })
+    return result
+  }
+}
+
+export const GroupAxis = defineGridPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 

package/src/grid/plugins/LineAreas.ts

@@ -1,13 +1,38 @@
 import {
   Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
 import { DEFAULT_LINE_AREAS_PARAMS } from '../defaults'
 import { createBaseLineAreas } from '../../base/BaseLineAreas'
+import { LAYER_INDEX_OF_GRAPHIC_GROUND } from '../../const'
 
 const pluginName = 'LineAreas'
 
-export const LineAreas = defineGridPlugin(pluginName, DEFAULT_LINE_AREAS_PARAMS)(({ selection, name, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_LINE_AREAS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_LINE_AREAS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC_GROUND,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      lineCurve: {
+        toBeTypes: ['string']
+      },
+      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 LineAreas = defineGridPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
 
   const destroy$ = new Subject()
 

package/src/grid/plugins/Lines.ts

@@ -1,13 +1,32 @@
 import {
   Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
-  defineGridPlugin } from '@orbcharts/core'
+  defineGridPlugin } from '../../../lib/core'
 import { DEFAULT_LINES_PARAMS } from '../defaults'
 import { createBaseLines } from '../../base/BaseLines'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
 const pluginName = 'Lines'
 
-export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selection, rootSelection, name, observer, subject }) => {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_LINES_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_LINES_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      lineCurve: {
+        toBeTypes: ['string']
+      },
+      lineWidth: {
+        toBeTypes: ['number']
+      },
+    })
+    return result
+  }
+}
+
+export const Lines = defineGridPlugin(pluginConfig)(({ selection, rootSelection, name, observer, subject }) => {
 
   const destroy$ = new Subject()