@orbcharts/plugins-basic 3.0.0-beta.8 → 3.0.0

package/src/series/plugins/RoseLabels.ts

@@ -406,8 +406,8 @@ function highlight ({ textSelection, lineSelection, ids, fullChartParams }: {
 function createEachPieLabel (pluginName: string, context: {
   containerSelection: d3.Selection<SVGGElement, any, any, unknown>
   // computedData$: Observable<ComputedDatumSeries[][]>
-  visibleComputedLayoutData$: Observable<ComputedDatumSeries[][]>
-  containerVisibleComputedLayoutData$: Observable<ComputedDatumSeries[]>
+  visibleComputedSortedData$: Observable<ComputedDatumSeries[][]>
+  containerVisibleComputedSortedData$: Observable<ComputedDatumSeries[]>
   // SeriesDataMap$: Observable<Map<string, ComputedDatumSeries[]>>
   fullParams$: Observable<RoseLabelsParams>
   fullChartParams$: Observable<ChartParams>
@@ -435,7 +435,7 @@ function createEachPieLabel (pluginName: string, context: {
     distinctUntilChanged()
   )
 
-  const maxValue$ = context.visibleComputedLayoutData$.pipe(
+  const maxValue$ = context.visibleComputedSortedData$.pipe(
     map(data => Math.max(...data.flat().map(d => d.value))),
     distinctUntilChanged()
   )
@@ -453,7 +453,7 @@ function createEachPieLabel (pluginName: string, context: {
   combineLatest({
     // layout: context.seriesContainerPosition$,
     shorterSideWith: shorterSideWith$,
-    containerVisibleComputedLayoutData: context.containerVisibleComputedLayoutData$,
+    containerVisibleComputedSortedData: context.containerVisibleComputedSortedData$,
     maxValue: maxValue$,
     fullParams: context.fullParams$,
     fullChartParams: context.fullChartParams$,
@@ -464,9 +464,9 @@ function createEachPieLabel (pluginName: string, context: {
     switchMap(async (d) => d),
   ).subscribe(data => {
 
-    const eachAngle = Math.PI * 2 / data.containerVisibleComputedLayoutData.length
+    const eachAngle = Math.PI * 2 / data.containerVisibleComputedSortedData.length
 
-    const pieData = data.containerVisibleComputedLayoutData.map((d, i) => {
+    const pieData = data.containerVisibleComputedSortedData.map((d, i) => {
       return {
         id: d.id,
         data: d,
@@ -567,7 +567,7 @@ export const RoseLabels = defineSeriesPlugin(pluginConfig)(({ selection, observe
         
         const containerSelection = d3.select(g[containerIndex])
 
-        const containerVisibleComputedLayoutData$ = observer.visibleComputedLayoutData$.pipe(
+        const containerVisibleComputedSortedData$ = observer.visibleComputedSortedData$.pipe(
           takeUntil(destroy$),
           map(data => JSON.parse(JSON.stringify(data[containerIndex] ?? data[0])))
         )
@@ -580,8 +580,8 @@ export const RoseLabels = defineSeriesPlugin(pluginConfig)(({ selection, observe
         unsubscribeFnArr[containerIndex] = createEachPieLabel(pluginName, {
           containerSelection: containerSelection,
           // computedData$: observer.computedData$,
-          visibleComputedLayoutData$: observer.visibleComputedLayoutData$,
-          containerVisibleComputedLayoutData$: containerVisibleComputedLayoutData$,
+          visibleComputedSortedData$: observer.visibleComputedSortedData$,
+          containerVisibleComputedSortedData$: containerVisibleComputedSortedData$,
           // SeriesDataMap$: observer.SeriesDataMap$,
           fullParams$: observer.fullParams$,
           fullChartParams$: observer.fullChartParams$,

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
 }
@@ -33,6 +33,7 @@ export const DEFAULT_TREE_TOOLTIP_PARAMS: TreeTooltipParams = {
   renderFn: (eventData, { styles, utils }) => {
     const hasCategoryLabel = eventData.categoryLabel ? true : false
     const hasDatumLabel = eventData.datum.label ? true : false
+    const valueText = utils.toCurrency(eventData.datum.value)
     const bulletWidth = styles.textSizePx * 0.7
     const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
     const categorySvg = hasCategoryLabel
@@ -44,8 +45,19 @@ export const DEFAULT_TREE_TOOLTIP_PARAMS: TreeTooltipParams = {
     const datumLabelSvg = hasDatumLabel
       ? `<tspan>${eventData.datum.label}</tspan>  `
       : ''
+    const categoryLabelTextWidth = hasCategoryLabel
+      ? utils.measureTextWidth(`${eventData.categoryLabel}${valueText}`, styles.textSizePx) + styles.textSizePx * 1.5
+      : 0
+    const datumLabelTextWidth = hasDatumLabel
+      ? utils.measureTextWidth(`${eventData.datum.label}${valueText}`, 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}">${valueText}</tspan>
   </text>`
 
     return `${categorySvg}
@@ -55,25 +67,37 @@ export const DEFAULT_TREE_TOOLTIP_PARAMS: TreeTooltipParams = {
   },
 }
 DEFAULT_TREE_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
-    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)
-    const categorySvg = hasCategoryLabel
-      ? \`<rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${offset - 1}" rx="\${bulletWidth / 2}" fill="\${eventData.datum.color}"></rect>
-  <text x="\${styles.textSizePx * 1.5}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-    <tspan>\${eventData.categoryLabel}</tspan>
-  </text>\`
-      : ''
-    const datumLabelSvg = hasDatumLabel
-      ? \`<tspan>\${eventData.datum.label}</tspan>  \`
-      : ''
-    const datumSvg = \`<text font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
-    \${datumLabelSvg}<tspan font-weight="bold">\${eventData.datum.value}</tspan>
-  </text>\`
+  const hasCategoryLabel = eventData.categoryLabel ? true : false
+  const hasDatumLabel = eventData.datum.label ? true : false
+  const valueText = utils.toCurrency(eventData.datum.value)
+  const bulletWidth = styles.textSizePx * 0.7
+  const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+  const categorySvg = hasCategoryLabel
+    ? \`<rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${offset - 1}" rx="\${bulletWidth / 2}" fill="\${eventData.datum.color}"></rect>
+<text x="\${styles.textSizePx * 1.5}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
+  <tspan>\${eventData.categoryLabel}</tspan>
+</text>\`
+    : ''
+  const datumLabelSvg = hasDatumLabel
+    ? \`<tspan>\${eventData.datum.label}</tspan>  \`
+    : ''
+  const categoryLabelTextWidth = hasCategoryLabel
+    ? utils.measureTextWidth(\`\${eventData.categoryLabel}\${valueText}\`, styles.textSizePx) + styles.textSizePx * 1.5
+    : 0
+  const datumLabelTextWidth = hasDatumLabel
+    ? utils.measureTextWidth(\`\${eventData.datum.label}\${valueText}\`, 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" text-anchor="\${valueTextAnchor}" x="\${lineEndX}">\${valueText}</tspan>
+</text>\`
 
-    return \`\${categorySvg}
-  <g \${hasCategoryLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
-    \${datumSvg}
-  </g>\`
+  return \`\${categorySvg}
+<g \${hasCategoryLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
+  \${datumSvg}
+</g>\`
 }`

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/commonUtils.ts

@@ -19,4 +19,13 @@ export function getMinMax (data: number[]): [number, number] {
     ]
   }, [data[0], data[0]])
   return minMax
-}
+}
+
+export function toCurrency (num: number | null): string {
+  if (num === null || Number.isNaN(num) == true) {
+    return String(num || 0)
+  }
+  const parts = num.toString().split('.')
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return parts.join('.')
+}

package/src/utils/d3Graphics.ts

@@ -128,18 +128,20 @@ export function renderCircleText (selection: d3.Selection<any, any, any, any>, {
 export function renderTspansOnAxis (textSelection: d3.Selection<d3.BaseType, unknown, null, undefined>, {
   textArr,
   textSizePx,
-  groupAxisPosition
+  groupAxisPosition,
+  isContainerRotated // 外層是否有變形處理
 }: {
   textArr: string[]
   textSizePx: number
   groupAxisPosition: 'top' | 'right' | 'bottom' | 'left'
+  isContainerRotated: boolean
 }) {
   // -- 將原本單行文字改為多行文字 --
   textSelection.text(null) // 先清空原本的 text
 
   const textX = Number(textSelection.attr('x'))
   let textY = Number(textSelection.attr('y'))
-  if (groupAxisPosition === 'top') {
+  if (isContainerRotated && groupAxisPosition === 'top') {
     // 當文字在上方時，要往上偏移第一行的高度
     textY -= (textArr.length - 1) * textSizePx
   }

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) {

package/dist/orbcharts-plugins-basic/src/grid/plugins/GridZoom.d.ts

@@ -1 +0,0 @@
-export declare const GridZoom: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"grid", "GridZoom", import('@orbcharts/plugins-basic-types').GridZoomParams>;

package/dist/orbcharts-plugins-basic/src/grid/plugins/StackedBar.d.ts

@@ -1 +0,0 @@
-export declare const StackedBar: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"grid", "StackedBar", import('@orbcharts/plugins-basic-types').StackedBarParams>;

package/dist/orbcharts-plugins-basic/src/index.d.ts

@@ -1,7 +0,0 @@
-export * from './grid';
-export * from './multiGrid';
-export * from './multiValue';
-export * from './noneData';
-export * from './relationship';
-export * from './series';
-export * from './tree';

package/dist/orbcharts-plugins-basic/src/multiGrid/plugins/MultiStackedBar.d.ts

@@ -1 +0,0 @@
-export declare const MultiStackedBar: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"multiGrid", "MultiStackedBar", import('@orbcharts/plugins-basic-types').MultiStackedBarParams>;

package/dist/orbcharts-plugins-basic/src/multiValue/defaults.d.ts

@@ -1,9 +0,0 @@
-import { MultiValueLegendParams, MultiValueTooltipParams, ScatterParams, ScatterBubblesParams, XYAuxParams, XYAxesParams, XYZoomParams } from '../../lib/plugins-basic-types';
-
-export declare const DEFAULT_MULTI_VALUE_LEGEND_PARAMS: MultiValueLegendParams;
-export declare const DEFAULT_MULTI_VALUE_TOOLTIP_PARAMS: MultiValueTooltipParams;
-export declare const DEFAULT_SCATTER_PARAMS: ScatterParams;
-export declare const DEFAULT_SCATTER_BUBBLES_PARAMS: ScatterBubblesParams;
-export declare const DEFAULT_X_Y_AUX_PARAMS: XYAuxParams;
-export declare const DEFAULT_X_Y_AXES_PARAMS: XYAxesParams;
-export declare const DEFAULT_X_Y_ZOOM_PARAMS: XYZoomParams;

package/dist/orbcharts-plugins-basic/src/multiValue/multiValueObservables.d.ts

@@ -1,33 +0,0 @@
-import { Observable } from 'rxjs';
-import { DataFormatterMultiValue, ComputedLayoutDatumMultiValue, TransformData, ContainerPositionScaled, Layout } from '../../lib/core-types';
-import * as d3 from 'd3';
-export declare const multiValueSelectionsObservable: ({ selection, pluginName, clipPathID, categoryLabels$, multiValueContainerPosition$, multiValueGraphicTransform$ }: {
-    selection: d3.Selection<any, unknown, any, unknown>;
-    pluginName: string;
-    clipPathID: string;
-    categoryLabels$: Observable<string[]>;
-    multiValueContainerPosition$: Observable<ContainerPositionScaled[]>;
-    multiValueGraphicTransform$: Observable<TransformData>;
-}) => {
-    categorySelection$: Observable<d3.Selection<SVGGElement, string, any, unknown>>;
-    axesSelection$: Observable<d3.Selection<SVGGElement, string, any, unknown>>;
-    defsSelection$: Observable<d3.Selection<SVGDefsElement, string, any, unknown>>;
-    graphicGSelection$: Observable<d3.Selection<SVGGElement, string, any, unknown>>;
-};
-export declare const multiValueXYPositionObservable: ({ rootSelection, fullDataFormatter$, filteredMinMaxXYData$, multiValueContainerPosition$, layout$ }: {
-    rootSelection: d3.Selection<any, unknown, any, unknown>;
-    fullDataFormatter$: Observable<DataFormatterMultiValue>;
-    filteredMinMaxXYData$: Observable<{
-        minXDatum: ComputedLayoutDatumMultiValue;
-        maxXDatum: ComputedLayoutDatumMultiValue;
-        minYDatum: ComputedLayoutDatumMultiValue;
-        maxYDatum: ComputedLayoutDatumMultiValue;
-    }>;
-    multiValueContainerPosition$: Observable<ContainerPositionScaled[]>;
-    layout$: Observable<Layout>;
-}) => Observable<{
-    x: number;
-    y: number;
-    xValue: number;
-    yValue: number;
-}>;

package/dist/orbcharts-plugins-basic/src/multiValue/plugins/XYZoom.d.ts

@@ -1 +0,0 @@
-export declare const XYZoom: import('@orbcharts/core-types/dist/src/types/Plugin').PluginConstructor<"multiValue", "XYZoom", import('@orbcharts/plugins-basic-types').XYZoomParams>;