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

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

@@ -0,0 +1,92 @@
+import * as d3 from 'd3'
+import {
+  Subject,
+  Observable,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import type { CategoryAxisParams, SeriesPlotPluginParams } from '../types'
+import { DEFAULT_CATEGORY_AXIS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_INFO } from '../../../const/layerIndex'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+import { createBaseCategoryAxis } from '../../../baseLayers/BaseCategoryAxis'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'CategoryAxis'
+
+export const CategoryAxis = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, CategoryAxisParams>({
+  name: layerName,
+  defaultParams: DEFAULT_CATEGORY_AXIS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_INFO,
+  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: {
+        toBe: 'number | null | "all"',
+        test: (value: any) => {
+          return value === null || value === 'all' || typeof value === 'number'
+        }
+      },
+    })
+    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 unsubscribeBaseGroupAxis = createBaseCategoryAxis({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName,
+      computedData$: context.computedData$,
+      baseCategoryAxisParams$: layerParams$,
+      gridAxesTransform$: context.gridAxesTransform$,
+      gridAxesReverseTransform$: context.gridAxesReverseTransform$,
+      gridAxesSize$: context.gridAxesSize$,
+      gridContainerPosition$: context.gridContainerPosition$,
+      isSeriesSeprate$: context.isSeriesSeprate$,
+      fontSizePx$: context.fontSizePx$,
+      categoryAxis$: context.zoomedCategoryAxis$,
+      valueAxis$: pluginParams$.pipe(map(params => params.valueAxis)),
+      styles$: pluginParams$.pipe(
+        map(params => params.styles),
+      ),
+      theme$: context.theme$,
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseGroupAxis()
+    }
+  }
+})

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

