@orbcharts/plugins-basic 3.0.0-beta.12 → 3.0.0-beta.14

package/src/series/defaults.ts

@@ -18,6 +18,7 @@ export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
     collisionSpacing: 2 // 泡泡間距
   },
   bubbleLabel: {
+    colorType: 'labelContrast',
     fillRate: 0.6,
     lineHeight: 1,
     maxLineLength: 6,
@@ -121,7 +122,7 @@ export const DEFAULT_ROSE_PARAMS: RoseParams = {
   outerRadius: 0.85,
   padAngle: 0,
   strokeColorType: 'background',
-  strokeWidth: 0,
+  strokeWidth: 0.5,
   cornerRadius: 0,
   arcScaleType: 'area',
   angleIncreaseWhileHighlight: 0.05
@@ -173,8 +174,19 @@ export const DEFAULT_SERIES_TOOLTIP_PARAMS: SeriesTooltipParams = {
     const datumLabelSvg = hasDatumLabel
       ? `<tspan>${eventData.datum.label}</tspan>  `
       : ''
+    const seriesLabelTextWidth = hasSeriesLabel
+      ? utils.measureTextWidth(`${eventData.seriesLabel}${eventData.datum.value}`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(`${eventData.datum.label}${eventData.datum.value}`, styles.textSizePx)
+      : 0
+    const maxTextWidth = Math.max(seriesLabelTextWidth, datumLabelTextWidth)
+    const lineEndX = hasDatumLabel
+      ? maxTextWidth + styles.textSizePx * 1.5
+      : 0
+    const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
     const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-    ${datumLabelSvg}<tspan font-weight="bold">${eventData.datum.value}</tspan>
+    ${datumLabelSvg}<tspan font-weight="bold" text-anchor="${valueTextAnchor}" x="${lineEndX}">${eventData.datum.value}</tspan>
   </text>`
 
     return `${seriesSvg}
@@ -197,8 +209,19 @@ DEFAULT_SERIES_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, u
     const datumLabelSvg = hasDatumLabel
       ? \`<tspan>\${eventData.datum.label}</tspan>  \`
       : ''
+    const seriesLabelTextWidth = hasSeriesLabel
+      ? utils.measureTextWidth(\`\${eventData.seriesLabel}\${eventData.datum.value}\`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(\`\${eventData.datum.label}\${eventData.datum.value}\`, styles.textSizePx)
+      : 0
+    const maxTextWidth = Math.max(seriesLabelTextWidth, datumLabelTextWidth)
+    const lineEndX = hasDatumLabel
+      ? maxTextWidth + styles.textSizePx * 1.5
+      : 0
+    const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
     const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-    \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
+    \${datumLabelSvg}<tspan font-weight="bold" text-anchor="\${valueTextAnchor}" x="\${lineEndX}">\${eventData.datum.value}</tspan>
   </text>\`
 
     return \`\${seriesSvg}

package/src/series/plugins/Bubbles.ts

@@ -24,6 +24,7 @@ import type { BubblesParams, ArcScaleType } from '../../../lib/plugins-basic-typ
 import { DEFAULT_BUBBLES_PARAMS } from '../defaults'
 import { renderCircleText } from '../../utils/d3Graphics'
 import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
+import { getDatumColor } from '../../utils/orbchartsUtils'
 
 interface BubblesDatum extends ComputedDatumSeries {
   x: number
@@ -73,6 +74,9 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
     }
     if (params.bubbleLabel) {
       const bubbleLabelResult = validateColumns(params.bubbleLabel, {
+        colorType: {
+          toBeOption: 'ColorType'
+        },
         fillRate: {
           toBeTypes: ['number']
         },
@@ -204,10 +208,11 @@ function createBubblesData ({ visibleComputedLayoutData, LastBubbleDataMap, grap
   })
 }
 
-function renderBubbles ({ selection, bubblesData, fullParams, sumSeries }: {
+function renderBubbles ({ selection, bubblesData, fullParams, fullChartParams, sumSeries }: {
   selection: d3.Selection<SVGGElement, any, any, any>
   bubblesData: BubblesDatum[]
   fullParams: BubblesParams
+  fullChartParams: ChartParams
   sumSeries: boolean
 }) {
   const bubblesSelection = selection.selectAll<SVGGElement, BubblesDatum>("g")
@@ -272,6 +277,13 @@ function renderBubbles ({ selection, bubblesData, fullParams, sumSeries }: {
           : fullParams.bubbleLabel.wordBreakAll
       })
 
+      // -- text color --
+      gSelection.select('text').attr('fill', _ => getDatumColor({
+        datum: d,
+        colorType: fullParams.bubbleLabel.colorType,
+        fullChartParams: fullChartParams
+      }))
+
     })
 
   return bubblesSelection
@@ -436,6 +448,7 @@ export const Bubbles = defineSeriesPlugin(pluginConfig)(({ selection, name, obse
   const bubblesSelection$ = combineLatest({
     bubblesData: bubblesData$,
     fullParams: observer.fullParams$,
+    fullChartParams: observer.fullChartParams$,
     SeriesContainerPositionMap: observer.SeriesContainerPositionMap$,
     sumSeries: sumSeries$
   }).pipe(
@@ -450,6 +463,7 @@ export const Bubbles = defineSeriesPlugin(pluginConfig)(({ selection, name, obse
         selection,
         bubblesData: data.bubblesData,
         fullParams: data.fullParams,
+        fullChartParams: data.fullChartParams,
         sumSeries: data.sumSeries
       })
       

package/src/tree/defaults.ts

@@ -3,7 +3,7 @@ import type { TreeMapParams, TreeLegendParams, TreeTooltipParams } from '../../l
 export const DEFAULT_TREE_MAP_PARAMS: TreeMapParams = {
   paddingInner: 2,
   paddingOuter: 2,
-  labelColorType: 'primary',
+  labelColorType: 'labelContrast',
   squarifyRatio: 1.618034, // 黃金比例
   sort: (a, b) => b.value - a.value
 }
@@ -44,8 +44,19 @@ export const DEFAULT_TREE_TOOLTIP_PARAMS: TreeTooltipParams = {
     const datumLabelSvg = hasDatumLabel
       ? `<tspan>${eventData.datum.label}</tspan>  `
       : ''
+    const categoryLabelTextWidth = hasCategoryLabel
+      ? utils.measureTextWidth(`${eventData.categoryLabel}${eventData.datum.value}`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(`${eventData.datum.label}${eventData.datum.value}`, styles.textSizePx)
+      : 0
+    const maxTextWidth = Math.max(categoryLabelTextWidth, datumLabelTextWidth)
+    const lineEndX = hasDatumLabel
+      ? maxTextWidth + styles.textSizePx * 0.5
+      : 0
+    const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
     const datumSvg = `<text font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
-    ${datumLabelSvg}<tspan font-weight="bold">${eventData.datum.value}</tspan>
+    ${datumLabelSvg}<tspan font-weight="bold" text-anchor="${valueTextAnchor}" x="${lineEndX}">${eventData.datum.value}</tspan>
   </text>`
 
     return `${categorySvg}
@@ -55,7 +66,7 @@ export const DEFAULT_TREE_TOOLTIP_PARAMS: TreeTooltipParams = {
   },
 }
 DEFAULT_TREE_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
-    const hasCategoryLabel = eventData.categoryLabel ? true : false
+  const hasCategoryLabel = eventData.categoryLabel ? true : false
     const hasDatumLabel = eventData.datum.label ? true : false
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
@@ -68,8 +79,19 @@ DEFAULT_TREE_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, uti
     const datumLabelSvg = hasDatumLabel
       ? \`<tspan>\${eventData.datum.label}</tspan>  \`
       : ''
+    const categoryLabelTextWidth = hasCategoryLabel
+      ? utils.measureTextWidth(\`\${eventData.categoryLabel}\${eventData.datum.value}\`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(\`\${eventData.datum.label}\${eventData.datum.value}\`, styles.textSizePx)
+      : 0
+    const maxTextWidth = Math.max(categoryLabelTextWidth, datumLabelTextWidth)
+    const lineEndX = hasDatumLabel
+      ? maxTextWidth + styles.textSizePx * 0.5
+      : 0
+    const valueTextAnchor = hasDatumLabel ? 'end' : 'start'
     const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-    \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
+    \${datumLabelSvg}<tspan font-weight="bold" text-anchor="\${valueTextAnchor}" x="\${lineEndX}">\${eventData.datum.value}</tspan>
   </text>\`
 
     return \`\${categorySvg}

package/src/tree/plugins/TreeMap.ts

@@ -15,7 +15,7 @@ import {
 import type { Layout, ComputedDataTree, DataFormatterTree, ChartParams } from '../../../lib/core-types'
 import type { TreeMapParams } from '../../../lib/plugins-basic-types'
 import { DEFAULT_TREE_MAP_PARAMS } from '../defaults'
-import { getClassName, getColor } from '../../utils/orbchartsUtils'
+import { getClassName, getDatumColor } from '../../utils/orbchartsUtils'
 import { LAYER_INDEX_OF_GRAPHIC } from '../../const'
 
 const pluginName = 'TreeMap'
@@ -112,7 +112,11 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams, textSiz
                 .text(null)
                 .append("tspan")
                 .attr('cursor', 'pointer')
-                .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
+                .attr('fill', getDatumColor({
+                  colorType: fullParams.labelColorType,
+                  datum: d.data,
+                  fullChartParams
+                }))
                 .attr('font-size', fullChartParams.styles.textSize)
                 .attr("x", x)
                 .attr("y", y)
@@ -128,7 +132,11 @@ function renderTree ({ selection, treeData, fullParams, fullChartParams, textSiz
                   tspan = textElement
                     .append("tspan")
                     .attr('cursor', 'pointer')
-                    .attr('fill', getColor(fullParams.labelColorType, fullChartParams))
+                    .attr('fill', getDatumColor({
+                      colorType: fullParams.labelColorType,
+                      datum: d.data,
+                      fullChartParams
+                    }))
                     .attr('font-size', fullChartParams.styles.textSize)
                     .attr("x", x)
                     .attr("y", y)

package/src/utils/d3Utils.ts

@@ -71,4 +71,22 @@ export const parseDateTickFormatValue = (value: any, tickFormat: string | ((text
   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/orbchartsUtils.ts

@@ -7,6 +7,7 @@ import type {
   ComputedDatumBaseSeries,
   ComputedDatumBaseCategory } from '../../lib/core-types'
 import { getMinMax } from './commonUtils'
+import { isLightColor } from './d3Utils'
 
 // 取得最小及最大值 - datum格式陣列資料
 export function getMinMaxValue (data: (ComputedDatumBase & ComputedDatumBaseValue)[]): [number, number] {
@@ -19,14 +20,13 @@ export function getMinMaxValue (data: (ComputedDatumBase & ComputedDatumBaseValu
 // 取得colorType顏色
 export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
   const colors = fullChartParams.colors[fullChartParams.colorScheme]
-  // 對應series資料中第1個顏色
   if (colorType === 'label') {
-    return colors.label[0]
+    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]
   }
-  // 對應colorType設定的顏色
-  // return colors[colorType] != null
-  //   ? colors[colorType]
-  //   : colors.primary
   return colorType == 'none'
     ? 'none'
     : colors[colorType] != undefined
@@ -42,7 +42,7 @@ export function getCategoryValueColor ({ datum, colorType, fullChartParams }: {
 
 }
 
-// // 取得Series顏色 @Q@ 待重構完後刪除
+// // 取得Series顏色
 // export function getSeriesColor (seriesIndex: number, fullChartParams: ChartParams) {
 //   const colorIndex = seriesIndex < fullChartParams.colors[fullChartParams.colorScheme].series.length
 //     ? seriesIndex
@@ -50,23 +50,37 @@ export function getCategoryValueColor ({ datum, colorType, fullChartParams }: {
 //   return fullChartParams.colors[fullChartParams.colorScheme].series[colorIndex]
 // }
 
-// 取得Datum顏色 @Q@ 待重構完後刪除
+// 取得Datum顏色
 export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBase, colorType: ColorType, fullChartParams: ChartParams }) {
-  // 對應series資料中的顏色
+  const colors = fullChartParams.colors[fullChartParams.colorScheme]
+
   if (colorType === 'label') {
-    if ((datum as unknown as ComputedDatumBaseSeries).color) {
-      return (datum as unknown as ComputedDatumBaseSeries).color
+    const datumColor: string | undefined = (datum as unknown as ComputedDatumBaseSeries).color
+    if (datumColor) {
+      return datumColor
     } else {
-      // 非series類型的資料則回傳陣列中第1個顏色
-      return fullChartParams.colors[fullChartParams.colorScheme].label[0]
+      // 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' 
-    : fullChartParams.colors[fullChartParams.colorScheme][colorType] != undefined
-      ? fullChartParams.colors[fullChartParams.colorScheme][colorType]
-      : fullChartParams.colors[fullChartParams.colorScheme].primary
+    : colors[colorType] != undefined
+      ? colors[colorType]
+      : colors.primary
 }
 
 export function getClassName (pluginName: string, elementName: string, modifier?: string) {