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

package/src/types/BaseLayer.ts

@@ -0,0 +1,3 @@
+export interface BaseLayerFn<Context> {
+  (context: Context): () => void // return unsubscribe function
+}

package/src/types/Common.ts

@@ -0,0 +1,20 @@
+
+
+
+export type ArcScaleType = 'area' | 'radius'
+
+export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+
+export interface ContainerSize {
+  width: number
+  height: number
+}
+
+export interface TransformData {
+  translate: [number, number]
+  scale: [number, number]
+  rotate: number
+  rotateX: number
+  rotateY: number
+  value: string
+}

package/src/types/ComputedData.ts

@@ -0,0 +1,55 @@
+import type { ModelType, RenderDatumGraphEdge } from '@orbcharts/core'
+import type {
+  ModelDatumBase,
+  ModelDatumSeries,
+  ModelDatumGrid,
+  ModelDatumMultivariate,
+  ModelDatumGraphNode,
+  ModelDatumGraphEdge,
+  ModelDatumTree,
+  RenderDatumBase,
+} from '@orbcharts/core'
+
+
+export interface ComputedDatumSeries extends RenderDatumBase<'series'> {
+  visible: boolean
+  seq: number
+}
+
+export interface ComputedDatumGrid extends RenderDatumBase<'grid'> {
+  visible: boolean
+}
+
+export interface ComputedDatumMultivariate extends RenderDatumBase<'multivariate'> {
+  visible: boolean
+}
+
+export interface ComputedDatumGraphNode extends RenderDatumBase<'graph'> {
+  visible: boolean
+}
+
+export interface ComputedDatumGraphEdge extends RenderDatumGraphEdge {
+  visible: boolean
+}
+
+export interface ComputedDatumTree extends RenderDatumBase<'tree'> {
+  visible: boolean
+  children: ComputedDatumTree[]
+}
+
+export type ComputedDatum<T extends ModelType> = T extends 'series' ? ComputedDatumSeries
+  : T extends 'grid' ? ComputedDatumGrid
+  : T extends 'multivariate' ? ComputedDatumMultivariate
+  : T extends 'graph' ? ComputedDatumGraphNode
+  : T extends 'tree' ? ComputedDatumTree
+  : unknown
+
+export type ComputedData<T extends ModelType> = T extends 'series' ? ComputedDatumSeries[]
+  : T extends 'grid' ? ComputedDatumGrid[][]
+  : T extends 'multivariate' ? ComputedDatumMultivariate[][]
+  : T extends 'graph' ? {
+      nodes: ComputedDatumGraphNode[]
+      edges: ComputedDatumGraphEdge[]
+    }
+  : T extends 'tree' ? ComputedDatumTree
+  : unknown

package/src/types/PluginParams.ts

