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

package/src/multiValue/plugins/RacingValueAxis.ts

@@ -0,0 +1,115 @@
+import {
+  Observable,
+  Subject,
+  combineLatest,
+  takeUntil,
+  of,
+  map,
+  distinctUntilChanged,
+  switchMap,
+  shareReplay
+} from 'rxjs'
+import type {
+  DefinePluginConfig,
+} from '../../../lib/core-types'
+import {
+  defineMultiValuePlugin,
+} from '../../../lib/core'
+import { DEFAULT_RACING_VALUE_AXIS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_AXIS } from '../../const'
+import { createBaseXAxis } from '../../base/BaseXAxis'
+
+const pluginName = 'RacingValueAxis'
+
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_RACING_VALUE_AXIS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_RACING_VALUE_AXIS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      labelOffset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      labelColorType: {
+        toBeOption: 'ColorType',
+      },
+      axisLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      axisLineColorType: {
+        toBeOption: 'ColorType',
+      },
+      ticks: {
+        toBeTypes: ['number', 'null']
+      },
+      tickFormat: {
+        toBeTypes: ['string', 'Function']
+      },
+      tickLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      tickPadding: {
+        toBeTypes: ['number']
+      },
+      tickFullLine: {
+        toBeTypes: ['boolean']
+      },
+      tickFullLineDasharray: {
+        toBeTypes: ['string']
+      },
+      tickColorType: {
+        toBeOption: 'ColorType',
+      },
+      tickTextColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    if (result.status === 'error') {
+      return result
+    }
+    return result
+  }
+}
+
+
+
+export const RacingValueAxis = defineMultiValuePlugin(pluginConfig)(({ selection, name, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  // 過渡速度和圖形一致
+  const transitionDuration$ = observer.fullChartParams$.pipe(
+    takeUntil(destroy$),
+    map(d => d.transitionDuration),
+    distinctUntilChanged()
+  )
+
+  const unsubscribeBaseXAxis = createBaseXAxis(pluginName, {
+    selection,
+    position$: of('top'),
+    transitionDuration$,
+    computedData$: observer.computedData$,
+    fullParams$: observer.fullParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    fullChartParams$: observer.fullChartParams$,
+    isCategorySeprate$: observer.isCategorySeprate$,
+    containerPosition$: observer.containerPosition$,
+    // layout$: observer.layout$,
+    containerSize$: observer.containerSize$,
+    xScale$: observer.xScale$,
+    // filteredXYMinMaxData$: observer.filteredXYMinMaxData$,
+    // xyMinMax$: observer.xyMinMax$,
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseXAxis()
+  }
+})

package/src/multiValue/plugins/RankingAxis_legacy.ts

@@ -0,0 +1,109 @@
+// import * as d3 from 'd3'
+// import {
+//   Observable,
+//   Subject,
+//   combineLatest,
+//   takeUntil,
+//   map,
+//   distinctUntilChanged,
+//   switchMap,
+//   shareReplay
+// } from 'rxjs'
+// import type {
+//   ColorType,
+//   ChartParams,
+//   ComputedDatumMultiValue,
+//   ComputedDataMultiValue,
+//   ComputedXYDatumMultiValue,
+//   ContainerPositionScaled,
+//   DataFormatterMultiValue,
+//   DefinePluginConfig,
+//   TransformData,
+//   Layout
+// } from '../../../lib/core-types'
+// import { defineMultiValuePlugin } from '../../../lib/core'
+// import { createBaseRacingAxis } from '../../base/BaseRacingAxis'
+// import { DEFAULT_RANKING_AXIS_PARAMS } from '../defaults'
+// import { LAYER_INDEX_OF_AXIS } from '../../const'
+
+// const pluginName = 'RacingAxis'
+
+// const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_RANKING_AXIS_PARAMS> = {
+//   name: pluginName,
+//   defaultParams: DEFAULT_RANKING_AXIS_PARAMS,
+//   layerIndex: LAYER_INDEX_OF_AXIS,
+//   validator: (params, { validateColumns }) => {
+//     const result = validateColumns(params, {
+//       labelOffset: {
+//         toBe: '[number, number]',
+//         test: (value: any) => {
+//           return Array.isArray(value)
+//             && value.length === 2
+//             && typeof value[0] === 'number'
+//             && typeof value[1] === 'number'
+//         }
+//       },
+//       labelColorType: {
+//         toBeOption: 'ColorType',
+//       },
+//       axisLineVisible: {
+//         toBeTypes: ['boolean']
+//       },
+//       axisLineColorType: {
+//         toBeOption: 'ColorType',
+//       },
+//       // ticks: {
+//       //   toBeTypes: ['number', 'null']
+//       // },
+//       // tickFormat: {
+//       //   toBeTypes: ['string', 'Function']
+//       // },
+//       tickLineVisible: {
+//         toBeTypes: ['boolean']
+//       },
+//       tickPadding: {
+//         toBeTypes: ['number']
+//       },
+//       // tickFullLine: {
+//       //   toBeTypes: ['boolean']
+//       // },
+//       // tickFullLineDasharray: {
+//       //   toBeTypes: ['string']
+//       // },
+//       tickColorType: {
+//         toBeOption: 'ColorType',
+//       },
+//       tickTextColorType: {
+//         toBeOption: 'ColorType',
+//       }
+//     })
+//     if (result.status === 'error') {
+//       return result
+//     }
+//     return result
+//   }
+// }
+
+// export const RacingAxis = defineMultiValuePlugin(pluginConfig)(({ selection, name, observer, subject }) => {
+  
+//   const destroy$ = new Subject()
+
+//   const unsubscribeBaseRacingAxis = createBaseRacingAxis(pluginName, {
+//     selection,
+//     computedData$: observer.computedData$,
+//     visibleComputedData$: observer.visibleComputedData$,
+//     fullParams$: observer.fullParams$,
+//     fullDataFormatter$: observer.fullDataFormatter$,
+//     fullChartParams$: observer.fullChartParams$,
+//     xyMinMax$: observer.xyMinMax$,
+//     textSizePx$: observer.textSizePx$,
+//     layout$: observer.layout$,
+//     containerPosition$: observer.containerPosition$,
+//     isCategorySeprate$: observer.isCategorySeprate$,
+//   })
+
+//   return () => {
+//     destroy$.next(undefined)
+//     unsubscribeBaseRacingAxis()
+//   }
+// })

package/src/multiValue/plugins/Scatter.ts

@@ -11,7 +11,7 @@ import {
 import type {
   ComputedDatumMultiValue,
   ComputedDataMultiValue,
-  ComputedLayoutDataMultiValue,
+  ComputedXYDataMultiValue,
   DefinePluginConfig,
   EventMultiValue,
   ChartParams, 
@@ -68,11 +68,11 @@ const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_SCATTER
   }
 }
 
-function renderDots ({ graphicGSelection, circleGClassName, circleClassName, visibleComputedLayoutData, fullParams, fullChartParams, graphicReverseScale }: {
+function renderDots ({ graphicGSelection, circleGClassName, circleClassName, visibleComputedXYData, fullParams, fullChartParams, graphicReverseScale }: {
   graphicGSelection: d3.Selection<SVGGElement, any, any, any>
   circleGClassName: string
   circleClassName: string
-  visibleComputedLayoutData: ComputedLayoutDataMultiValue
+  visibleComputedXYData: ComputedXYDataMultiValue
   fullParams: ScatterParams
   fullChartParams: ChartParams
   graphicReverseScale: [number, number][]
@@ -89,7 +89,7 @@ function renderDots ({ graphicGSelection, circleGClassName, circleClassName, vis
     .each((categoryData, categoryIndex, g) => {
       d3.select(g[categoryIndex])
         .selectAll<SVGGElement, ComputedDatumMultiValue>('g')
-        .data(visibleComputedLayoutData[categoryIndex], d => d.id)
+        .data(visibleComputedXYData[categoryIndex], d => d.id)
         .join(
           enter => {
             // enterDuration
@@ -234,19 +234,19 @@ export const Scatter = defineMultiValuePlugin(pluginConfig)(({ selection, name,
     pluginName,
     clipPathID,
     categoryLabels$: observer.categoryLabels$,
-    multiValueContainerPosition$: observer.multiValueContainerPosition$,
-    multiValueGraphicTransform$: observer.multiValueGraphicTransform$
+    containerPosition$: observer.containerPosition$,
+    graphicTransform$: observer.graphicTransform$
   })
 
   const graphicReverseScale$: Observable<[number, number][]> = combineLatest({
     computedData: observer.computedData$,
-    multiValueGraphicReverseScale: observer.multiValueGraphicReverseScale$
+    graphicReverseScale: observer.graphicReverseScale$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async data => data),
     map(data => {
       return data.computedData.map((series, categoryIndex) => {
-        return data.multiValueGraphicReverseScale[categoryIndex]
+        return data.graphicReverseScale[categoryIndex]
       })
     })
   )
@@ -272,7 +272,7 @@ export const Scatter = defineMultiValuePlugin(pluginConfig)(({ selection, name,
 
   const graphicSelection$ = combineLatest({
     graphicGSelection: graphicGSelection$,
-    visibleComputedLayoutData: observer.visibleComputedLayoutData$,
+    visibleComputedXYData: observer.visibleComputedXYData$,
     graphicReverseScale: graphicReverseScale$,
     fullChartParams: observer.fullChartParams$,
     fullParams: observer.fullParams$,
@@ -284,7 +284,7 @@ export const Scatter = defineMultiValuePlugin(pluginConfig)(({ selection, name,
         graphicGSelection: data.graphicGSelection,
         circleGClassName,
         circleClassName,
-        visibleComputedLayoutData: data.visibleComputedLayoutData,
+        visibleComputedXYData: data.visibleComputedXYData,
         fullParams: data.fullParams,
         fullChartParams: data.fullChartParams,
         graphicReverseScale: data.graphicReverseScale
@@ -389,7 +389,7 @@ export const Scatter = defineMultiValuePlugin(pluginConfig)(({ selection, name,
 
   combineLatest({
     graphicSelection: graphicSelection$,
-    highlight: observer.multiValueHighlight$.pipe(
+    highlight: observer.highlight$.pipe(
       map(data => data.map(d => d.id))
     ),
     fullChartParams: observer.fullChartParams$
@@ -408,8 +408,8 @@ export const Scatter = defineMultiValuePlugin(pluginConfig)(({ selection, name,
   //   console.log('graphicGSelection$', data)
   // })
 
-  // observer.visibleComputedLayoutData$.subscribe(data => {
-  //   console.log('visibleComputedLayoutData$', data)
+  // observer.visibleComputedXYData$.subscribe(data => {
+  //   console.log('visibleComputedXYData$', data)
   // })
 
   // observer.fullChartParams$.subscribe(data => {

package/src/multiValue/plugins/ScatterBubbles.ts

@@ -14,8 +14,8 @@ import {
 import type {
   ComputedDatumMultiValue,
   ComputedDataMultiValue,
-  ComputedLayoutDatumMultiValue,
-  ComputedLayoutDataMultiValue,
+  ComputedXYDatumMultiValue,
+  ComputedXYDataMultiValue,
   DefinePluginConfig,
   EventMultiValue,
   ChartParams, 
@@ -42,7 +42,7 @@ type ClipPathDatum = {
   height: number;
 }
 
-interface BubbleDatum extends ComputedLayoutDatumMultiValue {
+interface BubbleDatum extends ComputedXYDatumMultiValue {
   r: number
   opacity: number
 }
@@ -91,7 +91,7 @@ function renderDots ({ graphicGSelection, circleGClassName, circleClassName, bub
   graphicGSelection: d3.Selection<SVGGElement, any, any, any>
   circleGClassName: string
   circleClassName: string
-  // visibleComputedLayoutData: ComputedLayoutDataMultiValue
+  // visibleComputedLayoutData: ComputedXYDataMultiValue
   bubbleData: BubbleDatum[][]
   fullParams: ScatterBubblesParams
   fullChartParams: ChartParams
@@ -254,19 +254,19 @@ export const ScatterBubbles = defineMultiValuePlugin(pluginConfig)(({ selection,
     pluginName,
     clipPathID,
     categoryLabels$: observer.categoryLabels$,
-    multiValueContainerPosition$: observer.multiValueContainerPosition$,
-    multiValueGraphicTransform$: observer.multiValueGraphicTransform$
+    containerPosition$: observer.containerPosition$,
+    graphicTransform$: observer.graphicTransform$
   })
 
   const graphicReverseScale$: Observable<[number, number][]> = combineLatest({
     computedData: observer.computedData$,
-    multiValueGraphicReverseScale: observer.multiValueGraphicReverseScale$
+    graphicReverseScale: observer.graphicReverseScale$
   }).pipe(
     takeUntil(destroy$),
     switchMap(async data => data),
     map(data => {
       return data.computedData.map((series, categoryIndex) => {
-        return data.multiValueGraphicReverseScale[categoryIndex]
+        return data.graphicReverseScale[categoryIndex]
       })
     })
   )
@@ -290,13 +290,13 @@ export const ScatterBubbles = defineMultiValuePlugin(pluginConfig)(({ selection,
     })
   })
 
-  const filteredValueList$ = observer.filteredMinMaxXYData$.pipe(
+  const filteredValueList$ = observer.filteredXYMinMaxData$.pipe(
     takeUntil(destroy$),
     map(data => data.datumList.flat().map(d => d.value[2] ?? 0)),
     shareReplay(1)
   )
 
-  const filteredMinMaxValue$ = observer.filteredMinMaxXYData$.pipe(
+  const filteredMinMaxValue$ = observer.filteredXYMinMaxData$.pipe(
     takeUntil(destroy$),
     map(data => {
       return getMinMax(data.datumList.flat().map(d => d.value[2] ?? 0))
@@ -376,7 +376,7 @@ export const ScatterBubbles = defineMultiValuePlugin(pluginConfig)(({ selection,
   )
 
   const bubbleData$ = combineLatest({
-    computedLayoutData: observer.computedLayoutData$,
+    visibleComputedXYData: observer.visibleComputedXYData$,
     opacityScale: opacityScale$,
     radiusScale: radiusScale$,
     scaleFactor: scaleFactor$,
@@ -385,7 +385,7 @@ export const ScatterBubbles = defineMultiValuePlugin(pluginConfig)(({ selection,
     takeUntil(destroy$),
     switchMap(async (d) => d),
     map(data => {
-      return data.computedLayoutData.map(category => {
+      return data.visibleComputedXYData.map(category => {
         return category.map(_d => {
           const d: BubbleDatum = _d as BubbleDatum
           d.r = data.radiusScale(d.value[2]) * data.scaleFactor * adjustmentFactor
@@ -517,7 +517,7 @@ export const ScatterBubbles = defineMultiValuePlugin(pluginConfig)(({ selection,
 
   combineLatest({
     graphicSelection: graphicSelection$,
-    highlight: observer.multiValueHighlight$.pipe(
+    highlight: observer.highlight$.pipe(
       map(data => data.map(d => d.id))
     ),
     fullChartParams: observer.fullChartParams$

package/src/multiValue/plugins/XAxis.ts

@@ -0,0 +1,108 @@
+import {
+  Observable,
+  Subject,
+  combineLatest,
+  takeUntil,
+  of,
+  map,
+  distinctUntilChanged,
+  switchMap,
+  shareReplay
+} from 'rxjs'
+import type {
+  DefinePluginConfig,
+} from '../../../lib/core-types'
+import {
+  defineMultiValuePlugin,
+} from '../../../lib/core'
+import { DEFAULT_X_AXIS_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_AXIS } from '../../const'
+import { createBaseXAxis } from '../../base/BaseXAxis'
+
+const pluginName = 'XAxis'
+
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_X_AXIS_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_X_AXIS_PARAMS,
+  layerIndex: LAYER_INDEX_OF_AXIS,
+  validator: (params, { validateColumns }) => {
+    const result = validateColumns(params, {
+      labelOffset: {
+        toBe: '[number, number]',
+        test: (value: any) => {
+          return Array.isArray(value)
+            && value.length === 2
+            && typeof value[0] === 'number'
+            && typeof value[1] === 'number'
+        }
+      },
+      labelColorType: {
+        toBeOption: 'ColorType',
+      },
+      axisLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      axisLineColorType: {
+        toBeOption: 'ColorType',
+      },
+      ticks: {
+        toBeTypes: ['number', 'null']
+      },
+      tickFormat: {
+        toBeTypes: ['string', 'Function']
+      },
+      tickLineVisible: {
+        toBeTypes: ['boolean']
+      },
+      tickPadding: {
+        toBeTypes: ['number']
+      },
+      tickFullLine: {
+        toBeTypes: ['boolean']
+      },
+      tickFullLineDasharray: {
+        toBeTypes: ['string']
+      },
+      tickColorType: {
+        toBeOption: 'ColorType',
+      },
+      tickTextColorType: {
+        toBeOption: 'ColorType',
+      }
+    })
+    if (result.status === 'error') {
+      return result
+    }
+    return result
+  }
+}
+
+
+
+export const XAxis = defineMultiValuePlugin(pluginConfig)(({ selection, name, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const unsubscribeBaseXAxis = createBaseXAxis(pluginName, {
+    selection,
+    position$: of('bottom'),
+    transitionDuration$: of(100),
+    computedData$: observer.computedData$,
+    fullParams$: observer.fullParams$,
+    fullDataFormatter$: observer.fullDataFormatter$,
+    fullChartParams$: observer.fullChartParams$,
+    isCategorySeprate$: observer.isCategorySeprate$,
+    containerPosition$: observer.containerPosition$,
+    // layout$: observer.layout$,
+    containerSize$: observer.containerSize$,
+    xScale$: observer.xScale$,
+    // filteredXYMinMaxData$: observer.filteredXYMinMaxData$,
+    // xyMinMax$: observer.xyMinMax$,
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseXAxis()
+  }
+})

package/src/multiValue/plugins/XYAux.ts

@@ -446,8 +446,8 @@ export const XYAux = defineMultiValuePlugin(pluginConfig)(({ selection, rootSele
         )
       })
     ),
-    multiValueContainerPosition$: observer.multiValueContainerPosition$,
-    multiValueGraphicTransform$: observer.multiValueGraphicTransform$
+    containerPosition$: observer.containerPosition$,
+    graphicTransform$: observer.graphicTransform$
   })
 
   observer.layout$.pipe(
@@ -476,9 +476,9 @@ export const XYAux = defineMultiValuePlugin(pluginConfig)(({ selection, rootSele
   //   console.log('r:', r)
   // })
 
-  const columnAmount$ = observer.multiValueContainerPosition$.pipe(
-    map(multiValueContainerPosition => {
-      const maxColumnIndex = multiValueContainerPosition.reduce((acc, current) => {
+  const columnAmount$ = observer.containerPosition$.pipe(
+    map(containerPosition => {
+      const maxColumnIndex = containerPosition.reduce((acc, current) => {
         return current.columnIndex > acc ? current.columnIndex : acc
       }, 0)
       return maxColumnIndex + 1
@@ -486,9 +486,9 @@ export const XYAux = defineMultiValuePlugin(pluginConfig)(({ selection, rootSele
     distinctUntilChanged()
   )
 
-  const rowAmount$ = observer.multiValueContainerPosition$.pipe(
-    map(multiValueContainerPosition => {
-      const maxRowIndex = multiValueContainerPosition.reduce((acc, current) => {
+  const rowAmount$ = observer.containerPosition$.pipe(
+    map(containerPosition => {
+      const maxRowIndex = containerPosition.reduce((acc, current) => {
         return current.rowIndex > acc ? current.rowIndex : acc
       }, 0)
       return maxRowIndex + 1
@@ -496,13 +496,13 @@ export const XYAux = defineMultiValuePlugin(pluginConfig)(({ selection, rootSele
     distinctUntilChanged()
   )
 
-  const textReverseTransform$ = observer.multiValueContainerPosition$.pipe(
+  const textReverseTransform$ = observer.containerPosition$.pipe(
     takeUntil(destroy$),
     switchMap(async (d) => d),
-    map(multiValueContainerPosition => {
+    map(containerPosition => {
       // const axesRotateXYReverseValue = `rotateX(${data.gridAxesReverseTransform.rotateX}deg) rotateY(${data.gridAxesReverseTransform.rotateY}deg)`
       // const axesRotateReverseValue = `rotate(${data.gridAxesReverseTransform.rotate}deg)`
-      const containerScaleReverseValue = `scale(${1 / multiValueContainerPosition[0].scale[0]}, ${1 / multiValueContainerPosition[0].scale[1]})`
+      const containerScaleReverseValue = `scale(${1 / containerPosition[0].scale[0]}, ${1 / containerPosition[0].scale[1]})`
       // 抵消最外層scale
       return `${containerScaleReverseValue}`
     }),
@@ -512,8 +512,8 @@ export const XYAux = defineMultiValuePlugin(pluginConfig)(({ selection, rootSele
   const xyPosition$ = multiValueXYPositionObservable({
     rootSelection,
     fullDataFormatter$: observer.fullDataFormatter$,
-    filteredMinMaxXYData$: observer.filteredMinMaxXYData$,
-    multiValueContainerPosition$: observer.multiValueContainerPosition$,
+    filteredXYMinMaxData$: observer.filteredXYMinMaxData$,
+    containerPosition$: observer.containerPosition$,
     layout$: observer.layout$
   }).pipe(
     takeUntil(destroy$)