@@ -0,0 +1,233 @@
+import * as d3 from 'd3'
+import {
+  Observable,
+  combineLatest,
+  switchMap,
+  distinctUntilChanged,
+  first,
+  map, 
+  takeUntil,
+  debounceTime,
+  Subject
+} from 'rxjs'
+import type { CategoryZoomParams, SeriesPlotPluginParams } from '../types'
+import { DEFAULT_CATEGORY_ZOOM_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_ROOT } from '../../../const/layerIndex'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+import { createValueToAxisScale } from '../../../utils/d3Scale'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'CategoryZoom'
+
+export const CategoryZoom = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, CategoryZoomParams>({
+  name: layerName,
+  defaultParams: DEFAULT_CATEGORY_ZOOM_PARAMS,
+  layerIndex: LAYER_INDEX_OF_ROOT,
+  initShow: false,
+  validator: (params) => {
+    return {
+      status: 'success',
+      columnName: '',
+      expectToBe: ''
+    }
+  },
+  setup: ({ svgG, pluginParams$, layerParams$, context }) => {
+    const destroy$ = new Subject()
+
+    // const rootSelection = d3.select(svgG.parentElement)
+    const rootSelection = d3.select(context.svg)
+
+    // const rootRectSelection: d3.Selection<SVGRectElement, any, any, any> = rootSelection
+    //   .append('rect')
+    //   .classed(rectClassName, true)
+    //   .attr('opacity', 0)
+
+    // 紀錄zoom最後一次的transform
+    let lastTransform = {
+      k: 1,
+      x: 0,
+      y: 0
+    }
+    // let lastDomain: [number, number] = [0, 0]
+
+    // context.layout$.pipe(
+    //   takeUntil(destroy$),
+    // ).subscribe(d => {
+    //   rootRectSelection
+    //     .attr('width', d.width)
+    //     .attr('height', d.height)
+    //     .attr('x', d.left)
+    //     .attr('y', d.top)
+    // })
+
+    const categoryMaxIndex$ = context.computedData$.pipe(
+      map(d => d[0] ? d[0].length - 1 : 0),
+      distinctUntilChanged()
+    )
+
+    // const fullDataFormatterEvent$: Subject<DataFormatterGrid> = new Subject()
+    // fullDataFormatterEvent$
+    //   .pipe(
+    //     takeUntil(destroy$),
+    //     debounceTime(50)
+    //   )
+    //   .subscribe(fullDataFormatter => {
+    //     store.fullDataFormatter$.next(fullDataFormatter)
+    //   })
+
+    const initCategoryAxis$ = pluginParams$.pipe(
+      map(d => d.categoryAxis),
+      // // 只用第一次資料來計算scale才不會造成每次變動都受到影響
+      // first()
+    )
+
+
+    const initGroupScale$ = combineLatest({
+      initCategoryAxis: initCategoryAxis$,
+      // fullDataFormatter: context.fullDataFormatter$,
+      categoryMaxIndex: categoryMaxIndex$,
+      layout: context.layout$,
+      axisSize: context.gridAxesSize$
+    }).pipe(
+      takeUntil(destroy$),
+      debounceTime(0),
+      map(data => {
+        // const categoryMin = 0
+        const categoryScaleDomainMin = data.initCategoryAxis.scaleDomain[0] - data.initCategoryAxis.scalePadding
+        const categoryScaleDomainMax = data.initCategoryAxis.scaleDomain[1] === 'max'
+          ? data.categoryMaxIndex + data.initCategoryAxis.scalePadding
+          : data.initCategoryAxis.scaleDomain[1] as number + data.initCategoryAxis.scalePadding
+
+        const categoryScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+          maxValue: data.categoryMaxIndex,
+          minValue: 0,
+          axisWidth: data.axisSize.width,
+          scaleDomain: [categoryScaleDomainMin, categoryScaleDomainMax],
+          scaleRange: [0, 1]
+        })
+
+        return categoryScale
+      })
+    )
+
+    combineLatest({
+      initGroupScale: initGroupScale$,
+      // initCategoryAxis: initCategoryAxis$,
+      // fullDataFormatter: fullDataFormatter$.pipe(first()), // 只用第一次資料來計算scale才不會造成每次變動都受到影響
+      pluginParams: pluginParams$,
+      categoryMaxIndex: categoryMaxIndex$,
+      // layout: context.layout$,
+      // axisSize: context.gridAxesSize$
+    }).pipe(
+      takeUntil(destroy$),
+      debounceTime(0),
+    ).subscribe(data => {
+      const categoryMinIndex = 0
+
+      const shadowScale = data.initGroupScale.copy()
+
+      const zoom = d3.zoom()
+        // .scaleExtent([1, data.categoryMaxIndex])
+        // .translateExtent([[0, 0], [data.layout.rootWidth, data.layout.rootWidth]])
+        .on("zoom", function zoomed(event) {
+          // debugger
+          // console.log('event', event)
+          const t = event.transform;
+
+          // if (event.sourceEvent.type === 'mousemove') {
+          //   // 當進行平移時，反向計算 x 軸
+          //   const dx = event.transform.x - currentTransform.x; // 本次平移增量
+          //   const reversedX = currentTransform.x - dx;         // 反向累積平移
+          //   // 更新變換狀態
+          //   currentTransform = d3.zoomIdentity
+          //     .translate(reversedX, event.transform.y)
+          //     .scale(event.transform.k);
+          // } else {
+          //   // 縮放操作：只更新縮放比例
+          //   currentTransform = d3.zoomIdentity
+          //     .translate(currentTransform.x, currentTransform.y)
+          //     .scale(event.transform.k);
+          // }
+          // console.log('currentTransform', currentTransform)
+
+          // console.log('t.x', t.x)
+          const mapGroupindex = (d: number) => {
+            const n = Math.round(d)
+            return Math.min(data.categoryMaxIndex, Math.max(categoryMinIndex, n));
+          }
+          
+          const zoomedDomain = data.pluginParams.categoryAxis.position === 'bottom' || data.pluginParams.categoryAxis.position === 'top'
+            ? t.rescaleX(shadowScale)
+              .domain()
+              .map(mapGroupindex)
+            : t.rescaleY(shadowScale)
+            .domain()
+            .map(mapGroupindex)
+
+
+          // domain超過極限值
+          if (zoomedDomain[0] <= categoryMinIndex && zoomedDomain[1] >= data.categoryMaxIndex) {
+            // 繼續縮小
+            if (t.k < lastTransform.k) {
+              // 維持前一次的transform
+              t.k = lastTransform.k
+              t.x = lastTransform.x
+              t.y = lastTransform.y
+            }
+          // domain間距小於1
+          } else if ((zoomedDomain[1] - zoomedDomain[0]) <= 1) {
+            // 繼續放大
+            if (t.k > lastTransform.k) {
+              // 維持前一次的transform
+              t.k = lastTransform.k
+              t.x = lastTransform.x
+              t.y = lastTransform.y
+            }
+          }
+
+          // 紀錄transform
+          lastTransform.k = t.k
+          lastTransform.x = t.x
+          lastTransform.y = t.y
+
+
+          // const newPluginParams: SeriesPlotPluginParams = {
+          //   ...data.pluginParams,
+          //   // grid: {
+          //     // ...data.fullDataFormatter.grid,
+          //     categoryAxis: {
+          //       ...data.pluginParams.categoryAxis,
+          //       scaleDomain: zoomedDomain
+          //     }
+          //   // }
+          // }
+          
+          // pluginParams$.next(newPluginParams)
+          // context.updateScaleDomain$.next(zoomedDomain as [number, number | "max"])
+          context.eventTrigger$.next({
+            eventName: 'zoom',
+            pluginName,
+            layerName,
+            target: null,
+            data: {
+              scaleDomain: zoomedDomain
+            }
+          })
+        })
+
+      // 傳入外層selection
+      // subject.selection.call(zoom as any)
+      rootSelection.call(zoom)
+
+    })
+    
+    return () => {
+      destroy$.next(undefined)
+      // rootRectSelection.remove()
+      
+      rootSelection.call(d3.zoom().on('zoom', null))
+    }
+  }
+})

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