@@ -0,0 +1,81 @@
+import type { ModelType, ModelDatum } from '@orbcharts/core'
+// import type { ComputedDatum } from './ComputedData'
+
+export type AxisPosition = 'top' | 'bottom' | 'left' | 'right'
+
+export interface XYAxis {
+    scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto'];
+    scaleRange: [number, number];
+    label: string;
+    // valueIndex: number;
+}
+export interface ValueAxis {
+    position: AxisPosition;
+    scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto'];
+    scaleRange: [number, number];
+    label: string;
+}
+export interface CategoryAxis {
+    position: AxisPosition;
+    scaleDomain: [number, number | 'max'];
+    scalePadding: number;
+    label: string;
+}
+
+export type VisibleFilter<T extends ModelType> = (datum: ModelDatum<T>) => boolean | null;
+
+export interface Container {
+  // gap: number
+  columnAmount: number
+  rowAmount: number
+  columnGap: number | 'auto'
+  rowGap: number | 'auto'
+}
+
+export interface ContainerPosition {
+  slotIndex: number
+  rowIndex: number
+  columnIndex: number
+  // translate: [number, number]
+  startX: number
+  startY: number
+  centerX: number
+  centerY: number
+  width: number
+  height: number
+}
+
+// container - 有縮放的
+export interface ContainerPositionScaled {
+  slotIndex: number
+  rowIndex: number
+  columnIndex: number
+  translate: [number, number]
+  scale: [number, number]
+}
+
+export interface Padding {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+export interface Layout extends Padding {
+  width: number;
+  height: number;
+  rootWidth: number;
+  rootHeight: number;
+}
+
+export type HighlightTarget = 'series' | 'category' | 'datum' | 'none'
+
+export interface GraphicStyles {
+  padding: Padding,
+  highlightTarget: HighlightTarget
+  highlightDefault: string | null
+  unhighlightedOpacity: number
+  transitionDuration: number
+  transitionEase: string
+}
+

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './Common'
+export * from './ComputedData'
+export * from './PluginParams'

package/src/utils/commonUtils.ts

@@ -0,0 +1,31 @@
+// 取得文字寬度
+export function measureTextWidth (text: string, size: number = 10) {
+  const context = document.createElement("canvas").getContext("2d")
+  let width = context?.measureText(text)?.width ?? 0
+  return width * size / 10 // 以10為基準
+}
+
+// 取得最小及最大值 - 數字陣列
+export function getMinMax (data: number[]): [number, number] {
+  const defaultMinMax: [number, number] = [0, 0] // default
+  if (!data.length) {
+    return defaultMinMax
+  }
+  const minMax: [number, number] = data.reduce((prev, current) => {
+    // [min, max]
+    return [
+      current < prev[0] ? current : prev[0],
+      current > prev[1] ? current : prev[1]
+    ]
+  }, [data[0], data[0]])
+  return minMax
+}
+
+export function toCurrency (num: number | null): string {
+  if (num === null || Number.isNaN(num) == true) {
+    return String(num || 0)
+  }
+  const parts = num.toString().split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return parts.join('.')
+}

package/src/utils/d3Graphics.ts

@@ -0,0 +1,177 @@
+
+type RenderCircleTextParams = {
+  text: string,
+  radius: number,
+  lineHeight: number,
+  isBreakAll: boolean,
+  limit?:number
+}
+
+type Line = { width: number; text: string }
+
+export function renderCircleText (selection: d3.Selection<any, any, any, any>, {
+  text,
+  radius,
+  lineHeight,
+  isBreakAll = false,
+  limit = 0
+}: RenderCircleTextParams): d3.Selection<SVGTSpanElement, Line, SVGTextElement, any> | undefined {
+  if (selection == null || text == null) {
+    console.error("selection or text is not defined")
+    return
+  }
+  if (radius == null) {
+    const getBox = selection.node().getBBox()
+    radius = getBox.width / 2
+  }
+
+  function getWords (text: string) {
+    let words
+    if (isBreakAll) {
+      words = text.split('')
+    } else {
+      words = text.split(/\s+/g) // To hyphenate: /\s+|(?<=-)/
+    }
+    if (!words[words.length - 1]) words.pop()
+    if (!words[0]) words.shift()
+    return words
+  }
+
+  // 省略文章字數
+  function ellipisText (text:string, limit:number) {
+    if (text && limit) {
+      if (text.length > limit) {
+        text = text.substring(0, limit) + "..."; // 超過字數以"..."取代
+      }
+    }
+    return text;
+  }
+
+  function measureWidth (text: string) {
+    const context = document.createElement("canvas").getContext("2d")
+    // return text => context.measureText(text).width
+    return context?.measureText(text)?.width ?? 0
+  }
+
+  function getTargetWidth (text: string) {
+    const m = measureWidth(text.trim())
+    const result = Math.sqrt(m * lineHeight)
+    return result
+    // return(
+      // Math.sqrt(measureWidth(text.trim()) * lineHeight)
+    // )
+  }
+
+  function getLines (words: string[], targetWidth: number) {
+    let line: Line = { width: 0, text: '' }
+    let lineWidth0 = Infinity
+    const lines: Array<Line> = []
+    let space = " "
+    if (isBreakAll) {
+      space = ""
+    }
+    for (let i = 0, n = words.length; i < n; ++i) {
+      const lineText1 = (line.text ? line.text + space : '') + words[i]
+      const lineWidth1 = measureWidth(lineText1)
+      if ((lineWidth0 + lineWidth1) / 2 < targetWidth) {
+        line.width = lineWidth0 = lineWidth1
+        line.text = lineText1
+      } else {
+        lineWidth0 = measureWidth(words[i])
+        line = {width: lineWidth0, text: words[i]}
+        lines.push(line)
+      }
+    }
+    return lines
+  }
+
+  function getTextRadius (lines: Array<Line>) {
+    let radius = 0
+    for (let i = 0, n = lines.length; i < n; ++i) {
+      const dy: number = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight
+      const dx: number = lines[i].width / 2
+      radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2))
+    }
+    return radius
+  }
+
+  function draw (selection: d3.Selection<any, any, any, any>, text: string) {
+    if(limit > 0) text = ellipisText(text,limit)
+    const words = getWords(text)
+    const targetWidth = getTargetWidth(text)
+    const lines = getLines(words, targetWidth)
+    const textRadius = getTextRadius(lines)
+
+    let t = selection.select<SVGTextElement>("text")
+    if (!t.size()) {
+      t = selection.append("text")
+    }
+    t.attr("transform", `translate(${0},${0}) scale(${radius / textRadius})`)
+    const tspanUpdate = t.selectAll<SVGTSpanElement, Line>("tspan")
+      .data(lines)
+    const tspanEnter = tspanUpdate.enter()
+      .append<SVGTSpanElement>("tspan")
+      .attr("x", 0)
+      .merge(tspanUpdate as d3.Selection<SVGTSpanElement, Line, SVGTextElement, undefined>)
+      .attr("y", (d: Line, i: number) => (i - lines.length / 2 + 0.8) * lineHeight)
+      .text((d: Line) => d.text)
+    tspanUpdate.exit().remove()
+
+    // return selection.node()
+    return tspanUpdate.merge(tspanEnter)
+  }
+
+  return draw(selection, text)
+}
+
+// 圖軸上的多行tspan
+export function renderTspansOnAxis (textSelection: d3.Selection<d3.BaseType, unknown, null, undefined>, {
+  textArr,
+  textSizePx,
+  categoryAxisPosition,
+  isContainerRotated // 外層是否有變形處理
+}: {
+  textArr: string[]
+  textSizePx: number
+  categoryAxisPosition: 'top' | 'right' | 'bottom' | 'left'
+  isContainerRotated: boolean
+}) {
+  // -- 將原本單行文字改為多行文字 --
+  textSelection.text(null) // 先清空原本的 text
+
+  const textX = Number(textSelection.attr('x'))
+  let textY = Number(textSelection.attr('y'))
+  if (isContainerRotated && categoryAxisPosition === 'top') {
+    // 當文字在上方時，要往上偏移第一行的高度
+    textY -= (textArr.length - 1) * textSizePx
+  }
+  
+  textSelection
+    .selectAll('tspan')
+    .data(textArr)
+    .join('tspan')
+    .attr('x', textX)
+    .attr('y', (_d, _i) => textY + _i * textSizePx)
+    .text(d => d)
+}
+
+// 四象限上的多行tspan
+export function renderTspansOnQuadrant (textSelection: d3.Selection<d3.BaseType, unknown, null, undefined>, {
+  textArr,
+  fontSizePx,
+  quadrant
+}: {
+  textArr: string[]
+  fontSizePx: number
+  quadrant: number
+}) {
+  textSelection
+    .selectAll('tspan')
+    .data(textArr)
+    .join('tspan')
+    .attr('x', 0)
+    .attr('y', (_d, _i) => quadrant == 1 || quadrant == 2
+      ? - (textArr.length - 1 - _i) * fontSizePx
+      : _i * fontSizePx)
+    .text(d => d)
+}

