@orbcharts/plugins-basic 3.0.0-alpha.79 → 3.0.0-beta.1

package/dist/src/base/BaseTooltip.d.ts

@@ -0,0 +1,14 @@
+import { Subject, Observable } from 'rxjs';
+import { EventTypeMap, ChartParams, Layout } from '../../lib/core-types';
+import { BaseTooltipParams } from '../../lib/plugins-basic-types';
+import { BasePluginFn } from './types';
+import * as d3 from 'd3';
+interface BaseTooltipContext {
+    rootSelection: d3.Selection<any, unknown, any, unknown>;
+    fullParams$: Observable<BaseTooltipParams>;
+    fullChartParams$: Observable<ChartParams>;
+    layout$: Observable<Layout>;
+    event$: Subject<EventTypeMap<any>>;
+}
+export declare const createBaseTooltip: BasePluginFn<BaseTooltipContext>;
+export {};

package/dist/src/grid/defaults.d.ts

@@ -1,4 +1,4 @@
-import { LinesParams, LineAreasParams, GroupAuxParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, ScalingAreaParams, GridLegendParams } from '../../lib/plugins-basic-types';
+import { LinesParams, LineAreasParams, GroupAuxParams, DotsParams, BarsParams, BarStackParams, BarsTriangleParams, GroupAxisParams, ValueAxisParams, ValueStackAxisParams, GridTooltipParams, GridZoomParams, GridLegendParams } from '../../lib/plugins-basic-types';
 
 export declare const DEFAULT_LINES_PARAMS: LinesParams;
 export declare const DEFAULT_LINE_AREAS_PARAMS: LineAreasParams;
@@ -11,5 +11,6 @@ export declare const DEFAULT_BARS_TRIANGLE_PARAMS: BarsTriangleParams;
 export declare const DEFAULT_GROUP_AXIS_PARAMS: GroupAxisParams;
 export declare const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams;
 export declare const DEFAULT_VALUE_STACK_AXIS_PARAMS: ValueStackAxisParams;
-export declare const DEFAULT_SCALING_AREA_PARAMS: ScalingAreaParams;
+export declare const DEFAULT_GRID_ZOOM_PARAMS: GridZoomParams;
 export declare const DEFAULT_GRID_LEGEND_PARAMS: GridLegendParams;
+export declare const DEFAULT_GRID_TOOLTIP_PARAMS: GridTooltipParams;

package/dist/src/grid/index.d.ts

@@ -10,5 +10,6 @@ export { GridLegend } from './plugins/GridLegend';
 export { GroupAxis } from './plugins/GroupAxis';
 export { ValueAxis } from './plugins/ValueAxis';
 export { ValueStackAxis } from './plugins/ValueStackAxis';
-export { ScalingArea } from './plugins/ScalingArea';
+export { GridTooltip } from './plugins/GridTooltip';
+export { GridZoom } from './plugins/GridZoom';
 export { GroupAux } from './plugins/GroupAux';

package/dist/src/grid/plugins/GridTooltip.d.ts

@@ -0,0 +1 @@
+export declare const GridTooltip: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"grid", "GridTooltip", import('@orbcharts/plugins-basic-types').GridTooltipParams>;

package/dist/src/grid/plugins/GridZoom.d.ts

@@ -0,0 +1 @@
+export declare const GridZoom: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"grid", "GridZoom", import('@orbcharts/plugins-basic-types').GridZoomParams>;

package/dist/src/multiGrid/defaults.d.ts

@@ -1,4 +1,4 @@
-import { MultiGridLegendParams, MultiBarsParams, MultiBarStackParams, MultiBarsTriangleParams, MultiLinesParams, MultiLineAreasParams, MultiDotsParams, MultiGroupAxisParams, MultiValueAxisParams, MultiValueStackAxisParams, OverlappingValueAxesParams, OverlappingValueStackAxesParams } from '../../lib/plugins-basic-types';
+import { MultiGridLegendParams, MultiBarsParams, MultiBarStackParams, MultiBarsTriangleParams, MultiLinesParams, MultiLineAreasParams, MultiDotsParams, MultiGroupAxisParams, MultiGridTooltipParams, MultiValueAxisParams, MultiValueStackAxisParams, OverlappingValueAxesParams, OverlappingValueStackAxesParams } from '../../lib/plugins-basic-types';
 
 export declare const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams;
 export declare const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams;
