@orbcharts/core 3.0.0-beta.3 → 3.0.0-beta.5

package/src/utils/orbchartsUtils.ts

@@ -13,11 +13,12 @@ import type {
   DataMultiValue,
   DataMultiValueDatum,
   DataMultiValueValue,
+  ComputedLayoutDatumMultiValue,
   DataFormatterContainer,
   SeriesDirection,
   DataFormatterGridGrid,
-  SeriesContainerPosition,
-  GridContainerPosition,
+  ContainerPosition,
+  ContainerPositionScaled,
   Layout
 } from '../../lib/core-types'
 import { isPlainObject } from './commonUtils'
@@ -29,8 +30,11 @@ export function formatValueToLabel (value: any, valueFormatter: string | ((text:
   return d3.format(valueFormatter as string)!(value)
 }
 
-export function createDefaultDatumId (chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex: number, levelThreeIndex?: number) {
-  let text = `${chartTypeOrPrefix}_${levelOneIndex}_${levelTwoIndex}`
+export function createDefaultDatumId (chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex?: number, levelThreeIndex?: number) {
+  let text = `${chartTypeOrPrefix}_${levelOneIndex}`
+  if (levelTwoIndex != null) {
+    text += `_${levelTwoIndex}`
+  }
   if (levelThreeIndex != null) {
     text += `_${levelThreeIndex}`
   }
@@ -45,6 +49,11 @@ export function createDefaultGroupLabel (chartTypeOrPrefix: string, groupIndex:
   return `${chartTypeOrPrefix}_group${groupIndex}`
 }
 
+export function createDefaultCategoryLabel () {
+  // return `${chartTypeOrPrefix}_category`
+  return '' // 空值
+}
+
 export function createGridSeriesLabels ({ transposedDataGrid, dataFormatterGrid, chartType = 'grid' }: {
   transposedDataGrid: DataGridDatum[][],
   dataFormatterGrid: DataFormatterGridGrid
@@ -167,14 +176,63 @@ export function getMinAndMaxMultiGrid (data: DataMultiGrid): [number, number] {
 }
 
 // 取得最小及最大值 - MultiValue Data
-export function getMinAndMaxMultiValue (data: DataMultiValue, valueIndex: number = 2): [number, number] {
-  const flatData: (DataMultiValueDatum | DataMultiValueValue)[] = data.flat().filter((d, i) => i == valueIndex)
-  const arr = flatData
-    .filter(d => (d == null || (isPlainObject(d) && (d as DataMultiValueDatum).value == null)) === false) // 過濾掉null
-    .map(d => typeof d === 'number' ? d : d.value )
+export function getMinAndMaxMultiValue (data: DataMultiValue, valueIndex: number): [number, number] {
+  const arr: number[] = data
+    .map(d => {
+      if (Array.isArray(d)) {
+        return d[valueIndex] ?? null
+      } else if (isPlainObject(d)) {
+        return (d as DataMultiValueDatum).value[valueIndex] ?? null
+      } else {
+        return null
+      }
+    })
+    .filter(d => d != null)
   return getMinAndMax(arr)
 }
 
+export function getMinAndMaxMultiValueXY ({ data, minX, maxX, minY, maxY }: {
+  data: ComputedLayoutDatumMultiValue[][]
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}) {
+  let filteredData: ComputedLayoutDatumMultiValue[][] = []
+  let minXDatum: ComputedLayoutDatumMultiValue | null = null
+  let maxXDatum: ComputedLayoutDatumMultiValue | null = null
+  let minYDatum: ComputedLayoutDatumMultiValue | null = null
+  let maxYDatum: ComputedLayoutDatumMultiValue | null = null
+  
+  for (let categoryData of data) {
+    for (let datum of categoryData) {
+      if (datum.axisX >= minX && datum.axisX <= maxX && datum.axisY >= minY && datum.axisY <= maxY) {
+        filteredData.push(categoryData)
+        if (minXDatum == null || datum.axisX < minXDatum.axisX) {
+          minXDatum = datum
+        }
+        if (maxXDatum == null || datum.axisX > maxXDatum.axisX) {
+          maxXDatum = datum
+        }
+        if (minYDatum == null || datum.axisY < minYDatum.axisY) {
+          minYDatum = datum
+        }
+        if (maxYDatum == null || datum.axisY > maxYDatum.axisY) {
+          maxYDatum = datum
+        }
+      }
+    }
+  }
+
+  return {
+    minXDatum,
+    maxXDatum,
+    minYDatum,
+    maxYDatum,
+    filteredData
+  }
+}
+
 // @Q@ 待處理
 // // 取得最小及最大值 - Relationship Data
 // export function getMinAndMaxRelationship (data: DataRelationship, target: 'nodes' | 'edges' = 'nodes'): [number, number] {
@@ -220,24 +278,6 @@ export function seriesColorPredicate (seriesIndex: number, chartParams: ChartPar
     ]
 }
 
-// export function calcSeriesContainerPosition (layout: Layout, container: DataFormatterContainer, rowIndex: number, columnIndex: number) {
-//   const { gap, rowAmount, columnAmount } = container
-//   const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
-//   const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
-//   const x = columnIndex * width + (columnIndex * gap)
-//   const y = rowIndex * height + (rowIndex * gap)
-//   // const translate: [number, number] = [x, y]
-  
-//   return {
-//     // translate,
-//     startX: x,
-//     startY: y,
-//     centerX: x + width / 2,
-//     centerY: y + height / 2,
-//     width,
-//     height
-//   }
-// }
 
 // 計算預設欄列數量
 // 規則1.rowAmount*columnAmount要大於或等於amount，並且數字要盡可能小
@@ -251,7 +291,7 @@ function calcGridDimensions (amount: number): { rowAmount: number; columnAmount:
   return { rowAmount, columnAmount }
 }
 
-export function calcSeriesContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): SeriesContainerPosition[] {
+export function calcSeriesContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): ContainerPosition[] {
   const { gap } = container
   const { rowAmount, columnAmount } = (container.rowAmount * container.columnAmount) >= amount
     // 如果container設定的rowAmount和columnAmount的乘積大於或等於amount，則使用目前設定
@@ -284,22 +324,7 @@ export function calcSeriesContainerLayout (layout: Layout, container: DataFormat
   })
 }
 
-// export function calcGridContainerPosition (layout: Layout, container: DataFormatterContainer, rowIndex: number, columnIndex: number) {
-//   const { gap, rowAmount, columnAmount } = container
-//   const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
-//   const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
-//   const x = columnIndex * width + (columnIndex * gap)
-//   const y = rowIndex * height + (rowIndex * gap)
-//   const translate: [number, number] = [x, y]
-//   const scale: [number, number] = [width / layout.width, height / layout.height]
-
-//   return {
-//     translate,
-//     scale
-//   }
-// }
-
-export function calcGridContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): GridContainerPosition[] {
+export function calcGridContainerLayout (layout: Layout, container: DataFormatterContainer, amount: number): ContainerPositionScaled[] {
   const { gap } = container
   const { rowAmount, columnAmount } = (container.rowAmount * container.columnAmount) >= amount
     // 如果container設定的rowAmount和columnAmount的乘積大於或等於amount，則使用目前設定
@@ -318,7 +343,7 @@ export function calcGridContainerLayout (layout: Layout, container: DataFormatte
     const translate: [number, number] = [x, y]
     const scale: [number, number] = [width / layout.width, height / layout.height]
 
-    return {
+    return {                      
       slotIndex: index,
       rowIndex,
       columnIndex,

package/src/utils/seriesObservables.ts

@@ -14,7 +14,7 @@ import type {
   ComputedDatumSeries,
   ComputedDataTypeMap,
   DataFormatterTypeMap,
-  SeriesContainerPosition,
+  ContainerPosition,
   Layout } from '../../lib/core-types'
 import { calcSeriesContainerLayout } from './orbchartsUtils'
 
@@ -97,7 +97,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
   computedData$: Observable<ComputedDataTypeMap<'series'>>
   fullDataFormatter$: Observable<DataFormatterTypeMap<'series'>>
   layout$: Observable<Layout>
-}): Observable<SeriesContainerPosition[]> => {
+}): Observable<ContainerPosition[]> => {
 
   const gridContainerPosition$ = combineLatest({
     computedData: computedData$,
@@ -113,7 +113,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
         // return data.computedData.map((seriesData, seriesIndex) => {
         //   const columnIndex = seriesIndex % data.fullDataFormatter.container.columnAmount
         //   const rowIndex = Math.floor(seriesIndex / data.fullDataFormatter.container.columnAmount)
-        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+        //   const { startX, startY, centerX, centerY, width, height } = calcContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
         //   return {
         //     slotIndex: seriesIndex,
         //     rowIndex,
@@ -132,7 +132,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
         // const columnIndex = 0
         // const rowIndex = 0
         // return data.computedData.map((seriesData, seriesIndex) => {
-        //   const { startX, startY, centerX, centerY, width, height } = calcSeriesContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
+        //   const { startX, startY, centerX, centerY, width, height } = calcContainerPosition(data.layout, data.fullDataFormatter.container, rowIndex, columnIndex)
         //   return {
         //     slotIndex: 0,
         //     rowIndex,
@@ -153,7 +153,7 @@ export const seriesContainerPositionObservable = ({ computedData$, fullDataForma
 }
 
 export const seriesContainerPositionMapObservable = ({ seriesContainerPosition$, seriesLabels$, separateSeries$ }: {
-  seriesContainerPosition$: Observable<SeriesContainerPosition[]>
+  seriesContainerPosition$: Observable<ContainerPosition[]>
   seriesLabels$: Observable<string[]>
   separateSeries$: Observable<boolean>
 }) => {
@@ -165,10 +165,10 @@ export const seriesContainerPositionMapObservable = ({ seriesContainerPosition$,
     switchMap(async (d) => d),
     map(data => {
       return data.separateSeries
-        ? new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
+        ? new Map<string, ContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
           return [seriesLabel, data.seriesContainerPosition[seriesIndex] ?? data.seriesContainerPosition[0]]
         }))
-        : new Map<string, SeriesContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
+        : new Map<string, ContainerPosition>(data.seriesLabels.map((seriesLabel, seriesIndex) => {
           return [seriesLabel, data.seriesContainerPosition[0]]
         }))
     })

package/src/utils/treeObservables.ts

@@ -34,42 +34,53 @@ export const nodeListObservable = ({ computedData$ }: { computedData$: Observabl
   )
 }
 
-export const existCategoryLabelsObservable = ({ nodeList$, fullDataFormatter$ }: {
-  nodeList$: Observable<ComputedDataTree[]>
-  fullDataFormatter$: Observable<DataFormatterTree>
-}) => {
+// export const categoryLabelsObservable = ({ nodeList$, fullDataFormatter$ }: {
+//   nodeList$: Observable<ComputedDataTree[]>
+//   fullDataFormatter$: Observable<DataFormatterTree>
+// }) => {
 
-  const categoryLabels$ = fullDataFormatter$.pipe(
-    map(d => d.categoryLabels),
-    distinctUntilChanged((a, b) => {
-      return JSON.stringify(a).length === JSON.stringify(b).length
-    }),
-  )
+//   const categoryLabels$ = fullDataFormatter$.pipe(
+//     map(d => d.categoryLabels),
+//     distinctUntilChanged((a, b) => {
+//       return JSON.stringify(a).length === JSON.stringify(b).length
+//     }),
+//   )
 
-  return combineLatest({
-    nodeList: nodeList$,
-    categoryLabels: categoryLabels$
-  }).pipe(
-    switchMap(async d => d),
-    map(data => {
-      const CurrentLabelSet = new Set(data.categoryLabels)
-      const ExistLabelSet = new Set(
-        data.nodeList.filter(node => node.visible).map(node => node.categoryLabel)
-      )
-      // 加入已存在的label（data.nodeList有，但是dataFormatter.categoryLabels沒有）
-      Array.from(ExistLabelSet).forEach(label => {
-        if (!CurrentLabelSet.has(label)) {
-          CurrentLabelSet.add(label)
-        }
-      })
-      // 移除不存在的label（dataFormatter.categoryLabels有，但是data.nodeList沒有）
-      Array.from(CurrentLabelSet).forEach(label => {
-        if (!ExistLabelSet.has(label)) {
-          ExistLabelSet.delete(label)
-        }
-      })
+//   return combineLatest({
+//     nodeList: nodeList$,
+//     categoryLabels: categoryLabels$
+//   }).pipe(
+//     switchMap(async d => d),
+//     map(data => {
+//       const CurrentLabelSet = new Set(data.categoryLabels)
+//       const ExistLabelSet = new Set(
+//         data.nodeList.filter(node => node.visible).map(node => node.categoryLabel)
+//       )
+//       // 加入已存在的label（data.nodeList有，但是dataFormatter.categoryLabels沒有）
+//       Array.from(ExistLabelSet).forEach(label => {
+//         if (!CurrentLabelSet.has(label)) {
+//           CurrentLabelSet.add(label)
+//         }
+//       })
+//       // 移除不存在的label（dataFormatter.categoryLabels有，但是data.nodeList沒有）
+//       Array.from(CurrentLabelSet).forEach(label => {
+//         if (!ExistLabelSet.has(label)) {
+//           ExistLabelSet.delete(label)
+//         }
+//       })
 
-      return Array.from(CurrentLabelSet)
+//       return Array.from(CurrentLabelSet)
+//     }),
+//     distinctUntilChanged((a, b) => {
+//       return JSON.stringify(a).length === JSON.stringify(b).length
+//     }),
+//   )
+// }
+
+export const categoryLabelsObservable = (CategoryDataMap$: Observable<Map<string, ComputedDataTree[]>>) => {
+  return CategoryDataMap$.pipe(
+    map(data => {
+      return Array.from(data.keys())
     }),
     distinctUntilChanged((a, b) => {
       return JSON.stringify(a).length === JSON.stringify(b).length

package/src/utils/validator.ts

@@ -1,4 +1,5 @@
 import type {
+  ColorType,
   ValidatorResult,
   ToBeTypes,
   ToBeOption,
@@ -40,14 +41,14 @@ function getInvalidColumn<T> (data: T, rules: Partial<ValidatorRule<T>>) {
   }
   // "toBeOption" 的測試
   const testOption: {[key in ToBeOption]: (value: any) => boolean} = {
-    ColorType: (value: any) => {
+    ColorType: (value: ColorType) => {
       return value === 'none'
         || value === 'series'
         || value === 'primary'
         || value === 'secondary'
         || value === 'white'
         || value === 'background'
-    }
+    },
   }
 
   const failColumn = Object.keys(data).find((columnName: string) => {

package/dist/src/utils/d3Utils.d.ts

@@ -1,19 +0,0 @@
-import * as d3 from 'd3';
-export declare const createAxisLinearScale: ({ maxValue, minValue, axisWidth, scaleDomain, scaleRange, }: {
-    maxValue: number;
-    minValue: number;
-    axisWidth: number;
-    scaleDomain: [number | "min" | "auto", number | "max" | "auto"];
-    scaleRange: [number, number];
-}) => d3.ScaleLinear<number, number, never>;
-export declare const createAxisPointScale: ({ axisLabels, axisWidth, padding }: {
-    axisLabels: string[];
-    axisWidth: number;
-    padding?: number;
-}) => d3.ScalePoint<string>;
-export declare const createAxisQuantizeScale: ({ axisLabels, axisWidth, padding, reverse }: {
-    axisLabels: string[] | Date[];
-    axisWidth: number;
-    padding?: number;
-    reverse?: boolean;
-}) => d3.ScaleQuantize<number, never>;

package/src/utils/d3Utils.ts

@@ -1,108 +0,0 @@
-import * as d3 from 'd3'
-import { DATA_FORMATTER_VALUE_AXIS_DEFAULT } from '../defaults'
-
-// scaleLinear - 連續資料對應到比例尺座標上
-export const createAxisLinearScale = ({
-  maxValue = 1,
-  minValue = 0,
-  axisWidth,
-  scaleDomain = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain,
-  scaleRange = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange,
-}: {
-  maxValue: number
-  minValue: number
-  axisWidth: number
-  scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
-  scaleRange: [number, number] // 0-1
-}) => {
-  // -- 無值補上預設值 --
-  const domainMin: number | 'min' | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[0]
-  const domainMax: number | 'max' | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[1]
-  const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[0]
-  const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[1]
-
-  // -- 'auto' | 'max' | 'min' 替換成實際值 --
-  let domainMinValue: number = (() => {
-    if (domainMin === 'auto') {
-      return minValue < 0 ? minValue : 0
-    } else if (domainMin === 'min') {
-      return minValue
-    } else {
-      return domainMin
-    }
-  })()
-  
-  let domainMaxValue: number = (() => {
-    if (domainMax === 'auto') {
-      return maxValue >= 0 ? maxValue : 0
-    } else if (domainMax === 'max') {
-      return maxValue
-    } else {
-      return domainMax
-    }
-  })()
-  // let rangeMinValue = axisWidth * rangeMin
-  // let rangeMaxValue = axisWidth * rangeMax
-
-  // -- 計算padding --
-  // if (padding > 0) {
-  //   const stepAmount = maxValue - minValue + (padding * 2)
-  //   const eachStepWidth = axisWidth / stepAmount
-  //   const paddingWidth = eachStepWidth * padding
-  //   rangeMinValue += paddingWidth
-  //   rangeMaxValue -= paddingWidth
-  // }
-
-  // -- 依場景大小換算 --
-  const axisDomainMinValue = maxValue - (maxValue - domainMinValue) / (1 - rangeMin)
-  const axisDomainMaxValue = domainMaxValue / rangeMax
-  
-  // return d3.scaleLinear()
-  //   .domain([domainMinValue, domainMaxValue])
-  //   .range([rangeMinValue, rangeMaxValue])
-  return d3.scaleLinear()
-    .domain([axisDomainMinValue, axisDomainMaxValue])
-    .range([0, axisWidth])
-}
-
-// scalePoint - 非連續資料對應到比例尺座標上
-export const createAxisPointScale = ({ axisLabels, axisWidth, padding = 0.5 }: {
-  axisLabels: string[]
-  axisWidth: number
-  padding?: number
-  // reverse?: boolean  
-}) => {
-  let range: [d3.NumberValue, d3.NumberValue] = [0, axisWidth]
-
-  return d3.scalePoint()
-      .domain(axisLabels)
-      .range(range)
-      .padding(padding)
-}
-
-// scaleQuantize - 比例尺座標對應非連續資料索引
-export const createAxisQuantizeScale = ({ axisLabels, axisWidth, padding = 0, reverse = false }:{
-  axisLabels: string[] | Date[],
-  axisWidth: number
-  padding?: number
-  reverse?: boolean
-}) => {
-
-  let range: number[] = axisLabels.map((d: string | Date, i: number) => i)
-  if (reverse) {
-    range.reverse()
-  }
-  // if (reverse) {
-  //   range = axisLabels.map((d: string | Date, i: number) => axisLabels.length - 1 - i)
-  // } else {
-  //   range = axisLabels.map((d: string | Date, i: number) => i)
-  // }
-  const step = range.length - 1 + (padding * 2) // 圖軸刻度分段數量
-  const stepWidth = axisWidth / step
-  const rangePadding = stepWidth * padding - (stepWidth * 0.5) // 實際要計算的範圍是圖軸左右那邊增加0.5
-
-  // console.log('rangePadding', rangePadding)
-  return d3.scaleQuantize<number>()
-    .domain([rangePadding, axisWidth - rangePadding])
-    .range(range)
-}