package/src/utils/d3Scale.ts

@@ -0,0 +1,198 @@
+import * as d3 from 'd3'
+import { DEFAULT_VALUE_AXIS } from '../const/sharedPluginParams'
+
+// scaleLinear - 連續資料 -> 座標
+export const createValueToAxisScale = ({
+  maxValue = 1,
+  minValue = 0,
+  axisWidth,
+  scaleDomain = DEFAULT_VALUE_AXIS.scaleDomain,
+  scaleRange = DEFAULT_VALUE_AXIS.scaleRange,
+  reverse = false
+}: {
+  maxValue: number
+  minValue: number
+  axisWidth: number
+  scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
+  scaleRange: [number, number] // 0-1
+  reverse?: boolean
+}) => {
+  // if (minValue === maxValue) {
+  //   maxValue += 1 // 避免最大及最小值相同造成無法計算scale
+  //   minValue -= 1
+  // }
+  
+  // -- 無值補上預設值 --
+  const domainMin: number | 'min' | 'auto' = scaleDomain[0] ?? DEFAULT_VALUE_AXIS.scaleDomain[0]
+  const domainMax: number | 'max' | 'auto' = scaleDomain[1] ?? DEFAULT_VALUE_AXIS.scaleDomain[1]
+  const rangeMin: number = scaleRange[0] ?? DEFAULT_VALUE_AXIS.scaleRange[0]
+  const rangeMax: number = scaleRange[1] ?? DEFAULT_VALUE_AXIS.scaleRange[1]
+
+  // -- 'auto' | 'max' | 'min' 替換成實際值 --
+  let domainMinValue: number = (() => {
+    if (domainMin === 'auto') {
+      return minValue < 0 ? minValue : 0
+    } else if (domainMin === 'min') {
+      return minValue
+    } else {
+      return domainMin
+    }
+  })()
+  
+  let domainMaxValue: number = (() => {
+    if (domainMax === 'auto') {
+      return maxValue >= 0 ? maxValue : 0
+    } else if (domainMax === 'max') {
+      return maxValue
+    } else {
+      return domainMax
+    }
+  })()
+  // let rangeMinValue = axisWidth * rangeMin
+  // let rangeMaxValue = axisWidth * rangeMax
+
+  // -- 計算padding --
+  // if (padding > 0) {
+  //   const stepAmount = maxValue - minValue + (padding * 2)
+  //   const eachStepWidth = axisWidth / stepAmount
+  //   const paddingWidth = eachStepWidth * padding
+  //   rangeMinValue += paddingWidth
+  //   rangeMaxValue -= paddingWidth
+  // }
+
+  // -- 依場景大小換算 --
+  const axisDomainMinValue = maxValue - (maxValue - domainMinValue) / (1 - rangeMin)
+  const axisDomainMaxValue = domainMaxValue / rangeMax
+  
+  // return d3.scaleLinear()
+  //   .domain([domainMinValue, domainMaxValue])
+  //   .range([rangeMinValue, rangeMaxValue])
+  if (reverse) {
+    return d3.scaleLinear()
+      .domain([axisDomainMinValue, axisDomainMaxValue])
+      .range([axisWidth, 0])
+  } else {
+    // console.log('domain', [axisDomainMinValue, axisDomainMaxValue])
+    return d3.scaleLinear()
+      .domain([axisDomainMinValue, axisDomainMaxValue])
+      .range([0, axisWidth])
+  }
+}
+
+// scaleLinear - 座標 -> 連續資料
+export const createAxisToValueScale = ({
+  maxValue = 1,
+  minValue = 0,
+  axisWidth,
+  scaleDomain = DEFAULT_VALUE_AXIS.scaleDomain,
+  scaleRange = DEFAULT_VALUE_AXIS.scaleRange,
+  reverse = false
+}: {
+  maxValue: number
+  minValue: number
+  axisWidth: number
+  scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
+  scaleRange: [number, number] // 0-1
+  reverse?: boolean
+}) => {
+  if (minValue === maxValue) {
+    maxValue += 1 // 避免最大及最小值相同造成無法計算scale
+    minValue -= 1
+  }
+  
+  // -- 無值補上預設值 --
+  const domainMin: number | 'min' | 'auto' = scaleDomain[0] ?? DEFAULT_VALUE_AXIS.scaleDomain[0]
+  const domainMax: number | 'max' | 'auto' = scaleDomain[1] ?? DEFAULT_VALUE_AXIS.scaleDomain[1]
+  const rangeMin: number = scaleRange[0] ?? DEFAULT_VALUE_AXIS.scaleRange[0]
+  const rangeMax: number = scaleRange[1] ?? DEFAULT_VALUE_AXIS.scaleRange[1]
+
+  // -- 'auto' | 'max' | 'min' 替換成實際值 --
+  let domainMinValue: number = (() => {
+    if (domainMin === 'auto') {
+      return minValue < 0 ? minValue : 0
+    } else if (domainMin === 'min') {
+      return minValue
+    } else {
+      return domainMin
+    }
+  })()
+  
+  let domainMaxValue: number = (() => {
+    if (domainMax === 'auto') {
+      return maxValue >= 0 ? maxValue : 0
+    } else if (domainMax === 'max') {
+      return maxValue
+    } else {
+      return domainMax
+    }
+  })()
+  // let rangeMinValue = axisWidth * rangeMin
+  // let rangeMaxValue = axisWidth * rangeMax
+
+  // -- 計算padding --
+  // if (padding > 0) {
+  //   const stepAmount = maxValue - minValue + (padding * 2)
+  //   const eachStepWidth = axisWidth / stepAmount
+  //   const paddingWidth = eachStepWidth * padding
+  //   rangeMinValue += paddingWidth
+  //   rangeMaxValue -= paddingWidth
+  // }
+
+  // -- 依場景大小換算 --
+  const axisDomainMinValue = maxValue - (maxValue - domainMinValue) / (1 - rangeMin)
+  const axisDomainMaxValue = domainMaxValue / rangeMax
+  
+  // return d3.scaleLinear()
+  //   .domain([domainMinValue, domainMaxValue])
+  //   .range([rangeMinValue, rangeMaxValue])
+  if (reverse) {
+    return d3.scaleLinear()
+      .domain([axisWidth, 0])
+      .range([axisDomainMinValue, axisDomainMaxValue])
+  } else {
+    return d3.scaleLinear()
+      .domain([0, axisWidth])
+      .range([axisDomainMinValue, axisDomainMaxValue])
+  }
+}
+
+// scalePoint - 非連續資料 -> 座標
+export const createLabelToAxisScale = ({ axisLabels, axisWidth, padding = 0.5 }: {
+  axisLabels: string[]
+  axisWidth: number
+  padding?: number
+  // reverse?: boolean  
+}) => {
+  let range: [d3.NumberValue, d3.NumberValue] = [0, axisWidth]
+
+  return d3.scalePoint()
+      .domain(axisLabels)
+      .range(range)
+      .padding(padding)
+}
+
+// scaleQuantize - 座標 -> 非連續資料索引
+export const createAxisToLabelIndexScale = ({ axisLabels, axisWidth, padding = 0, reverse = false }:{
+  axisLabels: string[] | Date[],
+  axisWidth: number
+  padding?: number
+  reverse?: boolean
+}) => {
+
+  let range: number[] = axisLabels.map((d: string | Date, i: number) => i)
+  if (reverse) {
+    range.reverse()
+  }
+  if (!range.length) {
+    // 至少要有一個值否則scale會出錯
+    range = [0]
+  }
+
+  const step = range.length - 1 + (padding * 2) // 圖軸刻度分段數量
+  const stepWidth = axisWidth / step
+  const rangePadding = stepWidth * padding - (stepWidth * 0.5) // 實際要計算的範圍是圖軸左右那邊增加0.5
+
+  return d3.scaleQuantize<number>()
+    .domain([rangePadding, axisWidth - rangePadding])
+    .range(range)
+}