@@ -12,3 +12,4 @@ export declare const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams;
 export declare const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams;
 export declare const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams;
 export declare const DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS: OverlappingValueStackAxesParams;
+export declare const DEFAULT_MULTI_GRID_TOOLTIP_PARAMS: MultiGridTooltipParams;

package/dist/src/multiGrid/index.d.ts

@@ -8,6 +8,7 @@ export { MultiLineAreas } from './plugins/MultiLineAreas';
 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 { OverlappingValueAxes } from './plugins/OverlappingValueAxes';
 export { OverlappingValueStackAxes } from './plugins/OverlappingValueStackAxes';

package/dist/src/multiGrid/plugins/MultiGridTooltip.d.ts

@@ -0,0 +1 @@
+export declare const MultiGridTooltip: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"multiGrid", "MultiGridTooltip", import('@orbcharts/plugins-basic-types').MultiGridTooltipParams>;

package/dist/src/noneData/index.d.ts

@@ -1,2 +1 @@
 export * from './defaults';
-export { Tooltip } from './plugins/Tooltip';

package/dist/src/series/defaults.d.ts

@@ -1,4 +1,4 @@
-import { BubblesParams, PieParams, PieEventTextsParams, PieLabelsParams, RoseParams, RoseLabelsParams, SeriesLegendParams } from '../../lib/plugins-basic-types';
+import { BubblesParams, PieParams, PieEventTextsParams, PieLabelsParams, RoseParams, RoseLabelsParams, SeriesLegendParams, SeriesTooltipParams } from '../../lib/plugins-basic-types';
 
 export declare const DEFAULT_BUBBLES_PARAMS: BubblesParams;
 export declare const DEFAULT_PIE_PARAMS: PieParams;
@@ -7,3 +7,4 @@ export declare const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams;
 export declare const DEFAULT_ROSE_PARAMS: RoseParams;
 export declare const DEFAULT_ROSE_LABELS_PARAMS: RoseLabelsParams;
 export declare const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams;
+export declare const DEFAULT_SERIES_TOOLTIP_PARAMS: SeriesTooltipParams;

package/dist/src/series/index.d.ts

@@ -6,3 +6,4 @@ export { PieLabels } from './plugins/PieLabels';
 export { Rose } from './plugins/Rose';
 export { RoseLabels } from './plugins/RoseLabels';
 export { SeriesLegend } from './plugins/SeriesLegend';
+export { SeriesTooltip } from './plugins/SeriesTooltip';

package/dist/src/series/plugins/SeriesTooltip.d.ts

@@ -0,0 +1 @@
+export declare const SeriesTooltip: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"series", "SeriesTooltip", import('@orbcharts/plugins-basic-types').SeriesTooltipParams>;

package/dist/src/tree/defaults.d.ts

@@ -1,4 +1,5 @@
-import { TreeMapParams, TreeLegendParams } from '../../lib/plugins-basic-types';
+import { TreeMapParams, TreeLegendParams, TreeTooltipParams } from '../../lib/plugins-basic-types';
 
 export declare const DEFAULT_TREE_MAP_PARAMS: TreeMapParams;
 export declare const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams;
+export declare const DEFAULT_TREE_TOOLTIP_PARAMS: TreeTooltipParams;

package/dist/src/tree/index.d.ts

@@ -1,3 +1,4 @@
 export * from './defaults';
 export { TreeLegend } from './plugins/TreeLegend';
 export { TreeMap } from './plugins/TreeMap';
+export { TreeTooltip } from './plugins/TreeTooltip';

package/dist/src/tree/plugins/TreeTooltip.d.ts

@@ -0,0 +1 @@
+export declare const TreeTooltip: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"tree", "TreeTooltip", import('@orbcharts/plugins-basic-types').TreeTooltipParams>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.79",
+  "version": "3.0.0-beta.1",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,9 +35,9 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-alpha.68",
-    "@orbcharts/core-types": "^3.0.0-alpha.3",
-    "@orbcharts/plugins-basic-types": "^3.0.0-alpha.3",
+    "@orbcharts/core": "^3.0.0-beta.1",
+    "@orbcharts/core-types": "^3.0.0-beta.1",
+    "@orbcharts/plugins-basic-types": "^3.0.0-beta.1",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseDots.ts

