@orbcharts/plugins-basic 3.0.0-beta.1 → 3.0.0-beta.11

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',
@@ -30,7 +30,7 @@ export const DEFAULT_TREE_TOOLTIP_PARAMS: TreeTooltipParams = {
   textColorType: 'primary',
   offset: [20, 5],
   padding: 10,
-  renderFn: (eventData, { styles }) => {
+  renderFn: (eventData, { styles, utils }) => {
     const hasCategoryLabel = eventData.categoryLabel ? true : false
     const hasDatumLabel = eventData.datum.label ? true : false
     const bulletWidth = styles.textSizePx * 0.7
@@ -54,7 +54,7 @@ export const DEFAULT_TREE_TOOLTIP_PARAMS: TreeTooltipParams = {
   </g>`
   },
 }
-DEFAULT_TREE_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles }) => {
+DEFAULT_TREE_TOOLTIP_PARAMS.renderFn.toString = () => `(eventData, { styles, utils }) => {
     const hasCategoryLabel = eventData.categoryLabel ? true : false
     const hasDatumLabel = eventData.datum.label ? true : false
     const bulletWidth = styles.textSizePx * 0.7

package/src/tree/plugins/TreeLegend.ts

@@ -65,18 +65,11 @@ export const TreeLegend = defineTreePlugin(pluginConfig)(({ selection, rootSelec
   
   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 seriesList = [
+      const labelList = [
         {
           listRectWidth: d.listRectWidth,
           listRectHeight: d.listRectHeight,
@@ -85,14 +78,14 @@ export const TreeLegend = defineTreePlugin(pluginConfig)(({ selection, rootSelec
       ]
       return {
         ...d,
-        seriesList
+        labelList
       }
     })
   )
 
   const unsubscribeBaseLegend = createBaseLegend(pluginName, {
     rootSelection,
-    seriesLabels$: categoryLabels$,
+    legendLabels$: observer.categoryLabels$,
     fullParams$,
     layout$: observer.layout$,
     fullChartParams$: observer.fullChartParams$,

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,14 +56,15 @@ 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) {
-    return (tickFormat as ((text: d3.NumberValue) => string))(value)
+    const v = (tickFormat as ((text: d3.NumberValue) => string))(value)
+    return String(v ?? '')
   }
   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/observables.ts

@@ -3,10 +3,10 @@ import { Observable, merge, distinctUntilChanged, fromEvent } from 'rxjs'
 
 export function d3EventObservable(selection: d3.Selection<any, any, any, any>, event: any) {
   // Start with an observable that will never emit
-  let obs = new Observable(() => {});
+  let obs: Observable<MouseEvent> = new Observable(() => {});
   selection.each(function () {
       // Create observables from each of the elements
-      const events = fromEvent(this as any, event);
+      const events: Observable<MouseEvent> = fromEvent(this, event);
       // Merge the observables into one
       obs = merge(obs, events);
   });

package/src/utils/orbchartsUtils.ts

@@ -3,24 +3,25 @@ import type {
   ColorType,
   ChartParams,
   ComputedDatumBase,
-  ComputedDatumSeriesValue,
-  ComputedDatumCategoryValue } from '../../lib/core-types'
-import { getMinAndMax } from './commonUtils'
+  ComputedDatumBaseValue,
+  ComputedDatumBaseSeries,
+  ComputedDatumBaseCategory } from '../../lib/core-types'
+import { getMinMax } from './commonUtils'
 
 // 取得最小及最大值 - datum格式陣列資料
-export function getMinAndMaxValue (data: ComputedDatumBase[]): [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
@@ -37,7 +38,7 @@ export function getSeriesValueColor () {
 
 }
 
-export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumCategoryValue, colorType: ColorType, fullChartParams: ChartParams }) {
+export function getCategoryValueColor ({ datum, colorType, fullChartParams }: { datum: ComputedDatumBaseCategory, colorType: ColorType, fullChartParams: ChartParams }) {
 
 }
 
@@ -52,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 ((datum as unknown as ComputedDatumSeriesValue).color) {
-      return (datum as unknown as ComputedDatumSeriesValue).color
+  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設定的顏色
@@ -98,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/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/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/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/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/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>;

package/dist/src/noneData/plugins/Container.d.ts

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

package/dist/src/noneData/plugins/Tooltip.d.ts

@@ -1,3 +0,0 @@
-import { PluginConstructor } from '../../../lib/core-types';
-
-export declare const Tooltip: PluginConstructor<any, "Tooltip", import('@orbcharts/plugins-basic-types').TooltipParams>;