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

package/src/plugins/SeriesPlot/defaults.ts

@@ -0,0 +1,142 @@
+import type { BarsParams, BarsTriangleParams, DotsParams, SeriesPlotPluginParams, CategoryAuxParams, CategoryAxisParams, CategoryZoomParams, LineAreasParams, LinesParams, StackedBarsParams, StackedValueAxisParams, ValueAxisParams } from './types'
+import { DEFAULT_CATEGORY_AXIS, DEFAULT_CONTAINER, DEFAULT_VALUE_AXIS } from '../../const/sharedPluginParams'
+
+export const DEFAULT_SERIES_PLOT_PARAMS: SeriesPlotPluginParams = {
+  styles: {
+    padding: {
+      top: 20,
+      right: 60,
+      bottom: 80,
+      left: 60
+    },
+    highlightTarget: 'datum',
+    highlightDefault: null,
+    unhighlightedOpacity: 0.3,
+    transitionDuration: 800,
+    transitionEase: 'easeCubic'
+  },
+  visibleFilter: (datum) => true,
+  container: { ...DEFAULT_CONTAINER },
+  valueAxis: { ...DEFAULT_VALUE_AXIS },
+  categoryAxis: { ...DEFAULT_CATEGORY_AXIS},
+  separateSeries: false,
+  datasetIndex: 0
+}
+DEFAULT_SERIES_PLOT_PARAMS.visibleFilter.toString = () => '(datum) => true'
+
+export const DEFAULT_LINES_PARAMS: LinesParams = {
+  lineCurve: 'curveLinear',
+  lineWidth: 2
+}
+
+export const DEFAULT_LINE_AREAS_PARAMS: LineAreasParams = {
+  lineCurve: 'curveLinear',
+  linearGradientOpacity: [1, 0]
+}
+
+export const DEFAULT_DOTS_PARAMS: DotsParams = {
+  radius: 4,
+  fillColorType: 'background',
+  strokeColorType: 'data',
+  strokeWidth: 2,
+  // strokeWidthWhileHighlight: 3,
+  onlyShowHighlighted: false
+}
+
+export const DEFAULT_CATEGORY_AUX_PARAMS: CategoryAuxParams = {
+  showLine: true,
+  showLabel: true,
+  lineDashArray: '3, 3',
+  lineColorType: 'primary',
+  labelColorType: 'primary',
+  labelTextColorType: 'background',
+  labelTextFormat: text => text,
+  labelPadding: 20,
+  labelRotate: 0
+}
+DEFAULT_CATEGORY_AUX_PARAMS.labelTextFormat.toString = () => `text => text`
+
+export const DEFAULT_BARS_PARAMS: BarsParams = {
+  // barType: 'rect',
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 40,
+  barRadius: false,
+}
+
+export const DEFAULT_BARS_DIVERGING_PARAMS: BarsParams = {
+  ...DEFAULT_BARS_PARAMS
+}
+
+export const DEFAULT_STACKED_BARS_PARAMS: StackedBarsParams = {
+  barWidth: 0,
+  barGroupPadding: 10,
+  barRadius: false,
+}
+
+export const DEFAULT_BARS_TRIANGLE_PARAMS: BarsTriangleParams = {
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 20,
+  linearGradientOpacity: [1, 0]
+}
+
+export const DEFAULT_CATEGORY_AXIS_PARAMS: CategoryAxisParams = {
+  // labelAnchor: 'start',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: true,
+  axisLineColorType: 'primary',
+  ticks: 'all',
+  tickFormat: text => text,
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: false,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+}
+DEFAULT_CATEGORY_AXIS_PARAMS.tickFormat.toString = () => `text => text`
+
+export const DEFAULT_VALUE_AXIS_PARAMS: ValueAxisParams = {
+  // labelAnchor: 'end',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: false,
+  axisLineColorType: 'primary',
+  ticks: null,
+  // tickFormat: ',.0f',
+  // tickFormat: v => v,
+  tickFormat: num => {
+    if (num === null || Number.isNaN(num) == true) {
+      return num || 0
+    }
+    const parts = num.toString().split('.')
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    return parts.join('.')
+  },
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: true,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary'
+}
+DEFAULT_VALUE_AXIS_PARAMS.tickFormat.toString = () => `num => {
+  if (num === null || Number.isNaN(num) == true) {
+    return num || 0
+  }
+  const parts = num.toString().split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return parts.join('.')
+}`
+
+export const DEFAULT_STACKED_VALUE_AXIS_PARAMS: StackedValueAxisParams = {
+  ...DEFAULT_VALUE_AXIS_PARAMS
+}
+
+export const DEFAULT_CATEGORY_ZOOM_PARAMS: CategoryZoomParams = {
+
+}

