@orbcharts/plugins-basic 3.0.0-alpha.49 → 3.0.0-alpha.51

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,125 @@
-
-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)
 }

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;
+}

package/src/utils/orbchartsUtils.ts

@@ -1,100 +1,100 @@
-import type {
-  AxisPosition,
-  ColorType,
-  ChartParams,
-  ComputedDatumBase,
-  ComputedDatumSeriesValue,
-  ComputedDatumCategoryValue } from '@orbcharts/core'
-import { getMinAndMax } from './commonUtils'
-
-// 取得最小及最大值 - datum格式陣列資料
-export function getMinAndMaxValue (data: ComputedDatumBase[]): [number, number] {
-  const arr = data
-    .filter(d => d.value != null && d.visible != false)
-    .map(d => d.value as number)
-  return getMinAndMax(arr)
-}
-
-// 取得colorType顏色
-export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
-  const colors = fullChartParams.colors[fullChartParams.colorScheme]
-  // 對應series資料中第1個顏色
-  if (colorType === 'series') {
-    return colors.series[0]
-  }
-  // 對應colorType設定的顏色
-  // return colors[colorType] != null
-  //   ? colors[colorType]
-  //   : colors.primary
-  return colorType == 'none'
-    ? 'none'
-    : colors[colorType] != undefined
-      ? colors[colorType]
-      : colors.primary // 如果比對不到
-}
-
-export function getSeriesValueColor () {
-
-}
-
-export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumCategoryValue, colorType: ColorType, fullChartParams: ChartParams }) {
-
-}
-
-// // 取得Series顏色 @Q@ 待重構完後刪除
-// export function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
-//   const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].series.length
-//     ? seriesIndex
-//     : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].series.length
-//   return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
-// }
-
-// 取得Datum顏色 @Q@ 待重構完後刪除
-export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBase, colorType: ColorType, fullChartParams: ChartParams }) {
-  // 對應series資料中的顏色
-  if (colorType === 'series') {
-    if ((datum as unknown as ComputedDatumSeriesValue).color) {
-      return (datum as unknown as ComputedDatumSeriesValue).color
-    } else {
-      // 非series類型的資料則回傳陣列中第1個顏色
-      return fullChartParams.colors[fullChartParams.colorScheme].series[0]
-    }
-  }
-  // 對應colorType設定的顏色
-  return colorType == 'none'
-    ? 'none' 
-    : fullChartParams.colors[fullChartParams.colorScheme][colorType] != undefined
-      ? fullChartParams.colors[fullChartParams.colorScheme][colorType]
-      : fullChartParams.colors[fullChartParams.colorScheme].primary
-}
-
-export function getClassName (pluginName: string, elementName: string, modifier?: string) {
-  const modifierText = modifier ? `--${modifier}` : ''
-  return `orbcharts-${pluginName}__${elementName}${modifierText}`
-}
-
-export function getUniID (pluginName: string, elementName: string) {
-  const textLength = 5
-  // 英文+數字
-  const randomText: string = Math.random().toString(36).substr(2, textLength)
-  
-  return getClassName(pluginName, elementName, randomText)
-}
-
-
-export function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
-  xAxisPosition: AxisPosition
-  yAxisPosition: AxisPosition
-  width: number
-  height: number
-}) {
-  if ((xAxisPosition === 'bottom' || xAxisPosition === 'top') && (yAxisPosition === 'left' || yAxisPosition === 'right')) {
-    return { width, height }
-  } else if ((xAxisPosition === 'left' || xAxisPosition === 'right') && (yAxisPosition === 'bottom' || yAxisPosition === 'top')) {
-    return {
-      width: height,
-      height: width
-    }
-  }
-}
-
+import type {
+  AxisPosition,
+  ColorType,
+  ChartParams,
+  ComputedDatumBase,
+  ComputedDatumSeriesValue,
+  ComputedDatumCategoryValue } from '@orbcharts/core'
+import { getMinAndMax } from './commonUtils'
+
+// 取得最小及最大值 - datum格式陣列資料
+export function getMinAndMaxValue (data: ComputedDatumBase[]): [number, number] {
+  const arr = data
+    .filter(d => d.value != null && d.visible != false)
+    .map(d => d.value as number)
+  return getMinAndMax(arr)
+}
+
+// 取得colorType顏色
+export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
+  const colors = fullChartParams.colors[fullChartParams.colorScheme]
+  // 對應series資料中第1個顏色
+  if (colorType === 'series') {
+    return colors.series[0]
+  }
+  // 對應colorType設定的顏色
+  // return colors[colorType] != null
+  //   ? colors[colorType]
+  //   : colors.primary
+  return colorType == 'none'
+    ? 'none'
+    : colors[colorType] != undefined
+      ? colors[colorType]
+      : colors.primary // 如果比對不到
+}
+
+export function getSeriesValueColor () {
+
+}
+
+export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumCategoryValue, colorType: ColorType, fullChartParams: ChartParams }) {
+
+}
+
+// // 取得Series顏色 @Q@ 待重構完後刪除
+// export function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
+//   const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].series.length
+//     ? seriesIndex
+//     : seriesIndex % fullChartParams.colors[fullChartParams.colorScheme].series.length
+//   return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
+// }
+
+// 取得Datum顏色 @Q@ 待重構完後刪除
+export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBase, colorType: ColorType, fullChartParams: ChartParams }) {
+  // 對應series資料中的顏色
+  if (colorType === 'series') {
+    if ((datum as unknown as ComputedDatumSeriesValue).color) {
+      return (datum as unknown as ComputedDatumSeriesValue).color
+    } else {
+      // 非series類型的資料則回傳陣列中第1個顏色
+      return fullChartParams.colors[fullChartParams.colorScheme].series[0]
+    }
+  }
+  // 對應colorType設定的顏色
+  return colorType == 'none'
+    ? 'none' 
+    : fullChartParams.colors[fullChartParams.colorScheme][colorType] != undefined
+      ? fullChartParams.colors[fullChartParams.colorScheme][colorType]
+      : fullChartParams.colors[fullChartParams.colorScheme].primary
+}
+
+export function getClassName (pluginName: string, elementName: string, modifier?: string) {
+  const modifierText = modifier ? `--${modifier}` : ''
+  return `orbcharts-${pluginName}__${elementName}${modifierText}`
+}
+
+export function getUniID (pluginName: string, elementName: string) {
+  const textLength = 5
+  // 英文+數字
+  const randomText: string = Math.random().toString(36).substr(2, textLength)
+  
+  return getClassName(pluginName, elementName, randomText)
+}
+
+
+export function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
+  xAxisPosition: AxisPosition
+  yAxisPosition: AxisPosition
+  width: number
+  height: number
+}) {
+  if ((xAxisPosition === 'bottom' || xAxisPosition === 'top') && (yAxisPosition === 'left' || yAxisPosition === 'right')) {
+    return { width, height }
+  } else if ((xAxisPosition === 'left' || xAxisPosition === 'right') && (yAxisPosition === 'bottom' || yAxisPosition === 'top')) {
+    return {
+      width: height,
+      height: width
+    }
+  }
+}
+