@orbcharts/plugins-basic 3.0.0-beta.1 → 3.0.0-beta.11

package/src/grid/plugins/{ValueStackAxis.ts → StackedValueAxis.ts}

@@ -10,15 +10,15 @@ import {
 import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
   defineGridPlugin } from '../../../lib/core'
-import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
+import { DEFAULT_STACKED_VALUE_AXIS_PARAMS } from '../defaults'
 import { LAYER_INDEX_OF_AXIS } from '../../const'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
 
-const pluginName = 'ValueStackAxis'
+const pluginName = 'StackedValueAxis'
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_VALUE_STACK_AXIS_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_STACKED_VALUE_AXIS_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_VALUE_STACK_AXIS_PARAMS,
+  defaultParams: DEFAULT_STACKED_VALUE_AXIS_PARAMS,
   layerIndex: LAYER_INDEX_OF_AXIS,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
@@ -72,13 +72,14 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_VALUE_S
   }
 }
 
-export const ValueStackAxis = defineGridPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
+export const StackedValueAxis = defineGridPlugin(pluginConfig)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 
   const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
     selection,
     computedData$: observer.computedStackedData$, // 計算疊加value的資料
+    filteredMinMaxValue$: observer.filteredMinMaxValue$,
     fullParams$: observer.fullParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     fullChartParams$: observer.fullChartParams$,  

package/src/grid/plugins/ValueAxis.ts

