@orbcharts/plugins-basic 3.0.0-alpha.39 → 3.0.0-alpha.41

package/src/base/BaseLines.ts

@@ -38,7 +38,7 @@ export interface BaseLinesParams {
 interface BaseLinesContext {
   selection: d3.Selection<any, unknown, any, unknown>
   computedData$: Observable<ComputedDataGrid>
-  existedSeriesLabels$: Observable<string[]>
+  existSeriesLabels$: Observable<string[]>
   SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   GroupDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
   fullDataFormatter$: Observable<DataFormatterGrid>
@@ -75,10 +75,6 @@ function createLinePath (lineCurve: string = 'curveLinear'): d3.Line<ComputedDat
     .curve((d3 as any)[lineCurve])
 }
 
-// function renderGraphicG ({ selection }) {
-
-// }
-
 // 依無值的資料分段
 function  makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
   let segmentData: ComputedDatumGrid[][] = [[]]
@@ -100,7 +96,7 @@ function  makeSegmentData (data: ComputedDatumGrid[]): ComputedDatumGrid[][] {
 }
 
 
-function renderLine ({ selection, pathClassName, segmentData, linePath, params }: {
+function renderLines ({ selection, pathClassName, segmentData, linePath, params }: {
   selection: d3.Selection<SVGGElement, unknown, any, unknown>
   pathClassName: string
   segmentData: ComputedDatumGrid[][]
@@ -136,7 +132,7 @@ function renderLine ({ selection, pathClassName, segmentData, linePath, params }
   return lines
 }
 
-function highlightLine ({ selection, seriesLabel, fullChartParams }: {
+function highlightLines ({ selection, seriesLabel, fullChartParams }: {
   selection: d3.Selection<any, string, any, any>
   seriesLabel: string | null
   fullChartParams: ChartParams
@@ -225,7 +221,7 @@ function renderClipPath ({ defsSelection, clipPathData, transitionDuration, tran
 export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: string, {
   selection,
   computedData$,
-  existedSeriesLabels$,
+  existSeriesLabels$,
   SeriesDataMap$,
   GroupDataMap$,
   fullParams$,
@@ -386,7 +382,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
     selection,
     pluginName,
     clipPathID,
-    existedSeriesLabels$,
+    existSeriesLabels$,
     gridContainer$,
     gridAxesTransform$,
     gridGraphicTransform$
@@ -534,7 +530,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
       // 將資料分段
       const segmentData = makeSegmentData(data.computedData[i] ?? [])
 
-      const pathSelection = renderLine({
+      const pathSelection = renderLines({
         selection: d3.select(all[i]),
         pathClassName,
         linePath: data.linePath,
@@ -558,6 +554,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
             pluginName,
             highlightTarget: data.highlightTarget,
             datum: _datum,
+            gridIndex: _datum.gridIndex,
             series: data.SeriesDataMap.get(_datum.seriesLabel)!,
             seriesIndex: _datum.seriesIndex,
             seriesLabel: _datum.seriesLabel,
@@ -583,6 +580,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
             pluginName,
             highlightTarget: data.highlightTarget,
             datum: _datum,
+            gridIndex: _datum.gridIndex,
             series: data.SeriesDataMap.get(_datum.seriesLabel)!,
             seriesIndex: _datum.seriesIndex,
             seriesLabel: _datum.seriesLabel,
@@ -608,6 +606,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
             pluginName,
             highlightTarget: data.highlightTarget,
             datum: _datum,
+            gridIndex: _datum.gridIndex,
             series: data.SeriesDataMap.get(_datum.seriesLabel)!,
             seriesIndex: _datum.seriesIndex,
             seriesLabel: _datum.seriesLabel,
@@ -633,6 +632,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
             pluginName,
             highlightTarget: data.highlightTarget,
             datum: _datum,
+            gridIndex: _datum.gridIndex,
             series: data.SeriesDataMap.get(_datum.seriesLabel)!,
             seriesIndex: _datum.seriesIndex,
             seriesLabel: _datum.seriesLabel,
@@ -651,7 +651,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
     // graphicSelection$.next(graphicSelection)
 
 
-    // pathSelection = renderLine({
+    // pathSelection = renderLines({
     //   selection: graphicSelection,
     //   linePath: d.linePath,
     //   data: d.computedData
@@ -682,7 +682,7 @@ export const createBaseLines: BasePluginFn<BaseLinesContext> = (pluginName: stri
     // if (!datum) {
     //   return
     // }
-    highlightLine({
+    highlightLines({
       selection: data.graphicGSelection,
       seriesLabel: (datum && datum.seriesLabel) ? datum.seriesLabel : null,
       fullChartParams: data.fullChartParams

package/src/base/BaseValueAxis.ts

@@ -369,7 +369,6 @@ export const createBaseValueAxis: BasePluginFn<BaseLinesContext> = (pluginName:
       // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
       switchMap(async (d) => d),
     ).subscribe(data => {
-      console.log(data)
     
       const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
         maxValue: data.minAndMax[1],

package/src/grid/defaults.ts

@@ -1,5 +1,6 @@
 import type {
   LinesParams,
+  LineAreasParams,
   GroupAuxParams,
   DotsParams,
   BarsParams,
@@ -16,6 +17,11 @@ export const DEFAULT_LINES_PARAMS: LinesParams = {
   lineWidth: 2
 }
 
+export const DEFAULT_LINE_AREAS_PARAMS: LineAreasParams = {
+  lineCurve: 'curveLinear',
+  linearGradientOpacity: [1, 0]
+}
+
 export const DEFAULT_DOTS_PARAMS: DotsParams = {
   radius: 4,
   fillColorType: 'white',
@@ -111,4 +117,5 @@ export const DEFAULT_GRID_LEGEND_PARAMS: GridLegendParams = {
   listRectHeight: 14,
   listRectRadius: 0,
   // highlightEvent: false
+  textColorType: 'primary'
 }

package/src/grid/gridObservables.ts

@@ -24,12 +24,12 @@ import type {
 import { createAxisQuantizeScale } from '@orbcharts/core'
 import { getClassName, getUniID } from '../utils/orbchartsUtils'
 
-export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, existedSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
+export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, existSeriesLabels$, gridContainer$, gridAxesTransform$, gridGraphicTransform$ }: {
   selection: d3.Selection<any, unknown, any, unknown>
   pluginName: string
   clipPathID: string
   // computedData$: Observable<ComputedDataGrid>
-  existedSeriesLabels$: Observable<string[]>
+  existSeriesLabels$: Observable<string[]>
   gridContainer$: Observable<ContainerPosition[]>
   gridAxesTransform$: Observable<TransformData>
   gridGraphicTransform$: Observable<TransformData>
@@ -38,11 +38,11 @@ export const gridSelectionsObservable = ({ selection, pluginName, clipPathID, ex
   const axesClassName = getClassName(pluginName, 'axes')
   const graphicClassName = getClassName(pluginName, 'graphic')
 
-  const seriesSelection$ = existedSeriesLabels$.pipe(
-    map((existedSeriesLabels, i) => {
+  const seriesSelection$ = existSeriesLabels$.pipe(
+    map((existSeriesLabels, i) => {
       return selection
         .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
-        .data(existedSeriesLabels, d => d)
+        .data(existSeriesLabels, d => d)
         .join(
           enter => {
             return enter

package/src/grid/index.ts

@@ -1,6 +1,7 @@
 export * from './defaults'
 export * from './types'
 export { Lines } from './plugins/Lines'
+export { LineAreas } from './plugins/LineAreas'
 export { Bars } from './plugins/Bars'
 export { BarsDiverging } from './plugins/BarsDiverging'
 export { BarStack } from './plugins/BarStack'

package/src/grid/plugins/BarStack.ts

@@ -15,7 +15,7 @@ export const BarStack = defineGridPlugin(pluginName, DEFAULT_BAR_STACK_PARAMS)((
     selection,
     computedData$: observer.computedData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existedSeriesLabels$: observer.existedSeriesLabels$,
+    existSeriesLabels$: observer.existSeriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,

package/src/grid/plugins/Bars.ts

@@ -15,7 +15,7 @@ export const Bars = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)(({ selecti
     selection,
     computedData$: observer.computedData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existedSeriesLabels$: observer.existedSeriesLabels$,
+    existSeriesLabels$: observer.existSeriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,

package/src/grid/plugins/BarsDiverging.ts

@@ -16,7 +16,7 @@ export const BarsDiverging = defineGridPlugin(pluginName, DEFAULT_BARS_PARAMS)((
     selection,
     computedData$: observer.computedData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existedSeriesLabels$: observer.existedSeriesLabels$,
+    existSeriesLabels$: observer.existSeriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,

package/src/grid/plugins/BarsTriangle.ts

@@ -14,7 +14,7 @@ export const BarsTriangle = defineGridPlugin(pluginName, DEFAULT_BARS_TRIANGLE_P
     selection,
     computedData$: observer.computedData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existedSeriesLabels$: observer.existedSeriesLabels$,
+    existSeriesLabels$: observer.existSeriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,

package/src/grid/plugins/Dots.ts

@@ -15,7 +15,7 @@ export const Dots = defineGridPlugin(pluginName, DEFAULT_DOTS_PARAMS)(({ selecti
     selection,
     computedData$: observer.computedData$,
     visibleComputedData$: observer.visibleComputedData$,
-    existedSeriesLabels$: observer.existedSeriesLabels$,
+    existSeriesLabels$: observer.existSeriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,

package/src/grid/plugins/GroupAux.ts

@@ -407,6 +407,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           eventName: 'mouseover',
           highlightTarget: data.highlightTarget,
           datum: null,
+          gridIndex: 0, // @Q@ 暫不處理
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
@@ -428,6 +429,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           eventName: 'mousemove',
           highlightTarget: data.highlightTarget,
           datum: null,
+          gridIndex: 0, // @Q@ 暫不處理
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
@@ -449,6 +451,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           eventName: 'mouseout',
           highlightTarget: data.highlightTarget,
           datum: null,
+          gridIndex: 0, // @Q@ 暫不處理
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
@@ -470,6 +473,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           eventName: 'click',
           highlightTarget: data.highlightTarget,
           datum: null,
+          gridIndex: 0, // @Q@ 暫不處理
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
@@ -550,6 +554,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           eventName: 'mouseover',
           highlightTarget: data.highlightTarget,
           datum: null,
+          gridIndex: 0, // @Q@ 暫不處理
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
@@ -569,6 +574,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           eventName: 'mousemove',
           highlightTarget: data.highlightTarget,
           datum: null,
+          gridIndex: 0, // @Q@ 暫不處理
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
@@ -588,6 +594,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           eventName: 'mouseout',
           highlightTarget: data.highlightTarget,
           datum: null,
+          gridIndex: 0, // @Q@ 暫不處理
           series: [],
           seriesIndex: -1,
           seriesLabel: '',
@@ -607,6 +614,7 @@ export const GroupAux = defineGridPlugin(pluginName, DEFAULT_GROUP_AREA_PARAMS)(
           eventName: 'click',
           highlightTarget: data.highlightTarget,
           datum: null,
+          gridIndex: 0, // @Q@ 暫不處理
           series: [],
           seriesIndex: -1,
           seriesLabel: '',

package/src/grid/plugins/LineAreas.ts

@@ -0,0 +1,37 @@
+import {
+  Subject } from 'rxjs'
+import {
+  defineGridPlugin } from '@orbcharts/core'
+import { DEFAULT_LINE_AREAS_PARAMS } from '../defaults'
+import { createBaseLineAreas } from '../../base/BaseLineAreas'
+
+const pluginName = 'LineAreas'
+
+export const LineAreas = defineGridPlugin(pluginName, DEFAULT_LINE_AREAS_PARAMS)(({ selection, name, observer, subject }) => {
+
+  const destroy$ = new Subject()
+
+  const unsubscribeBaseBars = createBaseLineAreas(pluginName, {
+    selection,
+    computedData$: observer.computedData$,
+    existSeriesLabels$: observer.existSeriesLabels$,
+    SeriesDataMap$: observer.SeriesDataMap$,
+    GroupDataMap$: observer.GroupDataMap$,
+    fullParams$: observer.fullParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    fullChartParams$: observer.fullChartParams$,
+    gridAxesTransform$: observer.gridAxesTransform$,
+    gridGraphicTransform$: observer.gridGraphicTransform$,
+    gridAxesSize$: observer.gridAxesSize$,
+    gridHighlight$: observer.gridHighlight$,
+    gridContainer$: observer.gridContainer$,
+    layout$: observer.layout$,
+    event$: subject.event$,
+  })
+
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseBars()
+  }
+})

package/src/grid/plugins/Lines.ts

@@ -14,7 +14,7 @@ export const Lines = defineGridPlugin(pluginName, DEFAULT_LINES_PARAMS)(({ selec
   const unsubscribeBaseBars = createBaseLines(pluginName, {
     selection,
     computedData$: observer.computedData$,
-    existedSeriesLabels$: observer.existedSeriesLabels$,
+    existSeriesLabels$: observer.existSeriesLabels$,
     SeriesDataMap$: observer.SeriesDataMap$,
     GroupDataMap$: observer.GroupDataMap$,
     fullParams$: observer.fullParams$,

package/src/grid/plugins/ScalingArea.ts

@@ -9,6 +9,7 @@ import {
   takeUntil,
   debounceTime,
   Subject } from 'rxjs'
+import type { DataFormatterGrid } from '@orbcharts/core'
 import {
   defineGridPlugin } from '@orbcharts/core'
 import { DEFAULT_SCALING_AREA_PARAMS } from '../defaults'
@@ -87,9 +88,9 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
       ? groupMax + data.initGroupAxis.scalePadding
       : data.initGroupAxis.scaleDomain[1] as number + data.initGroupAxis.scalePadding
 
-    const scaleRange: [number, number] = data.fullDataFormatter.grid.valueAxis.position === 'left' || data.fullDataFormatter.grid.valueAxis.position === 'top'
-      ? [0, 1]
-      : [1, 0]
+    // const scaleRange: [number, number] = data.fullDataFormatter.grid.valueAxis.position === 'left' || data.fullDataFormatter.grid.valueAxis.position === 'top'
+    //   ? [0, 1]
+    //   : [1, 0]
 
     const groupScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
       maxValue: data.groupMaxIndex,
@@ -97,7 +98,7 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
       axisWidth: data.axisSize.width,
       scaleDomain: [groupScaleDomainMin, groupScaleDomainMax],
       // scaleDomain: [groupMin, groupMax],
-      scaleRange
+      scaleRange: [0, 1]
     })
 
     const shadowScale = groupScale.copy()
@@ -106,6 +107,7 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
       // .scaleExtent([1, data.groupMaxIndex])
       // .translateExtent([[0, 0], [data.layout.rootWidth, data.layout.rootWidth]])
       .on("zoom", function zoomed(event) {
+        // debugger
         // console.log('event', event)
         const t = event.transform;
         // console.log('t', t)
@@ -146,7 +148,8 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
         lastTransform.y = t.y
 // console.log(String(data.fullDataFormatter.visibleFilter))
         // console.log('zoomedDomain', zoomedDomain)
-        subject.dataFormatter$.next({
+
+        const newDataFormatter: DataFormatterGrid = {
           ...data.fullDataFormatter,
           grid: {
             ...data.fullDataFormatter.grid,
@@ -154,8 +157,9 @@ export const ScalingArea = defineGridPlugin(pluginName, DEFAULT_SCALING_AREA_PAR
               ...data.fullDataFormatter.grid.groupAxis,
               scaleDomain: zoomedDomain
             }
-          }
-        })
+          },
+        }
+        subject.dataFormatter$.next(newDataFormatter)
       })
 
     // 傳入外層selection

package/src/grid/types.ts

@@ -5,7 +5,6 @@ import type { ColorType } from '@orbcharts/core'
 // export type BarType = 'rect' | 'triangle'
 
 export interface LinesParams {
-  // lineType: LineType
   lineCurve: string
   lineWidth: number
   // labelFn: (d: ComputedDatumSeries) => string
@@ -16,6 +15,11 @@ export interface LinesParams {
   // labelPadding: number
 }
 
+export interface LineAreasParams {
+  lineCurve: string
+  linearGradientOpacity: [number, number]
+}
+
 export interface DotsParams {
   radius: number
   fillColorType: ColorType
@@ -113,4 +117,5 @@ export interface GridLegendParams {
   listRectWidth: number
   listRectHeight: number
   listRectRadius: number
+  textColorType: ColorType
 }

package/src/multiGrid/defaults.ts

@@ -26,7 +26,8 @@ export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
       listRectHeight: 14,
       listRectRadius: 0,
     }
-  ]
+  ],
+  textColorType: 'primary'
 }
 
 export const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams = {

package/src/multiGrid/multiGridObservables.ts

@@ -100,8 +100,8 @@ import type { ContextObserverMultiGrid, ComputedDataGrid, DataFormatterGrid, Con
 //     switchMap(d => d.gridHighlight$)
 //   )
 
-//   const existedSeriesLabels$ = gridDetail$.pipe(
-//     switchMap(d => d.existedSeriesLabels$)
+//   const existSeriesLabels$ = gridDetail$.pipe(
+//     switchMap(d => d.existSeriesLabels$)
 //   )
 
 //   const SeriesDataMap$ = gridDetail$.pipe(
@@ -127,7 +127,7 @@ import type { ContextObserverMultiGrid, ComputedDataGrid, DataFormatterGrid, Con
 //     gridAxesReverseTransform$,
 //     gridAxesSize$,
 //     gridHighlight$,
-//     existedSeriesLabels$,
+//     existSeriesLabels$,
 //     SeriesDataMap$,
 //     GroupDataMap$,
 //     visibleComputedData$,
@@ -241,8 +241,8 @@ export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<Mu
           switchMap(d => d.gridHighlight$)
         )
       
-        const existedSeriesLabels$ = gridDetail$.pipe(
-          switchMap(d => d.existedSeriesLabels$)
+        const existSeriesLabels$ = gridDetail$.pipe(
+          switchMap(d => d.existSeriesLabels$)
         )
       
         const SeriesDataMap$ = gridDetail$.pipe(
@@ -266,7 +266,7 @@ export const multiGridDetailObservables = (observer: ContextObserverMultiGrid<Mu
           gridAxesReverseTransform$,
           gridAxesSize$,
           gridHighlight$,
-          existedSeriesLabels$,
+          existSeriesLabels$,
           SeriesDataMap$,
           GroupDataMap$,
           visibleComputedData$,

package/src/multiGrid/plugins/MultiBarStack.ts

@@ -35,7 +35,7 @@ export const MultiBarStack = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BAR
           selection: gridSelection,
           computedData$: d.gridComputedData$,
           visibleComputedData$: d.visibleComputedData$,
-          existedSeriesLabels$: d.existedSeriesLabels$,
+          existSeriesLabels$: d.existSeriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
           fullParams$: observer.fullParams$,

package/src/multiGrid/plugins/MultiBars.ts

@@ -35,7 +35,7 @@ export const MultiBars = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_BARS_PA
           selection: gridSelection,
           computedData$: d.gridComputedData$,
           visibleComputedData$: d.visibleComputedData$,
-          existedSeriesLabels$: d.existedSeriesLabels$,
+          existSeriesLabels$: d.existSeriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
           fullParams$: observer.fullParams$,

package/src/multiGrid/plugins/MultiBarsTriangle.ts

@@ -35,7 +35,7 @@ export const MultiBarsTriangle = defineMultiGridPlugin(pluginName, DEFAULT_MULTI
           selection: gridSelection,
           computedData$: d.gridComputedData$,
           visibleComputedData$: d.visibleComputedData$,
-          existedSeriesLabels$: d.existedSeriesLabels$,
+          existSeriesLabels$: d.existSeriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
           fullParams$: observer.fullParams$,

package/src/multiGrid/plugins/MultiDots.ts

@@ -35,7 +35,7 @@ export const MultiDots = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_DOTS_PA
           selection: gridSelection,
           computedData$: d.gridComputedData$,
           visibleComputedData$: d.visibleComputedData$,
-          existedSeriesLabels$: d.existedSeriesLabels$,
+          existSeriesLabels$: d.existSeriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
           fullParams$: observer.fullParams$,

package/src/multiGrid/plugins/MultiLines.ts

@@ -35,7 +35,7 @@ export const MultiLines = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_LINES_
         unsubscribeFnArr[i] = createBaseLines(pluginName, {
           selection: gridSelection,
           computedData$: d.gridComputedData$,
-          existedSeriesLabels$: d.existedSeriesLabels$,
+          existSeriesLabels$: d.existSeriesLabels$,
           SeriesDataMap$: d.SeriesDataMap$,
           GroupDataMap$: d.GroupDataMap$,
           fullDataFormatter$: d.gridDataFormatter$,

package/src/multiGrid/types.ts

@@ -29,6 +29,7 @@ export interface MultiGridLegendParams {
     listRectHeight: number
     listRectRadius: number
   }>
+  textColorType: ColorType
 }
 
 export interface MultiGroupAxisParams extends BaseGroupAxisParams {

package/src/noneData/defaults.ts

@@ -1,5 +1,5 @@
 import type { ContainerPluginParams, TooltipParams } from './types'
-import type { EventSeries, EventGrid } from '@orbcharts/core'
+import type { EventBaseSeriesValue, EventBaseGridValue, EventBaseCategoryValue } from '@orbcharts/core'
 
 export const CONTAINER_PLUGIN_PARAMS: ContainerPluginParams = {
   header: {
@@ -25,20 +25,34 @@ export const TOOLTIP_PARAMS: TooltipParams = {
     if (eventData.highlightTarget === 'datum' && eventData.datum) {
       return [`${eventData.datum.label}: ${eventData.datum.value}`]
     } else if (eventData.highlightTarget === 'series') {
-      const label = (eventData as EventSeries).seriesLabel
-      const value = (eventData as EventSeries).series
+      const label = (eventData as EventBaseSeriesValue<any, any>).seriesLabel
+      const valueArr = (eventData as EventBaseSeriesValue<any, any>).series
         .map(d => {
           return d.value
         })
-        .join(',')
+      const value = valueArr.length > 5
+        ? valueArr.slice(0, 5).join(',') + '...'
+        : valueArr.join(',')
       return [label, value]
     } else if (eventData.highlightTarget === 'group') {
-      const label = (eventData as EventGrid).groupLabel
-      const value = (eventData as EventGrid).groups
+      const label = (eventData as EventBaseGridValue<any, any>).groupLabel
+      const valueArr = (eventData as EventBaseGridValue<any, any>).series
         .map(d => {
           return d.value
         })
-        .join(',')
+      const value = valueArr.length > 5
+        ? valueArr.slice(0, 5).join(',') + '...'
+        : 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
+        .map(d => {
+          return d.value
+        })
+      const value = valueArr.length > 5
+        ? valueArr.slice(0, 5).join(',') + '...'
+        : valueArr.join(',')
       return [label, value]
     }
     return []

package/src/series/defaults.ts

@@ -95,4 +95,5 @@ export const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams = {
   listRectHeight: 14,
   listRectRadius: 0,
   // highlightEvent: false
+  textColorType: 'primary'
 }

package/src/series/types.ts

@@ -63,4 +63,5 @@ export interface SeriesLegendParams {
   listRectWidth: number
   listRectHeight: number
   listRectRadius: number
+  textColorType: ColorType
 }

package/src/tree/defaults.ts

@@ -18,4 +18,5 @@ export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
   listRectWidth: 14,
   listRectHeight: 14,
   listRectRadius: 0,
+  textColorType: 'primary'
 }

package/src/tree/plugins/TreeMap.ts

@@ -18,6 +18,7 @@ import { getClassName, getColor } from '../../utils/orbchartsUtils'
 
 const pluginName = 'TreeMap'
 const treeClassName = getClassName(pluginName, 'tree')
+const tileClassName = getClassName(pluginName, 'tile')
 
 function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
   selection: d3.Selection<any, any, any, any>
@@ -40,11 +41,12 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
       const eachCell = d3.select(nodes[i])
 
       const tile = eachCell
-        .selectAll<SVGRectElement, d3.HierarchyRectangularNode<ComputedDataTree>>('rect')
+        .selectAll<SVGRectElement, d3.HierarchyRectangularNode<ComputedDataTree>>(`rect.${tileClassName}`)
         .data([d], d => d.data.id)
         .join('rect')
         .attr("id", d => d.data.id)
-        .attr("class", "tile")
+        .attr("class", tileClassName)
+        .attr('cursor', 'pointer')
         .attr("width", (d) => d.x1 - d.x0)
         .attr("height", (d) => d.y1 - d.y0)
         .attr('fill', d => d.data.color)
@@ -80,7 +82,7 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
               let tspan = textElement
                 .text(null)
                 .append("tspan")
-                .attr('cursor', 'default')
+                .attr('cursor', 'pointer')
                 .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
                 .attr('font-size', fullChartParams.styles.textSize)
                 .attr("x", x)
@@ -96,7 +98,7 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams }: {
                   dy += lineHeight
                   tspan = textElement
                     .append("tspan")
-                    .attr('cursor', 'default')
+                    .attr('cursor', 'pointer')
                     .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
                     .attr('font-size', fullChartParams.styles.textSize)
                     .attr("x", x)