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

package/src/relationship/plugins/RelationshipLegend.ts

@@ -0,0 +1,100 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineRelationshipPlugin } from '../../../lib/core'
+import { DEFAULT_RELATIONSHIP_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+import { LAYER_INDEX_OF_INFO } from '../../const'
+
+const pluginName = 'RelationshipLegend'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_RELATIONSHIP_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_RELATIONSHIP_LEGEND_PARAMS,
+  layerIndex: LAYER_INDEX_OF_INFO,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      placement: {
+        toBe: '"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"',
+        test: (value) => {
+          return [
+            'top', 'top-start', 'top-end',
+            'bottom', 'bottom-start', 'bottom-end',
+            'left', 'left-start', 'left-end',
+            'right', 'right-start', 'right-end'
+          ].includes(value)
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      backgroundFill: {
+        toBeOption: 'ColorType',
+      },
+      backgroundStroke: {
+        toBeOption: 'ColorType',
+      },
+      gap: {
+        toBeTypes: ['number']
+      },
+      listRectWidth: {
+        toBeTypes: ['number']
+      },
+      listRectHeight: {
+        toBeTypes: ['number']
+      },
+      listRectRadius: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    return result
+  }
+}
+
+export const RelationshipLegend = defineRelationshipPlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  // 全部列點矩型使用相同樣式參數
+  const fullParams$ = observer.fullParams$.pipe(
+    takeUntil(destroy$),
+    map(d => {
+      const labelList = [
+        {
+          listRectWidth: d.listRectWidth,
+          listRectHeight: d.listRectHeight,
+          listRectRadius: d.listRectRadius,
+        }
+      ]
+      return {
+        ...d,
+        labelList
+      }
+    })
+  )
+
+  const unsubscribeBaseLegend = createBaseLegend(pluginName, {
+    rootSelection,
+    legendLabels$: observer.categoryLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/relationship/plugins/RelationshipTooltip.ts

@@ -0,0 +1,66 @@
+import {
+  Subject,
+} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineRelationshipPlugin } from '../../../lib/core'
+import { DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
+import { createBaseTooltip } from '../../base/BaseTooltip'
+
+const pluginName = 'RelationshipTooltip'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_RELATIONSHIP_TOOLTIP_PARAMS,
+  layerIndex: LAYER_INDEX_OF_TOOLTIP,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      backgroundColorType: {
+        toBeOption: 'ColorType',
+      },
+      backgroundOpacity: {
+        toBeTypes: ['number']
+      },
+      strokeColorType: {
+        toBeOption: 'ColorType',
+      },
+      offset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      padding: {
+        toBeTypes: ['number']
+      },
+      textColorType: {
+        toBeOption: 'ColorType',
+      },
+      renderFn: {
+        toBeTypes: ['Function']
+      },
+    })
+    return result
+  }
+}
+
+export const RelationshipTooltip = defineRelationshipPlugin(pluginConfig)(({ selection, rootSelection, name, subject, observer }) => {
+  const destroy$ = new Subject()
+
+  const unsubscribeTooltip = createBaseTooltip(pluginName, {
+    rootSelection,
+    fullParams$: observer.fullParams$,
+    fullChartParams$: observer.fullChartParams$,
+    layout$: observer.layout$,
+    event$: subject.event$,
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeTooltip()
+  }
+})

package/src/relationship/relationshipObservables.ts

@@ -0,0 +1,50 @@
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  of,
+  takeUntil,
+  filter,
+  first,
+  map,
+  switchMap,
+  combineLatest,
+  merge,
+  shareReplay,
+  distinctUntilChanged
+} from 'rxjs'
+import type {
+  ContainerPosition } from '../../lib/core-types'
+import { getClassName, getUniID } from '../utils/orbchartsUtils'
+
+// function createRelationshipSelection ({ selection, pluginName, separateSeries$, seriesLabels$ }: {
+//   selection: d3.Selection<any, unknown, any, unknown>
+//   pluginName: string
+//   separateSeries$: Observable<boolean>
+//   seriesLabels$: Observable<string[]>
+// }) {
+//   const seriesClassName = getClassName(pluginName, 'series')
+  
+//   return combineLatest({
+//     seriesLabels: seriesLabels$,
+//     separateSeries: separateSeries$
+//   }).pipe(
+//     switchMap(async d => d),
+//     map((data, i) => {
+//       const selectionData = data.separateSeries ? data.seriesLabels : [data.seriesLabels.join('')]
+//       return selection
+//         .selectAll<SVGGElement, string>(`g.${seriesClassName}`)
+//         .data(selectionData, d => d)
+//         .join(
+//           enter => {
+//             return enter
+//               .append('g')
+//               .classed(seriesClassName, true)
+//           },
+//           update => update,
+//           exit => exit.remove()
+//         )
+//     }),
+//     shareReplay(1)
+//   )
+// }

