gifted-charts-core 0.1.21 → 0.1.23
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/{src → dist}/LineChart/index.d.ts +0 -3
- package/{src → dist}/LineChart/index.js +5 -54
- package/{src → dist}/components/common/types.d.ts +9 -8
- package/{src → dist}/index.d.ts +1 -0
- package/{src → dist}/utils/index.js +8 -2
- package/package.json +4 -4
- package/src/BarChart/Animated2DWithGradient.js.map +0 -1
- package/src/BarChart/Animated2DWithGradient.ts +0 -192
- package/src/BarChart/RenderStackBars.js.map +0 -1
- package/src/BarChart/RenderStackBars.ts +0 -160
- package/src/BarChart/index.js.map +0 -1
- package/src/BarChart/index.ts +0 -909
- package/src/BarChart/types.js.map +0 -1
- package/src/BarChart/types.ts +0 -668
- package/src/LineChart/LineChartBiColor.js.map +0 -1
- package/src/LineChart/LineChartBiColor.ts +0 -613
- package/src/LineChart/index.js.map +0 -1
- package/src/LineChart/index.ts +0 -2205
- package/src/LineChart/types.js.map +0 -1
- package/src/LineChart/types.ts +0 -616
- package/src/PieChart/index.js.map +0 -1
- package/src/PieChart/index.ts +0 -180
- package/src/PieChart/main.js.map +0 -1
- package/src/PieChart/main.ts +0 -173
- package/src/PieChart/pro.ts +0 -309
- package/src/PieChart/types.js.map +0 -1
- package/src/PieChart/types.ts +0 -105
- package/src/PopulationPyramid/index.js.map +0 -1
- package/src/PopulationPyramid/index.ts +0 -365
- package/src/PopulationPyramid/types.js.map +0 -1
- package/src/PopulationPyramid/types.ts +0 -258
- package/src/components/AnimatedThreeDBar/index.js.map +0 -1
- package/src/components/AnimatedThreeDBar/index.ts +0 -60
- package/src/components/BarAndLineChartsWrapper/getHorizSectionsVals.js.map +0 -1
- package/src/components/BarAndLineChartsWrapper/getHorizSectionsVals.ts +0 -408
- package/src/components/BarAndLineChartsWrapper/index.js.map +0 -1
- package/src/components/BarAndLineChartsWrapper/index.ts +0 -408
- package/src/components/common/StripAndLabel.js.map +0 -1
- package/src/components/common/StripAndLabel.ts +0 -80
- package/src/components/common/types.ts +0 -32
- package/src/index.ts +0 -153
- package/src/utils/constants.js.map +0 -1
- package/src/utils/constants.ts +0 -349
- package/src/utils/index.js.map +0 -1
- package/src/utils/index.ts +0 -1563
- package/src/utils/types.js.map +0 -1
- package/src/utils/types.ts +0 -442
- /package/{src → dist}/BarChart/Animated2DWithGradient.d.ts +0 -0
- /package/{src → dist}/BarChart/Animated2DWithGradient.js +0 -0
- /package/{src → dist}/BarChart/RenderStackBars.d.ts +0 -0
- /package/{src → dist}/BarChart/RenderStackBars.js +0 -0
- /package/{src → dist}/BarChart/index.d.ts +0 -0
- /package/{src → dist}/BarChart/index.js +0 -0
- /package/{src → dist}/BarChart/types.d.ts +0 -0
- /package/{src → dist}/BarChart/types.js +0 -0
- /package/{src → dist}/LineChart/LineChartBiColor.d.ts +0 -0
- /package/{src → dist}/LineChart/LineChartBiColor.js +0 -0
- /package/{src → dist}/LineChart/types.d.ts +0 -0
- /package/{src → dist}/LineChart/types.js +0 -0
- /package/{src → dist}/PieChart/index.d.ts +0 -0
- /package/{src → dist}/PieChart/index.js +0 -0
- /package/{src → dist}/PieChart/main.d.ts +0 -0
- /package/{src → dist}/PieChart/main.js +0 -0
- /package/{src → dist}/PieChart/pro.d.ts +0 -0
- /package/{src → dist}/PieChart/pro.js +0 -0
- /package/{src → dist}/PieChart/types.d.ts +0 -0
- /package/{src → dist}/PieChart/types.js +0 -0
- /package/{src → dist}/PopulationPyramid/index.d.ts +0 -0
- /package/{src → dist}/PopulationPyramid/index.js +0 -0
- /package/{src → dist}/PopulationPyramid/types.d.ts +0 -0
- /package/{src → dist}/PopulationPyramid/types.js +0 -0
- /package/{src → dist}/components/AnimatedThreeDBar/index.d.ts +0 -0
- /package/{src → dist}/components/AnimatedThreeDBar/index.js +0 -0
- /package/{src → dist}/components/BarAndLineChartsWrapper/getHorizSectionsVals.d.ts +0 -0
- /package/{src → dist}/components/BarAndLineChartsWrapper/getHorizSectionsVals.js +0 -0
- /package/{src → dist}/components/BarAndLineChartsWrapper/index.d.ts +0 -0
- /package/{src → dist}/components/BarAndLineChartsWrapper/index.js +0 -0
- /package/{src → dist}/components/common/StripAndLabel.d.ts +0 -0
- /package/{src → dist}/components/common/StripAndLabel.js +0 -0
- /package/{src → dist}/components/common/types.js +0 -0
- /package/{src → dist}/index.js +0 -0
- /package/{src → dist}/utils/constants.d.ts +0 -0
- /package/{src → dist}/utils/constants.js +0 -0
- /package/{src → dist}/utils/index.d.ts +0 -0
- /package/{src → dist}/utils/types.d.ts +0 -0
- /package/{src → dist}/utils/types.js +0 -0
package/src/utils/index.ts
DELETED
|
@@ -1,1563 +0,0 @@
|
|
|
1
|
-
import { type ColorValue } from 'react-native'
|
|
2
|
-
import {
|
|
3
|
-
type IDataSanitisationProps,
|
|
4
|
-
type lineDataItem
|
|
5
|
-
} from '../LineChart/types'
|
|
6
|
-
import {
|
|
7
|
-
AxesAndRulesDefaults,
|
|
8
|
-
BarDefaults,
|
|
9
|
-
RANGE_ENTER,
|
|
10
|
-
RANGE_EXIT,
|
|
11
|
-
STOP,
|
|
12
|
-
defaultCurvature,
|
|
13
|
-
defaultLineConfig,
|
|
14
|
-
loc
|
|
15
|
-
} from './constants'
|
|
16
|
-
import {
|
|
17
|
-
type arrowConfigType,
|
|
18
|
-
CurveType,
|
|
19
|
-
type HighlightedRange,
|
|
20
|
-
type LineProperties,
|
|
21
|
-
type LineSegment,
|
|
22
|
-
Framework,
|
|
23
|
-
referenceConfigType
|
|
24
|
-
} from './types'
|
|
25
|
-
import {
|
|
26
|
-
type lineConfigType,
|
|
27
|
-
type BarChartPropsType,
|
|
28
|
-
type FocusedBarConfig,
|
|
29
|
-
type barDataItem
|
|
30
|
-
} from '../BarChart/types'
|
|
31
|
-
import { type extendedLineChartPropsType } from '../LineChart'
|
|
32
|
-
import { type extendedBarChartPropsType } from '../BarChart'
|
|
33
|
-
|
|
34
|
-
export const getCumulativeWidth = (
|
|
35
|
-
data: any,
|
|
36
|
-
index: number,
|
|
37
|
-
spacing: number
|
|
38
|
-
): number => {
|
|
39
|
-
let cumWidth = 0
|
|
40
|
-
for (let i = 0; i < index; i++) {
|
|
41
|
-
let { barWidth } = data[i]
|
|
42
|
-
barWidth = barWidth ?? 30
|
|
43
|
-
cumWidth += barWidth + (spacing ?? 20)
|
|
44
|
-
}
|
|
45
|
-
return cumWidth
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export const getLighterColor = (color: string): string => {
|
|
49
|
-
let r
|
|
50
|
-
let g
|
|
51
|
-
let b
|
|
52
|
-
let lighter = '#'
|
|
53
|
-
if (color.startsWith('#')) {
|
|
54
|
-
if (color.length < 7) {
|
|
55
|
-
r = parseInt(color[1], 16)
|
|
56
|
-
g = parseInt(color[2], 16)
|
|
57
|
-
b = parseInt(color[3], 16)
|
|
58
|
-
if (r < 14) {
|
|
59
|
-
r += 2
|
|
60
|
-
lighter += r.toString(16)
|
|
61
|
-
}
|
|
62
|
-
if (g < 14) {
|
|
63
|
-
g += 2
|
|
64
|
-
lighter += g.toString(16)
|
|
65
|
-
}
|
|
66
|
-
if (b < 14) {
|
|
67
|
-
b += 2
|
|
68
|
-
lighter += b.toString(16)
|
|
69
|
-
}
|
|
70
|
-
} else {
|
|
71
|
-
r = parseInt(color[1] + color[2], 16)
|
|
72
|
-
g = parseInt(color[3] + color[4], 16)
|
|
73
|
-
b = parseInt(color[5] + color[6], 16)
|
|
74
|
-
|
|
75
|
-
if (r < 224) {
|
|
76
|
-
r += 32
|
|
77
|
-
lighter += r.toString(16)
|
|
78
|
-
}
|
|
79
|
-
if (g < 224) {
|
|
80
|
-
g += 32
|
|
81
|
-
lighter += g.toString(16)
|
|
82
|
-
}
|
|
83
|
-
if (b < 224) {
|
|
84
|
-
b += 32
|
|
85
|
-
lighter += b.toString(16)
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
return lighter
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
export const svgQuadraticCurvePath = (points: number[][]): string => {
|
|
93
|
-
let path = 'M' + points[0][0] + ',' + points[0][1]
|
|
94
|
-
|
|
95
|
-
for (let i = 0; i < points.length - 1; i++) {
|
|
96
|
-
const xMid = (points[i][0] + points[i + 1][0]) / 2
|
|
97
|
-
const yMid = (points[i][1] + points[i + 1][1]) / 2
|
|
98
|
-
const cpX1 = (xMid + points[i][0]) / 2
|
|
99
|
-
const cpX2 = (xMid + points[i + 1][0]) / 2
|
|
100
|
-
path +=
|
|
101
|
-
'Q ' +
|
|
102
|
-
cpX1 +
|
|
103
|
-
', ' +
|
|
104
|
-
points[i][1] +
|
|
105
|
-
', ' +
|
|
106
|
-
xMid +
|
|
107
|
-
', ' +
|
|
108
|
-
yMid +
|
|
109
|
-
(' Q ' +
|
|
110
|
-
cpX2 +
|
|
111
|
-
', ' +
|
|
112
|
-
points[i + 1][1] +
|
|
113
|
-
', ' +
|
|
114
|
-
points[i + 1][0] +
|
|
115
|
-
', ' +
|
|
116
|
-
points[i + 1][1])
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
return path
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
export const svgPath = (
|
|
123
|
-
points: number[][],
|
|
124
|
-
curveType?: CurveType,
|
|
125
|
-
curvature?: number
|
|
126
|
-
): string => {
|
|
127
|
-
if (!points?.length) return ''
|
|
128
|
-
if (curveType === CurveType.QUADRATIC) {
|
|
129
|
-
return svgQuadraticCurvePath(points)
|
|
130
|
-
}
|
|
131
|
-
// build the d attributes by looping over the points
|
|
132
|
-
const d = points.reduce(
|
|
133
|
-
(acc, point, i, a) =>
|
|
134
|
-
i === 0
|
|
135
|
-
? `M${point[0]},${point[1]}`
|
|
136
|
-
: `${acc} ${bezierCommand(point, i, a, curvature ?? defaultCurvature)}`,
|
|
137
|
-
''
|
|
138
|
-
)
|
|
139
|
-
return d
|
|
140
|
-
}
|
|
141
|
-
interface Iline {
|
|
142
|
-
length: number
|
|
143
|
-
angle: number
|
|
144
|
-
}
|
|
145
|
-
const line = (pointA: number[], pointB: number[]): Iline => {
|
|
146
|
-
const lengthX = pointB[0] - pointA[0]
|
|
147
|
-
const lengthY = pointB[1] - pointA[1]
|
|
148
|
-
return {
|
|
149
|
-
length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
|
|
150
|
-
angle: Math.atan2(lengthY, lengthX)
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
const controlPoint = (
|
|
155
|
-
curvature: number,
|
|
156
|
-
current: number[],
|
|
157
|
-
previous: number[],
|
|
158
|
-
next: number[],
|
|
159
|
-
reverse?: any
|
|
160
|
-
): number[] => {
|
|
161
|
-
// When 'current' is the first or last point of the array
|
|
162
|
-
// 'previous' or 'next' don't exist.
|
|
163
|
-
// Replace with 'current'
|
|
164
|
-
const p = previous ?? current
|
|
165
|
-
const n = next ?? current
|
|
166
|
-
// The smoothing ratio
|
|
167
|
-
const smoothing = curvature
|
|
168
|
-
// Properties of the opposed-line
|
|
169
|
-
const o = line(p, n)
|
|
170
|
-
// If is end-control-point, add PI to the angle to go backward
|
|
171
|
-
const angle = o.angle + (reverse ? Math.PI : 0)
|
|
172
|
-
const length = o.length * smoothing
|
|
173
|
-
// The control point position is relative to the current point
|
|
174
|
-
const x = current[0] + Math.cos(angle) * length
|
|
175
|
-
const y = current[1] + Math.sin(angle) * length
|
|
176
|
-
return [x, y]
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
export const bezierCommand = (
|
|
180
|
-
point: number[],
|
|
181
|
-
i: number,
|
|
182
|
-
a: number[][],
|
|
183
|
-
curvature: number
|
|
184
|
-
): string => {
|
|
185
|
-
// start control point
|
|
186
|
-
const [cpsX, cpsY] = controlPoint(curvature, a[i - 1], a[i - 2], point)
|
|
187
|
-
// end control point
|
|
188
|
-
const [cpeX, cpeY] = controlPoint(curvature, point, a[i - 1], a[i + 1], true)
|
|
189
|
-
return `C${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
export const getSegmentString = (
|
|
193
|
-
lineSegment: LineSegment[] | undefined,
|
|
194
|
-
index: number,
|
|
195
|
-
startDelimeter: string,
|
|
196
|
-
endDelimeter: string
|
|
197
|
-
): string => {
|
|
198
|
-
const segment = lineSegment?.find((segment) => segment.startIndex === index)
|
|
199
|
-
return segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : ''
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
export const getCurvePathWithSegments = (
|
|
203
|
-
path: string,
|
|
204
|
-
lineSegment: LineSegment[] | undefined,
|
|
205
|
-
startDelimeter: string,
|
|
206
|
-
endDelimeter: string
|
|
207
|
-
): string => {
|
|
208
|
-
if (!lineSegment?.length) return path
|
|
209
|
-
let newPath = ''
|
|
210
|
-
const pathArray = path.split('C')
|
|
211
|
-
for (let i = 0; i < pathArray.length; i++) {
|
|
212
|
-
const segment = lineSegment?.find((segment) => segment.startIndex === i)
|
|
213
|
-
newPath +=
|
|
214
|
-
(pathArray[i].startsWith('M') ? '' : 'C') +
|
|
215
|
-
pathArray[i] +
|
|
216
|
-
(segment ? startDelimeter + JSON.stringify(segment) + endDelimeter : '')
|
|
217
|
-
}
|
|
218
|
-
return newPath
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
export const getPreviousSegmentsLastPoint = (
|
|
222
|
-
isCurved: boolean,
|
|
223
|
-
previousSegment: string
|
|
224
|
-
): string => {
|
|
225
|
-
const prevSegmentLastPoint = isCurved
|
|
226
|
-
? previousSegment.substring(previousSegment.trim().lastIndexOf(' '))
|
|
227
|
-
: previousSegment
|
|
228
|
-
.substring(previousSegment.lastIndexOf('L'))
|
|
229
|
-
.replace('L', 'M')
|
|
230
|
-
|
|
231
|
-
return (
|
|
232
|
-
(prevSegmentLastPoint.trim()[0] === 'M' ? '' : 'M') + prevSegmentLastPoint
|
|
233
|
-
)
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
export const getPathWithHighlight = (
|
|
237
|
-
data: lineDataItem[],
|
|
238
|
-
i: number,
|
|
239
|
-
highlightedRange: HighlightedRange,
|
|
240
|
-
startIndex: number,
|
|
241
|
-
endIndex: number,
|
|
242
|
-
getX: (i: number) => number,
|
|
243
|
-
getY: (value: number) => number
|
|
244
|
-
): string => {
|
|
245
|
-
let path = ''
|
|
246
|
-
const { from, to } = highlightedRange
|
|
247
|
-
const currentPointRegion =
|
|
248
|
-
data[i].value < from ? loc.DOWN : data[i].value > to ? loc.UP : loc.IN
|
|
249
|
-
|
|
250
|
-
if (i !== endIndex) {
|
|
251
|
-
const nextPointRegion =
|
|
252
|
-
data[i + 1].value < from
|
|
253
|
-
? loc.DOWN
|
|
254
|
-
: data[i + 1].value > to
|
|
255
|
-
? loc.UP
|
|
256
|
-
: loc.IN
|
|
257
|
-
if (
|
|
258
|
-
currentPointRegion !== nextPointRegion ||
|
|
259
|
-
(i === startIndex && currentPointRegion === loc.IN)
|
|
260
|
-
) {
|
|
261
|
-
const x1 = getX(i)
|
|
262
|
-
const y1 = getY(data[i].value)
|
|
263
|
-
const x2 = getX(i + 1)
|
|
264
|
-
const y2 = getY(data[i + 1].value)
|
|
265
|
-
|
|
266
|
-
let m = (y2 - y1) / (x2 - x1)
|
|
267
|
-
let x = 0
|
|
268
|
-
let y = 0
|
|
269
|
-
if (i === startIndex && currentPointRegion === loc.IN) {
|
|
270
|
-
// If the 1st point lies IN
|
|
271
|
-
y = y1
|
|
272
|
-
x = x1
|
|
273
|
-
|
|
274
|
-
path +=
|
|
275
|
-
'L' +
|
|
276
|
-
x +
|
|
277
|
-
' ' +
|
|
278
|
-
y +
|
|
279
|
-
' ' +
|
|
280
|
-
RANGE_ENTER +
|
|
281
|
-
JSON.stringify(highlightedRange) +
|
|
282
|
-
STOP
|
|
283
|
-
|
|
284
|
-
if (nextPointRegion === loc.UP) {
|
|
285
|
-
y = getY(to)
|
|
286
|
-
x = (y - y1) / m + x1
|
|
287
|
-
|
|
288
|
-
path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT
|
|
289
|
-
} else if (nextPointRegion === loc.DOWN) {
|
|
290
|
-
y = getY(from)
|
|
291
|
-
x = (y - y1) / m + x1
|
|
292
|
-
|
|
293
|
-
path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT
|
|
294
|
-
}
|
|
295
|
-
} else if (currentPointRegion !== nextPointRegion) {
|
|
296
|
-
if (currentPointRegion === loc.DOWN && nextPointRegion === loc.UP) {
|
|
297
|
-
// if current point is in DOWN and next point is in UP, then we will add 2 points to the the path
|
|
298
|
-
y = getY(from)
|
|
299
|
-
x = (y - y1) / m + x1
|
|
300
|
-
|
|
301
|
-
path +=
|
|
302
|
-
'L' +
|
|
303
|
-
x +
|
|
304
|
-
' ' +
|
|
305
|
-
y +
|
|
306
|
-
' ' +
|
|
307
|
-
RANGE_ENTER +
|
|
308
|
-
JSON.stringify(highlightedRange) +
|
|
309
|
-
STOP
|
|
310
|
-
y = getY(to)
|
|
311
|
-
x = (y - y1) / m + x1
|
|
312
|
-
|
|
313
|
-
path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT
|
|
314
|
-
} else if (
|
|
315
|
-
currentPointRegion === loc.UP &&
|
|
316
|
-
nextPointRegion === loc.DOWN
|
|
317
|
-
) {
|
|
318
|
-
// if current point is in UP and next point is in DOWN, then we will add 2 points to the the path
|
|
319
|
-
y = getY(to)
|
|
320
|
-
x = (y - y1) / m + x1
|
|
321
|
-
|
|
322
|
-
path +=
|
|
323
|
-
'L' +
|
|
324
|
-
x +
|
|
325
|
-
' ' +
|
|
326
|
-
y +
|
|
327
|
-
' ' +
|
|
328
|
-
RANGE_ENTER +
|
|
329
|
-
JSON.stringify(highlightedRange) +
|
|
330
|
-
STOP
|
|
331
|
-
y = getY(from)
|
|
332
|
-
x = (y - y1) / m + x1
|
|
333
|
-
|
|
334
|
-
path += 'L' + x + ' ' + y + ' ' + RANGE_EXIT
|
|
335
|
-
} else {
|
|
336
|
-
if (
|
|
337
|
-
(currentPointRegion === loc.UP && nextPointRegion === loc.IN) ||
|
|
338
|
-
(currentPointRegion === loc.IN && nextPointRegion === loc.UP)
|
|
339
|
-
) {
|
|
340
|
-
y = getY(to)
|
|
341
|
-
} else if (
|
|
342
|
-
(currentPointRegion === loc.IN && nextPointRegion === loc.DOWN) ||
|
|
343
|
-
(currentPointRegion === loc.DOWN && nextPointRegion === loc.IN)
|
|
344
|
-
) {
|
|
345
|
-
y = getY(from)
|
|
346
|
-
}
|
|
347
|
-
m = (y2 - y1) / (x2 - x1)
|
|
348
|
-
x = (y - y1) / m + x1
|
|
349
|
-
|
|
350
|
-
const prefix =
|
|
351
|
-
nextPointRegion === loc.IN
|
|
352
|
-
? RANGE_ENTER + JSON.stringify(highlightedRange) + STOP
|
|
353
|
-
: RANGE_EXIT
|
|
354
|
-
|
|
355
|
-
path += 'L' + x + ' ' + y + ' ' + prefix
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
} else if (currentPointRegion === loc.IN) {
|
|
360
|
-
// If the last point lies IN, add RANGE_EXIT
|
|
361
|
-
path += RANGE_EXIT
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
return path
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
export const getRegionPathObjects = (
|
|
368
|
-
points: string,
|
|
369
|
-
color: ColorValue,
|
|
370
|
-
currentLineThickness: number,
|
|
371
|
-
thickness: number,
|
|
372
|
-
strokeDashArray: number[],
|
|
373
|
-
isCurved: boolean,
|
|
374
|
-
startDelimeter: string,
|
|
375
|
-
stop: string,
|
|
376
|
-
endDelimeter: string
|
|
377
|
-
): LineProperties[] => {
|
|
378
|
-
const ar: [LineProperties] = [{ d: '', color: '', strokeWidth: 0 }]
|
|
379
|
-
let tempStr = points
|
|
380
|
-
|
|
381
|
-
if (!points.startsWith(startDelimeter)) {
|
|
382
|
-
/** ******************** line upto first segment *****************/
|
|
383
|
-
|
|
384
|
-
const lineSvgProps: LineProperties = {
|
|
385
|
-
d: points.substring(0, points.indexOf(startDelimeter)),
|
|
386
|
-
color,
|
|
387
|
-
strokeWidth: currentLineThickness || thickness
|
|
388
|
-
}
|
|
389
|
-
if (strokeDashArray) {
|
|
390
|
-
lineSvgProps.strokeDashArray = strokeDashArray
|
|
391
|
-
}
|
|
392
|
-
ar.push(lineSvgProps)
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
while (tempStr.includes(startDelimeter)) {
|
|
396
|
-
const startDelimeterIndex = tempStr.indexOf(startDelimeter)
|
|
397
|
-
const stopIndex = tempStr.indexOf(stop)
|
|
398
|
-
const endDelimeterIndex = tempStr.indexOf(endDelimeter)
|
|
399
|
-
|
|
400
|
-
const segmentConfigString = tempStr.substring(
|
|
401
|
-
startDelimeterIndex + startDelimeter.length,
|
|
402
|
-
stopIndex
|
|
403
|
-
)
|
|
404
|
-
|
|
405
|
-
const segmentConfig = JSON.parse(segmentConfigString)
|
|
406
|
-
|
|
407
|
-
const segment = tempStr.substring(
|
|
408
|
-
stopIndex + stop.length,
|
|
409
|
-
endDelimeterIndex
|
|
410
|
-
)
|
|
411
|
-
|
|
412
|
-
const previousSegment = ar[ar.length - 1].d
|
|
413
|
-
const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
|
|
414
|
-
isCurved,
|
|
415
|
-
previousSegment
|
|
416
|
-
)
|
|
417
|
-
|
|
418
|
-
/** ******************** segment line *****************/
|
|
419
|
-
|
|
420
|
-
const lineSvgProps: LineProperties = {
|
|
421
|
-
d: moveToLastPointOfPreviousSegment + segment,
|
|
422
|
-
color: segmentConfig.color ?? color,
|
|
423
|
-
strokeWidth:
|
|
424
|
-
segmentConfig.thickness ?? (currentLineThickness || thickness)
|
|
425
|
-
}
|
|
426
|
-
if (segmentConfig.strokeDashArray) {
|
|
427
|
-
lineSvgProps.strokeDashArray = segmentConfig.strokeDashArray
|
|
428
|
-
}
|
|
429
|
-
ar.push(lineSvgProps)
|
|
430
|
-
|
|
431
|
-
tempStr = tempStr.substring(endDelimeterIndex + endDelimeter.length)
|
|
432
|
-
|
|
433
|
-
const nextDelimiterIndex = tempStr.indexOf(startDelimeter)
|
|
434
|
-
const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex)
|
|
435
|
-
|
|
436
|
-
/** ******************** line upto the next segment *****************/
|
|
437
|
-
|
|
438
|
-
if (
|
|
439
|
-
nextDelimiterIndex !== -1 &&
|
|
440
|
-
stringUptoNextSegment.includes(isCurved ? 'C' : 'L')
|
|
441
|
-
) {
|
|
442
|
-
const previousSegment = ar[ar.length - 1].d
|
|
443
|
-
const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
|
|
444
|
-
isCurved,
|
|
445
|
-
previousSegment
|
|
446
|
-
)
|
|
447
|
-
const lineSvgProps: LineProperties = {
|
|
448
|
-
d: moveToLastPointOfPreviousSegment + ' ' + stringUptoNextSegment,
|
|
449
|
-
color,
|
|
450
|
-
strokeWidth: currentLineThickness || thickness
|
|
451
|
-
}
|
|
452
|
-
if (strokeDashArray) {
|
|
453
|
-
lineSvgProps.strokeDashArray = strokeDashArray
|
|
454
|
-
}
|
|
455
|
-
ar.push(lineSvgProps)
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
/** ******************** line after the last segment *****************/
|
|
460
|
-
|
|
461
|
-
if (tempStr.length) {
|
|
462
|
-
const previousSegment = ar[ar.length - 1].d
|
|
463
|
-
const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
|
|
464
|
-
isCurved,
|
|
465
|
-
previousSegment
|
|
466
|
-
)
|
|
467
|
-
const lineSvgProps: LineProperties = {
|
|
468
|
-
d: moveToLastPointOfPreviousSegment + tempStr,
|
|
469
|
-
color,
|
|
470
|
-
strokeWidth: currentLineThickness || thickness
|
|
471
|
-
}
|
|
472
|
-
if (strokeDashArray) {
|
|
473
|
-
lineSvgProps.strokeDashArray = strokeDashArray
|
|
474
|
-
}
|
|
475
|
-
ar.push(lineSvgProps)
|
|
476
|
-
}
|
|
477
|
-
|
|
478
|
-
ar.shift()
|
|
479
|
-
return ar
|
|
480
|
-
}
|
|
481
|
-
|
|
482
|
-
export const getSegmentedPathObjects = (
|
|
483
|
-
points: string,
|
|
484
|
-
color: ColorValue,
|
|
485
|
-
currentLineThickness: number,
|
|
486
|
-
thickness: number,
|
|
487
|
-
strokeDashArray: number[],
|
|
488
|
-
isCurved: boolean,
|
|
489
|
-
startDelimeter: string,
|
|
490
|
-
endDelimeter: string
|
|
491
|
-
): LineProperties[] => {
|
|
492
|
-
const ar: [LineProperties] = [{ d: '', color: '', strokeWidth: 0 }]
|
|
493
|
-
let tempStr = points
|
|
494
|
-
|
|
495
|
-
if (!points.startsWith(startDelimeter)) {
|
|
496
|
-
/** ******************** line upto first segment *****************/
|
|
497
|
-
|
|
498
|
-
const lineSvgProps: LineProperties = {
|
|
499
|
-
d: points.substring(0, points.indexOf(startDelimeter)),
|
|
500
|
-
color,
|
|
501
|
-
strokeWidth: currentLineThickness || thickness
|
|
502
|
-
}
|
|
503
|
-
if (strokeDashArray) {
|
|
504
|
-
lineSvgProps.strokeDashArray = strokeDashArray
|
|
505
|
-
}
|
|
506
|
-
ar.push(lineSvgProps)
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
while (tempStr.includes(startDelimeter)) {
|
|
510
|
-
const startDelimeterIndex = tempStr.indexOf(startDelimeter)
|
|
511
|
-
const endDelimeterIndex = tempStr.indexOf(endDelimeter)
|
|
512
|
-
|
|
513
|
-
const segmentConfigString = tempStr.substring(
|
|
514
|
-
startDelimeterIndex + startDelimeter.length,
|
|
515
|
-
endDelimeterIndex
|
|
516
|
-
)
|
|
517
|
-
|
|
518
|
-
const segmentConfig = JSON.parse(segmentConfigString)
|
|
519
|
-
|
|
520
|
-
const { startIndex, endIndex } = segmentConfig
|
|
521
|
-
const segmentLength = endIndex - startIndex
|
|
522
|
-
let segment = tempStr.substring(endDelimeterIndex + endDelimeter.length)
|
|
523
|
-
let c = 0
|
|
524
|
-
let s = 0
|
|
525
|
-
let i
|
|
526
|
-
for (i = 0; i < segment.length; i++) {
|
|
527
|
-
if (segment[i] === (isCurved ? 'C' : 'L')) c++
|
|
528
|
-
if (c === segmentLength) {
|
|
529
|
-
if (segment[i] === ' ') s++
|
|
530
|
-
if (s === (isCurved ? 3 : 2)) break
|
|
531
|
-
}
|
|
532
|
-
}
|
|
533
|
-
segment = segment.substring(0, i)
|
|
534
|
-
|
|
535
|
-
const previousSegment = ar[ar.length - 1].d
|
|
536
|
-
const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
|
|
537
|
-
isCurved,
|
|
538
|
-
previousSegment
|
|
539
|
-
)
|
|
540
|
-
|
|
541
|
-
/** ******************** segment line *****************/
|
|
542
|
-
|
|
543
|
-
const lineSvgProps: LineProperties = {
|
|
544
|
-
d: moveToLastPointOfPreviousSegment + segment,
|
|
545
|
-
color: segmentConfig.color ?? color,
|
|
546
|
-
strokeWidth:
|
|
547
|
-
segmentConfig.thickness ?? (currentLineThickness || thickness)
|
|
548
|
-
}
|
|
549
|
-
if (segmentConfig.strokeDashArray) {
|
|
550
|
-
lineSvgProps.strokeDashArray = segmentConfig.strokeDashArray
|
|
551
|
-
}
|
|
552
|
-
ar.push(lineSvgProps)
|
|
553
|
-
|
|
554
|
-
tempStr = tempStr.substring(endDelimeterIndex + endDelimeter.length + i)
|
|
555
|
-
|
|
556
|
-
const nextDelimiterIndex = tempStr.indexOf(startDelimeter)
|
|
557
|
-
const stringUptoNextSegment = tempStr.substring(0, nextDelimiterIndex)
|
|
558
|
-
|
|
559
|
-
/** ******************** line upto the next segment *****************/
|
|
560
|
-
|
|
561
|
-
if (
|
|
562
|
-
nextDelimiterIndex !== -1 &&
|
|
563
|
-
stringUptoNextSegment.includes(isCurved ? 'C' : 'L')
|
|
564
|
-
) {
|
|
565
|
-
const previousSegment = ar[ar.length - 1].d
|
|
566
|
-
const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
|
|
567
|
-
isCurved,
|
|
568
|
-
previousSegment
|
|
569
|
-
)
|
|
570
|
-
const lineSvgProps: LineProperties = {
|
|
571
|
-
d: moveToLastPointOfPreviousSegment + ' ' + stringUptoNextSegment,
|
|
572
|
-
color,
|
|
573
|
-
strokeWidth: currentLineThickness || thickness
|
|
574
|
-
}
|
|
575
|
-
if (strokeDashArray) {
|
|
576
|
-
lineSvgProps.strokeDashArray = strokeDashArray
|
|
577
|
-
}
|
|
578
|
-
ar.push(lineSvgProps)
|
|
579
|
-
}
|
|
580
|
-
}
|
|
581
|
-
|
|
582
|
-
/** ******************** line after the last segment *****************/
|
|
583
|
-
|
|
584
|
-
if (tempStr.length) {
|
|
585
|
-
const previousSegment = ar[ar.length - 1].d
|
|
586
|
-
const moveToLastPointOfPreviousSegment = getPreviousSegmentsLastPoint(
|
|
587
|
-
isCurved,
|
|
588
|
-
previousSegment
|
|
589
|
-
)
|
|
590
|
-
const lineSvgProps: LineProperties = {
|
|
591
|
-
d: moveToLastPointOfPreviousSegment + tempStr,
|
|
592
|
-
color,
|
|
593
|
-
strokeWidth: currentLineThickness || thickness
|
|
594
|
-
}
|
|
595
|
-
if (strokeDashArray) {
|
|
596
|
-
lineSvgProps.strokeDashArray = strokeDashArray
|
|
597
|
-
}
|
|
598
|
-
ar.push(lineSvgProps)
|
|
599
|
-
}
|
|
600
|
-
|
|
601
|
-
ar.shift()
|
|
602
|
-
return ar
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
export const getArrowPoints = (
|
|
606
|
-
arrowTipX: number,
|
|
607
|
-
arrowTipY: number,
|
|
608
|
-
x1: number,
|
|
609
|
-
y1: number,
|
|
610
|
-
arrowLength?: number,
|
|
611
|
-
arrowWidth?: number,
|
|
612
|
-
showArrowBase?: boolean
|
|
613
|
-
): string => {
|
|
614
|
-
const dataLineSlope = (arrowTipY - y1) / (arrowTipX - x1)
|
|
615
|
-
const d = arrowLength ?? 0
|
|
616
|
-
const d2 = (arrowWidth ?? 0) / 2
|
|
617
|
-
const interSectionX =
|
|
618
|
-
arrowTipX - Math.sqrt((d * d) / (dataLineSlope * dataLineSlope + 1))
|
|
619
|
-
const interSectionY = arrowTipY - dataLineSlope * (arrowTipX - interSectionX)
|
|
620
|
-
|
|
621
|
-
let arrowBasex1, arrowBaseY1, arrowBaseX2, arrowBaseY2
|
|
622
|
-
if (dataLineSlope === 0) {
|
|
623
|
-
arrowBasex1 = interSectionX
|
|
624
|
-
arrowBaseY1 = interSectionY - d2
|
|
625
|
-
arrowBaseX2 = interSectionX
|
|
626
|
-
arrowBaseY2 = interSectionY + d2
|
|
627
|
-
} else {
|
|
628
|
-
const arrowBaseSlope = -1 / dataLineSlope
|
|
629
|
-
arrowBasex1 =
|
|
630
|
-
interSectionX -
|
|
631
|
-
Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1))
|
|
632
|
-
arrowBaseY1 = interSectionY - arrowBaseSlope * (interSectionX - arrowBasex1)
|
|
633
|
-
|
|
634
|
-
arrowBaseX2 =
|
|
635
|
-
interSectionX +
|
|
636
|
-
Math.sqrt((d2 * d2) / (arrowBaseSlope * arrowBaseSlope + 1))
|
|
637
|
-
arrowBaseY2 = interSectionY + arrowBaseSlope * (interSectionX - arrowBasex1)
|
|
638
|
-
}
|
|
639
|
-
let arrowPoints = ` M${interSectionX} ${interSectionY}`
|
|
640
|
-
arrowPoints += ` ${showArrowBase ? 'L' : 'M'}${arrowBasex1} ${arrowBaseY1}`
|
|
641
|
-
arrowPoints += ` L${arrowTipX} ${arrowTipY}`
|
|
642
|
-
arrowPoints += ` M${interSectionX} ${interSectionY}`
|
|
643
|
-
arrowPoints += ` ${showArrowBase ? 'L' : 'M'}${arrowBaseX2} ${arrowBaseY2}`
|
|
644
|
-
arrowPoints += ` L${arrowTipX} ${arrowTipY}`
|
|
645
|
-
|
|
646
|
-
return arrowPoints
|
|
647
|
-
}
|
|
648
|
-
|
|
649
|
-
interface ReferenceLinesConfig {
|
|
650
|
-
showReferenceLine1?: boolean
|
|
651
|
-
referenceLine1Position?: number
|
|
652
|
-
referenceLine1Config?: referenceConfigType
|
|
653
|
-
showReferenceLine2?: boolean
|
|
654
|
-
referenceLine2Position?: number
|
|
655
|
-
referenceLine2Config?: referenceConfigType
|
|
656
|
-
showReferenceLine3?: boolean
|
|
657
|
-
referenceLine3Position?: number
|
|
658
|
-
referenceLine3Config?: referenceConfigType
|
|
659
|
-
referenceLinesOverChartContent?: boolean
|
|
660
|
-
}
|
|
661
|
-
interface IgetAxesAndRulesProps extends BarChartPropsType {
|
|
662
|
-
verticalLinesUptoDataPoint?: boolean
|
|
663
|
-
referenceLinesConfig: ReferenceLinesConfig
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
export const getAxesAndRulesProps = (
|
|
667
|
-
props: extendedBarChartPropsType,
|
|
668
|
-
stepValue: number,
|
|
669
|
-
negativeStepValue?: number,
|
|
670
|
-
maxValue?: number
|
|
671
|
-
): IgetAxesAndRulesProps => {
|
|
672
|
-
const secondaryYAxis =
|
|
673
|
-
!props.secondaryYAxis || props.secondaryYAxis === true
|
|
674
|
-
? {}
|
|
675
|
-
: props.secondaryYAxis
|
|
676
|
-
const axesAndRulesProps: IgetAxesAndRulesProps = {
|
|
677
|
-
yAxisSide: props.yAxisSide,
|
|
678
|
-
yAxisLabelContainerStyle: props.yAxisLabelContainerStyle,
|
|
679
|
-
yAxisColor: props.yAxisColor,
|
|
680
|
-
yAxisExtraHeight: props.yAxisExtraHeight,
|
|
681
|
-
trimYAxisAtTop: props.trimYAxisAtTop,
|
|
682
|
-
overflowTop:
|
|
683
|
-
props.overflowTop ?? props.secondaryXAxis
|
|
684
|
-
? AxesAndRulesDefaults.overflowTopWithSecondaryXAxis
|
|
685
|
-
: AxesAndRulesDefaults.overflowTop,
|
|
686
|
-
yAxisThickness: props.yAxisThickness,
|
|
687
|
-
xAxisColor: props.xAxisColor,
|
|
688
|
-
xAxisLength: props.xAxisLength,
|
|
689
|
-
xAxisType: props.xAxisType,
|
|
690
|
-
xAxisTextNumberOfLines: props.xAxisTextNumberOfLines ?? 1,
|
|
691
|
-
xAxisThickness: props.xAxisThickness ?? AxesAndRulesDefaults.xAxisThickness,
|
|
692
|
-
xAxisLabelsHeight: props.xAxisLabelsHeight,
|
|
693
|
-
xAxisLabelsVerticalShift: props.xAxisLabelsVerticalShift,
|
|
694
|
-
dashWidth: props.dashWidth,
|
|
695
|
-
dashGap: props.dashGap,
|
|
696
|
-
backgroundColor: props.backgroundColor,
|
|
697
|
-
hideRules: props.hideRules,
|
|
698
|
-
rulesLength: props.rulesLength,
|
|
699
|
-
rulesType: props.rulesType,
|
|
700
|
-
rulesThickness: props.rulesThickness,
|
|
701
|
-
rulesColor: props.rulesColor,
|
|
702
|
-
rulesConfigArray: props.rulesConfigArray,
|
|
703
|
-
showYAxisIndices: props.showYAxisIndices,
|
|
704
|
-
yAxisIndicesHeight: props.yAxisIndicesHeight,
|
|
705
|
-
yAxisIndicesWidth: props.yAxisIndicesWidth,
|
|
706
|
-
yAxisIndicesColor: props.yAxisIndicesColor,
|
|
707
|
-
hideOrigin: props.hideOrigin,
|
|
708
|
-
hideYAxisText: props.hideYAxisText,
|
|
709
|
-
yAxisTextNumberOfLines: props.yAxisTextNumberOfLines,
|
|
710
|
-
yAxisLabelPrefix: props.yAxisLabelPrefix,
|
|
711
|
-
yAxisLabelSuffix: props.yAxisLabelSuffix,
|
|
712
|
-
yAxisTextStyle: props.yAxisTextStyle,
|
|
713
|
-
|
|
714
|
-
referenceLinesConfig: {
|
|
715
|
-
showReferenceLine1: props.showReferenceLine1,
|
|
716
|
-
referenceLine1Position: props.referenceLine1Position,
|
|
717
|
-
referenceLine1Config: props.referenceLine1Config,
|
|
718
|
-
showReferenceLine2: props.showReferenceLine2,
|
|
719
|
-
referenceLine2Position: props.referenceLine2Position,
|
|
720
|
-
referenceLine2Config: props.referenceLine2Config,
|
|
721
|
-
showReferenceLine3: props.showReferenceLine3,
|
|
722
|
-
referenceLine3Position: props.referenceLine3Position,
|
|
723
|
-
referenceLine3Config: props.referenceLine3Config,
|
|
724
|
-
referenceLinesOverChartContent: props.referenceLinesOverChartContent
|
|
725
|
-
},
|
|
726
|
-
|
|
727
|
-
showVerticalLines: props.showVerticalLines,
|
|
728
|
-
verticalLinesThickness: props.verticalLinesThickness,
|
|
729
|
-
verticalLinesHeight: props.verticalLinesHeight,
|
|
730
|
-
verticalLinesColor: props.verticalLinesColor,
|
|
731
|
-
verticalLinesShift: props.verticalLinesShift,
|
|
732
|
-
verticalLinesStrokeDashArray: props.verticalLinesStrokeDashArray,
|
|
733
|
-
verticalLinesZIndex: props.verticalLinesZIndex,
|
|
734
|
-
verticalLinesSpacing: props.verticalLinesSpacing,
|
|
735
|
-
noOfVerticalLines: props.noOfVerticalLines,
|
|
736
|
-
verticalLinesStrokeLinecap: props.verticalLinesStrokeLinecap,
|
|
737
|
-
|
|
738
|
-
// specific to Line charts-
|
|
739
|
-
verticalLinesUptoDataPoint: props.verticalLinesUptoDataPoint,
|
|
740
|
-
|
|
741
|
-
roundToDigits: props.roundToDigits,
|
|
742
|
-
stepValue,
|
|
743
|
-
negativeStepValue: negativeStepValue ?? stepValue,
|
|
744
|
-
|
|
745
|
-
secondaryYAxis: props.secondaryYAxis,
|
|
746
|
-
formatYLabel: props.formatYLabel,
|
|
747
|
-
secondaryXAxis: props.secondaryXAxis
|
|
748
|
-
}
|
|
749
|
-
if (
|
|
750
|
-
(props.secondaryYAxis ?? props.lineConfig?.isSecondary) &&
|
|
751
|
-
maxValue !== undefined &&
|
|
752
|
-
secondaryYAxis &&
|
|
753
|
-
secondaryYAxis.maxValue === undefined
|
|
754
|
-
) {
|
|
755
|
-
axesAndRulesProps.secondaryYAxis = { ...secondaryYAxis, maxValue }
|
|
756
|
-
}
|
|
757
|
-
|
|
758
|
-
return axesAndRulesProps
|
|
759
|
-
}
|
|
760
|
-
|
|
761
|
-
export const getExtendedContainerHeightWithPadding = (
|
|
762
|
-
containerHeight: number,
|
|
763
|
-
overflowTop?: number
|
|
764
|
-
): number => containerHeight + (overflowTop ?? 0) + 10
|
|
765
|
-
|
|
766
|
-
export const getSecondaryDataWithOffsetIncluded = (
|
|
767
|
-
secondaryData?: barDataItem[] | lineDataItem[],
|
|
768
|
-
secondaryYAxis?: any | undefined,
|
|
769
|
-
showDataPointsForMissingValues?: boolean,
|
|
770
|
-
interpolateMissingValues?: boolean,
|
|
771
|
-
onlyPositive?: boolean
|
|
772
|
-
): barDataItem[] | lineDataItem[] | undefined => {
|
|
773
|
-
if (!secondaryData) return secondaryData
|
|
774
|
-
const nullishHandledData = getInterpolatedData(
|
|
775
|
-
secondaryData,
|
|
776
|
-
showDataPointsForMissingValues,
|
|
777
|
-
interpolateMissingValues,
|
|
778
|
-
onlyPositive
|
|
779
|
-
)
|
|
780
|
-
if (secondaryYAxis?.yAxisOffset) {
|
|
781
|
-
return nullishHandledData.map((item) => {
|
|
782
|
-
item.value = item.value - (secondaryYAxis?.yAxisOffset ?? 0)
|
|
783
|
-
return item
|
|
784
|
-
})
|
|
785
|
-
}
|
|
786
|
-
return nullishHandledData
|
|
787
|
-
}
|
|
788
|
-
|
|
789
|
-
export const getArrowProperty = (
|
|
790
|
-
property: string,
|
|
791
|
-
count: number,
|
|
792
|
-
props: extendedLineChartPropsType,
|
|
793
|
-
defaultArrowConfig: arrowConfigType
|
|
794
|
-
): any => {
|
|
795
|
-
const arrowNumber = `arrowConfig${count}` as keyof extendedLineChartPropsType
|
|
796
|
-
return (
|
|
797
|
-
props[arrowNumber]?.[property] ??
|
|
798
|
-
props['arrowConfig' as keyof extendedLineChartPropsType]?.[property] ??
|
|
799
|
-
defaultArrowConfig[property as keyof arrowConfigType]
|
|
800
|
-
)
|
|
801
|
-
}
|
|
802
|
-
|
|
803
|
-
interface IgetAllArrowProperties {
|
|
804
|
-
arrowLength1: number
|
|
805
|
-
arrowWidth1: number
|
|
806
|
-
arrowStrokeWidth1: number
|
|
807
|
-
arrowStrokeColor1: ColorValue
|
|
808
|
-
arrowFillColor1: ColorValue
|
|
809
|
-
showArrowBase1: boolean
|
|
810
|
-
arrowLength2: number
|
|
811
|
-
arrowWidth2: number
|
|
812
|
-
arrowStrokeWidth2: number
|
|
813
|
-
arrowStrokeColor2: ColorValue
|
|
814
|
-
arrowFillColor2: ColorValue
|
|
815
|
-
showArrowBase2: boolean
|
|
816
|
-
arrowLength3: number
|
|
817
|
-
arrowWidth3: number
|
|
818
|
-
arrowStrokeWidth3: number
|
|
819
|
-
arrowStrokeColor3: ColorValue
|
|
820
|
-
arrowFillColor3: ColorValue
|
|
821
|
-
showArrowBase3: boolean
|
|
822
|
-
arrowLength4: number
|
|
823
|
-
arrowWidth4: number
|
|
824
|
-
arrowStrokeWidth4: number
|
|
825
|
-
arrowStrokeColor4: ColorValue
|
|
826
|
-
arrowFillColor4: ColorValue
|
|
827
|
-
showArrowBase4: boolean
|
|
828
|
-
arrowLength5: number
|
|
829
|
-
arrowWidth5: number
|
|
830
|
-
arrowStrokeWidth5: number
|
|
831
|
-
arrowStrokeColor5: ColorValue
|
|
832
|
-
arrowFillColor5: ColorValue
|
|
833
|
-
showArrowBase5: boolean
|
|
834
|
-
arrowLengthsFromSet?: number[]
|
|
835
|
-
arrowWidthsFromSet?: number[]
|
|
836
|
-
arrowStrokeWidthsFromSet?: number[]
|
|
837
|
-
arrowStrokeColorsFromSet?: ColorValue[]
|
|
838
|
-
arrowFillColorsFromSet?: ColorValue[]
|
|
839
|
-
showArrowBasesFromSet?: boolean[]
|
|
840
|
-
}
|
|
841
|
-
|
|
842
|
-
export const getAllArrowProperties = (
|
|
843
|
-
props: extendedLineChartPropsType,
|
|
844
|
-
defaultArrowConfig: arrowConfigType
|
|
845
|
-
): IgetAllArrowProperties => {
|
|
846
|
-
const arrowLength1 = getArrowProperty('length', 1, props, defaultArrowConfig)
|
|
847
|
-
const arrowWidth1 = getArrowProperty('width', 1, props, defaultArrowConfig)
|
|
848
|
-
const arrowStrokeWidth1 = getArrowProperty(
|
|
849
|
-
'strokeWidth',
|
|
850
|
-
1,
|
|
851
|
-
props,
|
|
852
|
-
defaultArrowConfig
|
|
853
|
-
)
|
|
854
|
-
const arrowStrokeColor1 = getArrowProperty(
|
|
855
|
-
'strokeColor',
|
|
856
|
-
1,
|
|
857
|
-
props,
|
|
858
|
-
defaultArrowConfig
|
|
859
|
-
)
|
|
860
|
-
const arrowFillColor1 = getArrowProperty(
|
|
861
|
-
'fillColor',
|
|
862
|
-
1,
|
|
863
|
-
props,
|
|
864
|
-
defaultArrowConfig
|
|
865
|
-
)
|
|
866
|
-
const showArrowBase1 = getArrowProperty(
|
|
867
|
-
'showArrowBase',
|
|
868
|
-
1,
|
|
869
|
-
props,
|
|
870
|
-
defaultArrowConfig
|
|
871
|
-
)
|
|
872
|
-
|
|
873
|
-
const arrowLength2 = getArrowProperty('length', 2, props, defaultArrowConfig)
|
|
874
|
-
const arrowWidth2 = getArrowProperty('width', 2, props, defaultArrowConfig)
|
|
875
|
-
const arrowStrokeWidth2 = getArrowProperty(
|
|
876
|
-
'strokeWidth',
|
|
877
|
-
2,
|
|
878
|
-
props,
|
|
879
|
-
defaultArrowConfig
|
|
880
|
-
)
|
|
881
|
-
const arrowStrokeColor2 = getArrowProperty(
|
|
882
|
-
'strokeColor',
|
|
883
|
-
2,
|
|
884
|
-
props,
|
|
885
|
-
defaultArrowConfig
|
|
886
|
-
)
|
|
887
|
-
const arrowFillColor2 = getArrowProperty(
|
|
888
|
-
'fillColor',
|
|
889
|
-
2,
|
|
890
|
-
props,
|
|
891
|
-
defaultArrowConfig
|
|
892
|
-
)
|
|
893
|
-
const showArrowBase2 = getArrowProperty(
|
|
894
|
-
'showArrowBase',
|
|
895
|
-
2,
|
|
896
|
-
props,
|
|
897
|
-
defaultArrowConfig
|
|
898
|
-
)
|
|
899
|
-
|
|
900
|
-
const arrowLength3 = getArrowProperty('length', 3, props, defaultArrowConfig)
|
|
901
|
-
const arrowWidth3 = getArrowProperty('width', 3, props, defaultArrowConfig)
|
|
902
|
-
const arrowStrokeWidth3 = getArrowProperty(
|
|
903
|
-
'strokeWidth',
|
|
904
|
-
3,
|
|
905
|
-
props,
|
|
906
|
-
defaultArrowConfig
|
|
907
|
-
)
|
|
908
|
-
const arrowStrokeColor3 = getArrowProperty(
|
|
909
|
-
'strokeColor',
|
|
910
|
-
3,
|
|
911
|
-
props,
|
|
912
|
-
defaultArrowConfig
|
|
913
|
-
)
|
|
914
|
-
const arrowFillColor3 = getArrowProperty(
|
|
915
|
-
'fillColor',
|
|
916
|
-
3,
|
|
917
|
-
props,
|
|
918
|
-
defaultArrowConfig
|
|
919
|
-
)
|
|
920
|
-
const showArrowBase3 = getArrowProperty(
|
|
921
|
-
'showArrowBase',
|
|
922
|
-
3,
|
|
923
|
-
props,
|
|
924
|
-
defaultArrowConfig
|
|
925
|
-
)
|
|
926
|
-
|
|
927
|
-
const arrowLength4 = getArrowProperty('length', 4, props, defaultArrowConfig)
|
|
928
|
-
const arrowWidth4 = getArrowProperty('width', 4, props, defaultArrowConfig)
|
|
929
|
-
const arrowStrokeWidth4 = getArrowProperty(
|
|
930
|
-
'strokeWidth',
|
|
931
|
-
4,
|
|
932
|
-
props,
|
|
933
|
-
defaultArrowConfig
|
|
934
|
-
)
|
|
935
|
-
const arrowStrokeColor4 = getArrowProperty(
|
|
936
|
-
'strokeColor',
|
|
937
|
-
4,
|
|
938
|
-
props,
|
|
939
|
-
defaultArrowConfig
|
|
940
|
-
)
|
|
941
|
-
const arrowFillColor4 = getArrowProperty(
|
|
942
|
-
'fillColor',
|
|
943
|
-
4,
|
|
944
|
-
props,
|
|
945
|
-
defaultArrowConfig
|
|
946
|
-
)
|
|
947
|
-
const showArrowBase4 = getArrowProperty(
|
|
948
|
-
'showArrowBase',
|
|
949
|
-
4,
|
|
950
|
-
props,
|
|
951
|
-
defaultArrowConfig
|
|
952
|
-
)
|
|
953
|
-
|
|
954
|
-
const arrowLength5 = getArrowProperty('length', 5, props, defaultArrowConfig)
|
|
955
|
-
const arrowWidth5 = getArrowProperty('width', 5, props, defaultArrowConfig)
|
|
956
|
-
const arrowStrokeWidth5 = getArrowProperty(
|
|
957
|
-
'strokeWidth',
|
|
958
|
-
5,
|
|
959
|
-
props,
|
|
960
|
-
defaultArrowConfig
|
|
961
|
-
)
|
|
962
|
-
const arrowStrokeColor5 = getArrowProperty(
|
|
963
|
-
'strokeColor',
|
|
964
|
-
5,
|
|
965
|
-
props,
|
|
966
|
-
defaultArrowConfig
|
|
967
|
-
)
|
|
968
|
-
const arrowFillColor5 = getArrowProperty(
|
|
969
|
-
'fillColor',
|
|
970
|
-
5,
|
|
971
|
-
props,
|
|
972
|
-
defaultArrowConfig
|
|
973
|
-
)
|
|
974
|
-
const showArrowBase5 = getArrowProperty(
|
|
975
|
-
'showArrowBase',
|
|
976
|
-
5,
|
|
977
|
-
props,
|
|
978
|
-
defaultArrowConfig
|
|
979
|
-
)
|
|
980
|
-
|
|
981
|
-
const arrowLengthsFromSet = props.dataSet?.map(
|
|
982
|
-
(item) => item?.arrowConfig?.length ?? arrowLength1
|
|
983
|
-
)
|
|
984
|
-
const arrowWidthsFromSet = props.dataSet?.map(
|
|
985
|
-
(item) => item?.arrowConfig?.width ?? arrowWidth1
|
|
986
|
-
)
|
|
987
|
-
const arrowStrokeWidthsFromSet = props.dataSet?.map(
|
|
988
|
-
(item) => item?.arrowConfig?.strokeWidth ?? arrowStrokeWidth1
|
|
989
|
-
)
|
|
990
|
-
const arrowStrokeColorsFromSet = props.dataSet?.map(
|
|
991
|
-
(item) => item?.arrowConfig?.strokeColor ?? arrowStrokeColor1
|
|
992
|
-
)
|
|
993
|
-
const arrowFillColorsFromSet = props.dataSet?.map(
|
|
994
|
-
(item) => item?.arrowConfig?.fillColor ?? arrowFillColor1
|
|
995
|
-
)
|
|
996
|
-
const showArrowBasesFromSet = props.dataSet?.map(
|
|
997
|
-
(item) => item?.arrowConfig?.showArrowBase ?? showArrowBase1
|
|
998
|
-
)
|
|
999
|
-
|
|
1000
|
-
return {
|
|
1001
|
-
arrowLength1,
|
|
1002
|
-
arrowWidth1,
|
|
1003
|
-
arrowStrokeWidth1,
|
|
1004
|
-
arrowStrokeColor1,
|
|
1005
|
-
arrowFillColor1,
|
|
1006
|
-
showArrowBase1,
|
|
1007
|
-
arrowLength2,
|
|
1008
|
-
arrowWidth2,
|
|
1009
|
-
arrowStrokeWidth2,
|
|
1010
|
-
arrowStrokeColor2,
|
|
1011
|
-
arrowFillColor2,
|
|
1012
|
-
showArrowBase2,
|
|
1013
|
-
arrowLength3,
|
|
1014
|
-
arrowWidth3,
|
|
1015
|
-
arrowStrokeWidth3,
|
|
1016
|
-
arrowStrokeColor3,
|
|
1017
|
-
arrowFillColor3,
|
|
1018
|
-
showArrowBase3,
|
|
1019
|
-
arrowLength4,
|
|
1020
|
-
arrowWidth4,
|
|
1021
|
-
arrowStrokeWidth4,
|
|
1022
|
-
arrowStrokeColor4,
|
|
1023
|
-
arrowFillColor4,
|
|
1024
|
-
showArrowBase4,
|
|
1025
|
-
arrowLength5,
|
|
1026
|
-
arrowWidth5,
|
|
1027
|
-
arrowStrokeWidth5,
|
|
1028
|
-
arrowStrokeColor5,
|
|
1029
|
-
arrowFillColor5,
|
|
1030
|
-
showArrowBase5,
|
|
1031
|
-
arrowLengthsFromSet,
|
|
1032
|
-
arrowWidthsFromSet,
|
|
1033
|
-
arrowStrokeWidthsFromSet,
|
|
1034
|
-
arrowStrokeColorsFromSet,
|
|
1035
|
-
arrowFillColorsFromSet,
|
|
1036
|
-
showArrowBasesFromSet
|
|
1037
|
-
}
|
|
1038
|
-
}
|
|
1039
|
-
|
|
1040
|
-
interface MaxAndMin {
|
|
1041
|
-
maxItem: number
|
|
1042
|
-
minItem: number
|
|
1043
|
-
}
|
|
1044
|
-
|
|
1045
|
-
export const maxAndMinUtil = (
|
|
1046
|
-
maxItem: number,
|
|
1047
|
-
minItem: number,
|
|
1048
|
-
roundToDigits?: number,
|
|
1049
|
-
showFractionalValues?: boolean
|
|
1050
|
-
): MaxAndMin => {
|
|
1051
|
-
if (showFractionalValues ?? roundToDigits) {
|
|
1052
|
-
maxItem *= 10 * (roundToDigits ?? 1)
|
|
1053
|
-
maxItem = maxItem + (10 - (maxItem % 10))
|
|
1054
|
-
maxItem /= 10 * (roundToDigits ?? 1)
|
|
1055
|
-
maxItem = parseFloat(maxItem.toFixed(roundToDigits ?? 1))
|
|
1056
|
-
|
|
1057
|
-
if (minItem !== 0) {
|
|
1058
|
-
minItem *= 10 * (roundToDigits ?? 1)
|
|
1059
|
-
minItem = minItem - (10 + (minItem % 10))
|
|
1060
|
-
minItem /= 10 * (roundToDigits ?? 1)
|
|
1061
|
-
minItem = parseFloat(minItem.toFixed(roundToDigits ?? 1))
|
|
1062
|
-
}
|
|
1063
|
-
} else {
|
|
1064
|
-
maxItem = maxItem + (10 - (maxItem % 10))
|
|
1065
|
-
if (minItem !== 0) {
|
|
1066
|
-
minItem *= 10
|
|
1067
|
-
minItem = minItem - (10 + (minItem % 10))
|
|
1068
|
-
minItem /= 10
|
|
1069
|
-
}
|
|
1070
|
-
}
|
|
1071
|
-
|
|
1072
|
-
return { maxItem, minItem }
|
|
1073
|
-
}
|
|
1074
|
-
|
|
1075
|
-
export const computeMaxAndMinItems = (
|
|
1076
|
-
data: any[] | undefined,
|
|
1077
|
-
roundToDigits?: number,
|
|
1078
|
-
showFractionalValues?: boolean
|
|
1079
|
-
): MaxAndMin => {
|
|
1080
|
-
if (!data?.length) {
|
|
1081
|
-
return { maxItem: 0, minItem: 0 }
|
|
1082
|
-
}
|
|
1083
|
-
let maxItem = 0
|
|
1084
|
-
let minItem = 0
|
|
1085
|
-
|
|
1086
|
-
data.forEach((item: any) => {
|
|
1087
|
-
if (item.value > maxItem) {
|
|
1088
|
-
maxItem = item.value
|
|
1089
|
-
}
|
|
1090
|
-
if (item.value < minItem) {
|
|
1091
|
-
minItem = item.value
|
|
1092
|
-
}
|
|
1093
|
-
})
|
|
1094
|
-
|
|
1095
|
-
return maxAndMinUtil(maxItem, minItem, roundToDigits, showFractionalValues)
|
|
1096
|
-
}
|
|
1097
|
-
|
|
1098
|
-
export const getLabelTextUtil = (
|
|
1099
|
-
val: string,
|
|
1100
|
-
index: number,
|
|
1101
|
-
showFractionalValues?: boolean,
|
|
1102
|
-
yAxisLabelTexts?: string[],
|
|
1103
|
-
yAxisOffset?: number,
|
|
1104
|
-
yAxisLabelPrefix?: string,
|
|
1105
|
-
yAxisLabelSuffix?: string,
|
|
1106
|
-
roundToDigits?: number,
|
|
1107
|
-
formatYLabel?: (label: string) => string
|
|
1108
|
-
): string => {
|
|
1109
|
-
let label = ''
|
|
1110
|
-
if (showFractionalValues || yAxisLabelTexts?.[index] !== undefined) {
|
|
1111
|
-
if (yAxisLabelTexts?.[index]) return val
|
|
1112
|
-
if (val) {
|
|
1113
|
-
label = isNaN(Number(val))
|
|
1114
|
-
? val
|
|
1115
|
-
: (Number(val) + (yAxisOffset ?? 0)).toFixed(roundToDigits)
|
|
1116
|
-
} else {
|
|
1117
|
-
label = yAxisOffset?.toString() ?? '0'
|
|
1118
|
-
}
|
|
1119
|
-
} else {
|
|
1120
|
-
if (val) {
|
|
1121
|
-
label = val.toString().split('.')[0]
|
|
1122
|
-
label = (Number(label) + (yAxisOffset ?? 0)).toString()
|
|
1123
|
-
} else {
|
|
1124
|
-
label = yAxisOffset?.toString() ?? '0'
|
|
1125
|
-
}
|
|
1126
|
-
}
|
|
1127
|
-
|
|
1128
|
-
return (
|
|
1129
|
-
yAxisLabelPrefix +
|
|
1130
|
-
(formatYLabel ? formatYLabel(label) : label) +
|
|
1131
|
-
yAxisLabelSuffix
|
|
1132
|
-
)
|
|
1133
|
-
}
|
|
1134
|
-
|
|
1135
|
-
export const getXForLineInBar = (
|
|
1136
|
-
index: number,
|
|
1137
|
-
firstBarWidth: number,
|
|
1138
|
-
currentBarWidth: number,
|
|
1139
|
-
yAxisLabelWidth: number,
|
|
1140
|
-
lineConfig: any,
|
|
1141
|
-
spacing: number
|
|
1142
|
-
): number =>
|
|
1143
|
-
yAxisLabelWidth +
|
|
1144
|
-
firstBarWidth / 2 +
|
|
1145
|
-
lineConfig.initialSpacing +
|
|
1146
|
-
(currentBarWidth + (lineConfig.spacing ?? spacing)) * index +
|
|
1147
|
-
lineConfig.shiftX -
|
|
1148
|
-
lineConfig.dataPointsWidth / 2 -
|
|
1149
|
-
4
|
|
1150
|
-
|
|
1151
|
-
export const getYForLineInBar = (
|
|
1152
|
-
value: number | undefined,
|
|
1153
|
-
shiftY: number | undefined,
|
|
1154
|
-
containerHeight: number,
|
|
1155
|
-
maxValue: number
|
|
1156
|
-
): number =>
|
|
1157
|
-
containerHeight - (shiftY ?? 0) - ((value ?? 0) * containerHeight) / maxValue
|
|
1158
|
-
|
|
1159
|
-
export const clone = (obj: any): any => {
|
|
1160
|
-
if (obj === null || typeof obj !== 'object' || 'isActiveClone' in obj) {
|
|
1161
|
-
return obj
|
|
1162
|
-
}
|
|
1163
|
-
|
|
1164
|
-
let temp
|
|
1165
|
-
if (obj instanceof Date) temp = new Date(obj)
|
|
1166
|
-
else temp = obj.constructor()
|
|
1167
|
-
|
|
1168
|
-
for (const key in obj) {
|
|
1169
|
-
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
1170
|
-
obj.isActiveClone = null
|
|
1171
|
-
temp[key] = clone(obj[key])
|
|
1172
|
-
delete obj.isActiveClone
|
|
1173
|
-
}
|
|
1174
|
-
}
|
|
1175
|
-
return temp
|
|
1176
|
-
}
|
|
1177
|
-
|
|
1178
|
-
export const getLineConfigForBarChart = (
|
|
1179
|
-
lineConfig: lineConfigType,
|
|
1180
|
-
barInitialSpacing: number
|
|
1181
|
-
): lineConfigType => {
|
|
1182
|
-
return {
|
|
1183
|
-
initialSpacing:
|
|
1184
|
-
lineConfig.initialSpacing ??
|
|
1185
|
-
barInitialSpacing ??
|
|
1186
|
-
defaultLineConfig.initialSpacing,
|
|
1187
|
-
spacing: lineConfig.spacing,
|
|
1188
|
-
curved: lineConfig.curved ?? defaultLineConfig.curved,
|
|
1189
|
-
curvature: lineConfig.curvature ?? defaultLineConfig.curvature,
|
|
1190
|
-
curveType: lineConfig.curveType ?? defaultLineConfig.curveType,
|
|
1191
|
-
isAnimated: lineConfig.isAnimated ?? defaultLineConfig.isAnimated,
|
|
1192
|
-
animationDuration:
|
|
1193
|
-
lineConfig.animationDuration ?? defaultLineConfig.animationDuration,
|
|
1194
|
-
thickness: lineConfig.thickness ?? defaultLineConfig.thickness,
|
|
1195
|
-
color: lineConfig.color ?? defaultLineConfig.color,
|
|
1196
|
-
hideDataPoints:
|
|
1197
|
-
lineConfig.hideDataPoints ?? defaultLineConfig.hideDataPoints,
|
|
1198
|
-
dataPointsShape:
|
|
1199
|
-
lineConfig.dataPointsShape ?? defaultLineConfig.dataPointsShape,
|
|
1200
|
-
dataPointsHeight:
|
|
1201
|
-
lineConfig.dataPointsHeight ?? defaultLineConfig.dataPointsHeight,
|
|
1202
|
-
dataPointsWidth:
|
|
1203
|
-
lineConfig.dataPointsWidth ?? defaultLineConfig.dataPointsWidth,
|
|
1204
|
-
dataPointsColor:
|
|
1205
|
-
lineConfig.dataPointsColor ?? defaultLineConfig.dataPointsColor,
|
|
1206
|
-
dataPointsRadius:
|
|
1207
|
-
lineConfig.dataPointsRadius ?? defaultLineConfig.dataPointsRadius,
|
|
1208
|
-
textColor: lineConfig.textColor ?? defaultLineConfig.textColor,
|
|
1209
|
-
textFontSize: lineConfig.textFontSize ?? defaultLineConfig.textFontSize,
|
|
1210
|
-
textShiftX: lineConfig.textShiftX ?? defaultLineConfig.textShiftX,
|
|
1211
|
-
textShiftY: lineConfig.textShiftY ?? defaultLineConfig.textShiftY,
|
|
1212
|
-
shiftX: lineConfig.shiftX ?? defaultLineConfig.shiftX,
|
|
1213
|
-
shiftY: lineConfig.shiftY ?? defaultLineConfig.shiftY,
|
|
1214
|
-
delay: lineConfig.delay ?? defaultLineConfig.delay,
|
|
1215
|
-
startIndex: lineConfig.startIndex ?? defaultLineConfig.startIndex,
|
|
1216
|
-
endIndex:
|
|
1217
|
-
lineConfig.endIndex === 0
|
|
1218
|
-
? 0
|
|
1219
|
-
: lineConfig.endIndex ?? defaultLineConfig.endIndex,
|
|
1220
|
-
|
|
1221
|
-
showArrow: lineConfig.showArrow ?? defaultLineConfig.showArrow,
|
|
1222
|
-
arrowConfig: {
|
|
1223
|
-
length:
|
|
1224
|
-
lineConfig.arrowConfig?.length ?? defaultLineConfig.arrowConfig?.length,
|
|
1225
|
-
width:
|
|
1226
|
-
lineConfig.arrowConfig?.width ?? defaultLineConfig.arrowConfig?.width,
|
|
1227
|
-
|
|
1228
|
-
strokeWidth:
|
|
1229
|
-
lineConfig.arrowConfig?.strokeWidth ??
|
|
1230
|
-
defaultLineConfig.arrowConfig?.strokeWidth,
|
|
1231
|
-
|
|
1232
|
-
strokeColor:
|
|
1233
|
-
lineConfig.arrowConfig?.strokeColor ??
|
|
1234
|
-
defaultLineConfig.arrowConfig?.strokeColor,
|
|
1235
|
-
|
|
1236
|
-
fillColor:
|
|
1237
|
-
lineConfig.arrowConfig?.fillColor ??
|
|
1238
|
-
defaultLineConfig.arrowConfig?.fillColor,
|
|
1239
|
-
|
|
1240
|
-
showArrowBase:
|
|
1241
|
-
lineConfig.arrowConfig?.showArrowBase ??
|
|
1242
|
-
defaultLineConfig.arrowConfig?.showArrowBase
|
|
1243
|
-
},
|
|
1244
|
-
customDataPoint: lineConfig.customDataPoint,
|
|
1245
|
-
isSecondary: lineConfig.isSecondary ?? defaultLineConfig.isSecondary,
|
|
1246
|
-
focusEnabled: lineConfig.focusEnabled ?? defaultLineConfig.focusEnabled,
|
|
1247
|
-
focusedDataPointColor:
|
|
1248
|
-
lineConfig.focusedDataPointColor ??
|
|
1249
|
-
defaultLineConfig.focusedDataPointColor,
|
|
1250
|
-
focusedDataPointRadius:
|
|
1251
|
-
lineConfig.focusedDataPointRadius ??
|
|
1252
|
-
defaultLineConfig.focusedDataPointRadius,
|
|
1253
|
-
focusedDataPointIndex: lineConfig.focusedDataPointIndex
|
|
1254
|
-
}
|
|
1255
|
-
}
|
|
1256
|
-
|
|
1257
|
-
export const getNoOfSections = (
|
|
1258
|
-
noOfSections: number | undefined,
|
|
1259
|
-
maxValue: number | undefined,
|
|
1260
|
-
stepValue: number | undefined
|
|
1261
|
-
): number =>
|
|
1262
|
-
maxValue && stepValue
|
|
1263
|
-
? maxValue / stepValue
|
|
1264
|
-
: noOfSections ?? AxesAndRulesDefaults.noOfSections
|
|
1265
|
-
|
|
1266
|
-
export const getMaxValue = (
|
|
1267
|
-
maxValue: number | undefined,
|
|
1268
|
-
stepValue: number | undefined,
|
|
1269
|
-
noOfSections: number,
|
|
1270
|
-
maxItem: number
|
|
1271
|
-
): number => maxValue ?? (stepValue ? stepValue * noOfSections : maxItem)
|
|
1272
|
-
|
|
1273
|
-
export const getMostNegativeValue = (
|
|
1274
|
-
minValue: number | undefined,
|
|
1275
|
-
stepValue: number | undefined,
|
|
1276
|
-
noOfSections: number | undefined,
|
|
1277
|
-
minItem: number
|
|
1278
|
-
): number =>
|
|
1279
|
-
minValue ?? (stepValue && noOfSections ? stepValue * noOfSections : minItem)
|
|
1280
|
-
|
|
1281
|
-
export const getBarFrontColor = (
|
|
1282
|
-
isFocused?: boolean,
|
|
1283
|
-
focusedBarConfig?: FocusedBarConfig,
|
|
1284
|
-
itemFrontColor?: ColorValue,
|
|
1285
|
-
frontColor?: ColorValue,
|
|
1286
|
-
isThreeD?: boolean
|
|
1287
|
-
): ColorValue => {
|
|
1288
|
-
if (isFocused) {
|
|
1289
|
-
return (
|
|
1290
|
-
focusedBarConfig?.color ??
|
|
1291
|
-
(isThreeD
|
|
1292
|
-
? BarDefaults.focusedThreeDBarFrontColor
|
|
1293
|
-
: BarDefaults.focusedBarFrontColor)
|
|
1294
|
-
)
|
|
1295
|
-
}
|
|
1296
|
-
return (
|
|
1297
|
-
itemFrontColor ??
|
|
1298
|
-
frontColor ??
|
|
1299
|
-
(isThreeD ? BarDefaults.threeDBarFrontColor : BarDefaults.frontColor)
|
|
1300
|
-
)
|
|
1301
|
-
}
|
|
1302
|
-
|
|
1303
|
-
export const getBarSideColor = (
|
|
1304
|
-
isFocused?: boolean,
|
|
1305
|
-
focusedBarConfig?: FocusedBarConfig,
|
|
1306
|
-
itemSideColor?: ColorValue,
|
|
1307
|
-
sideColor?: ColorValue
|
|
1308
|
-
): ColorValue | undefined => {
|
|
1309
|
-
if (isFocused) {
|
|
1310
|
-
return focusedBarConfig?.sideColor ?? BarDefaults.focusedBarSideColor
|
|
1311
|
-
}
|
|
1312
|
-
return itemSideColor ?? sideColor
|
|
1313
|
-
}
|
|
1314
|
-
|
|
1315
|
-
export const getBarTopColor = (
|
|
1316
|
-
isFocused?: boolean,
|
|
1317
|
-
focusedBarConfig?: FocusedBarConfig,
|
|
1318
|
-
itemTopColor?: ColorValue,
|
|
1319
|
-
topColor?: ColorValue
|
|
1320
|
-
): ColorValue | undefined => {
|
|
1321
|
-
if (isFocused) {
|
|
1322
|
-
return focusedBarConfig?.topColor ?? BarDefaults.focusedBarTopColor
|
|
1323
|
-
}
|
|
1324
|
-
return itemTopColor ?? topColor
|
|
1325
|
-
}
|
|
1326
|
-
|
|
1327
|
-
export const getBarWidth = (
|
|
1328
|
-
isFocused?: boolean,
|
|
1329
|
-
focusedBarConfig?: FocusedBarConfig,
|
|
1330
|
-
itemBarWidth?: number,
|
|
1331
|
-
barWidth?: number
|
|
1332
|
-
): number => {
|
|
1333
|
-
const localBarWidth = itemBarWidth ?? barWidth ?? BarDefaults.barWidth
|
|
1334
|
-
if (isFocused) {
|
|
1335
|
-
return focusedBarConfig?.width ?? localBarWidth
|
|
1336
|
-
}
|
|
1337
|
-
return localBarWidth
|
|
1338
|
-
}
|
|
1339
|
-
|
|
1340
|
-
export const getInterpolatedData = (
|
|
1341
|
-
dataParam: lineDataItem[],
|
|
1342
|
-
showDataPointsForMissingValues?: boolean,
|
|
1343
|
-
interpolateMissingValues?: boolean,
|
|
1344
|
-
onlyPositive?: boolean
|
|
1345
|
-
): lineDataItem[] => {
|
|
1346
|
-
if (!interpolateMissingValues) {
|
|
1347
|
-
return dataParam.map((item) => {
|
|
1348
|
-
if (typeof item.value !== 'number') {
|
|
1349
|
-
if (showDataPointsForMissingValues) return { ...item, value: 0 }
|
|
1350
|
-
return { ...item, value: 0, hideDataPoint: true }
|
|
1351
|
-
}
|
|
1352
|
-
return item
|
|
1353
|
-
})
|
|
1354
|
-
}
|
|
1355
|
-
if (!interpolateMissingValues) return dataParam
|
|
1356
|
-
const data: lineDataItem[] = clone(dataParam)
|
|
1357
|
-
const n = data.length
|
|
1358
|
-
|
|
1359
|
-
/** ************ PRE-PROCESSING **************/
|
|
1360
|
-
let numericValue: number
|
|
1361
|
-
const numericValuesLength = data.filter((item) => {
|
|
1362
|
-
const isNum = typeof item.value === 'number'
|
|
1363
|
-
if (isNum) {
|
|
1364
|
-
numericValue = item.value
|
|
1365
|
-
return true
|
|
1366
|
-
}
|
|
1367
|
-
return false
|
|
1368
|
-
}).length
|
|
1369
|
-
|
|
1370
|
-
if (!numericValuesLength) return []
|
|
1371
|
-
|
|
1372
|
-
if (numericValuesLength === 1) {
|
|
1373
|
-
data.forEach((item) => {
|
|
1374
|
-
if (!showDataPointsForMissingValues && typeof item.value !== 'number') {
|
|
1375
|
-
item.hideDataPoint = true
|
|
1376
|
-
}
|
|
1377
|
-
item.value = numericValue
|
|
1378
|
-
})
|
|
1379
|
-
return data
|
|
1380
|
-
}
|
|
1381
|
-
/**********************************************************************/
|
|
1382
|
-
|
|
1383
|
-
data.forEach((item, index) => {
|
|
1384
|
-
if (typeof item.value === 'number') return
|
|
1385
|
-
// Cut the line in 2 halves-> pre and post
|
|
1386
|
-
// Now there are 4 possibilities-
|
|
1387
|
-
// 1. Both pre and post have valid values
|
|
1388
|
-
// 2. Only pre has valid value
|
|
1389
|
-
// 3. Only post has valid value
|
|
1390
|
-
// 4. None has valid value -> this is already handled in preprocessing
|
|
1391
|
-
|
|
1392
|
-
const pre: lineDataItem[] = data.slice(0, index)
|
|
1393
|
-
const post: lineDataItem[] = data.slice(index + 1, n)
|
|
1394
|
-
|
|
1395
|
-
const preValidIndex = pre.findLastIndex(
|
|
1396
|
-
(item: lineDataItem) => typeof item.value === 'number'
|
|
1397
|
-
)
|
|
1398
|
-
const postValidInd = post.findIndex(
|
|
1399
|
-
(item) => typeof item.value === 'number'
|
|
1400
|
-
)
|
|
1401
|
-
const postValidIndex = postValidInd + index + 1
|
|
1402
|
-
|
|
1403
|
-
let count, step
|
|
1404
|
-
|
|
1405
|
-
// 1. Both pre and post have valid values
|
|
1406
|
-
if (preValidIndex !== -1 && postValidInd !== -1) {
|
|
1407
|
-
count = postValidIndex - preValidIndex
|
|
1408
|
-
step = (data[postValidIndex].value - data[preValidIndex].value) / count
|
|
1409
|
-
data[index].value =
|
|
1410
|
-
data[preValidIndex].value + step * (index - preValidIndex)
|
|
1411
|
-
} else if (preValidIndex !== -1 && postValidInd === -1) {
|
|
1412
|
-
// 2. Only pre has valid value
|
|
1413
|
-
// Now there are 2 possibilities-
|
|
1414
|
-
// 1. There's only 1 valid value in the pre -> this is already handled in preprocessing
|
|
1415
|
-
// 2. There are more than valid values in pre
|
|
1416
|
-
const secondPre: lineDataItem[] = data.slice(0, preValidIndex)
|
|
1417
|
-
const secondPreIndex = secondPre.findLastIndex(
|
|
1418
|
-
(item: lineDataItem) => typeof item.value === 'number'
|
|
1419
|
-
)
|
|
1420
|
-
|
|
1421
|
-
count = preValidIndex - secondPreIndex
|
|
1422
|
-
step = (data[secondPreIndex].value - data[preValidIndex].value) / count
|
|
1423
|
-
data[index].value =
|
|
1424
|
-
data[preValidIndex].value - step * (index - preValidIndex)
|
|
1425
|
-
} else if (preValidIndex === -1 && postValidInd !== -1) {
|
|
1426
|
-
// 3. Only post has valid value
|
|
1427
|
-
// Now there are 2 possibilities-
|
|
1428
|
-
// 1. There's only 1 valid value in the post -> this is already handled in preprocessing
|
|
1429
|
-
// 2. There are more than valid values in post
|
|
1430
|
-
|
|
1431
|
-
const secondPost: lineDataItem[] = data.slice(postValidIndex + 1, n)
|
|
1432
|
-
const secondPostInd = secondPost.findIndex(
|
|
1433
|
-
(item) => typeof item.value === 'number'
|
|
1434
|
-
)
|
|
1435
|
-
const secondPostIndex = secondPostInd + postValidIndex + 1
|
|
1436
|
-
|
|
1437
|
-
count = secondPostIndex - postValidIndex
|
|
1438
|
-
step = (data[secondPostIndex].value - data[postValidIndex].value) / count
|
|
1439
|
-
data[index].value =
|
|
1440
|
-
data[postValidIndex].value - step * (postValidIndex - index)
|
|
1441
|
-
}
|
|
1442
|
-
|
|
1443
|
-
// hide data point (since it is interpolated)
|
|
1444
|
-
if (!showDataPointsForMissingValues) {
|
|
1445
|
-
item.hideDataPoint = true
|
|
1446
|
-
}
|
|
1447
|
-
})
|
|
1448
|
-
return onlyPositive
|
|
1449
|
-
? data.map((item) => ({ ...item, value: Math.max(item.value, 0) }))
|
|
1450
|
-
: data
|
|
1451
|
-
}
|
|
1452
|
-
|
|
1453
|
-
export const getLineSegmentsForMissingValues = (
|
|
1454
|
-
data?: lineDataItem[]
|
|
1455
|
-
): LineSegment[] | undefined => {
|
|
1456
|
-
if (!data?.length) return undefined
|
|
1457
|
-
let i
|
|
1458
|
-
const n = data.length
|
|
1459
|
-
const numericValuesLength = data.filter(
|
|
1460
|
-
(item) => typeof item.value === 'number'
|
|
1461
|
-
).length
|
|
1462
|
-
if (!numericValuesLength) return undefined
|
|
1463
|
-
const segments: LineSegment[] = []
|
|
1464
|
-
for (i = 0; i < n; i++) {
|
|
1465
|
-
if (typeof data[i].value !== 'number') {
|
|
1466
|
-
const nextValidInd: number = data
|
|
1467
|
-
.slice(i + 1, n)
|
|
1468
|
-
.findIndex((item) => typeof item.value === 'number')
|
|
1469
|
-
if (nextValidInd === -1) {
|
|
1470
|
-
segments.push({
|
|
1471
|
-
startIndex: Math.max(i - 1, 0),
|
|
1472
|
-
endIndex: n,
|
|
1473
|
-
color: 'transparent'
|
|
1474
|
-
})
|
|
1475
|
-
break
|
|
1476
|
-
}
|
|
1477
|
-
const nextValidIndex: number = nextValidInd + i + 1
|
|
1478
|
-
segments.push({
|
|
1479
|
-
startIndex: Math.max(i - 1, 0),
|
|
1480
|
-
endIndex: nextValidIndex,
|
|
1481
|
-
color: 'transparent'
|
|
1482
|
-
})
|
|
1483
|
-
i = nextValidIndex
|
|
1484
|
-
}
|
|
1485
|
-
}
|
|
1486
|
-
return segments
|
|
1487
|
-
}
|
|
1488
|
-
|
|
1489
|
-
export const getTextSizeForPieLabels = (
|
|
1490
|
-
textSize: number,
|
|
1491
|
-
radius: number
|
|
1492
|
-
): number => (textSize ? Math.min(textSize, radius / 5) : 16)
|
|
1493
|
-
|
|
1494
|
-
export const adjustToOffset = (
|
|
1495
|
-
data: lineDataItem[],
|
|
1496
|
-
yAxisOffset?: number
|
|
1497
|
-
): lineDataItem[] =>
|
|
1498
|
-
data.map((item) => ({ ...item, value: item.value - (yAxisOffset ?? 0) }))
|
|
1499
|
-
|
|
1500
|
-
export const getSanitisedData = (
|
|
1501
|
-
data: lineDataItem[] | undefined,
|
|
1502
|
-
dataSanitisationProps: IDataSanitisationProps
|
|
1503
|
-
): lineDataItem[] => {
|
|
1504
|
-
if (!data) {
|
|
1505
|
-
return []
|
|
1506
|
-
}
|
|
1507
|
-
const {
|
|
1508
|
-
showDataPointsForMissingValues,
|
|
1509
|
-
interpolateMissingValues,
|
|
1510
|
-
onlyPositive,
|
|
1511
|
-
yAxisOffset
|
|
1512
|
-
} = dataSanitisationProps
|
|
1513
|
-
const nullishHandledData = getInterpolatedData(
|
|
1514
|
-
data,
|
|
1515
|
-
showDataPointsForMissingValues,
|
|
1516
|
-
interpolateMissingValues,
|
|
1517
|
-
onlyPositive
|
|
1518
|
-
)
|
|
1519
|
-
if (yAxisOffset) {
|
|
1520
|
-
return adjustToOffset(nullishHandledData, yAxisOffset)
|
|
1521
|
-
}
|
|
1522
|
-
return nullishHandledData
|
|
1523
|
-
}
|
|
1524
|
-
|
|
1525
|
-
export const getStrokeDashArray = (
|
|
1526
|
-
strokeDash?: number[] | string,
|
|
1527
|
-
framework?: Framework
|
|
1528
|
-
): number[] | string | undefined => {
|
|
1529
|
-
let strokeDashArrayOrString: number[] | string | undefined
|
|
1530
|
-
if (framework === Framework.reactJS) {
|
|
1531
|
-
if (strokeDash instanceof Array) {
|
|
1532
|
-
strokeDashArrayOrString = strokeDash.toString().replace(',', ' ')
|
|
1533
|
-
} else if (typeof strokeDash === 'string') {
|
|
1534
|
-
strokeDashArrayOrString = strokeDash
|
|
1535
|
-
.replace(',', ' ')
|
|
1536
|
-
.replace('[', '')
|
|
1537
|
-
.replace(']', '')
|
|
1538
|
-
.replace('{', '')
|
|
1539
|
-
.replace('}', '')
|
|
1540
|
-
}
|
|
1541
|
-
} else {
|
|
1542
|
-
if (strokeDash instanceof Array) {
|
|
1543
|
-
strokeDashArrayOrString = strokeDash
|
|
1544
|
-
} else if (typeof strokeDash === 'string') {
|
|
1545
|
-
const ar = strokeDash
|
|
1546
|
-
.replace(',', ' ')
|
|
1547
|
-
.replace('[', '')
|
|
1548
|
-
.replace(']', '')
|
|
1549
|
-
.replace('{', '')
|
|
1550
|
-
.replace('}', '')
|
|
1551
|
-
.split(' ')
|
|
1552
|
-
if (ar[0] && ar[1]) {
|
|
1553
|
-
const n1 = Number(ar[0])
|
|
1554
|
-
const n2 = Number(ar[1])
|
|
1555
|
-
if (!isNaN(n1) && !isNaN(n2)) {
|
|
1556
|
-
strokeDashArrayOrString = [n1, n2]
|
|
1557
|
-
}
|
|
1558
|
-
}
|
|
1559
|
-
}
|
|
1560
|
-
}
|
|
1561
|
-
|
|
1562
|
-
return strokeDashArrayOrString
|
|
1563
|
-
}
|