package/src/plugins/SeriesPlot/index.ts

@@ -0,0 +1,3 @@
+export { SeriesPlot } from './SeriesPlot'
+export * from './defaults'
+export * from './types'

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

@@ -0,0 +1,84 @@
+import * as d3 from 'd3'
+import {
+  Subject,
+  Observable,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import type { BarsParams, SeriesPlotPluginParams } from '../types'
+import { DEFAULT_BARS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../../const/layerIndex'
+import { createBaseBars } from '../../../baseLayers/BaseBars'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'Bars'
+
+export const Bars = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, BarsParams>({
+  name: layerName,
+  defaultParams: DEFAULT_BARS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  initShow: true,
+  validator: (params) => {
+    const result = validateObject(params, {
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barPadding: {
+        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 = createBaseBars({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName,
+      computedData$: context.computedData$,
+      visibleComputedData$: context.visibleComputedData$,
+      visibleComputedAxesData$: context.visibleComputedAxesData$,
+      seriesLabels$: context.seriesLabels$,
+      SeriesDataMap$: context.SeriesDataMap$,
+      CategoryDataMap$: context.CategoryDataMap$,
+      baseBarsParams$: layerParams$,
+      gridAxesTransform$: context.gridAxesTransform$,
+      gridGraphicTransform$: context.gridGraphicTransform$,
+      gridGraphicReverseScale$: context.gridGraphicReverseScale$,
+      gridAxesSize$: context.gridAxesSize$,
+      gridHighlight$: context.gridHighlight$,
+      gridContainerPosition$: context.gridContainerPosition$,
+      isSeriesSeprate$: context.isSeriesSeprate$,
+      styles$: pluginParams$.pipe(
+        map(params => params.styles),
+      ),
+      eventTrigger$: context.eventTrigger$
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseBars()
+    }
+  }
+})

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

@@ -0,0 +1,85 @@
+import * as d3 from 'd3'
+import {
+  Subject,
+  Observable,
+  of,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  takeUntil
+} from 'rxjs'
+import type { BarsParams, SeriesPlotPluginParams } from '../types'
+import { DEFAULT_BARS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_GRAPHIC } from '../../../const/layerIndex'
+import { createBaseBars } from '../../../baseLayers/BaseBars'
+import { defineSVGLayer } from '@orbcharts/core'
+import { SeriesPlotExtendContext } from '../types'
+import { validateObject } from '@orbcharts/core'
+
+const pluginName = 'SeriesPlot'
+const layerName = 'BarsPN'
+
+export const Bars = defineSVGLayer<SeriesPlotExtendContext, SeriesPlotPluginParams, BarsParams>({
+  name: layerName,
+  defaultParams: DEFAULT_BARS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_GRAPHIC,
+  initShow: false,
+  validator: (params) => {
+    const result = validateObject(params, {
+      barWidth: {
+        toBeTypes: ['number']
+      },
+      barPadding: {
+        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 = createBaseBars({
+      selection: d3.select(svgG),
+      pluginName,
+      layerName,
+      computedData$: context.computedData$,
+      visibleComputedData$: context.visibleComputedData$,
+      visibleComputedAxesData$: context.visibleComputedAxesData$,
+      seriesLabels$: context.seriesLabels$,
+      SeriesDataMap$: context.SeriesDataMap$,
+      CategoryDataMap$: context.CategoryDataMap$,
+      baseBarsParams$: layerParams$,
+      gridAxesTransform$: context.gridAxesTransform$,
+      gridGraphicTransform$: context.gridGraphicTransform$,
+      gridGraphicReverseScale$: context.gridGraphicReverseScale$,
+      gridAxesSize$: context.gridAxesSize$,
+      gridHighlight$: context.gridHighlight$,
+      gridContainerPosition$: context.gridContainerPosition$,
+      isSeriesSeprate$: of(true), // hack: 永遠為true，可以強制讓每組series的bars的x位置都是一樣的
+      styles$: pluginParams$.pipe(
+        map(params => params.styles),
+      ),
+      eventTrigger$: context.eventTrigger$
+    })
+
+    return () => {
+      destroy$.next(undefined)
+      unsubscribeBaseBars()
+    }
+  }
+})

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

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