@orbcharts/plugins-basic 3.0.0-beta.4 → 3.0.0-beta.5

package/src/multiValue/defaults.ts

@@ -0,0 +1,163 @@
+import type {
+  MultiValueLegendParams,
+  MultiValueTooltipParams,
+  ScatterParams,
+  ScatterBubblesParams,
+  XYAuxParams,
+  XYAxesParams,
+  XYZoomParams
+} from '../../lib/plugins-basic-types'
+
+
+export const DEFAULT_MULTI_VALUE_LEGEND_PARAMS: MultiValueLegendParams = {
+  // position: 'right',
+  // justify: 'end',
+  placement: 'bottom',
+  padding: 28,
+  // offset: [0, 0],
+  backgroundFill: 'none',
+  backgroundStroke: 'none',
+  gap: 10,
+  listRectWidth: 14,
+  listRectHeight: 14,
+  listRectRadius: 0,
+  // highlightEvent: false
+  textColorType: 'primary'
+}
+
+export const DEFAULT_MULTI_VALUE_TOOLTIP_PARAMS: MultiValueTooltipParams = {
+  backgroundColorType: 'background',
+  strokeColorType: 'primary',
+  backgroundOpacity: 0.8,
+  textColorType: 'primary',
+  offset: [20, 5],
+  padding: 10,
+  renderFn: (eventData, { styles, utils }) => {
+    const hasCategoryLabel = eventData.categoryLabel === '' ? false : true
+    const hasDatumLabel = eventData.datum.label.slice(0, 11) === 'multiValue_' ? false : true
+    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>`
+
+    return `${categorySvg}
+  <g ${hasCategoryLabel ? `transform="translate(0, ${styles.textSizePx * 2})"` : ''}>
+    ${datumSvg}
+  </g>`
+  },
+}
+DEFAULT_MULTI_VALUE_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
+    const hasCategoryLabel = eventData.categoryLabel === '' ? false : true
+    const hasDatumLabel = eventData.datum.label.slice(0, 11) === 'multiValue_' ? false : true
+    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>\`
+
+    return \`\${categorySvg}
+  <g \${hasCategoryLabel ? \`transform="translate(0, \${styles.textSizePx * 2})"\` : ''}>
+    \${datumSvg}
+  </g>\`
+}`
+
+export const DEFAULT_SCATTER_PARAMS: ScatterParams = {
+  radius: 5,
+  fillColorType: 'series',
+  strokeColorType: 'series',
+  strokeWidth: 0,
+}
+
+export const DEFAULT_SCATTER_BUBBLES_PARAMS: ScatterBubblesParams = {
+  // radius: 5,
+  fillColorType: 'series',
+  strokeColorType: 'series',
+  strokeWidth: 0,
+  valueLinearOpacity: [0.8, 0.8],
+  arcScaleType: 'area',
+  sizeAdjust: 0.5
+}
+
+export const DEFAULT_X_Y_AUX_PARAMS: XYAuxParams = {
+  xAxis: {
+    showLine: true,
+    showLabel: true,
+    lineDashArray: '3, 3',
+    lineColorType: 'primary',
+    labelColorType: 'primary',
+    labelTextColorType: 'background',
+    // labelTextFormat: text => text,
+    labelTextFormat: (value: number) => String(Math.round(value)),
+    labelPadding: 20,
+    // labelRotate: 0
+  },
+  yAxis: {
+    showLine: true,
+    showLabel: true,
+    lineDashArray: '3, 3',
+    lineColorType: 'primary',
+    labelColorType: 'primary',
+    labelTextColorType: 'background',
+    // labelTextFormat: text => text,
+    labelTextFormat: (value: number) => String(Math.round(value)),
+    labelPadding: 20,
+    // labelRotate: 0
+  }
+}
+DEFAULT_X_Y_AUX_PARAMS.xAxis.labelTextFormat.toString = () => `(value: number) => String(Math.round(value))`
+DEFAULT_X_Y_AUX_PARAMS.yAxis.labelTextFormat.toString = () => `(value: number) => String(Math.round(value))`
+
+
+export const DEFAULT_X_Y_AXES_PARAMS: XYAxesParams = {
+  xAxis: {
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: null,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextColorType: 'primary'
+  },
+  yAxis: {
+    labelOffset: [0, 0],
+    labelColorType: 'primary',
+    axisLineVisible: false,
+    axisLineColorType: 'primary',
+    ticks: null,
+    tickFormat: ',.0f',
+    tickLineVisible: true,
+    tickPadding: 20,
+    tickFullLine: true,
+    tickFullLineDasharray: 'none',
+    tickColorType: 'secondary',
+    tickTextColorType: 'primary'
+  }
+}
+
+export const DEFAULT_X_Y_ZOOM_PARAMS: XYZoomParams = {
+
+}

package/src/multiValue/index.ts

@@ -0,0 +1,9 @@
+export * from './defaults'
+// export * from './types'
+export { MultiValueLegend } from './plugins/MultiValueLegend'
+export { MultiValueTooltip } from './plugins/MultiValueTooltip'
+export { Scatter } from './plugins/Scatter'
+export { ScatterBubbles } from './plugins/ScatterBubbles'
+export { XYAux } from './plugins/XYAux'
+export { XYAxes } from './plugins/XYAxes'
+export { XYZoom } from './plugins/XYZoom'

package/src/multiValue/multiValueObservables.ts

@@ -0,0 +1,258 @@
+import * as d3 from 'd3'
+import {
+  Observable,
+  Subject,
+  debounceTime,
+  of,
+  takeUntil,
+  filter,
+  map,
+  switchMap,
+  combineLatest,
+  merge,
+  shareReplay,
+  distinctUntilChanged
+} from 'rxjs'
+import type {
+  ChartParams,
+  HighlightTarget,
+  DataFormatterMultiValue,
+  ComputedDataMultiValue,
+  ComputedDatumMultiValue,
+  ComputedLayoutDatumMultiValue,
+  TransformData,
+  ContainerPositionScaled,
+  Layout,
+} from '../../lib/core-types'
+import { createAxisToLabelIndexScale, createAxisToValueScale } from '../../lib/core'
+import { getClassName, getUniID } from '../utils/orbchartsUtils'
+import { d3EventObservable } from '../utils/observables'
+
+// 建立 multiValue 主要的 selection 
+export const multiValueSelectionsObservable = ({ selection, pluginName, clipPathID, categoryLabels$, multiValueContainerPosition$, multiValueGraphicTransform$ }: {
+  selection: d3.Selection<any, unknown, any, unknown>
+  pluginName: string
+  clipPathID: string
+  // computedData$: Observable<ComputedDataMultiValue>
+  categoryLabels$: Observable<string[]>
+  multiValueContainerPosition$: Observable<ContainerPositionScaled[]>
+  // multiValueAxesTransform$: Observable<TransformData>
+  multiValueGraphicTransform$: Observable<TransformData>
+}) => {
+  const categoryClassName = getClassName(pluginName, 'category')
+  const axesClassName = getClassName(pluginName, 'axes')
+  const graphicClassName = getClassName(pluginName, 'graphic')
+
+  // <g> category selection（container排放位置）
+  //   <g> axes selection（圖軸）
+  //     <defs> clipPath selection
+  //     <g> graphic selection（圖形 scale 範圍的變形）
+  const categorySelection$ = categoryLabels$.pipe(
+    map((categoryLabels, i) => {
+      return selection
+        .selectAll<SVGGElement, string>(`g.${categoryClassName}`)
+        .data(categoryLabels, d => d)
+        .join(
+          enter => {
+            return enter
+              .append('g')
+              .classed(categoryClassName, true)
+              .each((d, i, g) => {
+                const axesSelection = d3.select(g[i])
+                  .selectAll<SVGGElement, ComputedDatumMultiValue[]>(`g.${axesClassName}`)
+                  .data([i])
+                  .join(
+                    enter => {
+                      return enter
+                        .append('g')
+                        .classed(axesClassName, true)
+                        .attr('clip-path', `url(#${clipPathID})`)
+                        .each((d, i, g) => {
+                          const defsSelection = d3.select(g[i])
+                            .selectAll<SVGDefsElement, any>('defs')
+                            .data([i])
+                            .join('defs')
+            
+                          const graphicGSelection = d3.select(g[i])
+                            .selectAll<SVGGElement, any>('g')
+                            .data([i])
+                            .join('g')
+                            .classed(graphicClassName, true)
+                        })
+                    },
+                    update => update,
+                    exit => exit.remove()
+                  )
+              })
+          },
+          update => update,
+          exit => exit.remove()
+        )
+    }),
+    shareReplay(1)
+  )
+
+  // <g> category selection
+  combineLatest({
+    categorySelection: categorySelection$,
+    multiValueContainerPosition: multiValueContainerPosition$                                                                                                                                                                                       
+  }).pipe(
+    switchMap(async d => d)
+  ).subscribe(data => {
+    data.categorySelection
+      .transition()
+      .attr('transform', (d, i) => {
+        const multiValueContainerPosition = data.multiValueContainerPosition[i] ?? data.multiValueContainerPosition[0]
+        const translate = multiValueContainerPosition.translate
+        const scale = multiValueContainerPosition.scale
+        return `translate(${translate[0]}, ${translate[1]}) scale(${scale[0]}, ${scale[1]})`
+      })
+  })
+
+  // <g> axes selection
+  const axesSelection$ = categorySelection$.pipe(
+    map(categorySelection => {
+      return categorySelection
+        .select<SVGGElement>(`g.${axesClassName}`)
+    }),
+    shareReplay(1)
+  )
+
+  // <defs> clipPath selection
+  const defsSelection$ = axesSelection$.pipe(
+    map(axesSelection => {
+      return axesSelection.select<SVGDefsElement>('defs')
+    }),
+    shareReplay(1)
+  )
+
+  // <g> graphic selection
+  const graphicGSelection$ = combineLatest({
+    axesSelection: axesSelection$,
+    multiValueGraphicTransform: multiValueGraphicTransform$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      const graphicGSelection = data.axesSelection
+        .select<SVGGElement>(`g.${graphicClassName}`)
+      graphicGSelection
+        .transition()
+        .duration(50)
+        .style('transform', data.multiValueGraphicTransform.value)
+      return graphicGSelection
+    }),
+    shareReplay(1)
+  )
+
+  return {
+    categorySelection$,
+    axesSelection$,
+    defsSelection$,
+    graphicGSelection$
+  }
+}
+
+
+export const multiValueXYPositionObservable = ({ rootSelection, fullDataFormatter$, filteredMinMaxXYData$, multiValueContainerPosition$, layout$ }: {
+  rootSelection: d3.Selection<any, unknown, any, unknown>
+  fullDataFormatter$: Observable<DataFormatterMultiValue>
+  // computedData$: Observable<ComputedDataMultiValue>
+  // minMaxXY$: Observable<{ minX: number, maxX: number, minY: number, maxY: number }>
+  filteredMinMaxXYData$: Observable<{
+    minXDatum: ComputedLayoutDatumMultiValue
+    maxXDatum: ComputedLayoutDatumMultiValue
+    minYDatum: ComputedLayoutDatumMultiValue
+    maxYDatum: ComputedLayoutDatumMultiValue
+  }>
+  multiValueContainerPosition$: Observable<ContainerPositionScaled[]>
+  layout$: Observable<Layout>
+}) => {
+  const rootMousemove$ = d3EventObservable(rootSelection, 'mousemove').pipe(
+    debounceTime(2) // 避免過度頻繁觸發，實測時沒加電腦容易卡頓
+  )
+
+  const columnAmount$ = multiValueContainerPosition$.pipe(
+    map(multiValueContainerPosition => {
+      const maxColumnIndex = multiValueContainerPosition.reduce((acc, current) => {
+        return current.columnIndex > acc ? current.columnIndex : acc
+      }, 0)
+      return maxColumnIndex + 1
+    }),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
+  const rowAmount$ = multiValueContainerPosition$.pipe(
+    map(multiValueContainerPosition => {
+      const maxRowIndex = multiValueContainerPosition.reduce((acc, current) => {
+        return current.rowIndex > acc ? current.rowIndex : acc
+      }, 0)
+      return maxRowIndex + 1
+    }),
+    distinctUntilChanged(),
+    shareReplay(1)
+  )
+
+  const xyScale$ = combineLatest({
+    layout: layout$,
+    filteredMinMaxXYData: filteredMinMaxXYData$,
+    fullDataFormatter: fullDataFormatter$,
+    columnAmount: columnAmount$,
+    rowAmount: rowAmount$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      const xScale = createAxisToValueScale({
+        maxValue: data.filteredMinMaxXYData.maxXDatum.value[0],
+        minValue: data.filteredMinMaxXYData.minXDatum.value[0],
+        axisWidth: data.layout.width,
+        scaleDomain: data.fullDataFormatter.xAxis.scaleDomain,
+        scaleRange: data.fullDataFormatter.xAxis.scaleRange,
+      })
+      const yScale = createAxisToValueScale({
+        maxValue: data.filteredMinMaxXYData.maxYDatum.value[1],
+        minValue: data.filteredMinMaxXYData.minYDatum.value[1],
+        axisWidth: data.layout.height,
+        scaleDomain: data.fullDataFormatter.yAxis.scaleDomain,
+        scaleRange: data.fullDataFormatter.yAxis.scaleRange,
+        reverse: true
+      })
+      return { xScale, yScale }
+    })
+  )
+
+  const axisValue$ = combineLatest({
+    fullDataFormatter: fullDataFormatter$,
+    rootMousemove: rootMousemove$,
+    columnAmount: columnAmount$,
+    rowAmount: rowAmount$,
+    layout: layout$,
+    multiValueContainerPosition: multiValueContainerPosition$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      // 由於event座標是基於底層的，但是container會有多欄，所以要重新計算
+      return {
+        x: ((data.rootMousemove.offsetX - data.layout.left) / data.multiValueContainerPosition[0].scale[0])
+          % (data.layout.rootWidth / data.columnAmount / data.multiValueContainerPosition[0].scale[0]),
+        y: ((data.rootMousemove.offsetY - data.layout.top) / data.multiValueContainerPosition[0].scale[1])
+          % (data.layout.rootHeight / data.rowAmount / data.multiValueContainerPosition[0].scale[1])
+      }
+    })
+  )
+
+  return combineLatest({
+    xyScale: xyScale$,
+    axisValue: axisValue$
+  }).pipe(
+    switchMap(async d => d),
+    map(data => {
+      return {
+        x: data.axisValue.x,
+        y: data.axisValue.y,
+        xValue: data.xyScale.xScale(data.axisValue.x),
+        yValue: data.xyScale.yScale(data.axisValue.y)
+      }
+    })
+  )
+}

