@orbcharts/plugins-basic 3.0.0-alpha.64 → 3.0.0-alpha.65

package/dist/src/base/BaseGroupAxis.d.ts

@@ -31,6 +31,7 @@ interface BaseGroupAxisContext {
     }>;
     gridContainerPosition$: Observable<GridContainerPosition[]>;
     isSeriesSeprate$: Observable<boolean>;
+    textSizePx$: Observable<number>;
 }
 export declare const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext>;
 export {};

package/dist/src/noneData/index.d.ts

@@ -1,4 +1,3 @@
 export * from './defaults';
 export * from './types';
-export { Container } from './plugins/Container';
 export { Tooltip } from './plugins/Tooltip';

package/dist/src/noneData/types.d.ts

@@ -19,6 +19,6 @@ export type TooltipParams = {
     textColorType: ColorType;
     offset: [number, number];
     padding: number;
-    textRenderFn: <T extends ChartType>(eventData: EventTypeMap<T>) => string[];
+    textRenderFn: <T extends ChartType>(eventData: EventTypeMap<T>) => string[] | string | null;
     svgRenderFn: (<T extends ChartType>(eventData: EventTypeMap<T>) => string) | null;
 };

package/dist/src/series/types.d.ts

@@ -21,6 +21,8 @@ export interface PieParams {
     startAngle: number;
     endAngle: number;
     padAngle: number;
+    strokeColorType: ColorType;
+    strokeWidth: number;
     cornerRadius: number;
 }
 export interface PieEventTextsParams {
@@ -43,9 +45,12 @@ export interface PieLabelsParams {
 }
 export interface RoseParams {
     outerRadius: number;
+    padAngle: number;
+    strokeColorType: ColorType;
+    strokeWidth: number;
     cornerRadius: number;
     arcScaleType: ArcScaleType;
-    mouseoverAngleIncrease: number;
+    angleIncreaseWhileHighlight: number;
 }
 export interface RoseLabelsParams {
     outerRadius: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbcharts/plugins-basic",
-  "version": "3.0.0-alpha.64",
+  "version": "3.0.0-alpha.65",
   "description": "plugins for OrbCharts",
   "author": "Blue Planet Inc.",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "vite-plugin-dts": "^3.7.3"
   },
   "dependencies": {
-    "@orbcharts/core": "^3.0.0-alpha.58",
+    "@orbcharts/core": "^3.0.0-alpha.59",
     "d3": "^7.8.5",
     "rxjs": "^7.8.1"
   }

package/src/base/BaseGroupAxis.ts

@@ -55,6 +55,7 @@ interface BaseGroupAxisContext {
   }>
   gridContainerPosition$: Observable<GridContainerPosition[]>
   isSeriesSeprate$: Observable<boolean>
+  textSizePx$: Observable<number>
 }
 
 interface TextAlign {
@@ -147,7 +148,7 @@ function renderAxisLabel ({ selection, groupingLabelClassName, fullParams, axisL
 
 }
 
-function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gridAxesSize, fullDataFormatter, chartParams, groupScale, groupScaleDomain, groupLabels, textReverseTransformWithRotate }: {
+function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gridAxesSize, fullDataFormatter, chartParams, groupScale, groupScaleDomain, groupLabels, textReverseTransformWithRotate, textSizePx }: {
   selection: d3.Selection<SVGGElement, any, any, any>,
   xAxisClassName: string
   fullParams: BaseGroupAxisParams
@@ -159,6 +160,7 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
   groupScaleDomain: number[]
   groupLabels: string[]
   textReverseTransformWithRotate: string
+  textSizePx: number
 }) {
 
   const xAxisSelection = selection
@@ -209,9 +211,34 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
   const xAxisEl = xAxisSelection
     .transition()
     .duration(100)
-    .call(xAxis)      
-    // .attr('text-anchor', () => params.tickTextRotate !== false ? 'end' : 'middle')
-    // .attr('text-anchor', () => 'middle')
+    .call(xAxis)
+    .on('end', (self, t) => {
+      // 先等transition結束再處理文字，否則會被原本的文字覆蓋
+      xAxisEl
+        .selectAll('.tick text')
+        .each((d, groupIndex, n) => {
+          // -- 將原本單行文字改為多行文字 --
+          const groupLabel = groupLabels[groupIndex] ?? '' // 非整數index不顯示
+          const groupLabelTspans = groupLabel.split('\n')
+          const textSelection = d3.select(n[groupIndex])
+            .text(null) // 先清空原本的 text
+
+          const textX = Number(textSelection.attr('x'))
+          let textY = Number(textSelection.attr('y'))
+          if (fullDataFormatter.grid.groupAxis.position === 'top') {
+            // 當文字在上方時，要往上偏移第一行的高度
+            textY -= (groupLabelTspans.length - 1) * textSizePx
+          }
+          
+          textSelection
+            .selectAll('tspan')
+            .data(groupLabelTspans)
+            .join('tspan')
+            .attr('x', textX)
+            .attr('y', (_d, _i) => textY + _i * textSizePx)
+            .text(d => d)
+        })
+    })
 
   xAxisEl.selectAll('line')
     .style('fill', 'none')
@@ -224,22 +251,7 @@ function renderAxis ({ selection, xAxisClassName, fullParams, tickTextAlign, gri
     .style('stroke', fullParams.axisLineVisible == true ? getColor(fullParams.axisLineColorType, chartParams) : 'none')
     .style('shape-rendering', 'crispEdges')
 
-  // const xText = xAxisEl.selectAll('text')
-  // xAxisSelection.each((d, i, g) => {
-  //   d3.select(g[i])
-  //     .selectAll('text')
-  //     .data([d])
-  //     .join('text')
-  //     .style('font-family', 'sans-serif')
-  //     .style('font-size', `${chartParams.styles.textSize}px`)
-  //     // .style('font-weight', 'bold')
-  //     .style('color', getColor(params.tickTextColorType, chartParams))
-  //     .attr('text-anchor', tickTextAlign.textAnchor)
-  //     .attr('dominant-baseline', tickTextAlign.dominantBaseline)
-  //     .attr('transform-origin', `0 -${params.tickPadding + defaultTickSize}`)
-  //     .style('transform', textReverseTransform)
-  // })
-  const xText = xAxisSelection.selectAll('text')
+  const xText = xAxisSelection.selectAll<SVGTextElement, BaseGroupAxisParams>('text')
     // .style('font-family', 'sans-serif')
     .attr('font-size', chartParams.styles.textSize)
     // .style('font-weight', 'bold')
@@ -269,6 +281,7 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
   gridAxesSize$,
   gridContainerPosition$,
   isSeriesSeprate$,
+  textSizePx$,
 }) => {
   
   const destroy$ = new Subject()
@@ -600,6 +613,7 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
     groupLabels: groupLabels$,
     textReverseTransform: textReverseTransform$,
     textReverseTransformWithRotate: textReverseTransformWithRotate$,
+    textSizePx: textSizePx$
     // tickTextFormatter: tickTextFormatter$
   }).pipe(
     takeUntil(destroy$),
@@ -618,6 +632,7 @@ export const createBaseGroupAxis: BasePluginFn<BaseGroupAxisContext> = ((pluginN
       groupScaleDomain: data.groupScaleDomain,
       groupLabels: data.groupLabels,
       textReverseTransformWithRotate: data.textReverseTransformWithRotate,
+      textSizePx: data.textSizePx
     })
 
     renderAxisLabel({

package/src/grid/plugins/GroupAxis.ts

@@ -27,6 +27,7 @@ export const GroupAxis = defineGridPlugin(pluginName, DEFAULT_GROUP_AXIS_PARAMS)
     gridAxesSize$: observer.gridAxesSize$,
     gridContainerPosition$: observer.gridContainerPosition$,
     isSeriesSeprate$: observer.isSeriesSeprate$,
+    textSizePx$: observer.textSizePx$,
   })
 
   return () => {

package/src/multiGrid/plugins/MultiGroupAxis.ts

@@ -58,6 +58,7 @@ export const MultiGroupAxis = defineMultiGridPlugin(pluginName, DEFAULT_MULTI_GR
             gridAxesSize$: d.gridAxesSize$,
             gridContainerPosition$: d.gridContainerPosition$,
             isSeriesSeprate$,
+            textSizePx$: observer.textSizePx$,
           })
         })
     })