@@ -0,0 +1,91 @@
+import * as d3 from 'd3'
+import {
+  Subject,
+  Observable,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import type { DotsParams, SeriesPlotPluginParams } from '../types'
+import { DEFAULT_DOTS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../../const/layerIndex'
+import { createBaseDots } from '../../../baseLayers/BaseDots'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'Dots'
+
+export const Dots = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, DotsParams>({
+  name: layerName,
+  defaultParams: DEFAULT_DOTS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  initShow: false,
+  validator: (params) => {
+    const result = validateObject(params, {
+      radius: {
+        toBeTypes: ['number']
+      },
+      fillColorType: {
+        toBeOption: 'ColorType',
+      },
+      strokeColorType: {
+        toBeOption: 'ColorType',
+      },
+      strokeWidth: {
+        toBeTypes: ['number']
+      },
+      // strokeWidthWhileHighlight: {
+      //   toBeTypes: ['number']
+      // },
+      onlyShowHighlighted: {
+        toBeTypes: ['boolean']
+      }
+    })
+    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 unsubscribeBaseDots = createBaseDots({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName,
+      computedData$: context.computedData$,
+      // visibleComputedData$: context.visibleComputedData$,
+      visibleComputedAxesData$: context.visibleComputedAxesData$,
+      seriesLabels$: context.seriesLabels$,
+      SeriesDataMap$: context.SeriesDataMap$,
+      CategoryDataMap$: context.CategoryDataMap$,
+      baseDotsParams$: layerParams$,
+      styles$: pluginParams$.pipe(
+        map(params => params.styles),
+      ),
+      theme$: context.theme$,
+      gridAxesTransform$: context.gridAxesTransform$,
+      gridGraphicTransform$: context.gridGraphicTransform$,
+      gridGraphicReverseScale$: context.gridGraphicReverseScale$,
+      gridAxesSize$: context.gridAxesSize$,
+      gridHighlight$: context.gridHighlight$,
+      gridContainerPosition$: context.gridContainerPosition$,
+      // isSeriesSeprate$: context.isSeriesSeprate$,
+      eventTrigger$: context.eventTrigger$,
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseDots()
+    }
+  }
+})

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

@@ -0,0 +1,82 @@
+import * as d3 from 'd3'
+import { map, Subject, takeUntil } from 'rxjs'
+import type { LineAreasParams, SeriesPlotPluginParams } from '../types'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_LINE_AREAS_PARAMS } from '../defaults'
+import { createBaseLineAreas } from '../../../baseLayers/BaseLineAreas'
+import { LAYER_INDEX_OF_GRAPHIC_GROUND } from '../../../const/layerIndex'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'LineAreas'
+
+
+export const LineAreas = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, LineAreasParams>({
+  name: layerName,
+  defaultParams: DEFAULT_LINE_AREAS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC_GROUND,
+  initShow: false,
+  validator: (params) => {
+    const result = validateObject(params, {
+      lineCurve: {
+        toBeTypes: ['string']
+      },
+      linearGradientOpacity: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+    })
+    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 unsubscribeBaseBars = createBaseLineAreas({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName,
+      computedData$: context.computedData$,
+      // visibleComputedData$: context.visibleComputedData$,
+      // computedAxesData$: context.computedAxesData$,
+      visibleComputedAxesData$: context.visibleComputedAxesData$,
+      seriesLabels$: context.seriesLabels$,
+      SeriesDataMap$: context.SeriesDataMap$,
+      CategoryDataMap$: context.CategoryDataMap$,
+      baseLineAreasParams$: layerParams$,
+      pluginParams$,
+      styles$: pluginParams$.pipe(
+        map(params => params.styles),
+      ),
+      gridAxesTransform$: context.gridAxesTransform$,
+      gridGraphicTransform$: context.gridGraphicTransform$,
+      gridAxesSize$: context.gridAxesSize$,
+      gridHighlight$: context.gridHighlight$,
+      gridContainerPosition$: context.gridContainerPosition$,
+      allContainerPosition$: context.gridContainerPosition$,
+      layout$: context.layout$,
+      eventTrigger$: context.eventTrigger$,
+    })
+
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseBars()
+    }
+  }
+})

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

@@ -0,0 +1,75 @@
+import * as d3 from 'd3'
+import { map, Subject, takeUntil } from 'rxjs'
+import type { LinesParams, SeriesPlotPluginParams } from '../types'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+import { DEFAULT_LINES_PARAMS } from '../defaults'
+import { createBaseLines } from '../../../baseLayers/BaseLines'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../../const/layerIndex'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'Lines'
+
+export const Lines = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, LinesParams>({
+  name: layerName,
+  defaultParams: DEFAULT_LINES_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  initShow: false,
+  validator: (params) => {
+    const result = validateObject(params, {
+      lineCurve: {
+        toBeTypes: ['string']
+      },
+      lineWidth: {
+        toBeTypes: ['number']
+      },
+    })
+    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 unsubscribeBaseBars = createBaseLines({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName,
+      computedData$: context.computedData$,
+      // computedAxesData$: context.computedAxesData$,
+      // visibleComputedData$: context.visibleComputedData$,
+      visibleComputedAxesData$: context.visibleComputedAxesData$,
+      seriesLabels$: context.seriesLabels$,
+      SeriesDataMap$: context.SeriesDataMap$,
+      CategoryDataMap$: context.CategoryDataMap$,
+      baseLinesParams$: layerParams$,
+      pluginParams$,
+      styles$: pluginParams$.pipe(
+        map(params => params.styles),
+      ),
+      gridAxesTransform$: context.gridAxesTransform$,
+      gridGraphicTransform$: context.gridGraphicTransform$,
+      gridAxesSize$: context.gridAxesSize$,
+      gridHighlight$: context.gridHighlight$,
+      gridContainerPosition$: context.gridContainerPosition$,
+      allContainerPosition$: context.gridContainerPosition$,
+      layout$: context.layout$,
+      eventTrigger$: context.eventTrigger$
+    })
+
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseBars()
+    }
+  }
+})

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

