@orbcharts/plugins-basic 3.0.0-alpha.33 → 3.0.0-alpha.35

package/src/grid/plugins/ValueStackAxis.ts

@@ -1,244 +1,30 @@
-import * as d3 from 'd3'
 import {
-  combineLatest,
-  switchMap,
-  distinctUntilChanged,
-  first,
-  map,
   takeUntil,
-  Observable,
+  map,
+  switchMap,
+  iif,
   Subject } from 'rxjs'
 import {
   defineGridPlugin } from '@orbcharts/core'
-import { createAxisLinearScale } from '@orbcharts/core'
-import type {
-  DataFormatterGrid,
-  ChartParams,
-  TransformData } from '@orbcharts/core'
-import type { ValueStackAxisParams } from '../types'
 import { DEFAULT_VALUE_STACK_AXIS_PARAMS } from '../defaults'
-import { getMinAndMax } from '../../utils/commonUtils'
-import { parseTickFormatValue } from '../../utils/d3Utils'
-import { getColor, getClassName } from '../../utils/orbchartsUtils'
 
-interface TextAlign {
-  textAnchor: "start" | "middle" | "end"
-  dominantBaseline: "middle" | "auto" | "hanging"
-}
+import { createBaseValueAxis } from '../../base/BaseValueAxis'
 
 const pluginName = 'ValueStackAxis'
