@orbcharts/plugins-basic 3.0.0-alpha.24

package/src/utils/d3Graphics.ts

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

package/src/utils/d3Utils.ts

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

package/src/utils/observables.ts

@@ -0,0 +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;
+}

package/src/utils/orbchartsUtils.ts

@@ -0,0 +1,70 @@
+import type { AxisPosition, ColorType, ChartParams, ComputedDatumBase, ComputedDatumSeriesValue } 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)
+}
+
+
+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
+}
+
+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 fullChartParams.colors[fullChartParams.colorScheme][colorType] != null
+    ? 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
+    }
+  }
+}
+

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports" : true,
+    "esModuleInterop" : true
+  }
+}

package/vite.config.js

@@ -0,0 +1,45 @@
+// import { fileURLToPath, URL } from 'node:url'
+
+// import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+const releaseConfig = {
+  plugins: [
+    dts({
+      insertTypesEntry: true
+    })
+  ],
+  compilerOptions: {
+    composite: true
+  },
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      name: 'orbcharts-plugins-basic',
+      formats: ["es", "umd"],
+      fileName: format => `orbcharts-plugins-basic.${format}.js`
+    },
+    // rollupOptions: {
+    //   input: {
+    //     main: resolve(__dirname, "src/index.ts")
+    //   },
+    //   external: ['vue'],
+    //   output: {
+    //     assetFileNames: 'my-library.css',
+    //     exports: "named",
+    //     globals: {
+    //       vue: 'Vue',
+    //     },
+    //   },
+    // },
+  }
+}
+
+export default defineConfig(({ command, mode }) => {
+  if (mode === 'release') {
+    return releaseConfig
+  } else {
+    return releaseConfig
+  }
+})