package/src/utils/d3Utils.ts

@@ -0,0 +1,92 @@
+import * as d3 from 'd3'
+
+export function getSvgGElementSize (selection: d3.Selection<SVGGElement, any, any, any>): DOMRect {
+  try {
+    return selection.node()!.getBBox()
+  } catch (e: any) {
+    throw new Error(e)
+  }
+}
+
+// 使用字串加入svg
+export function appendSvg (selection: d3.Selection<any, any, any, any>, svgString: string): void {
+  function parseSvg (svgString: string) {
+    const div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
+    div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+ svgString +'</svg>';
+    const frag = document.createDocumentFragment()
+    while (frag && div?.firstChild?.firstChild)
+        frag.appendChild(div.firstChild.firstChild);
+    return frag;
+  }
+  // 刪除現有子節點
+  const node = selection.node()
+  while(node.hasChildNodes())
+  {
+    node.removeChild(node.firstChild);
+  }
+  // 加入dom
+  selection.node().appendChild(parseSvg(svgString))
+}
+
+export function getD3TransitionEase (easeName: string) {
+  if (easeName.substring(0, 4) !== 'ease') {
+    return d3.easeCubic
+  }
+  return (d3 as any)[easeName] ?? d3.easeCubic
+}
+
+export function makeD3Arc ({ axisWidth, innerRadius, outerRadius, padAngle, cornerRadius }: {
+  axisWidth: number
+  innerRadius: number
+  outerRadius: number
+  padAngle: number
+  cornerRadius: number
+}): d3.Arc<any, d3.DefaultArcObject> {
+  const arcScale = d3.scaleLinear()
+    .domain([0, 1])
+    .range([0, axisWidth / 2])
+  
+  const _outerRadius = arcScale(outerRadius)!
+
+  return d3.arc()
+    .innerRadius(arcScale(innerRadius)!)
+    .outerRadius(_outerRadius)
+    .padAngle(padAngle)
+    .padRadius(_outerRadius)
+    .cornerRadius(cornerRadius)
+}
+
+export const parseTickFormatValue = (value: any, tickFormat: string | ((text: d3.NumberValue) =>  string | d3.NumberValue)) => {
+  if (tickFormat! instanceof Function == true) {
+    const v = (tickFormat as ((text: d3.NumberValue) => string))(value)
+    return String(v ?? '')
+  }
+  return d3.format(tickFormat as string)!(value)
+}
+
+export const parseDateTickFormatValue = (value: any, tickFormat: string | ((text: d3.NumberValue) =>  string | d3.NumberValue)) => {
+  if (tickFormat! instanceof Function == true) {
+    return (tickFormat as ((text: d3.NumberValue) => string))(value)
+  }
+  return d3.timeFormat(tickFormat as string)!(value)
+}
+
+export function isLightColor (color: string) {
+  // 1. 用 HSL 的亮度（較符合數學）
+  // const hslColor = d3.hsl(color) // 轉換為 HSL 格式
+  // const lightness = hslColor.l // 取得亮度值 (0 ~ 1)
+  // 2. 用 LAB 的明度（較符合人眼感知）
+  const labColor = d3.lab(color) // 轉換為 LAB 格式
+  const lightness = labColor.l // 取得明度值 (0 ~ 100)
+
+  // console.log(`顏色的亮度為: ${lightness}`);
+  
+  // 判斷顏色深淺
+  if (lightness <= 60) {
+    // console.log("這是一個深色系");
+    return false
+  } else {
+    // console.log("這是一個淺色系");
+    return true
+  }
+}