@orbcharts/plugins-basic 3.0.0-alpha.42 → 3.0.0-alpha.44

package/src/multiGrid/plugins/OverlappingValueAxes.ts

@@ -61,7 +61,6 @@ export const OverlappingValueAxes = defineMultiGridPlugin(pluginName, DEFAULT_OV
           } else if (fullDataFormatter.gridList[data.firstGridIndex].valueAxis.position === 'right') {
             reversePosition = 'left'
           }
-          console.log('reversePosition', reversePosition)
           return <DataFormatterGrid>{
             type: 'grid',
             grid: {

package/src/multiGrid/types.ts

@@ -2,17 +2,13 @@ import type { BaseBarsParams } from '../base/BaseBars'
 import type { BaseBarStackParams } from '../base/BaseBarStack'
 import type { BaseBarsTriangleParams } from '../base/BaseBarsTriangle'
 import type { BaseLinesParams } from '../base/BaseLines'
+import type { BaseLineAreasParams } from '../base/BaseLineAreas'
 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'
 
-export interface BarsAndLinesParams {
-  bars: BaseBarsParams
-  lines: BaseLinesParams
-}
-
 export interface MultiGridLegendParams {
   position: 'top' | 'bottom' | 'left' | 'right'
   justify: 'start' | 'center' | 'end'
@@ -56,6 +52,10 @@ export interface MultiLinesParams extends BaseLinesParams {
   gridIndexes: number[]
 }
 
+export interface MultiLineAreasParams extends BaseLineAreasParams {
+  gridIndexes: number[]
+}
+
 export interface MultiDotsParams extends BaseDotsParams {
   gridIndexes: number[]
 }

package/src/noneData/plugins/Tooltip.ts

@@ -17,6 +17,7 @@ import { defineNoneDataPlugin } from '@orbcharts/core'
 import { getSvgGElementSize, appendSvg } from '../../utils/d3Utils'
 import { getColor, getClassName } from '../../utils/orbchartsUtils'
 import { TOOLTIP_PARAMS } from '../defaults'
+import { textSizePxObservable } from '@orbcharts/core'
 
 interface TooltipStyle {
   backgroundColor: string
@@ -25,7 +26,8 @@ interface TooltipStyle {
   offset: [number, number]
   padding: number
   textColor: string
-  textSize: number
+  textSize: number | string // chartParams上的設定
+  textSizePx: number
 }
 
 const pluginName = 'Tooltip'
@@ -33,7 +35,7 @@ const gClassName = getClassName(pluginName, 'g')
 const boxClassName = getClassName(pluginName, 'box')
 
 function textToSvg (textArr: string[], textStyle: TooltipStyle) {
-  const lineHeight = textStyle.textSize * 1.5
+  const lineHeight = textStyle.textSizePx * 1.5
   return textArr
     .filter(d => d != '')
     .map((text, i) => {
@@ -203,9 +205,12 @@ export const Tooltip: PluginConstructor<any, string, any> = defineNoneDataPlugin
     // map(d => d as EventTypeMap<typeof chartType>)
   )
 
+  const textSizePx$ = textSizePxObservable(observer.fullChartParams$)
+
   const tooltipStyle$: Observable<TooltipStyle> = combineLatest({
     fullChartParams: observer.fullChartParams$,
-    fullParams: observer.fullParams$
+    fullParams: observer.fullParams$,
+    textSizePx: textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -217,6 +222,7 @@ export const Tooltip: PluginConstructor<any, string, any> = defineNoneDataPlugin
         offset: data.fullParams.offset,
         padding: data.fullParams.padding,
         textSize: data.fullChartParams.styles.textSize,
+        textSizePx: data.textSizePx,
         textColor: getColor(data.fullParams.textColorType, data.fullChartParams),
       }
     })

package/src/series/plugins/Bubbles.ts

@@ -148,7 +148,7 @@ function renderBubbles ({ graphicSelection, bubblesData, fullParams }: {
     .append<SVGGElement>("g")
     .attr('cursor', 'pointer')
   enter
-    .style('font-size', 12)
+    .attr('font-size', 12)
     .style('fill', '#ffffff')
     .attr("text-anchor", "middle")
     .attr("transform", (d) => {
@@ -509,7 +509,9 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PARAMS)(({
   combineLatest({
     bubblesSelection: bubblesSelection$,
     bubblesData: bubblesData$,
-    highlight: observer.seriesHighlight$,
+    highlight: observer.seriesHighlight$.pipe(
+      map(data => data.map(d => d.id))
+    ),
     fullChartParams: observer.fullChartParams$,
     fullParams: observer.fullParams$,
     layout: observer.layout$

package/src/series/plugins/Pie.ts

@@ -511,7 +511,9 @@ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PARAMS)(({ selecti
   
   combineLatest({
     pathSelection: pathSelection$,
-    highlight: observer.seriesHighlight$,
+    highlight: observer.seriesHighlight$.pipe(
+      map(data => data.map(d => d.id))
+    ),
     fullChartParams: observer.fullChartParams$,
     arc: arc$,
     arcMouseover: arcMouseover$

package/src/series/plugins/PieLabels.ts

@@ -3,6 +3,7 @@ import {
   combineLatest,
   switchMap,
   first,
+  map,
   takeUntil,
   Subject,
   BehaviorSubject } from 'rxjs'
@@ -266,7 +267,9 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
   
   combineLatest({
     labelSelection: labelSelection$,
-    highlight: observer.seriesHighlight$,
+    highlight: observer.seriesHighlight$.pipe(
+      map(data => data.map(d => d.id))
+    ),
     fullChartParams: observer.fullChartParams$,
   }).pipe(
     takeUntil(destroy$),

package/src/series/plugins/SeriesLegend.ts

@@ -47,7 +47,8 @@ export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND
     seriesLabels$,
     fullParams$,
     layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
   })
 
   return () => {

package/src/tree/plugins/TreeLegend.ts

@@ -47,7 +47,8 @@ export const TreeLegend = defineTreePlugin(pluginName, DEFAULT_TREE_LEGEND_PARAM
     seriesLabels$: categoryLabels$,
     fullParams$,
     layout$: observer.layout$,
-    fullChartParams$: observer.fullChartParams$
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
   })
 
   return () => {

package/src/tree/plugins/TreeMap.ts

@@ -20,13 +20,15 @@ const pluginName = 'TreeMap'
 const treeClassName = getClassName(pluginName, 'tree')
 const tileClassName = getClassName(pluginName, 'tile')
 
-function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
+function renderTree ({ selection, treeData, fullParams, fullChartParams, textSizePx }: {
   selection: d3.Selection<any, any, any, any>
   treeData: d3.HierarchyRectangularNode<ComputedDataTree>[]
   fullParams: TreeMapParams
   fullChartParams: ChartParams
+  textSizePx: number
 }) {
-  const padding = fullChartParams.styles.textSize / 2
+  const padding = textSizePx / 2
+  const lineHeight = textSizePx // 行高
 
   const cell = selection.selectAll<SVGGElement, d3.HierarchyRectangularNode<ComputedDataTree>>(`g.${treeClassName}`)
     .data(treeData, d => d.data.id)
@@ -75,7 +77,6 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
               const words = d.data.label.split(/\s+/).reverse() // 以空隔分割字串
               let word;
               let line: string[] = []
-              const lineHeight = fullChartParams.styles.textSize // 行高
               const x = textElement.attr("x")
               let y = textElement.attr("y")
               let dy = 0
@@ -180,7 +181,8 @@ export const TreeMap = defineTreePlugin(pluginName, DEFAULT_TREE_MAP_PARAMS)(({
     selection: of(selection),
     treeData: treeData$,
     fullParams: observer.fullParams$,
-    fullChartParams: observer.fullChartParams$
+    fullChartParams: observer.fullChartParams$,
+    textSizePx: observer.textSizePx$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
@@ -189,7 +191,8 @@ export const TreeMap = defineTreePlugin(pluginName, DEFAULT_TREE_MAP_PARAMS)(({
         selection,
         treeData: data.treeData,
         fullParams: data.fullParams,
-        fullChartParams: data.fullChartParams
+        fullChartParams: data.fullChartParams,
+        textSizePx: data.textSizePx
       })
     })
   )
@@ -281,7 +284,9 @@ export const TreeMap = defineTreePlugin(pluginName, DEFAULT_TREE_MAP_PARAMS)(({
 
   combineLatest({
     cellSelection: cellSelection$,
-    highlight: observer.treeHighlight$,
+    highlight: observer.treeHighlight$.pipe(
+      map(data => data.map(d => d.id))
+    ),
     fullChartParams: observer.fullChartParams$
   }).pipe(
     takeUntil(destroy$),