@@ -0,0 +1,85 @@
+import * as d3 from 'd3'
+import {
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil,
+  Subject,
+  Observable } from 'rxjs'
+import type { SeriesPlotPluginParams, StackedBarsParams } from '../types'
+import { DEFAULT_STACKED_BARS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../../const/layerIndex'
+import { createBaseStackedBars } from '../../../baseLayers/BaseStackedBars'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'StackedBars'
+
+export const StackedBars = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, StackedBarsParams>({
+  name: layerName,
+  defaultParams: DEFAULT_STACKED_BARS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  initShow: false,
+  validator: (params) => {
+    const result = validateObject(params, {
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barGroupPadding: {
+        toBeTypes: ['number']
+      },
+      barRadius: {
+        toBeTypes: ['number', 'boolean']
+      }
+    })
+    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 unsubscribeBaseBars = createBaseStackedBars({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName,
+      computedData$: context.computedData$,
+      computedAxesData$: context.computedAxesData$,
+      visibleComputedData$: context.visibleComputedData$,
+      visibleComputedAxesData$: context.visibleComputedAxesData$,
+      filteredMinMaxValue$: context.filteredMinMaxValue$,
+      filteredStackedMinMaxValue$: context.filteredStackedMinMaxValue$,
+      seriesLabels$: context.seriesLabels$,
+      SeriesDataMap$: context.SeriesDataMap$,
+      CategoryDataMap$: context.CategoryDataMap$,
+      baseStackedBarParams$: layerParams$,
+      pluginParams$,
+      styles$: pluginParams$.pipe(
+        map(params => params.styles),
+      ),
+      gridAxesTransform$: context.gridAxesTransform$,
+      gridGraphicTransform$: context.gridGraphicTransform$,
+      gridGraphicReverseScale$: context.gridGraphicReverseScale$,
+      gridAxesSize$: context.gridAxesSize$,
+      gridHighlight$: context.gridHighlight$,
+      gridContainerPosition$: context.gridContainerPosition$,
+      isSeriesSeprate$: context.isSeriesSeprate$,
+      eventTrigger$: context.eventTrigger$,
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseBars()
+    }
+  }
+})