package/src/series/defaults.ts

@@ -17,7 +17,7 @@ export const DEFAULT_BUBBLES_PARAMS: BubblesParams = {
     velocityDecay: 0.3, // 衰減數
     collisionSpacing: 2 // 泡泡間距
   },
-  bubbleText: {
+  bubbleLabel: {
     fillRate: 0.6,
     lineHeight: 12,
     lineLengthMin: 4
@@ -51,8 +51,8 @@ export const DEFAULT_PIE_PARAMS: PieParams = {
 }
 
 export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
-  eventFn: (eventData: EventSeries, eventName: EventName, t: number) => {
-    if (eventName === 'mouseover' || eventName === 'mousemove') {
+  renderFn: (eventData: EventSeries) => {
+    if (eventData.eventName === 'mouseover' || eventData.eventName === 'mousemove') {
       return [String(eventData.datum!.value)]
     }
     return [
@@ -62,7 +62,7 @@ export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
             return acc + seriesData.reduce((_acc, data) => {
               return _acc + (data.value ?? 0)
             }, 0)
-          }, 0) * t
+          }, 0) * (eventData.tween ?? 1)
         )
       )
     ]
@@ -83,9 +83,9 @@ export const DEFAULT_PIE_EVENT_TEXTS_PARAMS: PieEventTextsParams = {
     }
   ]
 }
