@orbcharts/plugins-basic 3.0.0-beta.13 → 3.0.0-beta.15

package/src/utils/d3Utils.ts

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

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: Observable<MouseEvent> = new Observable(() => {});
-  selection.each(function () {
-      // Create observables from each of the elements
-      const events: Observable<MouseEvent> = fromEvent(this, 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: Observable<MouseEvent> = new Observable(() => {});
+  selection.each(function () {
+      // Create observables from each of the elements
+      const events: Observable<MouseEvent> = fromEvent(this, event);
+      // Merge the observables into one
+      obs = merge(obs, events);
+  });
+  return obs;
+}

package/src/utils/orbchartsUtils.ts

@@ -1,116 +1,130 @@
-import type {
-  AxisPosition,
-  ColorType,
-  ChartParams,
-  ComputedDatumBase,
-  ComputedDatumBaseValue,
-  ComputedDatumBaseSeries,
-  ComputedDatumBaseCategory } from '../../lib/core-types'
-import { getMinMax } from './commonUtils'
-
-// 取得最小及最大值 - datum格式陣列資料
-export function getMinMaxValue (data: (ComputedDatumBase & ComputedDatumBaseValue)[]): [number, number] {
-  const arr = data
-    .filter(d => d.value != null && d.visible != false)
-    .map(d => d.value as number)
-  return getMinMax(arr)
-}
-
-// 取得colorType顏色
-export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
-  const colors = fullChartParams.colors[fullChartParams.colorScheme]
-  // 對應series資料中第1個顏色
-  if (colorType === 'label') {
-    return colors.label[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: ComputedDatumBaseCategory, 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 === 'label') {
-    if ((datum as unknown as ComputedDatumBaseSeries).color) {
-      return (datum as unknown as ComputedDatumBaseSeries).color
-    } else {
-      // 非series類型的資料則回傳陣列中第1個顏色
-      return fullChartParams.colors[fullChartParams.colorScheme].label[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
-    }
-  }
-}
-
-// export function getTicks (minValue: number, maxValue: number, defaultTicks: number | null) {
-//   let valueLength = maxValue - minValue
-//   if (defaultTicks === null) {
-//     if (valueLength <= 1) {
-//       return 1
-//     } else {
-//       // d3.js自動判斷
-//       return null
-//     }
-//   } else if (valueLength < defaultTicks) {
-//     return Math.ceil(valueLength)
-//   } else {
-//     return defaultTicks
-//   }
+import type {
+  AxisPosition,
+  ColorType,
+  ChartParams,
+  ComputedDatumBase,
+  ComputedDatumBaseValue,
+  ComputedDatumBaseSeries,
+  ComputedDatumBaseCategory } from '../../lib/core-types'
+import { getMinMax } from './commonUtils'
+import { isLightColor } from './d3Utils'
+
+// 取得最小及最大值 - datum格式陣列資料
+export function getMinMaxValue (data: (ComputedDatumBase & ComputedDatumBaseValue)[]): [number, number] {
+  const arr = data
+    .filter(d => d.value != null && d.visible != false)
+    .map(d => d.value as number)
+  return getMinMax(arr)
+}
+
+// 取得colorType顏色
+export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
+  const colors = fullChartParams.colors[fullChartParams.colorScheme]
+  if (colorType === 'label') {
+    return colors.label[0] // default label color
+  } else if (colorType === 'labelContrast') {
+    return isLightColor(colors.label[0]) // default label color
+      ? colors.labelContrast[1]
+      : colors.labelContrast[0]
+  }
+  return colorType == 'none'
+    ? 'none'
+    : colors[colorType] != undefined
+      ? colors[colorType]
+      : colors.primary // 如果比對不到
+}
+
+export function getSeriesValueColor () {
+
+}
+
+export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBaseCategory, colorType: ColorType, fullChartParams: ChartParams }) {
+
+}
+
+// // 取得Series顏色
+// 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顏色
+export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBase, colorType: ColorType, fullChartParams: ChartParams }) {
+  const colors = fullChartParams.colors[fullChartParams.colorScheme]
+
+  if (colorType === 'label') {
+    const datumColor: string | undefined = (datum as unknown as ComputedDatumBaseSeries).color
+    if (datumColor) {
+      return datumColor
+    } else {
+      // default label color
+      return colors.label[0]
+    }
+  } else if (colorType === 'labelContrast') {
+    const datumColor: string | undefined = (datum as unknown as ComputedDatumBaseSeries).color
+    if (datumColor) {
+      return isLightColor(datumColor)
+        ? colors.labelContrast[1]
+        : colors.labelContrast[0]
+    } else {
+      // default label color
+      return  isLightColor(colors.label[0])
+        ? colors.labelContrast[1]
+        : colors.labelContrast[0]
+    }
+  }
+  // 對應colorType設定的顏色
+  return colorType == 'none'
+    ? 'none' 
+    : colors[colorType] != undefined
+      ? colors[colorType]
+      : colors.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
+    }
+  }
+}
+
+// export function getTicks (minValue: number, maxValue: number, defaultTicks: number | null) {
+//   let valueLength = maxValue - minValue
+//   if (defaultTicks === null) {
+//     if (valueLength <= 1) {
+//       return 1
+//     } else {
+//       // d3.js自動判斷
+//       return null
+//     }
+//   } else if (valueLength < defaultTicks) {
+//     return Math.ceil(valueLength)
+//   } else {
+//     return defaultTicks
+//   }
 // }

package/tsconfig.base.json

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

package/tsconfig.json

@@ -1,3 +1,3 @@
-{
-  "extends": "./tsconfig.base.json"
+{
+  "extends": "./tsconfig.base.json"
 }

package/vite.config.js

@@ -1,23 +1,23 @@
-import { defineConfig } from 'vite'
-import dts from 'vite-plugin-dts'
-
-export default defineConfig(({ command, mode }) => {
-  return {
-    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`
-      },
-    }
-  }
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig(({ command, mode }) => {
+  return {
+    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`
+      },
+    }
+  }
 })