package/src/multiValue/plugins/MultiValueLegend.ts

@@ -0,0 +1,107 @@
+import * as d3 from 'd3'
+import {
+  combineLatest,
+  map,
+  switchMap,
+  takeUntil,
+  Observable,
+  Subject } from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineMultiValuePlugin } from '../../../lib/core'
+import { DEFAULT_MULTI_VALUE_LEGEND_PARAMS } from '../defaults'
+import { createBaseLegend } from '../../base/BaseLegend'
+import { LAYER_INDEX_OF_INFO } from '../../const'
+
+const pluginName = 'MultiValueLegend'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_VALUE_LEGEND_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_VALUE_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 MultiValueLegend = defineMultiValuePlugin(pluginConfig)(({ selection, rootSelection, observer, subject }) => {
+  
+  const destroy$ = new Subject()
+
+  const categoryLabels$: Observable<string[]> = observer.CategoryDataMap$.pipe(
+    takeUntil(destroy$),
+    map(data => {
+      return Array.from(data.keys())
+    })
+  )
+
+  // 全部列點矩型使用相同樣式參數
+  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$: categoryLabels$,
+    fullParams$,
+    layout$: observer.layout$,
+    fullChartParams$: observer.fullChartParams$,
+    textSizePx$: observer.textSizePx$
+  })
+
+  return () => {
+    destroy$.next(undefined)
+    unsubscribeBaseLegend()
+  }
+})
+

package/src/multiValue/plugins/MultiValueTooltip.ts

@@ -0,0 +1,66 @@
+import {
+  Subject,
+} from 'rxjs'
+import type { DefinePluginConfig } from '../../../lib/core-types'
+import {
+  defineMultiValuePlugin } from '../../../lib/core'
+import { DEFAULT_MULTI_VALUE_TOOLTIP_PARAMS } from '../defaults'
+import { LAYER_INDEX_OF_TOOLTIP } from '../../const'
+import { createBaseTooltip } from '../../base/BaseTooltip'
+
+const pluginName = 'MultiValueTooltip'
+
+const pluginConfig: DefinePluginConfig<typeof pluginName, typeof DEFAULT_MULTI_VALUE_TOOLTIP_PARAMS> = {
+  name: pluginName,
+  defaultParams: DEFAULT_MULTI_VALUE_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 MultiValueTooltip = defineMultiValuePlugin(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()
+  }
+})