@orbcharts/plugins-basic 3.0.0-alpha.25 → 3.0.0-alpha.27

package/src/grid/defaults.ts

@@ -8,7 +8,8 @@ import type {
   GroupingAxisParams,
   ValueAxisParams,
   ValueStackAxisParams,
-  ScalingAreaParams } from './types'
+  ScalingAreaParams,
+  GridLegendParams } from './types'
 
 export const DEFAULT_LINES_PLUGIN_PARAMS: LinesPluginParams = {
   lineCurve: 'curveLinear',
@@ -92,4 +93,18 @@ export const DEFAULT_VALUE_STACK_AXIS_PLUGIN_PARAMS: ValueStackAxisParams = DEFA
 
 export const DEFAULT_SCALING_AREA_PLUGIN_PARAMS: ScalingAreaParams = {
 
-}
+}
+
+export const DEFAULT_GRID_LEGEND_PARAMS: GridLegendParams = {
+  position: 'right',
+  justify: 'end',
+  padding: 28,
+  // offset: [0, 0],
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  // highlightEvent: false
+}

package/src/grid/index.ts

@@ -5,6 +5,7 @@ export { Bars } from './plugins/Bars'
 export { BarStack } from './plugins/BarStack'
 export { BarsTriangle } from './plugins/BarsTriangle'
 export { Dots } from './plugins/Dots'
+export { GridLegend } from './plugins/GridLegend'
 export { GroupAxis } from './plugins/GroupAxis'
 export { ValueAxis } from './plugins/ValueAxis'
 export { ValueStackAxis } from './plugins/ValueStackAxis'

package/src/grid/plugins/GridLegend.ts