package/src/noneData/index.ts

@@ -1,4 +1,4 @@
 export * from './defaults'
 export * from './types'
-export { Container } from './plugins/Container'
+// export { Container } from './plugins/Container'
 export { Tooltip } from './plugins/Tooltip'

package/src/noneData/plugins/Tooltip.ts

@@ -34,15 +34,32 @@ const pluginName = 'Tooltip'
 const gClassName = getClassName(pluginName, 'g')
 const boxClassName = getClassName(pluginName, 'box')
 
-function textToSvg (textArr: string[], textStyle: TooltipStyle) {
+function textToSvg (_textArr: string[] | string | null | undefined, textStyle: TooltipStyle) {
   const lineHeight = textStyle.textSizePx * 1.5
-  return textArr
+
+  const textArr = _textArr == null
+    ? []
+    : Array.isArray(_textArr)
+      ? _textArr
+      : typeof _textArr === 'string'
+        ? _textArr.split('\n')
+        : [_textArr]
+
+  const tspan = textArr
     .filter(d => d != '')
     .map((text, i) => {
       const top = i * lineHeight
-      return `<text font-size="${textStyle.textSize}" fill="${textStyle.textColor}" x="0" y="${top}" style="dominant-baseline:text-before-edge">${text}</text>`
+      return `<tspan x="0" y="${top}">${text}</tspan>`
     })
-    .join()
+    .join('')
+
+  if (tspan) {
+    return `<text font-size="${textStyle.textSize}" fill="${textStyle.textColor}" x="0" y="0" style="dominant-baseline:text-before-edge">
+    ${tspan}
+  </text>`
+  } else {
+    return ''
+  }
 }
 
 function renderTooltip ({ rootSelection, pluginName, rootWidth, rootHeight, svgString, tooltipStyle, event  }: {
@@ -234,14 +251,14 @@ export const Tooltip: PluginConstructor<any, string, any> = defineNoneDataPlugin
   }).pipe(
     takeUntil(destroy$),
     switchMap(async d => d),
-    map(d => {
-      if (d.fullParams.svgRenderFn) {
-        return d.fullParams.svgRenderFn
+    map(data => {
+      if (data.fullParams.svgRenderFn) {
+        return data.fullParams.svgRenderFn
       }
       // 將textRenderFn回傳的資料使用<text>包裝起來
       return (eventData: EventTypeMap<any>) => {
-        const textArr = d.fullParams.textRenderFn(eventData as any)
-        return textToSvg(textArr, d.tooltipStyle)
+        const textArr = data.fullParams.textRenderFn(eventData as any)
+        return textToSvg(textArr, data.tooltipStyle)
       }
     })
   )

package/src/noneData/types.ts

@@ -20,7 +20,7 @@ export type TooltipParams = {
   textColorType: ColorType
   offset: [number, number]
   padding: number
-  textRenderFn: <T extends ChartType> (eventData: EventTypeMap<T>) => string[]
+  textRenderFn: <T extends ChartType> (eventData: EventTypeMap<T>) => string[] | string | null
   svgRenderFn: (<T extends ChartType> (eventData: EventTypeMap<T>) => string) | null
 }
 

package/src/series/defaults.ts

@@ -31,14 +31,16 @@ export const DEFAULT_PIE_PARAMS: PieParams = {
   //   bottom: 50,
   //   left: 70
   // },
-  outerRadius: 0.95,
+  outerRadius: 0.85,
   innerRadius: 0,
-  outerRadiusWhileHighlight: 1,
+  outerRadiusWhileHighlight: 0.9,
   // label?: LabelStyle
   // enterDuration: 800,
   startAngle: 0,
   endAngle: Math.PI * 2,
-  padAngle: 0.02,
+  padAngle: 0,
+  strokeColorType: 'background',
+  strokeWidth: 1,
   // padRadius: 100,
   cornerRadius: 0,
   // highlightTarget: 'datum',
@@ -99,13 +101,13 @@ DEFAULT_PIE_EVENT_TEXTS_PARAMS.eventFn.toString = () => `(eventData: EventSeries
 export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
   // solidColor: undefined,
   // colors: DEFAULT_COLORS,
-  outerRadius: 0.95,
-  outerRadiusWhileHighlight: 1,
+  outerRadius: 0.85,
+  outerRadiusWhileHighlight: 0.9,
   // innerRadius: 0,
   // enterDuration: 800,
   startAngle: 0,
   endAngle: Math.PI * 2,
-  labelCentroid: 2.3,
+  labelCentroid: 2.1,
   // fontSize: 12,
   labelColorType: 'primary',
   labelFn: d => String(d.label),
@@ -113,15 +115,18 @@ export const DEFAULT_PIE_LABELS_PARAMS: PieLabelsParams = {
 DEFAULT_PIE_LABELS_PARAMS.labelFn.toString = () => `d => String(d.label)`
 
 export const DEFAULT_ROSE_PARAMS: RoseParams = {
-  outerRadius: 0.95,
+  outerRadius: 0.85,
+  padAngle: 0,
+  strokeColorType: 'background',
+  strokeWidth: 0,
   cornerRadius: 0,
   arcScaleType: 'area',
-  mouseoverAngleIncrease: 0.05
+  angleIncreaseWhileHighlight: 0.05
 }
 
 export const DEFAULT_ROSE_LABELS_PARAMS: RoseLabelsParams = {
-  outerRadius: 0.95,
-  labelCentroid: 2.5,
+  outerRadius: 0.85,
+  labelCentroid: 2.1,
   labelFn: d => String(d.label),
   labelColorType: 'primary',
   arcScaleType: 'area'

package/src/series/plugins/Pie.ts

@@ -22,7 +22,7 @@ import {
 import { DEFAULT_PIE_PARAMS } from '../defaults'
 import { makePieData } from '../seriesUtils'
 import { getD3TransitionEase, makeD3Arc } from '../../utils/d3Utils'
-import { getClassName } from '../../utils/orbchartsUtils'
+import { getDatumColor, getClassName } from '../../utils/orbchartsUtils'
 import { seriesCenterSelectionObservable } from '../seriesObservables'
 
 
@@ -87,11 +87,13 @@ function makePieRenderData (data: PieDatum[], startAngle: number, endAngle: numb
   })
 }
 
-function renderPie ({ selection, data, arc, pathClassName }: {
+function renderPie ({ selection, data, arc, pathClassName, fullParams, fullChartParams }: {
   selection: d3.Selection<SVGGElement, unknown, any, unknown>
   data: PieDatum[]
   arc: d3.Arc<any, d3.DefaultArcObject>
   pathClassName: string
+  fullParams: PieParams
+  fullChartParams: ChartParams
 }): d3.Selection<SVGPathElement, PieDatum, any, any> {
   // console.log('data', data)
   const pathSelection: d3.Selection<SVGPathElement, PieDatum, any, any> = selection
@@ -101,6 +103,8 @@ function renderPie ({ selection, data, arc, pathClassName }: {
     .classed(pathClassName, true)
     .style('cursor', 'pointer')
     .attr('fill', (d, i) => d.data.color)
+    .attr('stroke', (d, i) => getDatumColor({ datum: d.data, colorType: fullParams.strokeColorType, fullChartParams }))
+    .attr('stroke-width', fullParams.strokeWidth)
     .attr('d', (d, i) => {
       return arc!(d as any)
     })
@@ -312,7 +316,9 @@ function createEachPie (pluginName: string, context: {
               selection: context.containerSelection,
               data: tweenData,
               arc: data.arc,
-              pathClassName
+              pathClassName,
+              fullParams: data.fullParams,
+              fullChartParams: data.fullChartParams,
             })
   
             // @Q@ 想盡量減清效能負擔所以取消掉
@@ -345,7 +351,9 @@ function createEachPie (pluginName: string, context: {
             selection: context.containerSelection,
             data: tweenData,
             arc: data.arc,
-            pathClassName
+            pathClassName,
+            fullParams: data.fullParams,
+            fullChartParams: data.fullChartParams,
           })
   
           // if (data.fullParams.highlightTarget && data.fullParams.highlightTarget != 'none') {