@orbcharts/plugins-basic 3.0.0-alpha.68 → 3.0.0-alpha.70

package/src/utils/commonUtils.ts

@@ -1,22 +1,22 @@
-// 取得文字寬度
-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 getMinAndMax (data: number[]): [number, number] {
-  const defaultMinAndMax: [number, number] = [0, 0] // default
-  if (!data.length) {
-    return defaultMinAndMax
-  }
-  const minAndMax: [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 minAndMax
+// 取得文字寬度
+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 getMinAndMax (data: number[]): [number, number] {
+  const defaultMinAndMax: [number, number] = [0, 0] // default
+  if (!data.length) {
+    return defaultMinAndMax
+  }
+  const minAndMax: [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 minAndMax
 }

package/src/utils/d3Graphics.ts

@@ -1,125 +1,175 @@
-
-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)
+
+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,
+  groupAxisPosition
+}: {
+  textArr: string[]
+  textSizePx: number
+  groupAxisPosition: 'top' | 'right' | 'bottom' | 'left'
+}) {
+  // -- 將原本單行文字改為多行文字 --
+  textSelection.text(null) // 先清空原本的 text
+
+  const textX = Number(textSelection.attr('x'))
+  let textY = Number(textSelection.attr('y'))
+  if (groupAxisPosition === '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,
+  textSizePx,
+  quadrant
+}: {
+  textArr: string[]
+  textSizePx: 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) * textSizePx
+      : _i * textSizePx)
+    .text(d => d)
 }

package/src/utils/d3Utils.ts

@@ -1,73 +1,73 @@
-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)) => {
-  if (tickFormat! instanceof Function == true) {
-    return (tickFormat as ((text: d3.NumberValue) => string))(value)
-  }
-  return d3.format(tickFormat as string)!(value)
-}
-
-export const parseDateTickFormatValue = (value: any, tickFormat: string | ((text: d3.NumberValue) => string)) => {
-  if (tickFormat! instanceof Function == true) {
-    return (tickFormat as ((text: d3.NumberValue) => string))(value)
-  }
-  return d3.timeFormat(tickFormat as string)!(value)
-}
-
-
+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)) => {
+  if (tickFormat! instanceof Function == true) {
+    return (tickFormat as ((text: d3.NumberValue) => string))(value)
+  }
+  return d3.format(tickFormat as string)!(value)
+}
+
+export const parseDateTickFormatValue = (value: any, tickFormat: string | ((text: d3.NumberValue) => string)) => {
+  if (tickFormat! instanceof Function == true) {
+    return (tickFormat as ((text: d3.NumberValue) => string))(value)
+  }
+  return d3.timeFormat(tickFormat as string)!(value)
+}
+
+

package/src/utils/observables.ts

@@ -1,14 +1,14 @@
-import * as d3 from 'd3'
-import { Observable, merge, distinctUntilChanged, fromEvent } from 'rxjs'
-
-export function d3EventObservable(selection: d3.Selection<any, any, any, any>, event: any) {
-  // Start with an observable that will never emit
-  let obs = new Observable(() => {});
-  selection.each(function () {
-      // Create observables from each of the elements
-      const events = fromEvent(this as any, event);
-      // Merge the observables into one
-      obs = merge(obs, events);
-  });
-  return obs;
-}
+import * as d3 from 'd3'
+import { Observable, merge, distinctUntilChanged, fromEvent } from 'rxjs'
+
+export function d3EventObservable(selection: d3.Selection<any, any, any, any>, event: any) {
+  // Start with an observable that will never emit
+  let obs = new Observable(() => {});
+  selection.each(function () {
+      // Create observables from each of the elements
+      const events = fromEvent(this as any, event);
+      // Merge the observables into one
+      obs = merge(obs, events);
+  });
+  return obs;
+}