@orbcharts/plugins-basic 3.0.0-alpha.24

package/src/grid/plugins/ValueStackAxis.ts

@@ -0,0 +1,372 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  switchMap,
+  distinctUntilChanged,
+  first,
+  map,
+  takeUntil,
+  Observable,
+  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_PLUGIN_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"
+}
+
+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_PLUGIN_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(
+    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
+        })
+      })
+
+      // 將同一group的value加總起來
+      const filteredStackedData = new Array(filteredData[0] ? filteredData[0].length : 0)
+        .fill(null)
+        .map((_, i) => {
+          return filteredData.reduce((prev, current) => {
+            if (current && current[i]) {
+              const currentValue = current[i].value == null || current[i].visible == false
+                ? 0
+                : current[i].value!
+              return prev + currentValue
+            }
+            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
+      })
+
+      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
+      }
+    })
+  )
+
+  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
+    })
+  })
+
+  return () => {
+    destroy$.next(undefined)
+  }
+})

package/src/grid/types.ts

@@ -0,0 +1,102 @@
+import type { ColorType } from '@orbcharts/core'
+
+// export type LineType = 'line' | 'area' | 'gradientArea'
+// export type BarType = 'rect' | 'triangle'
+
+export interface LinesPluginParams {
+  // lineType: LineType
+  lineCurve: string
+  lineWidth: number
+  // labelFn: (d: ComputedDatumSeries) => string
+  // labelPositionFn: (d: ComputedDatumSeries) => 'top' | 'bottom' | 'left' | 'right' | 'center'
+  // labelStyleFn: (d: ComputedDatumSeries) => string
+  // labelFontSizeFn: (d: ComputedDatumSeries) => number
+  // labelColorFn: (d: ComputedDatumSeries) => string
+  // labelPadding: number
+}
+
+export interface DotsPluginParams {
+  radius: number
+  fillColorType: ColorType
+  strokeColorType: ColorType
+  strokeWidth: number
+  onlyShowHighlighted: boolean
+}
+
+export interface GroupAreaPluginParams {
+  showLine: boolean
+  showLabel: boolean
+  lineDashArray: string
+  lineColorType: ColorType
+  labelColorType: ColorType
+  labelTextColorType: ColorType
+  labelTextFormat: string | ((text: any) => string)
+  labelPadding: number
+}
+
+export interface BarsPluginParams {
+  // barType: BarType
+  barWidth: number
+  barPadding: number
+  barGroupPadding: number // 群組和群組間的間隔
+  barRadius: number | boolean
+}
+
+export interface BarStackPluginParams {
+  barWidth: number
+  barGroupPadding: number
+  barRadius: number | boolean
+}
+
+export interface BarsTrianglePluginParams {
+  barWidth: number
+  barPadding: number
+  barGroupPadding: number // 群組和群組間的間隔
+  linearGradientOpacity: [number, number]
+}
+
+export interface GroupingAxisParams {
+  // xLabel: string
+  // labelAnchor: 'start' | 'end'
+  labelOffset: [number, number]
+  labelColorType: ColorType
+  axisLineVisible: boolean
+  axisLineColorType: ColorType
+  tickFormat: string | ((text: any) => string)
+  tickLineVisible: boolean
+  tickPadding: number
+  tickFullLine: boolean
+  tickFullLineDasharray: string
+  tickColorType: ColorType
+  // axisLineColor: string
+  // axisLabelColor: string
+  tickTextRotate: number
+  tickTextColorType: ColorType
+}
+
+export interface ValueAxisParams {
+  // xLabel: string
+  // labelAnchor: 'start' | 'end'
+  labelOffset: [number, number]
+  labelColorType: ColorType
+  axisLineVisible: boolean
+  axisLineColorType: ColorType
+  ticks: number
+  tickFormat: string | ((text: d3.NumberValue) => string)
+  tickLineVisible: boolean
+  tickPadding: number
+  tickFullLine: boolean
+  tickFullLineDasharray: string
+  tickColorType: ColorType
+  // axisLineColor: string
+  // axisLabelColor: string
+  tickTextRotate: number
+  tickTextColorType: ColorType
+}
+
+export interface ValueStackAxisParams extends ValueAxisParams {}
+
+export interface ScalingAreaParams {
+
+}
+

package/src/index.ts

@@ -0,0 +1,7 @@
+// export { default as container } from './noneDataPlugins/container'
+// 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 './noneData'
+export * from './series'

package/src/noneData/defaults.ts

@@ -0,0 +1,47 @@
+import type { ContainerPluginParams, TooltipParams } from './types'
+import type { EventSeries, EventGrid } from '@orbcharts/core'
+
+export const CONTAINER_PLUGIN_PARAMS: ContainerPluginParams = {
+  header: {
+    height: 36,
+    text: [],
+    textStyle: []
+  },
+  footer: {
+    height: 0,
+    text: [],
+    textStyle: []
+  }
+}
+
+export const TOOLTIP_PARAMS: TooltipParams = {
+  backgroundColorType: 'background',
+  strokeColorType: 'primary',
+  backgroundOpacity: 0.8,
+  textColorType: 'primary',
+  offset: [20, 5],
+  padding: 10,
+  textRenderFn: (eventData) => {
+    if (eventData.highlightTarget === 'datum' && eventData.datum) {
+      return [`${eventData.datum.label}: ${eventData.datum.value}`]
+    } else if (eventData.highlightTarget === 'series') {
+      const label = (eventData as EventSeries).seriesLabel
+      const value = (eventData as EventSeries).series
+        .map(d => {
+          return d.value
+        })
+        .join(',')
+      return [label, value]
+    } else if (eventData.highlightTarget === 'group') {
+      const label = (eventData as EventGrid).groupLabel
+      const value = (eventData as EventGrid).groups
+        .map(d => {
+          return d.value
+        })
+        .join(',')
+      return [label, value]
+    }
+    return []
+  },
+  svgRenderFn: null
+}

package/src/noneData/index.ts

@@ -0,0 +1,4 @@
+export * from './defaults'
+export * from './types'
+export { Container } from './plugins/Container'
+export { Tooltip } from './plugins/Tooltip'

package/src/noneData/plugins/Container.ts

@@ -0,0 +1,11 @@
+import * as d3 from 'd3'
+import {
+  defineNoneDataPlugin } from '@orbcharts/core'
+import { CONTAINER_PLUGIN_PARAMS } from '../defaults'
+
+export const Container = defineNoneDataPlugin('Container', CONTAINER_PLUGIN_PARAMS)(({ selection }) => {
+  
+  return function unsubscribe () {
+    
+  }
+})