@orbcharts/core 3.0.0-beta.1 → 3.0.0-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/orbcharts-core.es.js +3271 -2862
- package/dist/orbcharts-core.umd.js +4 -4
- package/dist/src/defaults.d.ts +24 -23
- package/dist/src/utils/d3Scale.d.ts +28 -0
- package/dist/src/utils/gridObservables.d.ts +29 -19
- package/dist/src/utils/index.d.ts +1 -1
- package/dist/src/utils/multiGridObservables.d.ts +2 -2
- package/dist/src/utils/multiValueObservables.d.ts +73 -0
- package/dist/src/utils/orbchartsUtils.d.ts +24 -10
- package/dist/src/utils/relationshipObservables.d.ts +13 -0
- package/dist/src/utils/seriesObservables.d.ts +4 -4
- package/dist/src/utils/treeObservables.d.ts +2 -5
- package/package.json +2 -2
- package/src/GridChart.ts +2 -2
- package/src/MultiGridChart.ts +2 -2
- package/src/MultiValueChart.ts +2 -2
- package/src/RelationshipChart.ts +2 -2
- package/src/SeriesChart.ts +2 -2
- package/src/TreeChart.ts +2 -2
- package/src/base/createBaseChart.ts +13 -13
- package/src/base/validators/chartParamsValidator.ts +6 -6
- package/src/defaults.ts +87 -47
- package/src/grid/computedDataFn.ts +4 -4
- package/src/grid/contextObserverCallback.ts +58 -37
- package/src/grid/dataFormatterValidator.ts +14 -14
- package/src/multiGrid/computedDataFn.ts +2 -2
- package/src/multiValue/computedDataFn.ts +81 -147
- package/src/multiValue/contextObserverCallback.ts +150 -2
- package/src/relationship/computedDataFn.ts +94 -60
- package/src/relationship/contextObserverCallback.ts +68 -0
- package/src/tree/computedDataFn.ts +9 -10
- package/src/tree/contextObserverCallback.ts +6 -9
- package/src/utils/d3Scale.ts +198 -0
- package/src/utils/gridObservables.ts +320 -248
- package/src/utils/index.ts +1 -1
- package/src/utils/multiGridObservables.ts +75 -49
- package/src/utils/multiValueObservables.ts +662 -0
- package/src/utils/observables.ts +30 -12
- package/src/utils/orbchartsUtils.ts +90 -65
- package/src/utils/relationshipObservables.ts +85 -0
- package/src/utils/seriesObservables.ts +7 -7
- package/src/utils/treeObservables.ts +44 -33
- package/src/utils/validator.ts +5 -4
- package/dist/src/utils/d3Utils.d.ts +0 -19
- package/src/utils/d3Utils.ts +0 -108
package/src/utils/d3Utils.ts
DELETED
@@ -1,108 +0,0 @@
|
|
1
|
-
import * as d3 from 'd3'
|
2
|
-
import { DATA_FORMATTER_VALUE_AXIS_DEFAULT } from '../defaults'
|
3
|
-
|
4
|
-
// scaleLinear - 連續資料對應到比例尺座標上
|
5
|
-
export const createAxisLinearScale = ({
|
6
|
-
maxValue = 1,
|
7
|
-
minValue = 0,
|
8
|
-
axisWidth,
|
9
|
-
scaleDomain = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain,
|
10
|
-
scaleRange = DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange,
|
11
|
-
}: {
|
12
|
-
maxValue: number
|
13
|
-
minValue: number
|
14
|
-
axisWidth: number
|
15
|
-
scaleDomain: [number | 'min' | 'auto', number | 'max' | 'auto']
|
16
|
-
scaleRange: [number, number] // 0-1
|
17
|
-
}) => {
|
18
|
-
// -- 無值補上預設值 --
|
19
|
-
const domainMin: number | 'min' | 'auto' = scaleDomain[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[0]
|
20
|
-
const domainMax: number | 'max' | 'auto' = scaleDomain[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleDomain[1]
|
21
|
-
const rangeMin: number = scaleRange[0] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[0]
|
22
|
-
const rangeMax: number = scaleRange[1] ?? DATA_FORMATTER_VALUE_AXIS_DEFAULT.scaleRange[1]
|
23
|
-
|
24
|
-
// -- 'auto' | 'max' | 'min' 替換成實際值 --
|
25
|
-
let domainMinValue: number = (() => {
|
26
|
-
if (domainMin === 'auto') {
|
27
|
-
return minValue < 0 ? minValue : 0
|
28
|
-
} else if (domainMin === 'min') {
|
29
|
-
return minValue
|
30
|
-
} else {
|
31
|
-
return domainMin
|
32
|
-
}
|
33
|
-
})()
|
34
|
-
|
35
|
-
let domainMaxValue: number = (() => {
|
36
|
-
if (domainMax === 'auto') {
|
37
|
-
return maxValue >= 0 ? maxValue : 0
|
38
|
-
} else if (domainMax === 'max') {
|
39
|
-
return maxValue
|
40
|
-
} else {
|
41
|
-
return domainMax
|
42
|
-
}
|
43
|
-
})()
|
44
|
-
// let rangeMinValue = axisWidth * rangeMin
|
45
|
-
// let rangeMaxValue = axisWidth * rangeMax
|
46
|
-
|
47
|
-
// -- 計算padding --
|
48
|
-
// if (padding > 0) {
|
49
|
-
// const stepAmount = maxValue - minValue + (padding * 2)
|
50
|
-
// const eachStepWidth = axisWidth / stepAmount
|
51
|
-
// const paddingWidth = eachStepWidth * padding
|
52
|
-
// rangeMinValue += paddingWidth
|
53
|
-
// rangeMaxValue -= paddingWidth
|
54
|
-
// }
|
55
|
-
|
56
|
-
// -- 依場景大小換算 --
|
57
|
-
const axisDomainMinValue = maxValue - (maxValue - domainMinValue) / (1 - rangeMin)
|
58
|
-
const axisDomainMaxValue = domainMaxValue / rangeMax
|
59
|
-
|
60
|
-
// return d3.scaleLinear()
|
61
|
-
// .domain([domainMinValue, domainMaxValue])
|
62
|
-
// .range([rangeMinValue, rangeMaxValue])
|
63
|
-
return d3.scaleLinear()
|
64
|
-
.domain([axisDomainMinValue, axisDomainMaxValue])
|
65
|
-
.range([0, axisWidth])
|
66
|
-
}
|
67
|
-
|
68
|
-
// scalePoint - 非連續資料對應到比例尺座標上
|
69
|
-
export const createAxisPointScale = ({ axisLabels, axisWidth, padding = 0.5 }: {
|
70
|
-
axisLabels: string[]
|
71
|
-
axisWidth: number
|
72
|
-
padding?: number
|
73
|
-
// reverse?: boolean
|
74
|
-
}) => {
|
75
|
-
let range: [d3.NumberValue, d3.NumberValue] = [0, axisWidth]
|
76
|
-
|
77
|
-
return d3.scalePoint()
|
78
|
-
.domain(axisLabels)
|
79
|
-
.range(range)
|
80
|
-
.padding(padding)
|
81
|
-
}
|
82
|
-
|
83
|
-
// scaleQuantize - 比例尺座標對應非連續資料索引
|
84
|
-
export const createAxisQuantizeScale = ({ axisLabels, axisWidth, padding = 0, reverse = false }:{
|
85
|
-
axisLabels: string[] | Date[],
|
86
|
-
axisWidth: number
|
87
|
-
padding?: number
|
88
|
-
reverse?: boolean
|
89
|
-
}) => {
|
90
|
-
|
91
|
-
let range: number[] = axisLabels.map((d: string | Date, i: number) => i)
|
92
|
-
if (reverse) {
|
93
|
-
range.reverse()
|
94
|
-
}
|
95
|
-
// if (reverse) {
|
96
|
-
// range = axisLabels.map((d: string | Date, i: number) => axisLabels.length - 1 - i)
|
97
|
-
// } else {
|
98
|
-
// range = axisLabels.map((d: string | Date, i: number) => i)
|
99
|
-
// }
|
100
|
-
const step = range.length - 1 + (padding * 2) // 圖軸刻度分段數量
|
101
|
-
const stepWidth = axisWidth / step
|
102
|
-
const rangePadding = stepWidth * padding - (stepWidth * 0.5) // 實際要計算的範圍是圖軸左右那邊增加0.5
|
103
|
-
|
104
|
-
// console.log('rangePadding', rangePadding)
|
105
|
-
return d3.scaleQuantize<number>()
|
106
|
-
.domain([rangePadding, axisWidth - rangePadding])
|
107
|
-
.range(range)
|
108
|
-
}
|