@@ -394,7 +394,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
 
     data.graphicSelection
       .on('mouseover', (event, datum) => {
-        event.stopPropagation()
+        // event.stopPropagation()
   
         event$.next({
           type: 'grid',
@@ -414,7 +414,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
         })
       })
       .on('mousemove', (event, datum) => {
-        event.stopPropagation()
+        // event.stopPropagation()
 
         event$.next({
           type: 'grid',
@@ -434,7 +434,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
         })
       })
       .on('mouseout', (event, datum) => {
-        event.stopPropagation()
+        // event.stopPropagation()
 
         event$.next({
           type: 'grid',
@@ -454,7 +454,7 @@ export const createBaseDots: BasePluginFn<BaseDotsContext> = (pluginName: string
         })
       })
       .on('click', (event, datum) => {
-        event.stopPropagation()
+        // event.stopPropagation()
 
         event$.next({
           type: 'grid',

package/src/base/BaseLegend.ts

@@ -5,6 +5,7 @@ import {
   switchMap,
   takeUntil,
   shareReplay,
+  distinctUntilChanged,
   Observable,
   Subject } from 'rxjs'
 import type { BasePluginFn } from './types'
@@ -101,9 +102,6 @@ function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
   return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
 }
 
-function getLegendColor () {
-
-}
 
 export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: string, {
   rootSelection,
@@ -166,17 +164,52 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     })
   )
 
-  const lineDirection$ = fullParams$.pipe(
+  const position$: Observable<"top" | "bottom" | "left" | "right"> = fullParams$.pipe(
     takeUntil(destroy$),
     map(data => {
-      return data.position === 'bottom' || data.position === 'top'
+      const position: "top" | "bottom" | "left" | "right" = data.placement === 'top' || data.placement === 'top-start' || data.placement === 'top-end'
+        ? 'top'
+        : data.placement === 'bottom' || data.placement === 'bottom-start' || data.placement === 'bottom-end'
+          ? 'bottom'
+          : data.placement === 'left' || data.placement === 'left-start' || data.placement === 'left-end'
+            ? 'left'
+            : 'right'
+      return position
+    }),
+    distinctUntilChanged((a, b) => a === b),
+    shareReplay(1)
+  )
+
+  const justify$: Observable<"start" | "center" | "end"> = fullParams$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      const justify: "start" | "center" | "end" = data.placement === 'top-start' || data.placement === 'bottom-start' || data.placement === 'left-start' || data.placement === 'right-start'
+        ? 'start'
+        : data.placement === 'top-end' || data.placement === 'bottom-end' || data.placement === 'left-end' || data.placement === 'right-end'
+          ? 'end'
+          : data.placement === 'top' || data.placement === 'bottom' || data.placement === 'left' || data.placement === 'right'
+          ? 'center'
+          : 'center'
+      return justify
+    }),
+    distinctUntilChanged((a, b) => a === b),
+    shareReplay(1)
+  )
+
+  const lineDirection$ = position$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return data === 'bottom' || data === 'top'
         ? 'row'
         : 'column'
