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

package/src/plugins/ScatterPlot/layers/XYAxes.ts

@@ -0,0 +1,205 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  of,
+  map,
+  switchMap,
+  debounceTime,
+  takeUntil,
+  distinctUntilChanged,
+  Observable,
+  Subject,
+  iif
+} from 'rxjs'
+import type { ScatterPlotPluginParams, ScatterPlotExtendContext, XYAxesParams, ComputedXYDataMultivariate } from '../types'
+import { defineSVGLayer } from '@orbcharts/core'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_X_Y_AUX_PARAMS, DEFAULT_X_Y_AXES_PARAMS } from "../defaults"
+import { LAYER_INDEX_OF_AUX, LAYER_INDEX_OF_AXIS } from '../../../const/layerIndex'
+import { createBaseXAxis } from '../../../baseLayers/BaseXAxis'
+import { createBaseYAxis } from '../../../baseLayers/BaseYAxis'
+
+const pluginName = 'ScatterPlot'
+const layerName = 'XYAxes'
+
+export const XYAxes = defineSVGLayer<ScatterPlotExtendContext, ScatterPlotPluginParams, XYAxesParams>({
+  name: layerName,
+  defaultParams: DEFAULT_X_Y_AXES_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  initShow: true,
+  validator: (params) => {
+    const result = validateObject(params, {
+      xAxis: {
+        toBeTypes: ['object']
+      },
+      yAxis: {
+        toBeTypes: ['object']
+      }
+    })
+    if (params.xAxis) {
+      const forceResult = validateObject(params.xAxis, {
+        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',
+        },
+        tickTextColorType: {
+          toBeOption: 'ColorType',
+        }
+      })
+      if (forceResult.status === 'error') {
+        return forceResult
+      }
+    }
+    if (params.yAxis) {
+      const forceResult = validateObject(params.yAxis, {
+        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',
+        },
+        tickTextColorType: {
+          toBeOption: 'ColorType',
+        }
+      })
+      if (forceResult.status === 'error') {
+        return forceResult
+      }
+    }
+    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 xAxisFullParams$ = layerParams$.pipe(
+      takeUntil(destroy$),
+      map(layerParams => layerParams.xAxis),
+      distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
+    )
+
+    const yAxisFullParams$ = layerParams$.pipe(
+      takeUntil(destroy$),
+      map(layerParams => layerParams.yAxis),
+      distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
+    )
+
+    const unsubscribeBaseXAxis = createBaseXAxis({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName: `${layerName}-x`,
+      position$: of('bottom'),
+      transitionDuration$: of(100),
+      computedData$: context.computedData$,
+      layerParams$: xAxisFullParams$,
+      theme$: context.theme$,
+      xAxis$: context.zoomedXAxis$,
+      isSeriesSeprate$: context.isSeriesSeprate$,
+      containerPosition$: context.containerPosition$,
+      // layout$: context.layout$,
+      containerSize$: context.containerSize$,
+      xScale$: context.xScale$,
+      // filteredXYMinMaxData$: context.filteredXYMinMaxData$,
+      // xyMinMax$: context.xyMinMax$,
+    })
+
+    const unsubscribeBaseYAxis = createBaseYAxis({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName: `${layerName}-y`,
+      computedData$: context.computedData$,
+      layerParams$: yAxisFullParams$,
+      theme$: context.theme$,
+      yAxis$: context.yAxis$,
+      isSeriesSeprate$: context.isSeriesSeprate$,
+      containerPosition$: context.containerPosition$,
+      containerSize$: context.containerSize$,
+      yScale$: context.yScale$,
+      // filteredXYMinMaxData$: context.filteredXYMinMaxData$,
+      // xyMinMax$: context.xyMinMax$,
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseXAxis()
+      unsubscribeBaseYAxis()
+    }
+  }
+})

package/src/plugins/ScatterPlot/layers/XZoom.ts

