@orbcharts/core 3.0.0-alpha.39 → 3.0.0-alpha.40
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/LICENSE +200 -200
- package/dist/orbcharts-core.es.js +6 -6
- package/dist/orbcharts-core.umd.js +1 -1
- package/dist/src/types/ContextObserverGrid.d.ts +1 -1
- package/dist/src/types/ContextObserverSeries.d.ts +1 -1
- package/dist/src/types/ContextObserverTree.d.ts +1 -1
- package/dist/src/utils/observables.d.ts +5 -5
- package/package.json +41 -41
- package/src/AbstractChart.ts +48 -48
- package/src/GridChart.ts +20 -20
- package/src/MultiGridChart.ts +20 -20
- package/src/MultiValueChart.ts +20 -20
- package/src/RelationshipChart.ts +20 -20
- package/src/SeriesChart.ts +20 -20
- package/src/TreeChart.ts +20 -20
- package/src/base/createBaseChart.ts +367 -367
- package/src/base/createBasePlugin.ts +89 -89
- package/src/defaults.ts +247 -247
- package/src/defineGridPlugin.ts +3 -3
- package/src/defineMultiGridPlugin.ts +3 -3
- package/src/defineMultiValuePlugin.ts +3 -3
- package/src/defineNoneDataPlugin.ts +4 -4
- package/src/defineRelationshipPlugin.ts +3 -3
- package/src/defineSeriesPlugin.ts +3 -3
- package/src/defineTreePlugin.ts +3 -3
- package/src/grid/computeGridData.ts +205 -205
- package/src/grid/createGridContextObserver.ts +124 -124
- package/src/grid/gridObservables.ts +486 -486
- package/src/index.ts +21 -21
- package/src/multiGrid/computeMultiGridData.ts +173 -173
- package/src/multiGrid/createMultiGridContextObserver.ts +34 -34
- package/src/multiGrid/multiGridObservables.ts +285 -285
- package/src/multiValue/computeMultiValueData.ts +136 -136
- package/src/multiValue/createMultiValueContextObserver.ts +12 -12
- package/src/relationship/computeRelationshipData.ts +106 -106
- package/src/relationship/createRelationshipContextObserver.ts +12 -12
- package/src/series/computeSeriesData.ts +153 -153
- package/src/series/createSeriesContextObserver.ts +33 -33
- package/src/series/seriesObservables.ts +23 -23
- package/src/tree/computeTreeData.ts +128 -128
- package/src/tree/createTreeContextObserver.ts +56 -56
- package/src/tree/treeObservables.ts +94 -94
- package/src/types/Chart.ts +48 -48
- package/src/types/ChartParams.ts +51 -51
- package/src/types/ComputedData.ts +82 -82
- package/src/types/ComputedDataGrid.ts +13 -13
- package/src/types/ComputedDataMultiGrid.ts +2 -2
- package/src/types/ComputedDataMultiValue.ts +9 -9
- package/src/types/ComputedDataRelationship.ts +19 -19
- package/src/types/ComputedDataSeries.ts +7 -7
- package/src/types/ComputedDataTree.ts +19 -19
- package/src/types/ContextObserver.ts +38 -38
- package/src/types/ContextObserverGrid.ts +33 -33
- package/src/types/ContextObserverMultiGrid.ts +27 -27
- package/src/types/ContextObserverMultiValue.ts +4 -4
- package/src/types/ContextObserverRelationship.ts +4 -4
- package/src/types/ContextObserverSeries.ts +7 -7
- package/src/types/ContextObserverTree.ts +10 -10
- package/src/types/ContextSubject.ts +18 -18
- package/src/types/Data.ts +45 -45
- package/src/types/DataFormatter.ts +95 -95
- package/src/types/DataFormatterGrid.ts +55 -55
- package/src/types/DataFormatterMultiGrid.ts +42 -42
- package/src/types/DataFormatterMultiValue.ts +20 -20
- package/src/types/DataFormatterRelationship.ts +22 -22
- package/src/types/DataFormatterSeries.ts +29 -29
- package/src/types/DataFormatterTree.ts +12 -12
- package/src/types/DataGrid.ts +11 -11
- package/src/types/DataMultiGrid.ts +6 -6
- package/src/types/DataMultiValue.ts +12 -12
- package/src/types/DataRelationship.ts +27 -27
- package/src/types/DataSeries.ts +11 -11
- package/src/types/DataTree.ts +20 -20
- package/src/types/Event.ts +153 -153
- package/src/types/Layout.ts +11 -11
- package/src/types/Padding.ts +5 -5
- package/src/types/Plugin.ts +60 -60
- package/src/types/TransformData.ts +7 -7
- package/src/types/index.ts +37 -37
- package/src/utils/commonUtils.ts +50 -50
- package/src/utils/d3Utils.ts +89 -89
- package/src/utils/index.ts +4 -4
- package/src/utils/observables.ts +181 -183
- package/src/utils/orbchartsUtils.ts +253 -253
- package/tsconfig.json +13 -13
- package/vite.config.js +44 -44
|
@@ -1,253 +1,253 @@
|
|
|
1
|
-
import * as d3 from 'd3'
|
|
2
|
-
import type { ChartType } from '../types/Chart'
|
|
3
|
-
import type { ChartParams } from '../types/ChartParams'
|
|
4
|
-
import type { DatumBase, DatumValue } from '../types/Data'
|
|
5
|
-
import type { DataSeries, DataSeriesDatum, DataSeriesValue } from '../types/DataSeries'
|
|
6
|
-
import type { DataGrid, DataGridDatum, DataGridValue } from '../types/DataGrid'
|
|
7
|
-
import type { DataMultiGrid } from '../types/DataMultiGrid'
|
|
8
|
-
import type { DataMultiValue, DataMultiValueDatum, DataMultiValueValue } from '../types/DataMultiValue'
|
|
9
|
-
import type { SeriesDirection, DataFormatterGrid, DataFormatterGridContainer } from '../types/DataFormatterGrid'
|
|
10
|
-
import type { DataFormatterMultiGrid } from '../types/DataFormatterMultiGrid'
|
|
11
|
-
import type { ComputedDatumSeriesValue } from '../types/ComputedData'
|
|
12
|
-
import type { ComputedDatumSeries } from '../types/ComputedDataSeries'
|
|
13
|
-
import type { ComputedDatumGrid, ComputedDataGrid } from '../types/ComputedDataGrid'
|
|
14
|
-
import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
|
|
15
|
-
import type { Layout } from '../types/Layout'
|
|
16
|
-
// import type { ComputedDatumMultiGrid } from '../types/ComputedDataMultiGrid'
|
|
17
|
-
import { isPlainObject } from './commonUtils'
|
|
18
|
-
|
|
19
|
-
export function formatValueToLabel (value: any, valueFormatter: string | ((text: d3.NumberValue) => string)) {
|
|
20
|
-
if (valueFormatter! instanceof Function == true) {
|
|
21
|
-
return (valueFormatter as ((text: d3.NumberValue) => string))(value)
|
|
22
|
-
}
|
|
23
|
-
return d3.format(valueFormatter as string)!(value)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export function createDefaultDatumId (chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex: number, levelThreeIndex?: number) {
|
|
27
|
-
let text = `${chartTypeOrPrefix}_${levelOneIndex}_${levelTwoIndex}`
|
|
28
|
-
if (levelThreeIndex != null) {
|
|
29
|
-
text += `_${levelThreeIndex}`
|
|
30
|
-
}
|
|
31
|
-
return text
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
export function createDefaultSeriesLabel (chartTypeOrPrefix: string, seriesIndex: number) {
|
|
35
|
-
return `${chartTypeOrPrefix}_series${seriesIndex}`
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export function createDefaultGroupLabel (chartTypeOrPrefix: string, groupIndex: number) {
|
|
39
|
-
return `${chartTypeOrPrefix}_group${groupIndex}`
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid' }: {
|
|
43
|
-
transposedDataGrid: DataGridDatum[][],
|
|
44
|
-
dataFormatter: DataFormatterGrid
|
|
45
|
-
chartType?: ChartType
|
|
46
|
-
}) {
|
|
47
|
-
const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
|
|
48
|
-
? dataFormatter.grid.gridData.rowLabels
|
|
49
|
-
: dataFormatter.grid.gridData.columnLabels
|
|
50
|
-
return transposedDataGrid.map((_, rowIndex) => {
|
|
51
|
-
return labels[rowIndex] != null
|
|
52
|
-
? labels[rowIndex]
|
|
53
|
-
: createDefaultSeriesLabel(chartType, rowIndex)
|
|
54
|
-
})
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export function createMultiGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'multiGrid', gridIndex = 0 }: {
|
|
58
|
-
transposedDataGrid: DataGridDatum[][],
|
|
59
|
-
dataFormatter: DataFormatterGrid
|
|
60
|
-
chartType?: ChartType
|
|
61
|
-
gridIndex?: number
|
|
62
|
-
}) {
|
|
63
|
-
const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
|
|
64
|
-
? dataFormatter.grid.gridData.rowLabels
|
|
65
|
-
: dataFormatter.grid.gridData.columnLabels
|
|
66
|
-
return transposedDataGrid.map((_, rowIndex) => {
|
|
67
|
-
return labels[rowIndex] != null
|
|
68
|
-
? labels[rowIndex]
|
|
69
|
-
: createDefaultSeriesLabel(`${chartType}_grid${gridIndex}`, rowIndex)
|
|
70
|
-
})
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export function createGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid' }: {
|
|
74
|
-
transposedDataGrid: DataGridDatum[][],
|
|
75
|
-
dataFormatter: DataFormatterGrid
|
|
76
|
-
chartType?: ChartType
|
|
77
|
-
}) {
|
|
78
|
-
if (transposedDataGrid[0] == null) {
|
|
79
|
-
return []
|
|
80
|
-
}
|
|
81
|
-
const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
|
|
82
|
-
? dataFormatter.grid.gridData.columnLabels
|
|
83
|
-
: dataFormatter.grid.gridData.rowLabels
|
|
84
|
-
return transposedDataGrid[0].map((_, columnLabels) => {
|
|
85
|
-
return labels[columnLabels] != null
|
|
86
|
-
? labels[columnLabels]
|
|
87
|
-
: createDefaultGroupLabel(chartType, columnLabels)
|
|
88
|
-
})
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
export function createMultiGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'multiGrid', gridIndex = 0 }: {
|
|
92
|
-
transposedDataGrid: DataGridDatum[][],
|
|
93
|
-
dataFormatter: DataFormatterGrid
|
|
94
|
-
chartType?: ChartType
|
|
95
|
-
gridIndex?: number
|
|
96
|
-
}) {
|
|
97
|
-
if (transposedDataGrid[0] == null) {
|
|
98
|
-
return []
|
|
99
|
-
}
|
|
100
|
-
const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
|
|
101
|
-
? dataFormatter.grid.gridData.columnLabels
|
|
102
|
-
: dataFormatter.grid.gridData.rowLabels
|
|
103
|
-
return transposedDataGrid[0].map((_, columnLabels) => {
|
|
104
|
-
return labels[columnLabels] != null
|
|
105
|
-
? labels[columnLabels]
|
|
106
|
-
: createDefaultGroupLabel(`${chartType}_grid${gridIndex}`, columnLabels)
|
|
107
|
-
})
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
// 取得最小及最大值 - 數字陣列
|
|
111
|
-
export function getMinAndMax (data: number[]): [number, number] {
|
|
112
|
-
const defaultMinAndMax: [number, number] = [0, 0] // default
|
|
113
|
-
if (!data.length) {
|
|
114
|
-
return defaultMinAndMax
|
|
115
|
-
}
|
|
116
|
-
const minAndMax: [number, number] = data.reduce((prev, current) => {
|
|
117
|
-
// [min, max]
|
|
118
|
-
return [
|
|
119
|
-
current < prev[0] ? current : prev[0],
|
|
120
|
-
current > prev[1] ? current : prev[1]
|
|
121
|
-
]
|
|
122
|
-
}, [data[0], data[0]])
|
|
123
|
-
return minAndMax
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
// 取得最小及最大值 - datum格式陣列資料
|
|
127
|
-
export function getMinAndMaxValue (data: DatumValue[]): [number, number] {
|
|
128
|
-
const arr = data
|
|
129
|
-
.filter(d => d != null && d.value != null)
|
|
130
|
-
.map(d => d.value )
|
|
131
|
-
return getMinAndMax(arr)
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
// 取得最小及最大值 - Series Data
|
|
135
|
-
export function getMinAndMaxSeries (data: DataSeries): [number, number] {
|
|
136
|
-
const flatData: (DataSeriesValue | DataSeriesDatum)[] = data[0] && Array.isArray((data as (DataSeriesValue | DataSeriesDatum)[][])[0])
|
|
137
|
-
? data.flat()
|
|
138
|
-
: data as (DataSeriesValue | DataSeriesDatum)[]
|
|
139
|
-
const arr = flatData
|
|
140
|
-
.filter(d => (d == null || (isPlainObject(d) && (d as DataSeriesDatum).value == null)) === false) // 過濾掉null &
|
|
141
|
-
.map(d => typeof d === 'number' ? d : d.value )
|
|
142
|
-
return getMinAndMax(arr)
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
// 取得最小及最大值 - Grid Data
|
|
146
|
-
export function getMinAndMaxGrid (data: DataGrid): [number, number] {
|
|
147
|
-
const flatData: (DataGridValue | DataGridDatum)[] = data.flat()
|
|
148
|
-
const arr = flatData
|
|
149
|
-
.filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
|
|
150
|
-
.map(d => typeof d === 'number' ? d : d.value )
|
|
151
|
-
return getMinAndMax(arr)
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
// 取得最小及最大值 - MultiGrid Data
|
|
155
|
-
export function getMinAndMaxMultiGrid (data: DataMultiGrid): [number, number] {
|
|
156
|
-
const flatData: (DataGridValue | DataGridDatum)[] = data.flat().flat()
|
|
157
|
-
const arr = flatData
|
|
158
|
-
.filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
|
|
159
|
-
.map(d => typeof d === 'number' ? d : d.value )
|
|
160
|
-
return getMinAndMax(arr)
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
// 取得最小及最大值 - MultiValue Data
|
|
164
|
-
export function getMinAndMaxMultiValue (data: DataMultiValue, valueIndex: number = 2): [number, number] {
|
|
165
|
-
const flatData: (DataMultiValueDatum | DataMultiValueValue)[] = data.flat().filter((d, i) => i == valueIndex)
|
|
166
|
-
const arr = flatData
|
|
167
|
-
.filter(d => (d == null || (isPlainObject(d) && (d as DataMultiValueDatum).value == null)) === false) // 過濾掉null
|
|
168
|
-
.map(d => typeof d === 'number' ? d : d.value )
|
|
169
|
-
return getMinAndMax(arr)
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
// @Q@ 待處理
|
|
173
|
-
// // 取得最小及最大值 - Relationship Data
|
|
174
|
-
// export function getMinAndMaxRelationship (data: DataRelationship, target: 'nodes' | 'edges' = 'nodes'): [number, number] {
|
|
175
|
-
|
|
176
|
-
// }
|
|
177
|
-
|
|
178
|
-
// @Q@ 待處理
|
|
179
|
-
// // 取得最小及最大值 - Tree Data
|
|
180
|
-
// export function getMinAndMaxTree (data: DataTree): [number, number] {
|
|
181
|
-
|
|
182
|
-
// }
|
|
183
|
-
|
|
184
|
-
// 轉置成seriesDirection為main的陣列格式
|
|
185
|
-
export function transposeData<T> (seriesDirection: SeriesDirection, data: T[][]): T[][] {
|
|
186
|
-
if (seriesDirection === 'row') {
|
|
187
|
-
return Object.assign([], data)
|
|
188
|
-
}
|
|
189
|
-
// 取得原始陣列的維度
|
|
190
|
-
const rows = data.length;
|
|
191
|
-
const cols = data.reduce((prev, current) => {
|
|
192
|
-
return Math.max(prev, current.length)
|
|
193
|
-
}, 0)
|
|
194
|
-
|
|
195
|
-
// 初始化轉換後的陣列
|
|
196
|
-
const transposedArray = new Array(cols).fill(null).map(() => new Array(rows).fill(null))
|
|
197
|
-
|
|
198
|
-
// 遍歷原始陣列,進行轉換
|
|
199
|
-
for (let i = 0; i < rows; i++) {
|
|
200
|
-
for (let j = 0; j < cols; j++) {
|
|
201
|
-
transposedArray[j][i] = data[i][j]
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
return transposedArray
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
export function seriesColorPredicate (seriesIndex: number, chartParams: ChartParams) {
|
|
210
|
-
return seriesIndex < chartParams.colors[chartParams.colorScheme].series.length
|
|
211
|
-
? chartParams.colors[chartParams.colorScheme].series[seriesIndex]
|
|
212
|
-
: chartParams.colors[chartParams.colorScheme].series[
|
|
213
|
-
seriesIndex % chartParams.colors[chartParams.colorScheme].series.length
|
|
214
|
-
]
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
export function calcGridContainerPosition (layout: Layout, container: DataFormatterGridContainer, rowIndex: number, columnIndex: number) {
|
|
218
|
-
const { gap, rowAmount, columnAmount } = container
|
|
219
|
-
const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
|
|
220
|
-
const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
|
|
221
|
-
const x = columnIndex * width + (columnIndex * gap)
|
|
222
|
-
const y = rowIndex * height + (rowIndex * gap)
|
|
223
|
-
const translate: [number, number] = [x, y]
|
|
224
|
-
const scale: [number, number] = [width / layout.width, height / layout.height]
|
|
225
|
-
|
|
226
|
-
return {
|
|
227
|
-
translate,
|
|
228
|
-
scale
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
// // multiGrid datum color
|
|
233
|
-
// export function multiGridColorPredicate ({ seriesIndex, groupIndex, data, chartParams }: {
|
|
234
|
-
// seriesIndex: number
|
|
235
|
-
// groupIndex: number
|
|
236
|
-
// data: ComputedDataMultiGrid
|
|
237
|
-
// chartParams: ChartParams
|
|
238
|
-
// }) {
|
|
239
|
-
// // 累加前面的grid的seriesIndex
|
|
240
|
-
// const accSeriesIndex = data.reduce((prev, current) => {
|
|
241
|
-
// if (current[0] && current[0][0] && groupIndex > current[0][0].gridIndex) {
|
|
242
|
-
// return prev + current[0].length
|
|
243
|
-
// } else if (current[0] && current[0][0] && groupIndex == current[0][0].gridIndex) {
|
|
244
|
-
// return prev + seriesIndex
|
|
245
|
-
// } else {
|
|
246
|
-
// return prev
|
|
247
|
-
// }
|
|
248
|
-
// }, 0)
|
|
249
|
-
|
|
250
|
-
// return seriesColorPredicate(accSeriesIndex, chartParams)
|
|
251
|
-
// }
|
|
252
|
-
|
|
253
|
-
|
|
1
|
+
import * as d3 from 'd3'
|
|
2
|
+
import type { ChartType } from '../types/Chart'
|
|
3
|
+
import type { ChartParams } from '../types/ChartParams'
|
|
4
|
+
import type { DatumBase, DatumValue } from '../types/Data'
|
|
5
|
+
import type { DataSeries, DataSeriesDatum, DataSeriesValue } from '../types/DataSeries'
|
|
6
|
+
import type { DataGrid, DataGridDatum, DataGridValue } from '../types/DataGrid'
|
|
7
|
+
import type { DataMultiGrid } from '../types/DataMultiGrid'
|
|
8
|
+
import type { DataMultiValue, DataMultiValueDatum, DataMultiValueValue } from '../types/DataMultiValue'
|
|
9
|
+
import type { SeriesDirection, DataFormatterGrid, DataFormatterGridContainer } from '../types/DataFormatterGrid'
|
|
10
|
+
import type { DataFormatterMultiGrid } from '../types/DataFormatterMultiGrid'
|
|
11
|
+
import type { ComputedDatumSeriesValue } from '../types/ComputedData'
|
|
12
|
+
import type { ComputedDatumSeries } from '../types/ComputedDataSeries'
|
|
13
|
+
import type { ComputedDatumGrid, ComputedDataGrid } from '../types/ComputedDataGrid'
|
|
14
|
+
import type { ComputedDataMultiGrid } from '../types/ComputedDataMultiGrid'
|
|
15
|
+
import type { Layout } from '../types/Layout'
|
|
16
|
+
// import type { ComputedDatumMultiGrid } from '../types/ComputedDataMultiGrid'
|
|
17
|
+
import { isPlainObject } from './commonUtils'
|
|
18
|
+
|
|
19
|
+
export function formatValueToLabel (value: any, valueFormatter: string | ((text: d3.NumberValue) => string)) {
|
|
20
|
+
if (valueFormatter! instanceof Function == true) {
|
|
21
|
+
return (valueFormatter as ((text: d3.NumberValue) => string))(value)
|
|
22
|
+
}
|
|
23
|
+
return d3.format(valueFormatter as string)!(value)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export function createDefaultDatumId (chartTypeOrPrefix: string, levelOneIndex: number, levelTwoIndex: number, levelThreeIndex?: number) {
|
|
27
|
+
let text = `${chartTypeOrPrefix}_${levelOneIndex}_${levelTwoIndex}`
|
|
28
|
+
if (levelThreeIndex != null) {
|
|
29
|
+
text += `_${levelThreeIndex}`
|
|
30
|
+
}
|
|
31
|
+
return text
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export function createDefaultSeriesLabel (chartTypeOrPrefix: string, seriesIndex: number) {
|
|
35
|
+
return `${chartTypeOrPrefix}_series${seriesIndex}`
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export function createDefaultGroupLabel (chartTypeOrPrefix: string, groupIndex: number) {
|
|
39
|
+
return `${chartTypeOrPrefix}_group${groupIndex}`
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export function createGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid' }: {
|
|
43
|
+
transposedDataGrid: DataGridDatum[][],
|
|
44
|
+
dataFormatter: DataFormatterGrid
|
|
45
|
+
chartType?: ChartType
|
|
46
|
+
}) {
|
|
47
|
+
const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
|
|
48
|
+
? dataFormatter.grid.gridData.rowLabels
|
|
49
|
+
: dataFormatter.grid.gridData.columnLabels
|
|
50
|
+
return transposedDataGrid.map((_, rowIndex) => {
|
|
51
|
+
return labels[rowIndex] != null
|
|
52
|
+
? labels[rowIndex]
|
|
53
|
+
: createDefaultSeriesLabel(chartType, rowIndex)
|
|
54
|
+
})
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export function createMultiGridSeriesLabels ({ transposedDataGrid, dataFormatter, chartType = 'multiGrid', gridIndex = 0 }: {
|
|
58
|
+
transposedDataGrid: DataGridDatum[][],
|
|
59
|
+
dataFormatter: DataFormatterGrid
|
|
60
|
+
chartType?: ChartType
|
|
61
|
+
gridIndex?: number
|
|
62
|
+
}) {
|
|
63
|
+
const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
|
|
64
|
+
? dataFormatter.grid.gridData.rowLabels
|
|
65
|
+
: dataFormatter.grid.gridData.columnLabels
|
|
66
|
+
return transposedDataGrid.map((_, rowIndex) => {
|
|
67
|
+
return labels[rowIndex] != null
|
|
68
|
+
? labels[rowIndex]
|
|
69
|
+
: createDefaultSeriesLabel(`${chartType}_grid${gridIndex}`, rowIndex)
|
|
70
|
+
})
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export function createGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'grid' }: {
|
|
74
|
+
transposedDataGrid: DataGridDatum[][],
|
|
75
|
+
dataFormatter: DataFormatterGrid
|
|
76
|
+
chartType?: ChartType
|
|
77
|
+
}) {
|
|
78
|
+
if (transposedDataGrid[0] == null) {
|
|
79
|
+
return []
|
|
80
|
+
}
|
|
81
|
+
const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
|
|
82
|
+
? dataFormatter.grid.gridData.columnLabels
|
|
83
|
+
: dataFormatter.grid.gridData.rowLabels
|
|
84
|
+
return transposedDataGrid[0].map((_, columnLabels) => {
|
|
85
|
+
return labels[columnLabels] != null
|
|
86
|
+
? labels[columnLabels]
|
|
87
|
+
: createDefaultGroupLabel(chartType, columnLabels)
|
|
88
|
+
})
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export function createMultiGridGroupLabels ({ transposedDataGrid, dataFormatter, chartType = 'multiGrid', gridIndex = 0 }: {
|
|
92
|
+
transposedDataGrid: DataGridDatum[][],
|
|
93
|
+
dataFormatter: DataFormatterGrid
|
|
94
|
+
chartType?: ChartType
|
|
95
|
+
gridIndex?: number
|
|
96
|
+
}) {
|
|
97
|
+
if (transposedDataGrid[0] == null) {
|
|
98
|
+
return []
|
|
99
|
+
}
|
|
100
|
+
const labels = dataFormatter.grid.gridData.seriesDirection === 'row'
|
|
101
|
+
? dataFormatter.grid.gridData.columnLabels
|
|
102
|
+
: dataFormatter.grid.gridData.rowLabels
|
|
103
|
+
return transposedDataGrid[0].map((_, columnLabels) => {
|
|
104
|
+
return labels[columnLabels] != null
|
|
105
|
+
? labels[columnLabels]
|
|
106
|
+
: createDefaultGroupLabel(`${chartType}_grid${gridIndex}`, columnLabels)
|
|
107
|
+
})
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// 取得最小及最大值 - 數字陣列
|
|
111
|
+
export function getMinAndMax (data: number[]): [number, number] {
|
|
112
|
+
const defaultMinAndMax: [number, number] = [0, 0] // default
|
|
113
|
+
if (!data.length) {
|
|
114
|
+
return defaultMinAndMax
|
|
115
|
+
}
|
|
116
|
+
const minAndMax: [number, number] = data.reduce((prev, current) => {
|
|
117
|
+
// [min, max]
|
|
118
|
+
return [
|
|
119
|
+
current < prev[0] ? current : prev[0],
|
|
120
|
+
current > prev[1] ? current : prev[1]
|
|
121
|
+
]
|
|
122
|
+
}, [data[0], data[0]])
|
|
123
|
+
return minAndMax
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// 取得最小及最大值 - datum格式陣列資料
|
|
127
|
+
export function getMinAndMaxValue (data: DatumValue[]): [number, number] {
|
|
128
|
+
const arr = data
|
|
129
|
+
.filter(d => d != null && d.value != null)
|
|
130
|
+
.map(d => d.value )
|
|
131
|
+
return getMinAndMax(arr)
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// 取得最小及最大值 - Series Data
|
|
135
|
+
export function getMinAndMaxSeries (data: DataSeries): [number, number] {
|
|
136
|
+
const flatData: (DataSeriesValue | DataSeriesDatum)[] = data[0] && Array.isArray((data as (DataSeriesValue | DataSeriesDatum)[][])[0])
|
|
137
|
+
? data.flat()
|
|
138
|
+
: data as (DataSeriesValue | DataSeriesDatum)[]
|
|
139
|
+
const arr = flatData
|
|
140
|
+
.filter(d => (d == null || (isPlainObject(d) && (d as DataSeriesDatum).value == null)) === false) // 過濾掉null &
|
|
141
|
+
.map(d => typeof d === 'number' ? d : d.value )
|
|
142
|
+
return getMinAndMax(arr)
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// 取得最小及最大值 - Grid Data
|
|
146
|
+
export function getMinAndMaxGrid (data: DataGrid): [number, number] {
|
|
147
|
+
const flatData: (DataGridValue | DataGridDatum)[] = data.flat()
|
|
148
|
+
const arr = flatData
|
|
149
|
+
.filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
|
|
150
|
+
.map(d => typeof d === 'number' ? d : d.value )
|
|
151
|
+
return getMinAndMax(arr)
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// 取得最小及最大值 - MultiGrid Data
|
|
155
|
+
export function getMinAndMaxMultiGrid (data: DataMultiGrid): [number, number] {
|
|
156
|
+
const flatData: (DataGridValue | DataGridDatum)[] = data.flat().flat()
|
|
157
|
+
const arr = flatData
|
|
158
|
+
.filter(d => (d == null || (isPlainObject(d) && (d as DataGridDatum).value == null)) === false) // 過濾掉null
|
|
159
|
+
.map(d => typeof d === 'number' ? d : d.value )
|
|
160
|
+
return getMinAndMax(arr)
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// 取得最小及最大值 - MultiValue Data
|
|
164
|
+
export function getMinAndMaxMultiValue (data: DataMultiValue, valueIndex: number = 2): [number, number] {
|
|
165
|
+
const flatData: (DataMultiValueDatum | DataMultiValueValue)[] = data.flat().filter((d, i) => i == valueIndex)
|
|
166
|
+
const arr = flatData
|
|
167
|
+
.filter(d => (d == null || (isPlainObject(d) && (d as DataMultiValueDatum).value == null)) === false) // 過濾掉null
|
|
168
|
+
.map(d => typeof d === 'number' ? d : d.value )
|
|
169
|
+
return getMinAndMax(arr)
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
// @Q@ 待處理
|
|
173
|
+
// // 取得最小及最大值 - Relationship Data
|
|
174
|
+
// export function getMinAndMaxRelationship (data: DataRelationship, target: 'nodes' | 'edges' = 'nodes'): [number, number] {
|
|
175
|
+
|
|
176
|
+
// }
|
|
177
|
+
|
|
178
|
+
// @Q@ 待處理
|
|
179
|
+
// // 取得最小及最大值 - Tree Data
|
|
180
|
+
// export function getMinAndMaxTree (data: DataTree): [number, number] {
|
|
181
|
+
|
|
182
|
+
// }
|
|
183
|
+
|
|
184
|
+
// 轉置成seriesDirection為main的陣列格式
|
|
185
|
+
export function transposeData<T> (seriesDirection: SeriesDirection, data: T[][]): T[][] {
|
|
186
|
+
if (seriesDirection === 'row') {
|
|
187
|
+
return Object.assign([], data)
|
|
188
|
+
}
|
|
189
|
+
// 取得原始陣列的維度
|
|
190
|
+
const rows = data.length;
|
|
191
|
+
const cols = data.reduce((prev, current) => {
|
|
192
|
+
return Math.max(prev, current.length)
|
|
193
|
+
}, 0)
|
|
194
|
+
|
|
195
|
+
// 初始化轉換後的陣列
|
|
196
|
+
const transposedArray = new Array(cols).fill(null).map(() => new Array(rows).fill(null))
|
|
197
|
+
|
|
198
|
+
// 遍歷原始陣列,進行轉換
|
|
199
|
+
for (let i = 0; i < rows; i++) {
|
|
200
|
+
for (let j = 0; j < cols; j++) {
|
|
201
|
+
transposedArray[j][i] = data[i][j]
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
return transposedArray
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
export function seriesColorPredicate (seriesIndex: number, chartParams: ChartParams) {
|
|
210
|
+
return seriesIndex < chartParams.colors[chartParams.colorScheme].series.length
|
|
211
|
+
? chartParams.colors[chartParams.colorScheme].series[seriesIndex]
|
|
212
|
+
: chartParams.colors[chartParams.colorScheme].series[
|
|
213
|
+
seriesIndex % chartParams.colors[chartParams.colorScheme].series.length
|
|
214
|
+
]
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
export function calcGridContainerPosition (layout: Layout, container: DataFormatterGridContainer, rowIndex: number, columnIndex: number) {
|
|
218
|
+
const { gap, rowAmount, columnAmount } = container
|
|
219
|
+
const width = (layout.width - (gap * (columnAmount - 1))) / columnAmount
|
|
220
|
+
const height = (layout.height - (gap * (rowAmount - 1))) / rowAmount
|
|
221
|
+
const x = columnIndex * width + (columnIndex * gap)
|
|
222
|
+
const y = rowIndex * height + (rowIndex * gap)
|
|
223
|
+
const translate: [number, number] = [x, y]
|
|
224
|
+
const scale: [number, number] = [width / layout.width, height / layout.height]
|
|
225
|
+
|
|
226
|
+
return {
|
|
227
|
+
translate,
|
|
228
|
+
scale
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// // multiGrid datum color
|
|
233
|
+
// export function multiGridColorPredicate ({ seriesIndex, groupIndex, data, chartParams }: {
|
|
234
|
+
// seriesIndex: number
|
|
235
|
+
// groupIndex: number
|
|
236
|
+
// data: ComputedDataMultiGrid
|
|
237
|
+
// chartParams: ChartParams
|
|
238
|
+
// }) {
|
|
239
|
+
// // 累加前面的grid的seriesIndex
|
|
240
|
+
// const accSeriesIndex = data.reduce((prev, current) => {
|
|
241
|
+
// if (current[0] && current[0][0] && groupIndex > current[0][0].gridIndex) {
|
|
242
|
+
// return prev + current[0].length
|
|
243
|
+
// } else if (current[0] && current[0][0] && groupIndex == current[0][0].gridIndex) {
|
|
244
|
+
// return prev + seriesIndex
|
|
245
|
+
// } else {
|
|
246
|
+
// return prev
|
|
247
|
+
// }
|
|
248
|
+
// }, 0)
|
|
249
|
+
|
|
250
|
+
// return seriesColorPredicate(accSeriesIndex, chartParams)
|
|
251
|
+
// }
|
|
252
|
+
|
|
253
|
+
|
package/tsconfig.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"outDir": "./dist/",
|
|
4
|
-
"sourceMap": true,
|
|
5
|
-
"noImplicitAny": true,
|
|
6
|
-
"module": "es6",
|
|
7
|
-
"target": "es5",
|
|
8
|
-
"jsx": "react",
|
|
9
|
-
"allowJs": true,
|
|
10
|
-
"moduleResolution": "node",
|
|
11
|
-
"allowSyntheticDefaultImports" : true,
|
|
12
|
-
"esModuleInterop" : true
|
|
13
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"outDir": "./dist/",
|
|
4
|
+
"sourceMap": true,
|
|
5
|
+
"noImplicitAny": true,
|
|
6
|
+
"module": "es6",
|
|
7
|
+
"target": "es5",
|
|
8
|
+
"jsx": "react",
|
|
9
|
+
"allowJs": true,
|
|
10
|
+
"moduleResolution": "node",
|
|
11
|
+
"allowSyntheticDefaultImports" : true,
|
|
12
|
+
"esModuleInterop" : true
|
|
13
|
+
}
|
|
14
14
|
}
|
package/vite.config.js
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
// import { fileURLToPath, URL } from 'node:url'
|
|
2
|
-
|
|
3
|
-
// import { resolve } from 'path'
|
|
4
|
-
import { defineConfig } from 'vite'
|
|
5
|
-
import dts from 'vite-plugin-dts'
|
|
6
|
-
|
|
7
|
-
const releaseConfig = {
|
|
8
|
-
plugins: [
|
|
9
|
-
dts({
|
|
10
|
-
insertTypesEntry: true
|
|
11
|
-
})
|
|
12
|
-
],
|
|
13
|
-
compilerOptions: {
|
|
14
|
-
composite: true
|
|
15
|
-
},
|
|
16
|
-
build: {
|
|
17
|
-
lib: {
|
|
18
|
-
entry: "src/index.ts",
|
|
19
|
-
name: 'orbcharts-core',
|
|
20
|
-
formats: ["es", "umd"],
|
|
21
|
-
fileName: format => `orbcharts-core.${format}.js`
|
|
22
|
-
},
|
|
23
|
-
// rollupOptions: {
|
|
24
|
-
// input: {
|
|
25
|
-
// main: resolve(__dirname, "src/index.ts")
|
|
26
|
-
// },
|
|
27
|
-
// external: ['vue'],
|
|
28
|
-
// output: {
|
|
29
|
-
// assetFileNames: 'my-library.css',
|
|
30
|
-
// exports: "named",
|
|
31
|
-
// globals: {
|
|
32
|
-
// vue: 'Vue',
|
|
33
|
-
// },
|
|
34
|
-
// },
|
|
35
|
-
// },
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export default defineConfig(({ command, mode }) => {
|
|
40
|
-
if (mode === 'release') {
|
|
41
|
-
return releaseConfig
|
|
42
|
-
} else {
|
|
43
|
-
return releaseConfig
|
|
44
|
-
}
|
|
1
|
+
// import { fileURLToPath, URL } from 'node:url'
|
|
2
|
+
|
|
3
|
+
// import { resolve } from 'path'
|
|
4
|
+
import { defineConfig } from 'vite'
|
|
5
|
+
import dts from 'vite-plugin-dts'
|
|
6
|
+
|
|
7
|
+
const releaseConfig = {
|
|
8
|
+
plugins: [
|
|
9
|
+
dts({
|
|
10
|
+
insertTypesEntry: true
|
|
11
|
+
})
|
|
12
|
+
],
|
|
13
|
+
compilerOptions: {
|
|
14
|
+
composite: true
|
|
15
|
+
},
|
|
16
|
+
build: {
|
|
17
|
+
lib: {
|
|
18
|
+
entry: "src/index.ts",
|
|
19
|
+
name: 'orbcharts-core',
|
|
20
|
+
formats: ["es", "umd"],
|
|
21
|
+
fileName: format => `orbcharts-core.${format}.js`
|
|
22
|
+
},
|
|
23
|
+
// rollupOptions: {
|
|
24
|
+
// input: {
|
|
25
|
+
// main: resolve(__dirname, "src/index.ts")
|
|
26
|
+
// },
|
|
27
|
+
// external: ['vue'],
|
|
28
|
+
// output: {
|
|
29
|
+
// assetFileNames: 'my-library.css',
|
|
30
|
+
// exports: "named",
|
|
31
|
+
// globals: {
|
|
32
|
+
// vue: 'Vue',
|
|
33
|
+
// },
|
|
34
|
+
// },
|
|
35
|
+
// },
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export default defineConfig(({ command, mode }) => {
|
|
40
|
+
if (mode === 'release') {
|
|
41
|
+
return releaseConfig
|
|
42
|
+
} else {
|
|
43
|
+
return releaseConfig
|
|
44
|
+
}
|
|
45
45
|
})
|