-const gClassName = getClassName(pluginName, 'g')
-const textClassName = getClassName(pluginName, 'text')
-const defaultTickSize = 6
-
-function renderLinearAxis ({ selection, fullParams, tickTextAlign, axisLabelAlign, gridAxesSize, fullDataFormatter, fullChartParams, valueScale, contentTransform, minAndMax }: {
-  selection: d3.Selection<SVGGElement, any, any, any>,
-  fullParams: ValueStackAxisParams
-  tickTextAlign: TextAlign
-  axisLabelAlign: TextAlign
-  gridAxesSize: { width: number, height: number }
-  fullDataFormatter: DataFormatterGrid,
-  fullChartParams: ChartParams
-  valueScale: d3.ScaleLinear<number, number>
-  contentTransform: string,
-  minAndMax: [number, number]
-}) {
-
-  const yAxisSelection = selection
-    .selectAll<SVGGElement, ValueStackAxisParams>(`g.${gClassName}`)
-    .data([fullParams])
-    .join('g')
-    .classed(gClassName, true)
-
-  const axisLabelSelection = selection
-    .selectAll<SVGGElement, ValueStackAxisParams>(`g.${textClassName}`)
-    .data([fullParams])
-    .join('g')
-    .classed(textClassName, true)
-    .each((d, i, g) => {
-      const text = d3.select(g[i])
-        .selectAll<SVGTextElement, ValueStackAxisParams>(`text`)
-        .data([d])
-        .join(
-          enter => {
-            return enter
-              .append('text')
-              .style('font-weight', 'bold')
-          },
-          update => update,
-          exit => exit.remove()
-        )
-        .attr('text-anchor', axisLabelAlign.textAnchor)
-        .attr('dominant-baseline', axisLabelAlign.dominantBaseline)
-        .style('font-size', `${fullChartParams.styles.textSize}px`)
-        .style('fill', getColor(fullParams.labelColorType, fullChartParams))
-        .style('transform', contentTransform)
-        .text(d => fullDataFormatter.valueAxis.label)
-    })
-    .attr('transform', d => `translate(${- d.tickPadding + fullParams.labelOffset[0]}, ${gridAxesSize.height + d.tickPadding + fullParams.labelOffset[1]})`)
-
-
-  const valueLength = minAndMax[1] - minAndMax[0]
-  
-  // 設定Y軸刻度
-  const yAxis = d3.axisLeft(valueScale)
-    .scale(valueScale)
-    .ticks(valueLength > fullParams.ticks
-      ? fullParams.ticks
-      : ((minAndMax[0] === 0 && minAndMax[1] === 0)
-        ? 1
-        : Math.ceil(valueLength))) // 刻度分段數量
-    .tickFormat(d => parseTickFormatValue(d, fullParams.tickFormat))
-    .tickSize(fullParams.tickFullLine == true
-      ? -gridAxesSize.width
-      : defaultTickSize)
-    .tickPadding(fullParams.tickPadding)
-  
-  const yAxisEl = yAxisSelection
-    .transition()
-    .duration(100)
-    .call(yAxis)
-  
-  yAxisEl.selectAll('line')
-    .style('fill', 'none')
-    .style('stroke', fullParams.tickLineVisible == true ? getColor(fullParams.tickColorType, fullChartParams) : 'none')
-    .style('stroke-dasharray', fullParams.tickFullLineDasharray)
-    .attr('pointer-events', 'none')
-  
-  yAxisEl.selectAll('path')
-    .style('fill', 'none')
-    // .style('stroke', this.fullParams.axisLineColor!)
-    .style('stroke', fullParams.axisLineVisible == true ? getColor(fullParams.axisLineColorType, fullChartParams) : 'none')
-    .style('shape-rendering', 'crispEdges')
-  
-  // const yText = yAxisEl.selectAll('text')
-  const yText = yAxisSelection.selectAll('text')
-    .style('font-family', 'sans-serif')
-    .style('font-size', `${fullChartParams.styles.textSize}px`)
-    .style('color', getColor(fullParams.tickTextColorType, fullChartParams))
-    .attr('text-anchor', tickTextAlign.textAnchor)
-    .attr('dominant-baseline', tickTextAlign.dominantBaseline)
-    .attr('transform-origin', `-${fullParams.tickPadding + defaultTickSize} 0`)
-  yText.style('transform', contentTransform)
-
-  return yAxisSelection
-}
-
 
 export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_AXIS_PARAMS)(({ selection, name, observer, subject }) => {
   
   const destroy$ = new Subject()
 
-  // const axisGUpdate = selection
-  //   .selectAll('g')
-  //   .data()
-
-  const axisSelection: d3.Selection<SVGGElement, any, any, any> = selection.append('g')
-  // let graphicSelection: d3.Selection<SVGGElement, any, any, any> | undefined
-  // let pathSelection: d3.Selection<SVGPathElement, ComputedDatumGrid[], any, any> | undefined
-  // .style('transform', 'translate(0px, 0px) scale(1)')
-
-  observer.gridAxesTransform$
-    .pipe(
-      takeUntil(destroy$),
-      map(d => d.value),
-      distinctUntilChanged()
-    ).subscribe(d => {
-      axisSelection
-        .style('transform', d)
-        .attr('opacity', 0)
-        .transition()
-        .attr('opacity', 1)
-    })
-
-  // const gridAxesSize$ = gridAxisSizeObservable({
-  //   fullDataFormatter$,
-  //   computedLayout$
-  // })
-
-  // const contentTransform$: Observable<string> = new Observable(subscriber => {
-  //   combineLatest({
-  //     fullParams: fullParams$,
-  //     computedLayout: computedLayout$
-  //   }).pipe(
-  //     takeUntil(destroy$),
-  //     // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-  //     switchMap(async (d) => d),
-  //   ).subscribe(data => {
-
-  //     const transformData = Object.assign({}, data.computedLayout.content.axesTransformData)
-
-  //     const value = getAxesTransformValue({
-  //       translate: [0, 0],
-  //       scale: [transformData.scale[0] * -1, transformData.scale[1] * -1],
-  //       rotate: transformData.rotate * -1 + data.fullParams.tickTextRotate,
-  //       rotateX: transformData.rotateX * -1,
-  //       rotateY: transformData.rotateY * -1
-  //     })
-
-  //     subscriber.next(value)
-  //   })
-  // })
-  // const oppositeTransform$: Observable<TransformData> = observer.gridAxesTransform$.pipe(
-  //   takeUntil(destroy$),
-  //   map(d => {
-  //     const translate: [number, number] = [d.translate[0] * -1, d.translate[1] * -1]
-  //     const scale: [number, number] = [d.scale[0] * -1, d.scale[1] * -1]
-  //     const rotate = d.rotate * -1
-  //     const rotateX = d.rotateX * -1
-  //     const rotateY = d.rotateY * -1
-  //     return {
-  //       translate,
-  //       scale,
-  //       rotate,
-  //       rotateX,
-  //       rotateY,
-  //       value: ''
-  //     }
-  //   }),
-  // )
-  const contentTransform$ = combineLatest({
-    fullParams: observer.fullParams$,
-    gridAxesOppositeTransform: observer.gridAxesOppositeTransform$
-  }).pipe(
+  // 將原本的value全部替換成加總後的value
+  const stackedData$ = observer.computedData$.pipe(
     takeUntil(destroy$),
-    switchMap(async data => {
-      const rotate = data.gridAxesOppositeTransform.rotate + data.fullParams.tickTextRotate
-      return `translate(${data.gridAxesOppositeTransform.translate[0]}px, ${data.gridAxesOppositeTransform.translate[1]}px) rotate(${rotate}deg) rotateX(${data.gridAxesOppositeTransform.rotateX}deg) rotateY(${data.gridAxesOppositeTransform.rotateY}deg)`
-    }),
-    distinctUntilChanged()
-  )
-
-  const minAndMax$: Observable<[number, number]> = new Observable(subscriber => {
-    combineLatest({
-      fullDataFormatter: observer.fullDataFormatter$,
-      gridAxesSize: observer.gridAxesSize$,
-      computedData: observer.computedData$,
-    }).pipe(
-      takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-      switchMap(async (d) => d),
-    ).subscribe(data => {
-      const groupMin = 0
-      const groupMax = data.computedData[0] ? data.computedData[0].length - 1 : 0
-      const groupScaleDomainMin = data.fullDataFormatter.groupAxis.scaleDomain[0] === 'auto'
-        ? groupMin - data.fullDataFormatter.groupAxis.scalePadding
-        : data.fullDataFormatter.groupAxis.scaleDomain[0] as number - data.fullDataFormatter.groupAxis.scalePadding
-      const groupScaleDomainMax = data.fullDataFormatter.groupAxis.scaleDomain[1] === 'auto'
-        ? groupMax + data.fullDataFormatter.groupAxis.scalePadding
-        : data.fullDataFormatter.groupAxis.scaleDomain[1] as number + data.fullDataFormatter.groupAxis.scalePadding
-        
-      const filteredData = data.computedData.map((d, i) => {
-        return d.filter((_d, _i) => {
-          return _i >= groupScaleDomainMin && _i <= groupScaleDomainMax
-        })
-      })
-
+    map(data => {
       // 將同一group的value加總起來
-      const filteredStackedData = new Array(filteredData[0] ? filteredData[0].length : 0)
+      const stackedValue = new Array(data[0] ? data[0].length : 0)
         .fill(null)
         .map((_, i) => {
-          return filteredData.reduce((prev, current) => {
+          return data.reduce((prev, current) => {
             if (current && current[i]) {
               const currentValue = current[i].value == null || current[i].visible == false
                 ? 0
@@ -248,125 +34,38 @@ export const ValueStackAxis = defineGridPlugin(pluginName, DEFAULT_VALUE_STACK_A
             return prev
           }, 0)
         })
-    
-      const filteredMinAndMax = getMinAndMax(filteredStackedData)
-
-      subscriber.next(filteredMinAndMax)
-    })
-  })
-
-  const valueScale$: Observable<d3.ScaleLinear<number, number>> = new Observable(subscriber => {
-    combineLatest({
-      fullDataFormatter: observer.fullDataFormatter$,
-      gridAxesSize: observer.gridAxesSize$,
-      minAndMax: minAndMax$
-    }).pipe(
-      takeUntil(destroy$),
-      // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-      switchMap(async (d) => d),
-    ).subscribe(data => {
-    
-      const valueScale: d3.ScaleLinear<number, number> = createAxisLinearScale({
-        maxValue: data.minAndMax[1],
-        minValue: data.minAndMax[0],
-        axisWidth: data.gridAxesSize.height,
-        scaleDomain: data.fullDataFormatter.valueAxis.scaleDomain,
-        scaleRange: data.fullDataFormatter.valueAxis.scaleRange
+      // 將原本的value全部替換成加總後的value
+      const computedData = data.map((series, seriesIndex) => {
+        return series.map((d, i) => {
+          return {
+            ...d,
+            value: stackedValue[i],
+          }
+        })
       })
-
-      subscriber.next(valueScale)
-    })
-  })
-
-  const tickTextAlign$: Observable<TextAlign> = observer.fullDataFormatter$.pipe(
-    takeUntil(destroy$),
-    map(d => {
-      let textAnchor: 'start' | 'middle' | 'end' = 'start'
-      let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
-
-      if (d.valueAxis.position === 'left') {
-        textAnchor = 'end'
-        dominantBaseline = 'middle'
-      } else if (d.valueAxis.position === 'right') {
-        textAnchor = 'start'
-        dominantBaseline = 'middle'
-      } else if (d.valueAxis.position === 'bottom') {
-        textAnchor = 'middle'
-        dominantBaseline = 'hanging'
-      } else if (d.valueAxis.position === 'top') {
-        textAnchor = 'middle'
-        dominantBaseline = 'auto'
-      }
-      return {
-        textAnchor,
-        dominantBaseline
-      }
-    })
-  )
-
-  const axisLabelAlign$: Observable<TextAlign> = observer.fullDataFormatter$.pipe(
-    takeUntil(destroy$),
-    map(d => {
-      let textAnchor: 'start' | 'middle' | 'end' = 'start'
-      let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'hanging'
-
-      if (d.groupAxis.position === 'bottom') {
-        dominantBaseline = 'auto'
-      } else if (d.groupAxis.position === 'top') {
-        dominantBaseline = 'hanging'
-      } else if (d.groupAxis.position === 'left') {
-        textAnchor = 'start'
-      } else if (d.groupAxis.position === 'right') {
-        textAnchor = 'end'
-      }
-      if (d.valueAxis.position === 'left') {
-        textAnchor = 'end'
-      } else if (d.valueAxis.position === 'right') {
-        textAnchor = 'start'
-      } else if (d.valueAxis.position === 'bottom') {
-        dominantBaseline = 'hanging'
-      } else if (d.valueAxis.position === 'top') {
-        dominantBaseline = 'auto'
-      }
-      return {
-        textAnchor,
-        dominantBaseline
-      }
-    })
+      return computedData
+    }),
   )
 
-  combineLatest({
-    fullParams: observer.fullParams$,
-    tickTextAlign: tickTextAlign$,
-    axisLabelAlign: axisLabelAlign$,
-    computedData: observer.computedData$,
-    gridAxesSize: observer.gridAxesSize$,
-    fullDataFormatter: observer.fullDataFormatter$,
-    fullChartParams: observer.fullChartParams$,
-    valueScale: valueScale$,
-    contentTransform: contentTransform$,
-    minAndMax: minAndMax$
-  }).pipe(
-    takeUntil(destroy$),
-    // 轉換後會退訂前一個未完成的訂閱事件，因此可以取到「同時間」最後一次的訂閱事件
-    switchMap(async (d) => d),
-  ).subscribe(data => {
-
-    renderLinearAxis({
-      selection: axisSelection,
-      fullParams: data.fullParams,
-      tickTextAlign: data.tickTextAlign,
-      axisLabelAlign: data.axisLabelAlign,
-      gridAxesSize: data.gridAxesSize,
-      fullDataFormatter: data.fullDataFormatter,
-      fullChartParams: data.fullChartParams,
-      valueScale: data.valueScale,
-      contentTransform: data.contentTransform,
-      minAndMax: data.minAndMax
-    })
+  const unsubscribeBaseValueAxis = createBaseValueAxis(pluginName, {
+    selection,
+    computedData$: observer.isSeriesPositionSeprate$.pipe(
+      switchMap(isSeriesPositionSeprate => {
+        return iif(() => isSeriesPositionSeprate, observer.computedData$, stackedData$)
+      })
+    ),
+    fullParams$: observer.fullParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    fullChartParams$: observer.fullChartParams$,  
+    gridAxesTransform$: observer.gridAxesTransform$,
+    gridAxesReverseTransform$: observer.gridAxesReverseTransform$,
+    gridAxesSize$: observer.gridAxesSize$,
+    gridContainer$: observer.gridContainer$,
+    isSeriesPositionSeprate$: observer.isSeriesPositionSeprate$,
   })
 
   return () => {
     destroy$.next(undefined)
+    unsubscribeBaseValueAxis()
   }
 })

package/src/grid/types.ts

@@ -24,7 +24,7 @@ export interface DotsParams {
   onlyShowHighlighted: boolean
 }
 
-export interface GroupAreaParams {
+export interface GroupAuxParams {
   showLine: boolean
   showLabel: boolean
   lineDashArray: string

package/src/index.ts

@@ -2,6 +2,7 @@
 // export { default as pie } from './seriesPlugins/pie'
 // export { default as pieEventTexts } from './seriesPlugins/pieEventTexts'
 // export { default as pieLabels } from './seriesPlugins/pieLabels'
+
 export * from './grid'
 export * from './multiGrid'
 export * from './noneData'

package/src/multiGrid/defaults.ts

@@ -1,17 +1,14 @@
-import type { BarsAndLinesParams, MultiGridLegendParams } from './types'
-
-export const DEFAULT_BARS_AND_LINES_PARAMS: BarsAndLinesParams = {
-  bars: {
-    barWidth: 0,
-    barPadding: 1,
-    barGroupPadding: 40,
-    barRadius: false,
-  },
-  lines: {
-    lineCurve: 'curveLinear',
-    lineWidth: 2
-  }
-}
+import type {
+  MultiGridLegendParams,
+  MultiBarsParams,
+  MultiBarStackParams,
+  MultiBarsTriangleParams,
+  MultiLinesParams,
+  MultiDotsParams,
+  MultiGroupAxisParams,
+  MultiValueAxisParams,
+  OverlappingValueAxesParams
+} from './types'
 
 export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
   position: 'right',
@@ -31,3 +28,112 @@ export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
     }
   ]
 }
+
+export const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams = {
+  // labelAnchor: 'start',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: true,
+  axisLineColorType: 'primary',
+  tickFormat: text => text,
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: false,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
+  // labelAnchor: 'end',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: false,
+  axisLineColorType: 'primary',
+  ticks: 4,
+  tickFormat: ',.0f',
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: true,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 40,
+  barRadius: false,
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams = {
+  barWidth: 0,
+  barGroupPadding: 10,
+  barRadius: false,
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams = {
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 20,
+  linearGradientOpacity: [1, 0],
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
+  lineCurve: 'curveLinear',
+  lineWidth: 2,
+  gridIndexes: [1]
+}
+
+export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
+  radius: 4,
+  fillColorType: 'white',
+  strokeColorType: 'series',
+  strokeWidth: 2,
+  onlyShowHighlighted: false,
+  gridIndexes: [1]
+}
+
+export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams = {
+  firstAxis: {
+    // labelAnchor: 'end',
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: 4,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextRotate: 0,
+    tickTextColorType: 'primary',
+  },
+  secondAxis: {
+    // labelAnchor: 'end',
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: 4,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextRotate: 0,
+    tickTextColorType: 'primary',
+  },
+  gridIndexes: [0, 1]
+}

package/src/multiGrid/index.ts

@@ -1,4 +1,11 @@
 export * from './defaults'
 export * from './types'
-export { BarsAndLines } from './plugins/BarsAndLines'
-export { MultiGridLegend } from './plugins/MultiGridLegend'
+export { MultiGridLegend } from './plugins/MultiGridLegend'
+export { MultiBars } from './plugins/MultiBars'
+export { MultiBarStack } from './plugins/MultiBarStack'
+export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
+export { MultiLines } from './plugins/MultiLines'
+export { MultiDots } from './plugins/MultiDots'
+export { MultiGroupAxis } from './plugins/MultiGroupAxis'
+export { MultiValueAxis } from './plugins/MultiValueAxis'
+export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'