@@ -0,0 +1,48 @@
+import * as d3 from 'd3'
+import {
+  map,
+  Subject
+} from 'rxjs'
+import type { ScatterPlotPluginParams, ScatterPlotExtendContext, XZoomParams, ComputedXYDataMultivariate } from '../types'
+import { defineSVGLayer } from '@orbcharts/core'
+// import { validateObject } from '@orbcharts/core'
+import { DEFAULT_X_Y_AUX_PARAMS, DEFAULT_X_ZOOM_PARAMS } from "../defaults"
+import { LAYER_INDEX_OF_AUX, LAYER_INDEX_OF_AXIS } from '../../../const/layerIndex'
+import { createBaseXZoom } from '../../../baseLayers/BaseXZoom'
+
+const pluginName = 'ScatterPlot'
+const layerName = 'XZoom'
+
+export const XZoom = defineSVGLayer<ScatterPlotExtendContext, ScatterPlotPluginParams, XZoomParams>({
+  name: layerName,
+  defaultParams: DEFAULT_X_ZOOM_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  initShow: true,
+  validator: (params) => {
+    return {
+      status: 'success',
+      columnName: '',
+      expectToBe: ''
+    }
+  },
+  setup: ({ svgG, pluginParams$, layerParams$, context }) => {
+
+    const destroy$ = new Subject()
+
+    const unsubscribeBaseXZoom = createBaseXZoom({
+      rootSelection: d3.select(context.svg),
+      pluginName,
+      layerName,
+      initXAxis$: pluginParams$.pipe(map(params => params.xAxis)),
+      initYAxis$: pluginParams$.pipe(map(params => params.yAxis)),
+      xyMinMax$: context.xyMinMax$,
+      layout$: context.layout$,
+      eventTrigger$: context.eventTrigger$,
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseXZoom()
+    }
+  }
+})

package/src/plugins/ScatterPlot/types.ts

@@ -0,0 +1,179 @@
+
+import { Observable, Subject } from 'rxjs'
+import type { ColorType, ModelDatumSeries, EventData } from '@orbcharts/core'
+import type { AxisPosition, ContainerPosition, ContainerPositionScaled, Container, GraphicStyles, Layout, VisibleFilter, XYAxis, CategoryAxis } from '../../types/PluginParams'
+import { ComputedDatumMultivariate  } from '../../types/ComputedData'
+import type { ArcScaleType, ContainerSize, Placement, TransformData } from '../../types/Common'
+
+// context
+export interface ComputedXYDatumMultivariate extends ComputedDatumMultivariate {
+  axisX: number
+  axisY: number
+}
+export type ComputedXYDataMultivariate = ComputedXYDatumMultivariate[][]
+
+export interface ScatterPlotExtendContext {
+  layout$: Observable<Layout>
+  computedData$: Observable<ComputedDatumMultivariate[][]>
+  fontSizePx$: Observable<number>
+  isSeriesSeprate$: Observable<boolean>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  containerSize$: Observable<ContainerSize>
+  highlight$: Observable<ComputedDatumMultivariate[]>
+  
+  seriesLabels$: Observable<string[]>
+  SeriesDataMap$: Observable<Map<string, ComputedDatumMultivariate[]>>
+  valueLabels$: Observable<string[]>
+  xyMinMax$: Observable<{ // xy
+    minX: number
+    maxX: number
+    minY: number
+    maxY: number
+  }>
+  xyValueIndex$: Observable<[number, number]> // xy
+  filteredXYMinMaxData$: Observable<{ // xy
+    datumList: ComputedXYDatumMultivariate[]
+    minXDatum: ComputedXYDatumMultivariate | null
+    maxXDatum: ComputedXYDatumMultivariate | null
+    minYDatum: ComputedXYDatumMultivariate | null
+    maxYDatum: ComputedXYDatumMultivariate | null
+  }>
+  visibleComputedData$: Observable<ComputedDatumMultivariate[][]>
+  visibleComputedRankingByIndexData$: Observable<ComputedDatumMultivariate[][]> // ranking
+  visibleComputedXYData$: Observable<ComputedXYDataMultivariate> // xy
+  graphicTransform$: Observable<TransformData>
+  graphicReverseScale$: Observable<[number, number][]>
+  xScale$: Observable<d3.ScaleLinear<number, number>>
+  // xSumScale$: Observable<d3.ScaleLinear<number, number>>
+  yScale$: Observable<d3.ScaleLinear<number, number>>
+  
+  zoomedXAxis$: Observable<XYAxis>
+  yAxis$: Observable<XYAxis>
+  
+}
+
+// plugin params
+export interface ScatterPlotPluginParams {
+  styles: GraphicStyles
+  visibleFilter: VisibleFilter<'grid'>
+  container: Container
+  xAxis: XYAxis
+  yAxis: XYAxis
+  separateSeries: boolean
+  datasetIndex: number
+}
+
+// all layer params
+export interface ScatterPlotAllLayerParams {
+  Scatter: ScatterParams
+  ScatterBubbles: ScatterBubblesParams
+  XYAux: XYAuxParams
+  XYAxes: XYAxesParams
+  XZoom: XZoomParams
+}
+
+// -- layer params --
+export interface OrdinalBubblesParams {
+  bubble: {
+    // radiusMin: number // 對應value最小值
+    // radiusMax: number // 對應value最大值
+    sizeAdjust: number
+    arcScaleType: 'area' | 'radius',
+    valueLinearOpacity: [number, number]
+  }
+  itemLabel: {
+    padding: number
+    // rotate: number
+    colorType: ColorType
+  }
+  axisLabel: {
+    offset: [number, number]
+    colorType: ColorType
+  }
+  rankingAmount: 'auto' | number
+}
+
+export interface ScatterParams {
+  radius: number
+  fillColorType: ColorType
+  strokeColorType: ColorType
+  strokeWidth: number
+}
+
+export interface ScatterBubblesParams {
+  // radius: number
+  fillColorType: ColorType
+  strokeColorType: ColorType
+  strokeWidth: number
+  valueLinearOpacity: [number, number]
+  arcScaleType: ArcScaleType
+  sizeAdjust: number
+}
+
+export interface XYAuxParams {
+  xAxis: {
+    showLine: boolean
+    showLabel: boolean
+    lineDashArray: string
+    lineColorType: ColorType
+    labelColorType: ColorType
+    labelTextColorType: ColorType
+    labelTextFormat: string | ((text: any) => string)
+    labelPadding: number
+    // labelRotate: number
+  }
+  yAxis: {
+    showLine: boolean
+    showLabel: boolean
+    lineDashArray: string
+    lineColorType: ColorType
+    labelColorType: ColorType
+    labelTextColorType: ColorType
+    labelTextFormat: string | ((text: any) => string)
+    labelPadding: number
+    // labelRotate: number
+  }
+}
+
+export interface XYAxesParams {
+  xAxis: {
+    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
+  }
+  yAxis: {
+    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 XZoomParams {
+
+}
+