@@ -77,6 +77,7 @@ export const ValueAxis = defineGridPlugin(pluginConfig)(({ selection, name, obse
   const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
     selection,
     computedData$: observer.computedData$,
+    filteredMinMaxValue$: observer.filteredMinMaxValue$,
     fullParams$: observer.fullParams$,
     fullDataFormatter$: observer.fullDataFormatter$,
     fullChartParams$: observer.fullChartParams$,  

package/src/index.ts

@@ -1,10 +1,7 @@
-// export { default as container } from './noneDataPlugins/container'
-// export { default as pie } from './seriesPlugins/pie'
-// export { default as pieEventTexts } from './seriesPlugins/pieEventTexts'
-// export { default as pieLabels } from './seriesPlugins/pieLabels'
-
 export * from './grid'
 export * from './multiGrid'
+export * from './multiValue'
 export * from './noneData'
+export * from './relationship'
 export * from './series'
 export * from './tree'

package/src/multiGrid/defaults.ts

@@ -1,7 +1,7 @@
 import type {
   MultiGridLegendParams,
   MultiBarsParams,
-  MultiBarStackParams,
+  MultiStackedBarParams,
   MultiBarsTriangleParams,
   MultiLinesParams,
   MultiLineAreasParams,
@@ -9,9 +9,9 @@ import type {
   MultiGroupAxisParams,
   MultiGridTooltipParams,
   MultiValueAxisParams,
-  MultiValueStackAxisParams,
+  MultiStackedValueAxisParams,
   OverlappingValueAxesParams,
-  OverlappingValueStackAxesParams
+  OverlappingStackedValueAxesParams
 } from '../../lib/plugins-basic-types'
 import { measureTextWidth } from '../utils/commonUtils'
 
@@ -73,7 +73,7 @@ export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
   gridIndexes: [0]
 }
 
-export const DEFAULT_MULTI_VALUE_STACK_AXIS_PARAMS: MultiValueStackAxisParams = {
+export const DEFAULT_MULTI_STACKED_VALUE_AXIS_PARAMS: MultiStackedValueAxisParams = {
   ...DEFAULT_MULTI_VALUE_AXIS_PARAMS
 }
 
@@ -85,7 +85,7 @@ export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
   gridIndexes: [0]
 }
 
-export const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams = {
+export const DEFAULT_MULTI_STACKED_BAR_PARAMS: MultiStackedBarParams = {
   barWidth: 0,
   barGroupPadding: 10,
   barRadius: false,
@@ -115,7 +115,7 @@ export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
 export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
   radius: 4,
   fillColorType: 'white',
-  strokeColorType: 'series',
+  strokeColorType: 'label',
   strokeWidth: 2,
   onlyShowHighlighted: false,
   gridIndexes: [1]
@@ -157,7 +157,7 @@ export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams =
   gridIndexes: [0, 1]
 }
 
-export const DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS: OverlappingValueStackAxesParams = {
+export const DEFAULT_OVERLAPPING_STACKED_VALUE_AXES_PARAMS: OverlappingStackedValueAxesParams = {
   ...DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS
 }
 
@@ -168,7 +168,7 @@ export const DEFAULT_MULTI_GRID_TOOLTIP_PARAMS: MultiGridTooltipParams = {
   textColorType: 'primary',
   offset: [20, 5],
   padding: 10,
-  renderFn: (eventData, { styles }) => {
+  renderFn: (eventData, { styles, utils }) => {
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
 
@@ -177,7 +177,7 @@ export const DEFAULT_MULTI_GRID_TOOLTIP_PARAMS: MultiGridTooltipParams = {
       const text = `${group.seriesLabel}${group.value}`
       return text.length > acc.length ? text : acc
     }, '')
-    const maxTextWidth = measureTextWidth(maxLengthText, styles.textSizePx)
+    const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
     const lineEndX = maxTextWidth + styles.textSizePx * 2
     const contentSvg = eventData.groups
       .map((group, i) => {
@@ -196,7 +196,7 @@ export const DEFAULT_MULTI_GRID_TOOLTIP_PARAMS: MultiGridTooltipParams = {
 ${contentSvg}`
   }
 }
-DEFAULT_MULTI_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles }) => {
+DEFAULT_MULTI_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
 
@@ -205,7 +205,7 @@ DEFAULT_MULTI_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { style
       const text = \`\${group.seriesLabel}\${group.value}\`
       return text.length > acc.length ? text : acc
     }, '')
-    const maxTextWidth = measureTextWidth(maxLengthText, styles.textSizePx)
+    const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
     const lineEndX = maxTextWidth + styles.textSizePx * 2
     const contentSvg = eventData.groups
       .map((group, i) => {

package/src/multiGrid/index.ts

@@ -2,7 +2,7 @@ export * from './defaults'
 // export * from './types'
 export { MultiGridLegend } from './plugins/MultiGridLegend'
 export { MultiBars } from './plugins/MultiBars'
-export { MultiBarStack } from './plugins/MultiBarStack'
+export { MultiStackedBar } from './plugins/MultiStackedBar'
 export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
 export { MultiLines } from './plugins/MultiLines'
 export { MultiLineAreas } from './plugins/MultiLineAreas'
@@ -10,6 +10,6 @@ export { MultiDots } from './plugins/MultiDots'
 export { MultiGroupAxis } from './plugins/MultiGroupAxis'
 export { MultiValueAxis } from './plugins/MultiValueAxis'
 export { MultiGridTooltip } from './plugins/MultiGridTooltip'
-export { MultiValueStackAxis } from './plugins/MultiValueStackAxis'
+export { MultiStackedValueAxis } from './plugins/MultiStackedValueAxis'
 export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
-export { OverlappingValueStackAxes } from './plugins/OverlappingValueStackAxes'
+export { OverlappingStackedValueAxes } from './plugins/OverlappingStackedValueAxes'

package/src/multiGrid/plugins/MultiBars.ts

@@ -73,7 +73,7 @@ export const MultiBars = defineMultiGridPlugin(pluginConfig)(({ selection, name,
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )

package/src/multiGrid/plugins/MultiBarsTriangle.ts

@@ -79,7 +79,7 @@ export const MultiBarsTriangle = defineMultiGridPlugin(pluginConfig)(({ selectio
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )

package/src/multiGrid/plugins/MultiGridLegend.ts

@@ -137,14 +137,14 @@ export const MultiGridLegend = defineMultiGridPlugin(pluginConfig)(({ selection,
     map(d => {
       return {
         ...d.fullParams,
-        seriesList: d.seriesList
+        labelList: d.seriesList
       }
     })
   )
 
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
-    seriesLabels$,
+    legendLabels$: seriesLabels$,
     fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$,

package/src/multiGrid/plugins/MultiGroupAxis.ts

@@ -109,7 +109,7 @@ export const MultiGroupAxis = defineMultiGridPlugin(pluginConfig)(({ selection,
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )

package/src/multiGrid/plugins/{MultiBarStack.ts → MultiStackedBar.ts}

@@ -9,19 +9,19 @@ import {
 import type { DefinePluginConfig } from '../../../lib/core-types'
 import {
   defineMultiGridPlugin } from '../../../lib/core'
-import { DEFAULT_MULTI_BAR_STACK_PARAMS } from '../defaults'
-import { createBaseBarStack } from '../../base/BaseBarStack'
+import { DEFAULT_MULTI_STACKED_BAR_PARAMS } from '../defaults'
+import { createBaseStackedBar } from '../../base/BaseStackedBar'
 import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
-const pluginName = 'MultiBarStack'
+const pluginName = 'MultiStackedBar'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_BAR_STACK_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_STACKED_BAR_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_MULTI_BAR_STACK_PARAMS,
+  defaultParams: DEFAULT_MULTI_STACKED_BAR_PARAMS,
   layerIndex: LAYER_INDEX_OF_GRAPHIC,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
@@ -45,7 +45,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_B
   }
 }
 
-export const MultiBarStack = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+export const MultiStackedBar = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []
@@ -70,12 +70,12 @@ export const MultiBarStack = defineMultiGridPlugin(pluginConfig)(({ selection, n
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )
 
-          unsubscribeFnArr[i] = createBaseBarStack(pluginName, {
+          unsubscribeFnArr[i] = createBaseStackedBar(pluginName, {
             selection: gridSelection,
             computedData$: d.computedData$,
             visibleComputedData$: d.visibleComputedData$,

package/src/multiGrid/plugins/{MultiValueStackAxis.ts → MultiStackedValueAxis.ts}

@@ -15,7 +15,7 @@ import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_AXIS } from '../../const'
 
-const pluginName = 'MultiValueStackAxis'
+const pluginName = 'MultiStackedValueAxis'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
@@ -81,7 +81,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_V
   }
 }
 
-export const MultiValueStackAxis = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+export const MultiStackedValueAxis = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []
@@ -106,7 +106,7 @@ export const MultiValueStackAxis = defineMultiGridPlugin(pluginConfig)(({ select
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )
@@ -114,6 +114,7 @@ export const MultiValueStackAxis = defineMultiGridPlugin(pluginConfig)(({ select
           unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
             selection: gridSelection,
             computedData$: d.computedStackedData$, // 計算疊加value的資料
+            filteredMinMaxValue$: d.filteredMinMaxValue$,
             fullParams$: observer.fullParams$,
             fullDataFormatter$: d.dataFormatter$,
             fullChartParams$: observer.fullChartParams$,  

package/src/multiGrid/plugins/MultiValueAxis.ts

@@ -106,7 +106,7 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginConfig)(({ selection,
 
           const isSeriesSeprate$ = d.dataFormatter$.pipe(
             takeUntil(destroy$),
-            map(d => d.grid.separateSeries),
+            map(d => d.separateSeries),
             distinctUntilChanged(),
             shareReplay(1)
           )
@@ -114,6 +114,7 @@ export const MultiValueAxis = defineMultiGridPlugin(pluginConfig)(({ selection,
           unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
             selection: gridSelection,
             computedData$: d.computedData$,
+            filteredMinMaxValue$: d.filteredMinMaxValue$,
             fullParams$: observer.fullParams$,
             fullDataFormatter$: d.dataFormatter$,
             fullChartParams$: observer.fullChartParams$,  

package/src/multiGrid/plugins/{OverlappingValueStackAxes.ts → OverlappingStackedValueAxes.ts}

@@ -14,20 +14,20 @@ import type { DefinePluginConfig } from '../../../lib/core-types'
 import type { ContextObserverMultiGrid, DataFormatterGrid, DataFormatterTypeMap, Layout } from '../../../lib/core-types'
 import {
   defineMultiGridPlugin } from '../../../lib/core'
-import { DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS } from '../defaults'
+import { DEFAULT_OVERLAPPING_STACKED_VALUE_AXES_PARAMS } from '../defaults'
 import { createBaseValueAxis } from '../../base/BaseValueAxis'
 import { multiGridPluginDetailObservables } from '../multiGridObservables'
 import { getClassName, getUniID } from '../../utils/orbchartsUtils'
 import { gridAxesTransformObservable, gridAxesReverseTransformObservable, gridContainerPositionObservable } from '../../../lib/core'
 import { LAYER_INDEX_OF_AXIS } from '../../const'
 
-const pluginName = 'OverlappingValueStackAxes'
+const pluginName = 'OverlappingStackedValueAxes'
 
 const gridClassName = getClassName(pluginName, 'grid')
 
-const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS> = {
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_OVERLAPPING_STACKED_VALUE_AXES_PARAMS> = {
   name: pluginName,
-  defaultParams: DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS,
+  defaultParams: DEFAULT_OVERLAPPING_STACKED_VALUE_AXES_PARAMS,
   layerIndex: LAYER_INDEX_OF_AXIS,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
@@ -153,7 +153,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_OVERLAP
 }
 
 // 第一個圖軸使用堆疊的資料，第二個圖軸使用原始資料
-export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
+export const OverlappingStackedValueAxes = defineMultiGridPlugin(pluginConfig)(({ selection, name, subject, observer }) => {
   const destroy$ = new Subject()
 
   const unsubscribeFnArr: (() => void)[] = []
@@ -195,13 +195,13 @@ export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginConfig)(({
       return <DataFormatterGrid>{
         type: 'grid',
         visibleFilter: data.fullDataFormatter.visibleFilter as any,
-        grid: {
+        // grid: {
           ...data.fullDataFormatter.gridList[data.secondGridIndex],
           valueAxis: {
             ...data.fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
             position: reversePosition
-          }
-        },
+          },
+        // },
         container: {
           ...data.fullDataFormatter.container
         }
@@ -277,6 +277,7 @@ export const OverlappingValueStackAxes = defineMultiGridPlugin(pluginConfig)(({
           unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
             selection: gridSelection,
             computedData$: i === 0 ? d.computedStackedData$ : d.computedData$, // 第一個圖軸計算疊加value的資料
+            filteredMinMaxValue$: d.filteredMinMaxValue$,
             fullParams$: observer.fullParams$.pipe(
               map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
             ),

package/src/multiGrid/plugins/OverlappingValueAxes.ts

@@ -196,13 +196,13 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginConfig)(({ selec
       return <DataFormatterGrid>{
         type: 'grid',
         visibleFilter: data.fullDataFormatter.visibleFilter as any,
-        grid: {
+        // grid: {
           ...data.fullDataFormatter.gridList[data.secondGridIndex],
           valueAxis: {
             ...data.fullDataFormatter.gridList[data.secondGridIndex].valueAxis,
             position: reversePosition
-          }
-        },
+          },
+        // },
         container: {
           ...data.fullDataFormatter.container
         }
@@ -278,6 +278,7 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginConfig)(({ selec
           unsubscribeFnArr[i] = createBaseValueAxis(pluginName, {
             selection: gridSelection,
             computedData$: d.computedData$,
+            filteredMinMaxValue$: d.filteredMinMaxValue$,
             fullParams$: observer.fullParams$.pipe(
               map(fullParams => i === 0 ? fullParams.firstAxis : fullParams.secondAxis)
             ),

package/src/multiValue/defaults.ts

@@ -0,0 +1,167 @@
+import type {
+  MultiValueLegendParams,
+  MultiValueTooltipParams,
+  ScatterParams,
+  ScatterBubblesParams,
+  XYAuxParams,
+  XYAxesParams,
+  XYZoomParams
+} from '../../lib/plugins-basic-types'
+
+
+export const DEFAULT_MULTI_VALUE_LEGEND_PARAMS: MultiValueLegendParams = {
+  // position: 'right',
+  // justify: 'end',
+  placement: 'bottom',
+  padding: 28,
+  // offset: [0, 0],
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  // highlightEvent: false
+  textColorType: 'primary'
+}
+
+export const DEFAULT_MULTI_VALUE_TOOLTIP_PARAMS: MultiValueTooltipParams = {
+  backgroundColorType: 'background',
+  strokeColorType: 'primary',
+  backgroundOpacity: 0.8,
+  textColorType: 'primary',
+  offset: [20, 5],
+  padding: 10,
+  renderFn: (eventData, { styles, utils }) => {
+    const hasCategoryLabel = eventData.categoryLabel === '' ? false : true
+    const hasDatumLabel = eventData.datum.label.slice(0, 11) === 'multiValue_' ? false : true
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+    const categorySvg = hasCategoryLabel
+      ? `<rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${offset - 1}" rx="${bulletWidth / 2}" fill="${eventData.datum.color}"></rect>
+  <text x="${styles.textSizePx * 1.5}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+    <tspan>${eventData.categoryLabel}</tspan>
+  </text>`
+      : ''
+    const datumLabelSvg = hasDatumLabel
+      ? `<tspan>${eventData.datum.label}</tspan>  `
+      : ''
+    const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+    ${datumLabelSvg}<tspan font-weight="bold">${eventData.datum.value}</tspan>
+  </text>`
+
+    return `${categorySvg}
+  <g ${hasCategoryLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
+    ${datumSvg}
+  </g>`
+  },
+}
+DEFAULT_MULTI_VALUE_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
+    const hasCategoryLabel = eventData.categoryLabel === '' ? false : true
+    const hasDatumLabel = eventData.datum.label.slice(0, 11) === 'multiValue_' ? false : true
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+    const categorySvg = hasCategoryLabel
+      ? \`<rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${offset - 1}" rx="\${bulletWidth / 2}" fill="\${eventData.datum.color}"></rect>
+  <text x="\${styles.textSizePx * 1.5}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
+    <tspan>\${eventData.categoryLabel}</tspan>
+  </text>\`
+      : ''
+    const datumLabelSvg = hasDatumLabel
+      ? \`<tspan>\${eventData.datum.label}</tspan>  \`
+      : ''
+    const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
+    \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
+  </text>\`
+
+    return \`\${categorySvg}
+  <g \${hasCategoryLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
+    \${datumSvg}
+  </g>\`
+}`
+
+export const DEFAULT_SCATTER_PARAMS: ScatterParams = {
+  radius: 5,
+  fillColorType: 'label',
+  strokeColorType: 'label',
+  strokeWidth: 0,
+}
+
+export const DEFAULT_SCATTER_BUBBLES_PARAMS: ScatterBubblesParams = {
+  // radius: 5,
+  fillColorType: 'label',
+  strokeColorType: 'label',
+  strokeWidth: 0,
+  valueLinearOpacity: [0.8, 0.8],
+  arcScaleType: 'area',
+  sizeAdjust: 0.5
+}
+
+export const DEFAULT_X_Y_AUX_PARAMS: XYAuxParams = {
+  xAxis: {
+    showLine: true,
+    showLabel: true,
+    lineDashArray: '3, 3',
+    lineColorType: 'primary',
+    labelColorType: 'primary',
+    labelTextColorType: 'background',
+    // labelTextFormat: text => text,
+    labelTextFormat: (value: number) => String(Math.round(value)),
+    labelPadding: 20,
+    // labelRotate: 0
+  },
+  yAxis: {
+    showLine: true,
+    showLabel: true,
+    lineDashArray: '3, 3',
+    lineColorType: 'primary',
+    labelColorType: 'primary',
+    labelTextColorType: 'background',
+    // labelTextFormat: text => text,
+    labelTextFormat: (value: number) => String(Math.round(value)),
+    labelPadding: 20,
+    // labelRotate: 0
+  }
+}
+DEFAULT_X_Y_AUX_PARAMS.xAxis.labelTextFormat.toString = () => `(value: number) => String(Math.round(value))`
+DEFAULT_X_Y_AUX_PARAMS.yAxis.labelTextFormat.toString = () => `(value: number) => String(Math.round(value))`
+
+
+export const DEFAULT_X_Y_AXES_PARAMS: XYAxesParams = {
+  xAxis: {
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: null,
+    // tickFormat: ',.0f',
+    tickFormat: v => v,
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextColorType: 'primary'
+  },
+  yAxis: {
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: null,
+    // tickFormat: ',.0f',
+    tickFormat: v => v,
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextColorType: 'primary'
+  }
+}
+DEFAULT_X_Y_AXES_PARAMS.xAxis.tickFormat.toString = () => `v => v`
+DEFAULT_X_Y_AXES_PARAMS.yAxis.tickFormat.toString = () => `v => v`
+
+export const DEFAULT_X_Y_ZOOM_PARAMS: XYZoomParams = {
+
+}

package/src/multiValue/index.ts

@@ -0,0 +1,9 @@
+export * from './defaults'
+// export * from './types'
+export { MultiValueLegend } from './plugins/MultiValueLegend'
+export { MultiValueTooltip } from './plugins/MultiValueTooltip'
+export { Scatter } from './plugins/Scatter'
+export { ScatterBubbles } from './plugins/ScatterBubbles'
+export { XYAux } from './plugins/XYAux'
+export { XYAxes } from './plugins/XYAxes'
+export { XYZoom } from './plugins/XYZoom'