@@ -0,0 +1,40 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import {
+  defineGridPlugin } from '@orbcharts/core'
+import { DEFAULT_GRID_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+
+const pluginName = 'GridLegend'
+
+export const GridLegend = defineGridPlugin(pluginName, DEFAULT_GRID_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return Array.from(data.keys())
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    seriesLabels$,
+    fullParams$: observer.fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/grid/types.ts

@@ -1,4 +1,5 @@
 import type { ColorType } from '@orbcharts/core'
+import type { BaseLegendParams } from '../base/BaseLegend'
 
 // export type LineType = 'line' | 'area' | 'gradientArea'
 // export type BarType = 'rect' | 'triangle'
@@ -100,3 +101,4 @@ export interface ScalingAreaParams {
 
 }
 
+export interface GridLegendParams extends BaseLegendParams {}

package/src/series/defaults.ts

@@ -1,10 +1,12 @@
 import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
-import {
+import type {
   BubblesPluginParams,
   PiePluginParams,
   PieEventTextsPluginParams,
-  PieLabelsPluginParams } from './types'
+  PieLabelsPluginParams,
+  SeriesLegendParams } from './types'
 
+  
 export const DEFAULT_BUBBLES_PLUGIN_PARAMS: BubblesPluginParams = {
   force: {
     strength: 0.03, // 泡泡引力
@@ -80,3 +82,17 @@ export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsPluginParams = {
   labelColorType: 'series',
   labelFn: d => String(d.value),
 }
+
+export const DEFAULT_SERIES_LEGEND_PARAMS: SeriesLegendParams = {
+  position: 'right',
+  justify: 'end',
+  padding: 28,
+  // offset: [0, 0],
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  // highlightEvent: false
+}

package/src/series/index.ts

@@ -3,4 +3,5 @@ export * from './types'
 export { Bubbles } from './plugins/Bubbles'
 export { Pie } from './plugins/Pie'
 export { PieEventTexts } from './plugins/PieEventTexts'
-export { PieLabels } from './plugins/PieLabels'
+export { PieLabels } from './plugins/PieLabels'
+export { SeriesLegend } from './plugins/SeriesLegend'

package/src/series/plugins/Bubbles.ts

@@ -506,8 +506,6 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PLUGIN_PARA
     bubblesSelection$.next(bubblesSelection)
   })
 
-  // const highlight$ = highlightObservable({ datumList$: computedData$, fullChartParams$, event$: store.event$ })
-  const highlightSubscription = observer.seriesHighlight$.subscribe()
   combineLatest({
     bubblesSelection: bubblesSelection$,
     bubblesData: bubblesData$,
@@ -548,6 +546,5 @@ export const Bubbles = defineSeriesPlugin('Bubbles', DEFAULT_BUBBLES_PLUGIN_PARA
   
   return () => {
     destroy$.next(undefined)
-    highlightSubscription.unsubscribe()
   }
 })

package/src/series/plugins/Pie.ts

@@ -508,9 +508,6 @@ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PLUGIN_PARAMS)(({
   //     arcMouseover: data.arcMouseover
   //   })
   // })
-
-  // const highlight$ = highlightObservable({ datumList$: computedData$, fullChartParams$, event$: store.event$ })
-  const highlightSubscription = observer.seriesHighlight$.subscribe()
   
   combineLatest({
     pathSelection: pathSelection$,
@@ -598,6 +595,5 @@ export const Pie = defineSeriesPlugin(pluginName, DEFAULT_PIE_PLUGIN_PARAMS)(({
 
   return () => {
     destroy$.next(undefined)
-    highlightSubscription.unsubscribe()
   }
 })

package/src/series/plugins/PieLabels.ts

@@ -263,9 +263,6 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
     labelSelection$.next(labelSelection)
 
   })
-
-  // const highlight$ = highlightObservable({ datumList$: computedData$, fullChartParams$, event$: store.event$ })
-  const highlightSubscription = observer.seriesHighlight$.subscribe()
   
   combineLatest({
     labelSelection: labelSelection$,
@@ -284,6 +281,5 @@ export const PieLabels = defineSeriesPlugin(pluginName, DEFAULT_PIE_LABELS_PARAM
 
   return () => {
     destroy$.next(undefined)
-    highlightSubscription.unsubscribe()
   }
 })

package/src/series/plugins/SeriesLegend.ts

@@ -0,0 +1,40 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import {
+  defineSeriesPlugin } from '@orbcharts/core'
+import { DEFAULT_SERIES_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+
+const pluginName = 'SeriesLegend'
+
+export const SeriesLegend = defineSeriesPlugin(pluginName, DEFAULT_SERIES_LEGEND_PARAMS)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const seriesLabels$: Observable<string[]> = observer.SeriesDataMap$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return Array.from(data.keys())
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    seriesLabels$,
+    fullParams$: observer.fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/series/types.ts

@@ -1,4 +1,5 @@
 import type { ComputedDatumSeries, EventSeries, EventName, ColorType } from '@orbcharts/core'
+import type { BaseLegendParams } from '../base/BaseLegend'
 
 export type ScaleType = 'area' | 'radius'
 
@@ -51,3 +52,5 @@ export interface PieLabelsPluginParams {
   labelFn: ((d: ComputedDatumSeries) => string)
   labelColorType: ColorType
 }
+
+export interface SeriesLegendParams extends BaseLegendParams {}

package/src/utils/orbchartsUtils.ts

@@ -9,7 +9,7 @@ export function getMinAndMaxValue (data: ComputedDatumBase[]): [number, number]
   return getMinAndMax(arr)
 }
 
-
+// 取得colorType顏色
 export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
   const colors = fullChartParams.colors[fullChartParams.colorScheme]
   // 對應series資料中第1個顏色
@@ -17,11 +17,25 @@ export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
     return colors.series[0]
   }
   // 對應colorType設定的顏色
-  return colors[colorType] != null
-    ? colors[colorType]
-    : colors.primary
+  // return colors[colorType] != null
+  //   ? colors[colorType]
+  //   : colors.primary
+  return colorType == 'none'
+    ? 'none'
+    : colors[colorType] != undefined
+      ? colors[colorType]
+      : colors.primary // 如果比對不到
+}
+
+// 取得Series顏色
+export function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
+  const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].series.length
+    ? seriesIndex
+    : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].series.length
+  return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
 }
 
+// 取得Datum顏色
 export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBase, colorType: ColorType, fullChartParams: ChartParams }) {
   // 對應series資料中的顏色
   if (colorType === 'series') {
@@ -33,9 +47,11 @@ export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: C
     }
   }
   // 對應colorType設定的顏色
-  return fullChartParams.colors[fullChartParams.colorScheme][colorType] != null
-    ? fullChartParams.colors[fullChartParams.colorScheme][colorType]
-    : fullChartParams.colors[fullChartParams.colorScheme].primary
+  return colorType == 'none'
+    ? 'none' 
+    : fullChartParams.colors[fullChartParams.colorScheme][colorType] != undefined
+      ? fullChartParams.colors[fullChartParams.colorScheme][colorType]
+      : fullChartParams.colors[fullChartParams.colorScheme].primary
 }
 
 export function getClassName (pluginName: string, elementName: string, modifier?: string) {