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

package/src/baseLayers/BaseYAxis.ts

@@ -0,0 +1,371 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  debounceTime,
+  takeUntil,
+  shareReplay,
+  distinctUntilChanged,
+  Observable,
+  Subject } from 'rxjs'
+import type { BaseLayerFn } from '../types/BaseLayer'
+import type { Layout, GraphicStyles, ContainerPositionScaled, XYAxis } from '../types/PluginParams'
+import type { ComputedData, ComputedDatumMultivariate } from '../types/ComputedData'
+import type { BaseYAxisParams } from './types'
+import { createClassName, getColor, getColorScheme } from '../utils/orbchartsUtils'
+import { measureTextWidth } from '../utils/commonUtils'
+import { ColorType, Theme } from '@orbcharts/core'
+import { ContainerSize, Placement } from '../types'
+import { multivariateContainerSelectionsObservable } from '../utils/multivariateObservables'
+import { parseTickFormatValue } from '../utils/d3Utils'
+
+interface BaseYAxisContext {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  layerName: string
+  computedData$: Observable<ComputedData<'multivariate'>>
+  // filteredMinMaxValue$: Observable<[number, number]>
+  layerParams$: Observable<BaseYAxisParams>
+  yAxis$: Observable<XYAxis>
+  theme$: Observable<Theme>
+  isSeriesSeprate$: Observable<boolean>
+  containerPosition$: Observable<ContainerPositionScaled[]>
+  containerSize$: Observable<ContainerSize>
+  // layout$: Observable<Layout>
+  // filteredXYMinMaxData$: Observable<{
+  //   datumList: ComputedXYDatumMultivariate[];
+  //   minXDatum: ComputedXYDatumMultivariate | null;
+  //   maxXDatum: ComputedXYDatumMultivariate | null;
+  //   minYDatum: ComputedXYDatumMultivariate | null;
+  //   maxYDatum: ComputedXYDatumMultivariate | null;
+  // }>
+  yScale$: Observable<d3.ScaleLinear<number, number>>
+  // xyMinMax$: Observable<{
+  //   minX: number;
+  //   maxX: number;
+  //   minY: number;
+  //   maxY: number;
+  // }>
+}
+
+const defaultTickSize = 6
+
+const yTickTextAnchor = 'end'
+const yTickDominantBaseline = 'middle'
+const yAxisLabelAnchor = 'end'
+const yAxisLabelDominantBaseline = 'auto'
+
+function renderYAxisLabel ({ selection, yLabelClassName, layerParams, yAxis, theme }: {
+  selection: d3.Selection<SVGGElement, any, any, any>,
+  yLabelClassName: string
+  layerParams: BaseYAxisParams
+  yAxis: XYAxis
+  theme: Theme
+  // axisLabelAlign: TextAlign
+  // textReverseTransform: string,
+}) {
+  const offsetX = layerParams.tickPadding - layerParams.labelOffset[0]
+  const offsetY = layerParams.tickPadding + layerParams.labelOffset[1]
+  let labelX = - offsetX
+  let labelY = - offsetY
+
+  const axisLabelSelection = selection
+    .selectAll<SVGGElement, BaseYAxisParams>(`g.${yLabelClassName}`)
+    .data([layerParams])
+    .join('g')
+    .classed(yLabelClassName, true)
+    .each((d, i, g) => {
+      const text = d3.select(g[i])
+        .selectAll<SVGTextElement, BaseYAxisParams>(`text`)
+        .data([d])
+        .join(
+          enter => {
+            return enter
+              .append('text')
+              .style('font-weight', 'bold')
+          },
+          update => update,
+          exit => exit.remove()
+        )
+        .attr('text-anchor', yAxisLabelAnchor)
+        .attr('dominant-baseline', yAxisLabelDominantBaseline)
+        .attr('font-size', theme.fontSize)
+        .style('fill', getColor(layerParams.labelColorType, theme))
+        // .style('transform', textReverseTransform)
+        // 偏移使用 x, y 而非 transform 才不會受到外層 scale 變形影響
+        .attr('x', labelX)
+        .attr('y', labelY)
+        .text(d => yAxis.label)
+    })
+    // .attr('transform', d => `translate(0, ${layout.height})`)
+}
+
+function renderYAxis ({ selection, yAxisClassName, layerParams, containerSize, theme, yScale }: {
+  selection: d3.Selection<SVGGElement, any, any, any>,
+  yAxisClassName: string
+  layerParams: BaseYAxisParams
+  // tickTextAlign: TextAlign
+  containerSize: ContainerSize
+  theme: Theme,
+  yScale: d3.ScaleLinear<number, number>
+  // textReverseTransform: string,
+  // xyMinMax: {
+  //   minX: number;
+  //   maxX: number;
+  //   minY: number;
+  //   maxY: number;
+  // }
+}) {
+
+  const yAxisSelection = selection
+    .selectAll<SVGGElement, BaseYAxisParams>(`g.${yAxisClassName}`)
+    .data([layerParams])
+    .join('g')
+    .classed(yAxisClassName, true)
+
+  // const _yScale = d3.scaleLinear()
+  //   .domain([0, 150])
+  //   .range([416.5, 791.349])
+
+  // 刻度文字偏移
+  let tickPadding = layerParams.tickPadding
+
+  // 設定Y軸刻度
+  const yAxis = d3.axisLeft(yScale)
+    .scale(yScale)
+    .ticks(layerParams.ticks) // 刻度分段數量
+    .tickFormat(d => parseTickFormatValue(d, layerParams.tickFormat))
+    .tickSize(layerParams.tickFullLine == true
+      ? -containerSize.width
+      : defaultTickSize)
+    .tickPadding(tickPadding)
+  
+  const yAxisEl = yAxisSelection
+    .transition()
+    .duration(100)
+    .ease(d3.easeLinear) // 線性的 - 當托曳或快速變動的時候比較滑順
+    .call(yAxis)
+  
+  yAxisEl.selectAll('line')
+    .style('fill', 'none')
+    .style('stroke', layerParams.tickLineVisible == true ? getColor(layerParams.tickColorType, theme) : 'none')
+    .style('stroke-dasharray', layerParams.tickFullLineDasharray)
+    .attr('pointer-events', 'none')
+  
+  yAxisEl.selectAll('path')
+    .style('fill', 'none')
+    // .style('stroke', this.layerParams.axisLineColor!)
+    .style('stroke', layerParams.axisLineVisible == true ? getColor(layerParams.axisLineColorType, theme) : 'none')
+    .style('shape-rendering', 'crispEdges')
+  
+  // const yText = yAxisEl.selectAll('text')
+  const yText = yAxisSelection.selectAll('text')
+    // .style('font-family', 'sans-serif')
+    .attr('font-size', theme.fontSize)
+    .style('color', getColor(layerParams.tickTextColorType, theme))
+    .attr('text-anchor', yTickTextAnchor)
+    .attr('dominant-baseline', yTickDominantBaseline)
+    // .attr('dy', 0)
+    .attr('x', - tickPadding)
+    .attr('dy', 0)
+  // yText.style('transform', textReverseTransform)
+  
+  // // 抵消掉預設的偏移
+  // if (fullDataFormatter.grid.valueAxis.position === 'bottom' || fullDataFormatter.grid.valueAxis.position === 'top') {
+  //   yText.attr('dy', 0)
+  // }
+
+  return yAxisSelection
+}
+
+
+export const createBaseYAxis: BaseLayerFn<BaseYAxisContext> = ({
+  selection,
+  pluginName,
+  layerName,
+  computedData$,
+  layerParams$,
+  yAxis$,
+  theme$,
+  isSeriesSeprate$,
+  containerPosition$,
+  containerSize$,
+  // layout$,
+  // filteredXYMinMaxData$,
+  yScale$,
+  // xyMinMax$
+}) => {
+
+  const destroy$ = new Subject()
+
+  // const containerClassName = createClassName(pluginName, 'container')
+  const yAxisGClassName = createClassName(pluginName, layerName, 'yAxisG')
+  const yAxisClassName = createClassName(pluginName, layerName, 'yAxis')
+  const yLabelClassName = createClassName(pluginName, layerName, 'yLabel')
+
+  const containerSelection$ = multivariateContainerSelectionsObservable({
+    selection,
+    pluginName,
+    layerName,
+    clipPathID: null,
+    computedData$,
+    containerPosition$,
+    isSeriesSeprate$,
+  }).pipe(
+    takeUntil(destroy$),
+  )
+
+  // const containerSelection$ = combineLatest({
+  //   computedData: computedData$.pipe(
+  //     distinctUntilChanged((a, b) => {
+  //       // 只有當series的數量改變時，才重新計算
+  //       return a.length === b.length
+  //     }),
+  //   ),
+  //   isSeriesSeprate: isSeriesSeprate$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  //   map(data => {
+  //     return data.isSeriesSeprate
+  //       // category分開的時候顯示各別axis
+  //       ? data.computedData
+  //       // category合併的時候只顯示第一個axis
+  //       : [data.computedData[0]]
+  //   }),
+  //   map((computedData, i) => {
+  //     return selection
+  //       .selectAll<SVGGElement, ComputedDatumMultivariate[]>(`g.${containerClassName}`)
+  //       .data(computedData, d => d[0] ? d[0].categoryIndex : i)
+  //       .join('g')
+  //       .classed(containerClassName, true)
+  //   })
+  // )
+
+  const axisSelection$ = containerSelection$.pipe(
+    takeUntil(destroy$),
+    map((containerSelection, i) => {
+      return containerSelection
+        .selectAll<SVGGElement, ComputedDatumMultivariate[]>(`g.${yAxisGClassName}`)
+        .data([yAxisGClassName])
+        .join('g')
+        .classed(yAxisGClassName, true)
+    })
+  )
+
+  // combineLatest({
+  //   containerSelection: containerSelection$,
+  //   gridContainerPosition: containerPosition$
+  // }).pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async d => d)
+  // ).subscribe(data => {
+  //   data.containerSelection
+  //     .attr('transform', (d, i) => {
+  //       const gridContainerPosition = data.gridContainerPosition[i] ?? data.gridContainerPosition[0]
+  //       const translate = gridContainerPosition.translate
+  //       const scale = gridContainerPosition.scale
+  //       // return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
+  //       return `translate(${translate[0]}, ${translate[1]})`
+  //     })
+  //     // .attr('opacity', 0)
+  //     // .transition()
+  //     // .attr('opacity', 1)
+  // })
+
+  // const textReverseTransform$ = containerPosition$.pipe(
+  //   takeUntil(destroy$),
+  //   switchMap(async (d) => d),
+  //   map(containerPosition => {
+  //     // const axesRotateXYReverseValue = `rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
+  //     // const axesRotateReverseValue = `rotate(${data.gridAxesReverseTransform.rotate}deg)`
+  //     const containerScaleReverseValue = `scale(${1 / containerPosition[0].scale[0]}, ${1 / containerPosition[0].scale[1]})`
+  //     // 抵消最外層scale
+  //     return `${containerScaleReverseValue}`
+  //   }),
+  //   distinctUntilChanged()
+  // )
+
+  // const yScale$: Observable<d3.ScaleLinear<number, number>> = new Observable(subscriber => {
+  //   combineLatest({
+  //     fullDataFormatter: fullDataFormatter$,
+  //     layout: layout$,
+  //     // xyMinMax: observer.xyMinMax$
+  //     filteredXYMinMaxData: filteredXYMinMaxData$
+  //   }).pipe(
+  //     takeUntil(destroy$),
+  //     switchMap(async (d) => d),
+  //   ).subscribe(data => {
+  //     const valueIndex = data.fullDataFormatter.xAxis.valueIndex
+  //     if (!data.filteredXYMinMaxData.minYDatum || !data.filteredXYMinMaxData.maxYDatum
+  //       || data.filteredXYMinMaxData.minYDatum.value[valueIndex] == null || data.filteredXYMinMaxData.maxYDatum.value[valueIndex] == null
+  //     ) {
+  //       return
+  //     }
+  //     let maxValue = data.filteredXYMinMaxData.maxYDatum.value[valueIndex]
+  //     let minValue = data.filteredXYMinMaxData.minYDatum.value[valueIndex]
+  //     if (maxValue === minValue && maxValue === 0) {
+  //       // 避免最大及最小值同等於 0 造成無法計算scale
+  //       maxValue = 1
+  //     }
+
+  //     const yScale: d3.ScaleLinear<number, number> = createValueToAxisScale({
+  //       maxValue,
+  //       minValue,
+  //       axisWidth: data.layout.height,
+  //       scaleDomain: data.fullDataFormatter.yAxis.scaleDomain,
+  //       scaleRange: data.fullDataFormatter.yAxis.scaleRange,
+  //       reverse: true
+  //     })
+
+  //     subscriber.next(yScale)
+  //   })
+  // })
+
+
+  combineLatest({
+    axisSelection: axisSelection$,
+    layerParams: layerParams$,
+    // tickTextAlign: tickTextAlign$,
+    // axisLabelAlign: axisLabelAlign$,
+    computedData: computedData$,
+    containerSize: containerSize$,
+    yAxis: yAxis$,
+    yScale: yScale$,
+    theme: theme$
+    // textReverseTransform: textReverseTransform$,
+    // xyMinMax: xyMinMax$
+  }).pipe(
+    takeUntil(destroy$),
+    switchMap(async (d) => d),
+  ).subscribe(data => {
+
+    renderYAxis({
+      selection: data.axisSelection,
+      yAxisClassName,
+      layerParams: data.layerParams,
+      // tickTextAlign: data.tickTextAlign,
+      containerSize: data.containerSize,
+      theme: data.theme,
+      yScale: data.yScale,
+      // textReverseTransform: data.textReverseTransform,
+      // xyMinMax: data.xyMinMax
+    })
+
+    renderYAxisLabel({
+      selection: data.axisSelection,
+      yLabelClassName,
+      layerParams: data.layerParams,
+      // axisLabelAlign: data.axisLabelAlign,
+      yAxis: data.yAxis,
+      theme: data.theme,
+      // textReverseTransform: data.textReverseTransform,
+    })
+
+  })
+
+  return () => {
+    destroy$.next(undefined)
+  }
+}