-    })
+    }),
+    distinctUntilChanged((a, b) => a === b),
+    shareReplay(1)
   )
 
   const lineMaxSize$ = combineLatest({
     fullParams: fullParams$,
+    position: position$,
     layout: layout$
   }).pipe(
     takeUntil(destroy$),
@@ -184,7 +217,7 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
     map(data => {
       const ourterSize = (data.fullParams.padding) * 2 + (data.fullParams.gap * 2) // 卡片離場景的間距 & 卡片內的間距
 
-      return data.fullParams.position === 'bottom' || data.fullParams.position === 'top'
+      return data.position === 'bottom' || data.position === 'top'
         ? data.layout.rootWidth - ourterSize
         : data.layout.rootHeight - ourterSize
     })
@@ -192,47 +225,48 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
 
   const rootPosition$ = combineLatest({
     layout: layout$,
-    fullParams: fullParams$,
+    position: position$,
+    justify: justify$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
     map(data => {
       let x = 0
       let y = 0
-      if (data.fullParams.position === 'bottom') {
+      if (data.position === 'bottom') {
         y = data.layout.rootHeight
-        if (data.fullParams.justify === 'start') {
+        if (data.justify === 'start') {
           x = 0
-        } else if (data.fullParams.justify === 'center') {
+        } else if (data.justify === 'center') {
           x = data.layout.rootWidth / 2
-        } else if (data.fullParams.justify === 'end') {
+        } else if (data.justify === 'end') {
           x = data.layout.rootWidth
         }
-      } else if (data.fullParams.position === 'right') {
+      } else if (data.position === 'right') {
         x = data.layout.rootWidth
-        if (data.fullParams.justify === 'start') {
+        if (data.justify === 'start') {
           y = 0
-        } else if (data.fullParams.justify === 'center') {
+        } else if (data.justify === 'center') {
           y = data.layout.rootHeight / 2
-        } else if (data.fullParams.justify === 'end') {
+        } else if (data.justify === 'end') {
           y = data.layout.rootHeight
         }
-      } else if (data.fullParams.position === 'top') {
+      } else if (data.position === 'top') {
         y = 0
-        if (data.fullParams.justify === 'start') {
+        if (data.justify === 'start') {
           x = 0
-        } else if (data.fullParams.justify === 'center') {
+        } else if (data.justify === 'center') {
           x = data.layout.rootWidth / 2
-        } else if (data.fullParams.justify === 'end') {
+        } else if (data.justify === 'end') {
           x = data.layout.rootWidth
         }
-      } else if (data.fullParams.position === 'left') {
+      } else if (data.position === 'left') {
         x = 0
-        if (data.fullParams.justify === 'start') {
+        if (data.justify === 'start') {
           y = 0
-        } else if (data.fullParams.justify === 'center') {
+        } else if (data.justify === 'center') {
           y = data.layout.rootHeight / 2
-        } else if (data.fullParams.justify === 'end') {
+        } else if (data.justify === 'end') {
           y = data.layout.rootHeight
         }
       }
@@ -432,6 +466,8 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
 
   const legendCard$: Observable<LegendCard> = combineLatest({
     fullParams: fullParams$,
+    position: position$,
+    justify: justify$,
     lengendList: lengendList$
   }).pipe(
     takeUntil(destroy$),
@@ -442,47 +478,47 @@ export const createBaseLegend: BasePluginFn<BaseLegendContext> = (pluginName: st
       let translateX = 0
       let translateY = 0
 
-      if (data.fullParams.position === 'left') {
-        if (data.fullParams.justify === 'start') {
+      if (data.position === 'left') {
+        if (data.justify === 'start') {
           translateX = data.fullParams.padding
           translateY = data.fullParams.padding
-        } else if (data.fullParams.justify === 'center') {
+        } else if (data.justify === 'center') {
           translateX = data.fullParams.padding
           translateY = - height / 2
-        } else if (data.fullParams.justify === 'end') {
+        } else if (data.justify === 'end') {
           translateX = data.fullParams.padding
           translateY = - height - data.fullParams.padding
         }
-      } else if (data.fullParams.position === 'right') {
-        if (data.fullParams.justify === 'start') {
+      } else if (data.position === 'right') {
+        if (data.justify === 'start') {
           translateX = - width - data.fullParams.padding
           translateY = data.fullParams.padding
-        } else if (data.fullParams.justify === 'center') {
+        } else if (data.justify === 'center') {
           translateX = - width - data.fullParams.padding
           translateY = - height / 2
-        } else if (data.fullParams.justify === 'end') {
+        } else if (data.justify === 'end') {
           translateX = - width - data.fullParams.padding
           translateY = - height - data.fullParams.padding
         }
-      } else if (data.fullParams.position === 'top') {
-        if (data.fullParams.justify === 'start') {
+      } else if (data.position === 'top') {
+        if (data.justify === 'start') {
           translateX = data.fullParams.padding
           translateY = data.fullParams.padding
-        } else if (data.fullParams.justify === 'center') {
+        } else if (data.justify === 'center') {
           translateX = - width / 2
           translateY = data.fullParams.padding
-        } else if (data.fullParams.justify === 'end') {
+        } else if (data.justify === 'end') {
           translateX = - width - data.fullParams.padding
           translateY = data.fullParams.padding
         }
       } else {
-        if (data.fullParams.justify === 'start') {
+        if (data.justify === 'start') {
           translateX = data.fullParams.padding
           translateY = - height - data.fullParams.padding
-        } else if (data.fullParams.justify === 'center') {
+        } else if (data.justify === 'center') {
           translateX = - width / 2
           translateY = - height - data.fullParams.padding
-        } else if (data.fullParams.justify === 'end') {
+        } else if (data.justify === 'end') {
           translateX = - width - data.fullParams.padding
           translateY = - height - data.fullParams.padding
         }