-DEFAULT_PIE_EVENT_TEXTS_PARAMS.eventFn.toString = () => `(eventData: EventSeries, eventName: EventName, t: number) => {
-  if (eventName === 'mouseover' || eventName === 'mousemove') {
-    return [String(eventData.datum!.value)]
+DEFAULT_PIE_EVENT_TEXTS_PARAMS.renderFn.toString = () => `(eventData) => {
+  if (eventData.eventName === 'mouseover' || eventData.eventName === 'mousemove') {
+    return [String(eventData.datum.value)]
   }
   return [
     String(
@@ -94,7 +94,7 @@ DEFAULT_PIE_EVENT_TEXTS_PARAMS.eventFn.toString = () => `(eventData: EventSeries
           return acc + seriesData.reduce((_acc, data) => {
             return _acc + (data.value ?? 0)
           }, 0)
-        }, 0) * t
+        }, 0) * (eventData.tween ?? 1)
       )
     )
   ]

package/src/series/plugins/Bubbles.ts

@@ -45,7 +45,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
       force: {
         toBeTypes: ['object']
       },
-      bubbleText: {
+      bubbleLabel: {
         toBeTypes: ['object']
       },
       arcScaleType: {
@@ -69,8 +69,8 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
         return forceResult
       }
     }
-    if (params.bubbleText) {
-      const bubbleTextResult = validateColumns(params.bubbleText, {
+    if (params.bubbleLabel) {
+      const bubbleLabelResult = validateColumns(params.bubbleLabel, {
         fillRate: {
           toBeTypes: ['number']
         },
@@ -81,8 +81,8 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
           toBeTypes: ['number']
         },
       })
-      if (bubbleTextResult.status === 'error') {
-        return bubbleTextResult
+      if (bubbleLabelResult.status === 'error') {
+        return bubbleLabelResult
       }
     }
     return result
@@ -91,23 +91,23 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_BUBBLES
 
 let force: d3.Simulation<d3.SimulationNodeDatum, undefined> | undefined
 
-function makeForce (bubblesSelection: d3.Selection<SVGGElement, any, any, any>, fullParams: BubblesParams) {
+function makeForce (bubblesSelection: d3.Selection<SVGGElement, BubblesDatum, any, any>, fullParams: BubblesParams) {
   return d3.forceSimulation()
     .velocityDecay(fullParams.force!.velocityDecay!)
     // .alphaDecay(0.2)
     .force(
       "collision",
       d3.forceCollide()
-        .radius(d => {
-          // @ts-ignore
+        .radius((d: d3.SimulationNodeDatum & BubblesDatum) => {
           return d.r + fullParams.force!.collisionSpacing
         })
         // .strength(0.01)
     )
-    .force("charge", d3.forceManyBody().strength((d) => {
-      // @ts-ignore
+    .force("charge", d3.forceManyBody().strength((d: d3.SimulationNodeDatum & BubblesDatum) => {
       return - Math.pow(d.r, 2.0) * fullParams.force!.strength
     }))
+    // .force("charge", d3.forceManyBody().strength(-2000))
+    // .force("collision", d3.forceCollide(60).strength(1)) // @Q@ 60為泡泡的R，暫時是先寫死的
     // .force("x", d3.forceX().strength(forceStrength).x(this.graphicWidth / 2))
     // .force("y", d3.forceY().strength(forceStrength).y(this.graphicHeight / 2))
     .on("tick", () => {
@@ -121,6 +121,7 @@ function makeForce (bubblesSelection: d3.Selection<SVGGElement, any, any, any>,
         // .attr("cx", (d) => d.x)
         // .attr("cy", (d) => d.y)
     })
+
 }
 
 
@@ -259,13 +260,13 @@ function renderBubbles ({ selection, bubblesData, fullParams, sumSeries }: {
     .each((d,i,g) => {
       const gSelection = d3.select(g[i])
       let breakAll = true
-      if (d[textDataColumn].length <= fullParams.bubbleText.lineLengthMin) {
+      if (d[textDataColumn].length <= fullParams.bubbleLabel.lineLengthMin) {
         breakAll = false
       }
       gSelection.call(renderCircleText, {
         text: d[textDataColumn],
-        radius: d.r * fullParams.bubbleText.fillRate,
-        lineHeight: fullParams.bubbleText.lineHeight,
+        radius: d.r * fullParams.bubbleLabel.fillRate,
+        lineHeight: fullParams.bubbleLabel.lineHeight,
         isBreakAll: breakAll
       })
 

package/src/series/plugins/PieEventTexts.ts

@@ -40,7 +40,7 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_PIE_EVE
   layerIndex: LAYER_INDEX_OF_LABEL,
   validator: (params, { validateColumns }) => {
     const result = validateColumns(params, {
-      eventFn: {
+      renderFn: {
         toBeTypes: ['Function'],
       },
       textAttrs: {
@@ -84,16 +84,16 @@ function renderText (
   return text
 }
 
-function makeTextData ({ eventData, eventName, t, eventFn, textAttrs, textStyles }: {
+function createTextData ({ eventData, renderFn, textAttrs, textStyles }: {
   eventData: EventSeries,
-  eventName: EventName,
-  t: number,
-  eventFn: (d: EventSeries, eventName: EventName, t: number) => string[]
+  // t: number,
+  renderFn: (d: EventSeries) => string[] | string
   textAttrs: Array<{ [key:string]: string | number }>
   textStyles: Array<{ [key:string]: string | number }>
 }): TextDatum[] {
-  const callbackText = eventFn(eventData, eventName, t)
-  return callbackText.map((d, i) => {
+  const callbackText = renderFn(eventData)
+  const textArr = Array.isArray(callbackText) ? callbackText : [callbackText]
+  return textArr.map((d, i) => {
     return {
       text: d,
       attr: textAttrs[i],
@@ -159,12 +159,13 @@ function createEachPieEventTexts (pluginName: string, context: {
       // .ease(getD3TransitionEase(data.fullChartParams.transitionEase!))
       .tween('move', (event, datum) => {
         return (t) => {
-          const renderData = makeTextData({
+          const renderData = createTextData({
             eventData: {
               type: 'series',
               pluginName,
               eventName: 'transitionMove',
               event,
+              tween: t,
               highlightTarget: data.highlightTarget,
               data: data.computedData,
               series: [],
@@ -172,9 +173,9 @@ function createEachPieEventTexts (pluginName: string, context: {
               seriesLabel: '',
               datum: null
             },
-            eventName: 'transitionMove',
-            t,
-            eventFn: data.fullParams.eventFn!,
+            // eventName: 'transitionMove',
+            // t,
+            renderFn: data.fullParams.renderFn!,
             textAttrs: data.fullParams.textAttrs!,
             textStyles: data.fullParams.textStyles!
           })
@@ -182,12 +183,13 @@ function createEachPieEventTexts (pluginName: string, context: {
         }
       })
       .on('end', (event, datum) => {
-        const renderData = makeTextData({
+        const renderData = createTextData({
           eventData: {
             type: 'series',
             pluginName,
             eventName: 'transitionEnd',
             event,
+            tween: 1,
             highlightTarget: data.highlightTarget,
             data: data.computedData,
             series: [],
@@ -195,9 +197,9 @@ function createEachPieEventTexts (pluginName: string, context: {
             seriesLabel: '',
             datum: null
           },
-          eventName: 'transitionMove',
-          t: 1,
-          eventFn: data.fullParams.eventFn!,
+          // eventName: 'transitionMove',
+          // t: 1,
+          renderFn: data.fullParams.renderFn!,
           textAttrs: data.fullParams.textAttrs!,
           textStyles: data.fullParams.textStyles!
         })
@@ -208,11 +210,10 @@ function createEachPieEventTexts (pluginName: string, context: {
         }
         storeEventSubscription = context.event$
           .subscribe(eventData => {
-            const renderData = makeTextData({
+            const renderData = createTextData({
               eventData,
-              eventName: eventData.eventName,
-              t: 1,
-              eventFn: data.fullParams.eventFn!,
+              // t: 1,
+              renderFn: data.fullParams.renderFn!,
               textAttrs: data.fullParams.textAttrs!,
               textStyles: data.fullParams.textStyles!
             })

package/src/tree/defaults.ts

@@ -12,7 +12,7 @@ DEFAULT_TREE_MAP_PARAMS.sort.toString = () => `(a, b) => b.value - a.value`
 export const DEFAULT_TREE_LEGEND_PARAMS: TreeLegendParams = {
   // position: 'right',
   // justify: 'end',
-  placement: 'bottom',
+  placement: 'right-end',
   padding: 28,
   backgroundFill: 'none',
   backgroundStroke: 'none',

package/src/utils/commonUtils.ts

@@ -6,17 +6,17 @@ export function measureTextWidth (text: string, size: number = 10) {
 }
 
 // 取得最小及最大值 - 數字陣列
-export function getMinAndMax (data: number[]): [number, number] {
-  const defaultMinAndMax: [number, number] = [0, 0] // default
+export function getMinMax (data: number[]): [number, number] {
+  const defaultMinMax: [number, number] = [0, 0] // default
   if (!data.length) {
-    return defaultMinAndMax
+    return defaultMinMax
   }
-  const minAndMax: [number, number] = data.reduce((prev, current) => {
+  const minMax: [number, number] = data.reduce((prev, current) => {
     // [min, max]
     return [
       current < prev[0] ? current : prev[0],
       current > prev[1] ? current : prev[1]
     ]
   }, [data[0], data[0]])
-  return minAndMax
+  return minMax
 }

package/src/utils/d3Utils.ts

@@ -56,7 +56,7 @@ export function makeD3Arc ({ axisWidth, innerRadius, outerRadius, padAngle, corn
     .cornerRadius(cornerRadius)
 }
 
-export const parseTickFormatValue = (value: any, tickFormat: string | ((text: d3.NumberValue) => string)) => {
+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 ?? '')
@@ -64,7 +64,7 @@ export const parseTickFormatValue = (value: any, tickFormat: string | ((text: d3
   return d3.format(tickFormat as string)!(value)
 }
 
-export const parseDateTickFormatValue = (value: any, tickFormat: string | ((text: d3.NumberValue) => string)) => {
+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)
   }

package/src/utils/orbchartsUtils.ts

@@ -6,22 +6,22 @@ import type {
   ComputedDatumBaseValue,
   ComputedDatumBaseSeries,
   ComputedDatumBaseCategory } from '../../lib/core-types'
-import { getMinAndMax } from './commonUtils'
+import { getMinMax } from './commonUtils'
 
 // 取得最小及最大值 - datum格式陣列資料
-export function getMinAndMaxValue (data: (ComputedDatumBase & ComputedDatumBaseValue)[]): [number, number] {
+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 getMinAndMax(arr)
+  return getMinMax(arr)
 }
 
 // 取得colorType顏色
 export function getColor (colorType: ColorType, fullChartParams: ChartParams) {
   const colors = fullChartParams.colors[fullChartParams.colorScheme]
   // 對應series資料中第1個顏色
-  if (colorType === 'series') {
-    return colors.series[0]
+  if (colorType === 'label') {
+    return colors.label[0]
   }
   // 對應colorType設定的顏色
   // return colors[colorType] != null
@@ -53,12 +53,12 @@ export function getCategoryValueColor ({ datum, colorType, fullChartParams }: {
 // 取得Datum顏色 @Q@ 待重構完後刪除
 export function getDatumColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBase, colorType: ColorType, fullChartParams: ChartParams }) {
   // 對應series資料中的顏色
-  if (colorType === '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].series[0]
+      return fullChartParams.colors[fullChartParams.colorScheme].label[0]
     }
   }
   // 對應colorType設定的顏色
@@ -99,3 +99,18 @@ export function calcAxesSize ({ xAxisPosition, yAxisPosition, width, height }: {
   }
 }
 
+// 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/dist/orbcharts-plugins-basic/src/grid/plugins/BarStack.d.ts

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

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

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

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

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

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

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

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

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