package/src/baseLayers/types.ts

@@ -0,0 +1,174 @@
+import type { ColorType, EventData } from '@orbcharts/core'
+import type { Placement } from '../types/Common'
+import type { ComputedDatum } from '../types';
+
+
+// -- base layer params --
+export interface BaseBarsParams {
+    barWidth: number;
+    barPadding: number;
+    barGroupPadding: number;
+    barRadius: number | boolean;
+}
+export interface BaseStackedBarsParams {
+    barWidth: number;
+    barGroupPadding: number;
+    barRadius: number | boolean;
+}
+export interface BaseBarsTriangleParams {
+    barWidth: number;
+    barPadding: number;
+    barGroupPadding: number;
+    linearGradientOpacity: [number, number];
+}
+export interface BaseDotsParams {
+    radius: number;
+    fillColorType: ColorType;
+    strokeColorType: ColorType;
+    strokeWidth: number;
+    onlyShowHighlighted: boolean;
+}
+export interface BaseCategoryAxisParams {
+    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;
+    tickTextRotate: number;
+    tickTextColorType: ColorType;
+}
+export interface BaseLegendParams {
+    placement: Placement;
+    padding: number;
+    backgroundFill: ColorType;
+    backgroundStroke: ColorType;
+    textColorType: ColorType;
+    gap: number;
+    labelList: Array<{
+        listRectWidth: number;
+        listRectHeight: number;
+        listRectRadius: number;
+    }>;
+}
+export interface BaseLineAreasParams {
+    lineCurve: string;
+    linearGradientOpacity: [number, number];
+}
+export interface BaseLinesParams {
+    lineCurve: string;
+    lineWidth: number;
+}
+export interface BaseOrdinalBubblesParams {
+    bubble: {
+        sizeAdjust: number;
+        arcScaleType: 'area' | 'radius';
+        valueLinearOpacity: [number, number];
+    };
+    itemLabel: {
+        padding: number;
+        colorType: ColorType;
+    };
+    rankingAmount: 'auto' | number;
+}
+export interface BaseRacingBarsParams {
+    bar: {
+        barWidth: number;
+        barPadding: number;
+        barRadius: number | boolean;
+    };
+    rankingAmount: 'auto' | number;
+}
+export interface BaseRacingLabelsParams {
+    barLabel: {
+        position: 'inside' | 'outside' | 'none';
+        padding: number;
+        colorType: ColorType;
+    };
+    axisLabel: {
+        offset: [number, number];
+        colorType: ColorType;
+    };
+}
+export interface BaseRacingValueLabelsParams {
+    padding: number;
+    colorType: ColorType;
+    format: string | ((text: d3.NumberValue) => string | d3.NumberValue);
+}
+export interface BaseTooltipStyle {
+    backgroundColor: string;
+    backgroundOpacity: number;
+    strokeColor: string;
+    offset: [number, number];
+    padding: number;
+    textColor: string;
+    textSize: number | string;
+    textSizePx: number;
+    // seriesColors: string[];
+}
+export interface BaseTooltipUtils {
+    toCurrency: (num: number | null) => string;
+    measureTextWidth(text: string, size?: number): number;
+}
+export type BaseTooltipParams = {
+    backgroundColorType: ColorType;
+    backgroundOpacity: number;
+    strokeColorType: ColorType;
+    textColorType: ColorType;
+    offset: [number, number];
+    padding: number;
+    renderFn: ((eventData: EventData<any>, context: {
+        styles: BaseTooltipStyle;
+        utils: BaseTooltipUtils;
+        seriesData: ComputedDatum<any>[]
+        categoryData: ComputedDatum<any>[]
+    }) => string[] | string);
+};
+export interface BaseValueAxisParams {
+    labelOffset: [number, number];
+    labelColorType: ColorType;
+    axisLineVisible: boolean;
+    axisLineColorType: ColorType;
+    ticks: number;
+    tickFormat: string | ((text: d3.NumberValue) => string | d3.NumberValue);
+    tickLineVisible: boolean;
+    tickPadding: number;
+    tickFullLine: boolean;
+    tickFullLineDasharray: string;
+    tickColorType: ColorType;
+    tickTextRotate: number;
+    tickTextColorType: ColorType;
+}
+export interface BaseXAxisParams {
+    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;
+    tickTextColorType: ColorType;
+}
+export interface BaseYAxisParams {
+    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;
+    tickTextColorType: ColorType;
+}

