@orbcharts/plugin-basic 4.0.0-pre-alpha.0

package/src/plugins/SeriesPlot/layers/StackedValueAxis.ts

@@ -0,0 +1,111 @@
+import * as d3 from 'd3'
+import {
+  Subject,
+  Observable,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import type { StackedValueAxisParams, SeriesPlotPluginParams } from '../types'
+import { DEFAULT_STACKED_VALUE_AXIS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_AXIS } from '../../../const/layerIndex'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+import { createBaseValueAxis } from '../../../baseLayers/BaseValueAxis'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'StackedValueAxis'
+
+export const StackedValueAxis = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, StackedValueAxisParams>({
+  name: layerName,
+  defaultParams: DEFAULT_STACKED_VALUE_AXIS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  initShow: false,
+  validator: (params) => {
+    const result = validateObject(params, {
+      labelOffset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      labelColorType: {
+        toBeOption: 'ColorType',
+      },
+      axisLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      axisLineColorType: {
+        toBeOption: 'ColorType',
+      },
+      ticks: {
+        toBeTypes: ['number', 'null']
+      },
+      tickFormat: {
+        toBeTypes: ['string', 'Function']
+      },
+      tickLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      tickPadding: {
+        toBeTypes: ['number']
+      },
+      tickFullLine: {
+        toBeTypes: ['boolean']
+      },
+      tickFullLineDasharray: {
+        toBeTypes: ['string']
+      },
+      tickColorType: {
+        toBeOption: 'ColorType',
+      },
+      tickTextRotate: {
+        toBeTypes: ['number']
+      },
+      tickTextColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  },
+  setup: ({ svgG, pluginParams$, layerParams$, context }) => {
+  
+    const destroy$ = new Subject()
+
+    context.layout$
+      .pipe(
+        takeUntil(destroy$)
+      )
+      .subscribe(layout => {
+        d3.select(svgG)
+          .attr('transform', `translate(${layout.left}, ${layout.top})`)
+      })
+
+    const unsubscribeBaseValueAxis = createBaseValueAxis({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName,
+      computedData$: context.computedStackedData$, // 計算疊加value的資料
+      filteredMinMaxValue$: context.filteredStackedMinMaxValue$,
+      baseValueAxisParams$: layerParams$,
+      categoryAxis$: pluginParams$.pipe(map(params => params.categoryAxis)),
+      valueAxis$: pluginParams$.pipe(map(params => params.valueAxis)),
+      theme$: context.theme$,
+      gridAxesTransform$: context.gridAxesTransform$,
+      gridAxesReverseTransform$: context.gridAxesReverseTransform$,
+      gridAxesSize$: context.gridAxesSize$,
+      gridContainerPosition$: context.gridContainerPosition$,
+      isSeriesSeprate$: context.isSeriesSeprate$,
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseValueAxis()
+    }
+  }
+})

package/src/plugins/SeriesPlot/layers/ValueAxis.ts

@@ -0,0 +1,111 @@
+import * as d3 from 'd3'
+import {
+  Subject,
+  Observable,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import type { ValueAxisParams, SeriesPlotPluginParams } from '../types'
+import { DEFAULT_VALUE_AXIS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_AXIS } from '../../../const/layerIndex'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+import { createBaseValueAxis } from '../../../baseLayers/BaseValueAxis'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'ValueAxis'
+
+export const ValueAxis = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, ValueAxisParams>({
+  name: layerName,
+  defaultParams: DEFAULT_VALUE_AXIS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  initShow: false,
+  validator: (params) => {
+    const result = validateObject(params, {
+      labelOffset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      labelColorType: {
+        toBeOption: 'ColorType',
+      },
+      axisLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      axisLineColorType: {
+        toBeOption: 'ColorType',
+      },
+      ticks: {
+        toBeTypes: ['number', 'null']
+      },
+      tickFormat: {
+        toBeTypes: ['string', 'Function']
+      },
+      tickLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      tickPadding: {
+        toBeTypes: ['number']
+      },
+      tickFullLine: {
+        toBeTypes: ['boolean']
+      },
+      tickFullLineDasharray: {
+        toBeTypes: ['string']
+      },
+      tickColorType: {
+        toBeOption: 'ColorType',
+      },
+      tickTextRotate: {
+        toBeTypes: ['number']
+      },
+      tickTextColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  },
+  setup: ({ svgG, pluginParams$, layerParams$, context }) => {
+  
+    const destroy$ = new Subject()
+
+    context.layout$
+      .pipe(
+        takeUntil(destroy$)
+      )
+      .subscribe(layout => {
+        d3.select(svgG)
+          .attr('transform', `translate(${layout.left}, ${layout.top})`)
+      })
+
+    const unsubscribeBaseValueAxis = createBaseValueAxis({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName,
+      computedData$: context.computedData$,
+      filteredMinMaxValue$: context.filteredMinMaxValue$,
+      baseValueAxisParams$: layerParams$,
+      categoryAxis$: pluginParams$.pipe(map(params => params.categoryAxis)),
+      valueAxis$: pluginParams$.pipe(map(params => params.valueAxis)),
+      theme$: context.theme$,
+      gridAxesTransform$: context.gridAxesTransform$,
+      gridAxesReverseTransform$: context.gridAxesReverseTransform$,
+      gridAxesSize$: context.gridAxesSize$,
+      gridContainerPosition$: context.gridContainerPosition$,
+      isSeriesSeprate$: context.isSeriesSeprate$,
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseValueAxis()
+    }
+  }
+})

package/src/plugins/SeriesPlot/types.ts

@@ -0,0 +1,201 @@
+
+import { Observable, Subject } from 'rxjs'
+import type { ColorType, ModelDatumSeries, EventData } from '@orbcharts/core'
+import type { AxisPosition, ContainerPosition, ContainerPositionScaled, Container, GraphicStyles, Layout, VisibleFilter, ValueAxis, CategoryAxis } from '../../types/PluginParams'
+import { ComputedDatumGrid,  } from '../../types/ComputedData'
+import type { ContainerSize, Placement, TransformData } from '../../types/Common'
+import { BaseTooltipStyle, BaseTooltipUtils } from '../../baseLayers/types'
+
+// context
+export interface ComputedLayoutDatumGrid extends ComputedDatumGrid {
+  axisX: number
+  axisY: number
+  axisYFromZero: number
+}
+export type ComputedAxesDataGrid = ComputedLayoutDatumGrid[][]
+
+export interface SeriesPlotExtendContext {
+  layout$: Observable<Layout>
+  computedData$: Observable<ComputedDatumGrid[][]>
+  fontSizePx$: Observable<number>
+  containerSize$: Observable<ContainerSize>
+  gridHighlight$: Observable<ComputedDatumGrid[]>
+  
+  isSeriesSeprate$: Observable<boolean>
+  gridContainerPosition$: Observable<ContainerPositionScaled[]>
+  gridAxesSize$: Observable<ContainerSize> // 軸轉後的尺寸
+  gridAxesContainerSize$: Observable<ContainerSize> // 軸轉後的container尺寸
+  seriesLabels$: Observable<string[]>
+  SeriesDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
+  CategoryDataMap$: Observable<Map<string, ComputedDatumGrid[]>>
+  computedAxesData$: Observable<ComputedAxesDataGrid> // 有座標的資料
+  visibleComputedData$: Observable<ComputedDatumGrid[][]> // filter掉visible=false的資料
+  visibleComputedAxesData$: Observable<ComputedAxesDataGrid>
+  computedStackedData$: Observable<ComputedDatumGrid[][]>
+  categoryScaleDomainValue$: Observable<[number, number]>
+  filteredMinMaxValue$: Observable<[number, number]>
+  filteredStackedMinMaxValue$: Observable<[number, number]>
+  gridAxesTransform$: Observable<TransformData>
+  gridAxesReverseTransform$: Observable<TransformData>
+  gridGraphicTransform$: Observable<TransformData>
+  gridGraphicReverseScale$: Observable<[number, number][]>
+  zoomedCategoryAxis$: Observable<CategoryAxis>
+  // updateScaleDomain$: Subject<[number, number | "max"]> // zoom後要更新categoryAxis的scaleDomain
+}
+
+// plugin params
+// export type SeriesDirection = 'row' | 'column' // default: 'row'
+
+// export interface ValueAxis {
+//   position: AxisPosition
+//   /* scaleDomain說明
+//    * [0] => min: 最小值, 'auto': 取最小值，但若大於0則保持為0
+//    * [1] => max: 最大值, 'auto': 取最大值，但若小於0則保持為0
+//    */ 
+//   scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
+//   scaleRange: [number, number]
+//   label: string
+// }
+
+// export interface CategoryAxis {
+//   position: AxisPosition
+//   scaleDomain: [number, number | 'max']
+//   scalePadding: number
+//   label: string
+// }
+
+export interface SeriesPlotPluginParams {
+  styles: GraphicStyles
+  visibleFilter: VisibleFilter<'grid'>
+  container: Container
+  // seriesDirection: SeriesDirection
+  // rowLabels: string[]
+  // columnLabels: string[]
+  valueAxis: ValueAxis
+  categoryAxis: CategoryAxis
+  separateSeries: boolean
+  datasetIndex: number
+}
+
+// all layer params
+export interface SeriesPlotAllLayerParams {
+  Lines: LinesParams
+  LineAreas: LineAreasParams
+  Dots: DotsParams
+  CategoryAux: CategoryAuxParams
+  Bars: BarsParams
+  BarsPN: BarsPNParams
+  StackedBars: StackedBarsParams
+  BarsTriangle: BarsTriangleParams
+  CategoryAxis: CategoryAxisParams
+  ValueAxis: ValueAxisParams
+  StackedValueAxis: StackedValueAxisParams
+  CategoryZoom: CategoryZoomParams
+}
+
+// -- layer params --
+export interface LinesParams {
+  lineCurve: string
+  lineWidth: number
+  // labelFn: (d: ComputedDatumSeries) => string
+  // labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
+  // labelStyleFn: (d: ComputedDatumSeries) => string
+  // labelFontSizeFn: (d: ComputedDatumSeries) => number
+  // labelColorFn: (d: ComputedDatumSeries) => string
+  // labelPadding: number
+}
+
+export interface LineAreasParams {
+  lineCurve: string
+  linearGradientOpacity: [number, number]
+}
+
+export interface DotsParams {
+  radius: number
+  fillColorType: ColorType
+  strokeColorType: ColorType
+  strokeWidth: number
+  // strokeWidthWhileHighlight: number
+  onlyShowHighlighted: boolean
+}
+
+export interface CategoryAuxParams {
+  showLine: boolean
+  showLabel: boolean
+  lineDashArray: string
+  lineColorType: ColorType
+  labelColorType: ColorType
+  labelTextColorType: ColorType
+  labelTextFormat: string | ((text: any) => string)
+  labelPadding: number
+  labelRotate: number
+}
+
+export interface BarsParams {
+  // barType: BarType
+  barWidth: number
+  barPadding: number
+  barGroupPadding: number // 群組和群組間的間隔
+  barRadius: number | boolean
+}
+
+export interface BarsPNParams extends BarsParams {}
+
+export interface StackedBarsParams {
+  barWidth: number
+  barGroupPadding: number
+  barRadius: number | boolean
+}
+
+export interface BarsTriangleParams {
+  barWidth: number
+  barPadding: number
+  barGroupPadding: number // 群組和群組間的間隔
+  linearGradientOpacity: [number, number]
+}
+
+export interface CategoryAxisParams {
+  // xLabel: string
+  // labelAnchor: 'start' | 'end'
+  labelOffset: [number, number]
+  labelColorType: ColorType
+  axisLineVisible: boolean
+  axisLineColorType: ColorType
+  ticks: number | null | 'all'
+  tickFormat: string | ((text: any) => string | d3.NumberValue)
+  tickLineVisible: boolean
+  tickPadding: number
+  tickFullLine: boolean
+  tickFullLineDasharray: string
+  tickColorType: ColorType
+  // axisLineColor: string
+  // axisLabelColor: string
+  tickTextRotate: number
+  tickTextColorType: ColorType
+}
+
+export interface ValueAxisParams {
+  // xLabel: string
+  // labelAnchor: 'start' | 'end'
+  labelOffset: [number, number]
+  labelColorType: ColorType
+  axisLineVisible: boolean
+  axisLineColorType: ColorType
+  ticks: number | null
+  tickFormat: string | ((text: d3.NumberValue) => string | d3.NumberValue)
+  tickLineVisible: boolean
+  tickPadding: number
+  tickFullLine: boolean
+  tickFullLineDasharray: string
+  tickColorType: ColorType
+  // axisLineColor: string
+  // axisLabelColor: string
+  tickTextRotate: number
+  tickTextColorType: ColorType
+}
+
+export interface StackedValueAxisParams extends ValueAxisParams {}
+
+export interface CategoryZoomParams {
+
+}

package/src/plugins/Tooltip/Tooltip.ts

@@ -0,0 +1,159 @@
+import {
+  shareReplay,
+  map, 
+  combineLatest,
+  debounceTime} from 'rxjs'
+
+import type { TooltipExtendContext, TooltipPluginParams, TooltipAllLayerParams } from './types'
+import { defineSVGPlugin } from '@orbcharts/core'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_SERIES_TOOLTIP_PLUGIN_PARAMS } from './defaults'
+import {
+  layoutObservable,
+  fontSizePxObservable,
+  seriesDataMapObservable,
+  categoryDataMapObservable
+} from '../../utils/observables'
+import {
+  seriesComputedDataObservable,
+} from './contextObservables'
+import { Tooltip as TooltipLayer } from './layers/Tooltip'
+
+const seriesTooltip = new TooltipLayer()
+
+export const Tooltip = defineSVGPlugin<
+  TooltipExtendContext,
+  TooltipPluginParams,
+  TooltipAllLayerParams
+>({
+  name: 'Tooltip',
+  defaultParams: DEFAULT_SERIES_TOOLTIP_PLUGIN_PARAMS,
+  layers: [seriesTooltip],
+  setup: (props) => {
+
+    const selectedSeriesData$ = combineLatest({
+      seriesData: props.context.seriesData$,
+      datasetIndex: props.pluginParams$.pipe(
+        map(pluginParams => pluginParams.datasetIndex)
+      )
+    }).pipe(
+      debounceTime(0),
+      map(({ seriesData, datasetIndex }) => seriesData[datasetIndex]),
+      shareReplay(1)
+    )
+
+    const layout$ = layoutObservable({
+      size$: props.context.size$,
+      padding$: props.pluginParams$.pipe(
+        map(pluginParams => pluginParams.styles.padding)
+      )
+    }).pipe(
+      shareReplay(1)
+    )
+
+    // const layoutSubscription = layout$.subscribe(layout => {
+    //   props.svg.setAttribute('transform', `translate(${layout.left}, ${layout.top})`)
+    // })
+
+    const computedData$ = seriesComputedDataObservable({
+      selectedSeriesData$,
+      pluginParams$: props.pluginParams$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const fontSizePx$ = fontSizePxObservable(props.context.theme$).pipe(
+      shareReplay(1)
+    )
+
+    const datumList$ = computedData$.pipe(
+      map(d => d.flat())
+    ).pipe(
+      shareReplay(1)
+    )
+
+    const SeriesDataMap$ = seriesDataMapObservable({
+      datumList$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const CategoryDataMap$ = categoryDataMapObservable({
+      datumList$: datumList$
+    }).pipe(
+      shareReplay(1)
+    )
+
+    const extendsContext: TooltipExtendContext = {
+      layout$,
+      fontSizePx$,
+      SeriesDataMap$,
+      CategoryDataMap$,
+    }
+
+    props.context = {
+      ...props.context,
+      ...extendsContext,
+    }
+    
+    return () => {
+      // layoutSubscription.unsubscribe()
+    }
+  },
+  validator: (params: TooltipPluginParams) => {
+    const result = validateObject(params, {
+      styles: {
+        toBeTypes: ['object'],
+      },
+      datasetIndex: {
+        toBeTypes: ['number']
+      }
+    })
+    if (params.styles) {
+      const stylesResult = validateObject(params.styles, {
+        padding: {
+          toBeTypes: ['object']
+        },
+        highlightTarget: {
+          toBeTypes: ['string']
+        },
+        highlightDefault: {
+          toBeTypes: ['string', 'null']
+        },
+        unhighlightedOpacity: {
+          toBeTypes: ['number']
+        },
+        transitionDuration: {
+          toBeTypes: ['number']
+        },
+        transitionEase: {
+          toBeTypes: ['string']
+        }
+      })
+      if (stylesResult.status === 'error') {
+        return stylesResult
+      }
+      if (params.styles.padding) {
+        const paddingResult = validateObject(params.styles.padding, {
+          top: {
+            toBeTypes: ['number']
+          },
+          right: {
+            toBeTypes: ['number']
+          },
+          bottom: {
+            toBeTypes: ['number']
+          },
+          left: {
+            toBeTypes: ['number']
+          }
+        })
+        if (paddingResult.status === 'error') {
+          return paddingResult
+        }
+      }
+    }
+    
+    return result
+  },
+})

package/src/plugins/Tooltip/contextObservables.ts

@@ -0,0 +1,55 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  debounceTime,
+  filter,
+  map,
+  merge,
+  takeUntil,
+  shareReplay,
+  switchMap,
+  Subject,
+  Observable
+} from 'rxjs'
+import type {
+  ModelDataSeries,
+} from '@orbcharts/core'
+import type { TooltipPluginParams } from './types'
+import type { ComputedDatumSeries } from '../../types/ComputedData'
+
+export const seriesComputedDataObservable = ({ selectedSeriesData$, pluginParams$ }: {
+  selectedSeriesData$: Observable<ModelDataSeries>
+  pluginParams$: Observable<TooltipPluginParams>
+}): Observable<ComputedDatumSeries[][]> => {
+  return combineLatest({
+    selectedSeriesData: selectedSeriesData$,
+    pluginParams: pluginParams$
+  }).pipe(
+    debounceTime(0),
+    map(({ selectedSeriesData, pluginParams }) => {
+      return selectedSeriesData
+          // 攤為一維陣列
+          .flat()
+          // 排序後給 seq
+          .sort(pluginParams.sort ?? undefined)
+          .map((datum, index) => {
+            const visibleFilter = pluginParams.visibleFilter
+            return {
+              ...datum,
+              visible: visibleFilter ? visibleFilter(datum) : true,
+              seq: index
+            }
+          })
+          // 恢復原排序
+          .sort((a, b) => a.index - b.index)
+          // 依seriesIndex分組（二維陣列）
+          .reduce((acc, datum) => {
+            if (!acc[datum.seriesIndex]) {
+              acc[datum.seriesIndex] = []
+            }
+            acc[datum.seriesIndex].push(datum)
+            return acc
+          }, [])
+      })
+  )
+}