@orbcharts/plugins-basic 3.0.0-alpha.79 → 3.0.0-beta.10

package/src/multiGrid/defaults.ts

@@ -1,159 +1,225 @@
-import type {
-  MultiGridLegendParams,
-  MultiBarsParams,
-  MultiBarStackParams,
-  MultiBarsTriangleParams,
-  MultiLinesParams,
-  MultiLineAreasParams,
-  MultiDotsParams,
-  MultiGroupAxisParams,
-  MultiValueAxisParams,
-  MultiValueStackAxisParams,
-  OverlappingValueAxesParams,
-  OverlappingValueStackAxesParams
-} from '../../lib/plugins-basic-types'
-
-export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
-  position: 'right',
-  justify: 'end',
-  padding: 28,
-  backgroundFill: 'none',
-  backgroundStroke: 'none',
-  gap: 10,
-  listRectWidth: 14,
-  listRectHeight: 14,
-  listRectRadius: 0,
-  gridList: [
-    {
-      listRectWidth: 14,
-      listRectHeight: 14,
-      listRectRadius: 0,
-    }
-  ],
-  textColorType: 'primary'
-}
-
-export const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams = {
-  // labelAnchor: 'start',
-  labelOffset: [0, 0],
-  labelColorType: 'primary',
-  axisLineVisible: true,
-  axisLineColorType: 'primary',
-  ticks: 'all',
-  tickFormat: text => text,
-  tickLineVisible: true,
-  tickPadding: 20,
-  tickFullLine: false,
-  tickFullLineDasharray: 'none',
-  tickColorType: 'secondary',
-  tickTextRotate: 0,
-  tickTextColorType: 'primary',
-  gridIndexes: [0]
-}
-DEFAULT_MULTI_GROUP_AXIS_PARAMS.tickFormat.toString = () => `text => text`
-
-export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
-  // labelAnchor: 'end',
-  labelOffset: [0, 0],
-  labelColorType: 'primary',
-  axisLineVisible: false,
-  axisLineColorType: 'primary',
-  ticks: 4,
-  tickFormat: ',.0f',
-  tickLineVisible: true,
-  tickPadding: 20,
-  tickFullLine: true,
-  tickFullLineDasharray: 'none',
-  tickColorType: 'secondary',
-  tickTextRotate: 0,
-  tickTextColorType: 'primary',
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_VALUE_STACK_AXIS_PARAMS: MultiValueStackAxisParams = {
-  ...DEFAULT_MULTI_VALUE_AXIS_PARAMS
-}
-
-export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
-  barWidth: 0,
-  barPadding: 1,
-  barGroupPadding: 40,
-  barRadius: false,
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_BAR_STACK_PARAMS: MultiBarStackParams = {
-  barWidth: 0,
-  barGroupPadding: 10,
-  barRadius: false,
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams = {
-  barWidth: 0,
-  barPadding: 1,
-  barGroupPadding: 20,
-  linearGradientOpacity: [1, 0],
-  gridIndexes: [0]
-}
-
-export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
-  lineCurve: 'curveLinear',
-  lineWidth: 2,
-  gridIndexes: [1]
-}
-
-export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
-  lineCurve: 'curveLinear',
-  linearGradientOpacity: [1, 0],
-  gridIndexes: [1]
-}
-
-export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
-  radius: 4,
-  fillColorType: 'white',
-  strokeColorType: 'series',
-  strokeWidth: 2,
-  onlyShowHighlighted: false,
-  gridIndexes: [1]
-}
-
-export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams = {
-  firstAxis: {
-    // labelAnchor: 'end',
-    labelOffset: [0, 0],
-    labelColorType: 'primary',
-    axisLineVisible: false,
-    axisLineColorType: 'primary',
-    ticks: 4,
-    tickFormat: ',.0f',
-    tickLineVisible: true,
-    tickPadding: 20,
-    tickFullLine: true,
-    tickFullLineDasharray: 'none',
-    tickColorType: 'secondary',
-    tickTextRotate: 0,
-    tickTextColorType: 'primary',
-  },
-  secondAxis: {
-    // labelAnchor: 'end',
-    labelOffset: [0, 0],
-    labelColorType: 'primary',
-    axisLineVisible: false,
-    axisLineColorType: 'primary',
-    ticks: 4,
-    tickFormat: ',.0f',
-    tickLineVisible: true,
-    tickPadding: 20,
-    tickFullLine: true,
-    tickFullLineDasharray: 'none',
-    tickColorType: 'secondary',
-    tickTextRotate: 0,
-    tickTextColorType: 'primary',
-  },
-  gridIndexes: [0, 1]
-}
-
-export const DEFAULT_OVERLAPPING_VALUE_STACK_AXES_PARAMS: OverlappingValueStackAxesParams = {
-  ...DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS
-}
+import type {
+  MultiGridLegendParams,
+  MultiBarsParams,
+  MultiStackedBarParams,
+  MultiBarsTriangleParams,
+  MultiLinesParams,
+  MultiLineAreasParams,
+  MultiDotsParams,
+  MultiGroupAxisParams,
+  MultiGridTooltipParams,
+  MultiValueAxisParams,
+  MultiStackedValueAxisParams,
+  OverlappingValueAxesParams,
+  OverlappingStackedValueAxesParams
+} from '../../lib/plugins-basic-types'
+import { measureTextWidth } from '../utils/commonUtils'
+
+export const DEFAULT_MULTI_GRID_LEGEND_PARAMS: MultiGridLegendParams = {
+  // position: 'right',
+  // justify: 'end',
+  placement: 'bottom',
+  padding: 28,
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  gridList: [
+    {
+      listRectWidth: 14,
+      listRectHeight: 14,
+      listRectRadius: 0,
+    }
+  ],
+  textColorType: 'primary'
+}
+
+export const DEFAULT_MULTI_GROUP_AXIS_PARAMS: MultiGroupAxisParams = {
+  // labelAnchor: 'start',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: true,
+  axisLineColorType: 'primary',
+  ticks: 'all',
+  tickFormat: text => text,
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: false,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+  gridIndexes: [0]
+}
+DEFAULT_MULTI_GROUP_AXIS_PARAMS.tickFormat.toString = () => `text => text`
+
+export const DEFAULT_MULTI_VALUE_AXIS_PARAMS: MultiValueAxisParams = {
+  // labelAnchor: 'end',
+  labelOffset: [0, 0],
+  labelColorType: 'primary',
+  axisLineVisible: false,
+  axisLineColorType: 'primary',
+  ticks: 4,
+  tickFormat: ',.0f',
+  tickLineVisible: true,
+  tickPadding: 20,
+  tickFullLine: true,
+  tickFullLineDasharray: 'none',
+  tickColorType: 'secondary',
+  tickTextRotate: 0,
+  tickTextColorType: 'primary',
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_STACKED_VALUE_AXIS_PARAMS: MultiStackedValueAxisParams = {
+  ...DEFAULT_MULTI_VALUE_AXIS_PARAMS
+}
+
+export const DEFAULT_MULTI_BARS_PARAMS: MultiBarsParams = {
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 40,
+  barRadius: false,
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_STACKED_BAR_PARAMS: MultiStackedBarParams = {
+  barWidth: 0,
+  barGroupPadding: 10,
+  barRadius: false,
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_BARS_TRIANGLE_PARAMS: MultiBarsTriangleParams = {
+  barWidth: 0,
+  barPadding: 1,
+  barGroupPadding: 20,
+  linearGradientOpacity: [1, 0],
+  gridIndexes: [0]
+}
+
+export const DEFAULT_MULTI_LINES_PARAMS: MultiLinesParams = {
+  lineCurve: 'curveLinear',
+  lineWidth: 2,
+  gridIndexes: [1]
+}
+
+export const DEFAULT_MULTI_LINE_AREAS_PARAMS: MultiLineAreasParams = {
+  lineCurve: 'curveLinear',
+  linearGradientOpacity: [1, 0],
+  gridIndexes: [1]
+}
+
+export const DEFAULT_MULTI_DOTS_PARAMS: MultiDotsParams = {
+  radius: 4,
+  fillColorType: 'white',
+  strokeColorType: 'label',
+  strokeWidth: 2,
+  onlyShowHighlighted: false,
+  gridIndexes: [1]
+}
+
+export const DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS: OverlappingValueAxesParams = {
+  firstAxis: {
+    // labelAnchor: 'end',
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: 4,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextRotate: 0,
+    tickTextColorType: 'primary',
+  },
+  secondAxis: {
+    // labelAnchor: 'end',
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: 4,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextRotate: 0,
+    tickTextColorType: 'primary',
+  },
+  gridIndexes: [0, 1]
+}
+
+export const DEFAULT_OVERLAPPING_STACKED_VALUE_AXES_PARAMS: OverlappingStackedValueAxesParams = {
+  ...DEFAULT_OVERLAPPING_VALUE_AXES_PARAMS
+}
+
+export const DEFAULT_MULTI_GRID_TOOLTIP_PARAMS: MultiGridTooltipParams = {
+  backgroundColorType: 'background',
+  strokeColorType: 'primary',
+  backgroundOpacity: 0.8,
+  textColorType: 'primary',
+  offset: [20, 5],
+  padding: 10,
+  renderFn: (eventData, { styles, utils }) => {
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+
+    const titleSvg = `<g><text dominant-baseline="hanging" font-size="${styles.textSizePx}">${eventData.groupLabel}</text></g>`
+    const maxLengthText = eventData.groups.reduce((acc, group) => {
+      const text = `${group.seriesLabel}${group.value}`
+      return text.length > acc.length ? text : acc
+    }, '')
+    const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
+    const lineEndX = maxTextWidth + styles.textSizePx * 2
+    const contentSvg = eventData.groups
+      .map((group, i) => {
+        const y = i * styles.textSizePx * 1.5
+        const isHighlight = group.id === (eventData.datum && eventData.datum.id)
+        return `<g transform="translate(0, ${styles.textSizePx * 2})">
+  <rect width="${bulletWidth}" height="${bulletWidth}" x="${offset}" y="${y + offset}" rx="${bulletWidth / 2}" fill="${group.color}"></rect>
+  <text x="${styles.textSizePx * 1.5}" y="${y}" font-size="${styles.textSizePx}" dominant-baseline="hanging" fill="${styles.textColor}">
+    <tspan font-weight="${isHighlight ? 'bold' : ''}">${group.seriesLabel}</tspan>
+    <tspan font-weight="bold" text-anchor="end" x="${lineEndX}">${group.value}</tspan>
+  </text>
+</g>`
+      })
+      .join('')
+    return `${titleSvg}
+${contentSvg}`
+  }
+}
+DEFAULT_MULTI_GRID_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
+    const bulletWidth = styles.textSizePx * 0.7
+    const offset = (styles.textSizePx / 2) - (bulletWidth / 2)
+
+    const titleSvg = \`<g><text dominant-baseline="hanging" font-size="\${styles.textSizePx}">\${eventData.groupLabel}</text></g>\`
+    const maxLengthText = eventData.groups.reduce((acc, group) => {
+      const text = \`\${group.seriesLabel}\${group.value}\`
+      return text.length > acc.length ? text : acc
+    }, '')
+    const maxTextWidth = utils.measureTextWidth(maxLengthText, styles.textSizePx)
+    const lineEndX = maxTextWidth + styles.textSizePx * 2
+    const contentSvg = eventData.groups
+      .map((group, i) => {
+        const y = i * styles.textSizePx * 1.5
+        const isHighlight = group.id === (eventData.datum && eventData.datum.id)
+        return \`<g transform="translate(0, \${styles.textSizePx * 2})">
+  <rect width="\${bulletWidth}" height="\${bulletWidth}" x="\${offset}" y="\${y + offset}" rx="\${bulletWidth / 2}" fill="\${group.color}"></rect>
+  <text x="\${styles.textSizePx * 1.5}" y="\${y}" font-size="\${styles.textSizePx}" dominant-baseline="hanging" fill="\${styles.textColor}">
+    <tspan font-weight="\${isHighlight ? 'bold' : ''}">\${group.seriesLabel}</tspan>
+    <tspan font-weight="bold" text-anchor="end" x="\${lineEndX}">\${group.value}</tspan>
+  </text>
+</g>\`
+      })
+      .join('')
+    return \`\${titleSvg}
+\${contentSvg}\`
+}`

package/src/multiGrid/index.ts

@@ -1,14 +1,15 @@
-export * from './defaults'
-// export * from './types'
-export { MultiGridLegend } from './plugins/MultiGridLegend'
-export { MultiBars } from './plugins/MultiBars'
-export { MultiBarStack } from './plugins/MultiBarStack'
-export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
-export { MultiLines } from './plugins/MultiLines'
-export { MultiLineAreas } from './plugins/MultiLineAreas'
-export { MultiDots } from './plugins/MultiDots'
-export { MultiGroupAxis } from './plugins/MultiGroupAxis'
-export { MultiValueAxis } from './plugins/MultiValueAxis'
-export { MultiValueStackAxis } from './plugins/MultiValueStackAxis'
-export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
-export { OverlappingValueStackAxes } from './plugins/OverlappingValueStackAxes'
+export * from './defaults'
+// export * from './types'
+export { MultiGridLegend } from './plugins/MultiGridLegend'
+export { MultiBars } from './plugins/MultiBars'
+export { MultiStackedBar } from './plugins/MultiStackedBar'
+export { MultiBarsTriangle } from './plugins/MultiBarsTriangle'
+export { MultiLines } from './plugins/MultiLines'
+export { MultiLineAreas } from './plugins/MultiLineAreas'
+export { MultiDots } from './plugins/MultiDots'
+export { MultiGroupAxis } from './plugins/MultiGroupAxis'
+export { MultiValueAxis } from './plugins/MultiValueAxis'
+export { MultiGridTooltip } from './plugins/MultiGridTooltip'
+export { MultiStackedValueAxis } from './plugins/MultiStackedValueAxis'
+export { OverlappingValueAxes } from './plugins/OverlappingValueAxes'
+export { OverlappingStackedValueAxes } from './plugins/OverlappingStackedValueAxes'

package/src/multiGrid/multiGridObservables.ts

@@ -1,49 +1,49 @@
-import type { Observable } from 'rxjs'
-import {
-  Subject,
-  takeUntil,
-  of,
-  map,
-  reduce,
-  switchMap,
-  combineLatest,
-  distinctUntilChanged,
-  shareReplay
-} from 'rxjs'
-import type {
-  ContextObserverMultiGrid,
-  ComputedDataGrid,
-  DataFormatterGrid,
-  ContextObserverGridDetail,
-  ContextObserverMultiGridDetail } from '../../lib/core-types'
-
-// 可設定多個gridIndex的params
-interface MultiGridPluginParams {
-  gridIndexes: number[] | 'all'
-}
-
-// 對應grid資料的plugin所需Observable（必須有gridIndexes）
-export const multiGridPluginDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<ContextObserverMultiGridDetail[]> => {
-  const gridIndexes$ = observer.fullParams$.pipe(
-    map(fullParams => fullParams.gridIndexes),
-    distinctUntilChanged(),
-    shareReplay(1)
-  )
-
-  return combineLatest({
-    multiGridEachDetail: observer.multiGridEachDetail$,
-    gridIndexes: gridIndexes$,
-  }).pipe(
-    map(data => {
-      // 對應所有grid
-      if (data.gridIndexes === 'all') {
-        return data.multiGridEachDetail
-      }
-      // 自訂對應grid
-      return data.gridIndexes.map(gridIndex => {
-        return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0]
-      })
-    })
-  )
-}
-
+import type { Observable } from 'rxjs'
+import {
+  Subject,
+  takeUntil,
+  of,
+  map,
+  reduce,
+  switchMap,
+  combineLatest,
+  distinctUntilChanged,
+  shareReplay
+} from 'rxjs'
+import type {
+  ContextObserverMultiGrid,
+  ComputedDataGrid,
+  DataFormatterGrid,
+  ContextObserverGridDetail,
+  ContextObserverMultiGridDetail } from '../../lib/core-types'
+
+// 可設定多個gridIndex的params
+interface MultiGridPluginParams {
+  gridIndexes: number[] | 'all'
+}
+
+// 對應grid資料的plugin所需Observable（必須有gridIndexes）
+export const multiGridPluginDetailObservables = (observer: ContextObserverMultiGrid<MultiGridPluginParams>): Observable<ContextObserverMultiGridDetail[]> => {
+  const gridIndexes$ = observer.fullParams$.pipe(
+    map(fullParams => fullParams.gridIndexes),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
+  return combineLatest({
+    multiGridEachDetail: observer.multiGridEachDetail$,
+    gridIndexes: gridIndexes$,
+  }).pipe(
+    map(data => {
+      // 對應所有grid
+      if (data.gridIndexes === 'all') {
+        return data.multiGridEachDetail
+      }
+      // 自訂對應grid
+      return data.gridIndexes.map(gridIndex => {
+        return data.multiGridEachDetail[gridIndex] ?? data.multiGridEachDetail[0]
+      })
+    })
+  )
+}
+