package/src/const/layerIndex.ts

@@ -0,0 +1,36 @@
+
+// 圖層索引 - 底層（無圖型）
+export const LAYER_INDEX_OF_ROOT = 0
+
+// 圖層索引 - 背景  *預留
+// 之後改成 LAYER_INDEX_OF_BACKGROUND
+export const LAYER_INDEX_OF_BG = 1
+
+// 圖層索引 - 圖軸
+export const LAYER_INDEX_OF_AXIS = 2
+
+// 圖層索引 - 輔助線、圖軸的輔助資訊
+export const LAYER_INDEX_OF_AUX = 3
+
+// 圖層索引 - 底層圖型
+// 之後改成 LAYER_INDEX_OF_PLOT_LOWER
+export const LAYER_INDEX_OF_GRAPHIC_GROUND = 4
+
+// 圖層索引 - 一般圖型
+// 之後改成 LAYER_INDEX_OF_PLOT
+export const LAYER_INDEX_OF_GRAPHIC = 5
+
+// 圖層索引 - 覆蓋圖型
+// 之後改成 LAYER_INDEX_OF_PLOT_HIGHER
+export const LAYER_INDEX_OF_GRAPHIC_COVER = 6
+
+// 圖層索引 - 圖型上的標籤文字
+export const LAYER_INDEX_OF_LABEL = 7
+
+// 圖層索引 - 圖例、圖表上的文字
+// 之後改成 LAYER_INDEX_OF_FOREGROUND
+export const LAYER_INDEX_OF_INFO = 8
+
+// 圖層索引 - Tooltip、事件觸發的覆蓋圖型
+// 之後改成 LAYER_INDEX_OF_EVENT
+export const LAYER_INDEX_OF_TOOLTIP = 9

package/src/const/sharedPluginParams.ts

@@ -0,0 +1,29 @@
+import type { Container, CategoryAxis, ValueAxis, XYAxis } from '../types/PluginParams'
+
+export const DEFAULT_VALUE_AXIS: ValueAxis = {
+  position: 'left',
+  scaleDomain: ['auto', 'auto'],
+  scaleRange: [0, 0.9],
+  label: '',
+}
+
+export const DEFAULT_CATEGORY_AXIS: CategoryAxis = {
+  position: 'bottom',
+  scaleDomain: [0, 'max'],
+  scalePadding: 0.5,
+  label: ''
+}
+
+export const DEFAULT_X_Y_AXIS: XYAxis = {
+  scaleDomain: ['auto', 'auto'],
+  scaleRange: [0, 0.9],
+  label: '',
+  // valueIndex: 0
+}
+
+export const DEFAULT_CONTAINER: Container = {
+  columnAmount: 1,
+  rowAmount: 1,
+  columnGap: 'auto',
+  rowGap: 'auto'
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+
+export * from './plugins'
+export * from './types'