352 | {!!header.length && !!mergedConfig && (
353 |
357 | {header.map((headerItem, i) => (
358 |
369 | ))}
370 |
371 | )}
372 |
373 | {!!mergedConfig && (
374 |
381 | {rows.map((row, ri) => (
382 |
391 | {row.ceils.map((ceil, ci) => (
392 |
emitEvent(onClick, ri, ci, row, ceil)}
399 | onMouseEnter={() => handleHover(true, ri, ci, row, ceil)}
400 | onMouseLeave={() => handleHover(false)}
401 | />
402 | ))}
403 |
404 | ))}
405 |
406 | )}
407 |
408 | )
409 | })
410 |
411 | ScrollBoard.propTypes = {
412 | config: PropTypes.object,
413 | onClick: PropTypes.func,
414 | onMouseOver: PropTypes.func,
415 | className: PropTypes.string,
416 | style: PropTypes.object
417 | }
418 |
419 | export default ScrollBoard
420 |
--------------------------------------------------------------------------------
/src/components/flylineChart/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useRef, useCallback, useMemo, forwardRef } from 'react'
2 |
3 | import PropTypes from 'prop-types'
4 |
5 | import classnames from 'classnames'
6 |
7 | import { deepMerge } from '@jiaminghi/charts/lib/util/index'
8 |
9 | import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
10 |
11 | import useAutoResize from '../../use/autoResize'
12 |
13 | import { randomExtend, getPointDistance, uuid } from '../../util'
14 |
15 | import './style.less'
16 |
17 | const defaultConfig = {
18 | /**
19 | * @description Flyline chart center point
20 | * @type {Array
}
21 | * @default centerPoint = [0, 0]
22 | */
23 | centerPoint: [0, 0],
24 | /**
25 | * @description Flyline start points
26 | * @type {Array>}
27 | * @default points = []
28 | * @example points = [[10, 10], [100, 100]]
29 | */
30 | points: [],
31 | /**
32 | * @description Flyline width
33 | * @type {Number}
34 | * @default lineWidth = 1
35 | */
36 | lineWidth: 1,
37 | /**
38 | * @description Orbit color
39 | * @type {String}
40 | * @default orbitColor = 'rgba(103, 224, 227, .2)'
41 | */
42 | orbitColor: 'rgba(103, 224, 227, .2)',
43 | /**
44 | * @description Flyline color
45 | * @type {String}
46 | * @default orbitColor = '#ffde93'
47 | */
48 | flylineColor: '#ffde93',
49 | /**
50 | * @description K value
51 | * @type {Number}
52 | * @default k = -0.5
53 | * @example k = -1 ~ 1
54 | */
55 | k: -0.5,
56 | /**
57 | * @description Flyline curvature
58 | * @type {Number}
59 | * @default curvature = 5
60 | */
61 | curvature: 5,
62 | /**
63 | * @description Flyline radius
64 | * @type {Number}
65 | * @default flylineRadius = 100
66 | */
67 | flylineRadius: 100,
68 | /**
69 | * @description Flyline animation duration
70 | * @type {Array}
71 | * @default duration = [20, 30]
72 | */
73 | duration: [20, 30],
74 | /**
75 | * @description Relative points position
76 | * @type {Boolean}
77 | * @default relative = true
78 | */
79 | relative: true,
80 | /**
81 | * @description Back ground image url
82 | * @type {String}
83 | * @default bgImgUrl = ''
84 | * @example bgImgUrl = './img/bg.jpg'
85 | */
86 | bgImgUrl: '',
87 | /**
88 | * @description Text configuration
89 | * @type {Object}
90 | */
91 | text: {
92 | /**
93 | * @description Text offset
94 | * @type {Array}
95 | * @default offset = [0, 15]
96 | */
97 | offset: [0, 15],
98 | /**
99 | * @description Text color
100 | * @type {String}
101 | * @default color = '#ffdb5c'
102 | */
103 | color: '#ffdb5c',
104 | /**
105 | * @description Text font size
106 | * @type {Number}
107 | * @default fontSize = 12
108 | */
109 | fontSize: 12
110 | },
111 | /**
112 | * @description Halo configuration
113 | * @type {Object}
114 | */
115 | halo: {
116 | /**
117 | * @description Weather to show halo
118 | * @type {Boolean}
119 | * @default show = true
120 | * @example show = true | false
121 | */
122 | show: true,
123 | /**
124 | * @description Halo animation duration (10 = 1s)
125 | * @type {Number}
126 | * @default duration = 30
127 | */
128 | duration: 30,
129 | /**
130 | * @description Halo color
131 | * @type {String}
132 | * @default color = '#fb7293'
133 | */
134 | color: '#fb7293',
135 | /**
136 | * @description Halo max radius
137 | * @type {Number}
138 | * @default radius = 120
139 | */
140 | radius: 120
141 | },
142 | /**
143 | * @description Center point img configuration
144 | * @type {Object}
145 | */
146 | centerPointImg: {
147 | /**
148 | * @description Center point img width
149 | * @type {Number}
150 | * @default width = 40
151 | */
152 | width: 40,
153 | /**
154 | * @description Center point img height
155 | * @type {Number}
156 | * @default height = 40
157 | */
158 | height: 40,
159 | /**
160 | * @description Center point img url
161 | * @type {String}
162 | * @default url = ''
163 | */
164 | url: ''
165 | },
166 | /**
167 | * @description Points img configuration
168 | * @type {Object}
169 | * @default radius = 120
170 | */
171 | pointsImg: {
172 | /**
173 | * @description Points img width
174 | * @type {Number}
175 | * @default width = 15
176 | */
177 | width: 15,
178 | /**
179 | * @description Points img height
180 | * @type {Number}
181 | * @default height = 15
182 | */
183 | height: 15,
184 | /**
185 | * @description Points img url
186 | * @type {String}
187 | * @default url = ''
188 | */
189 | url: ''
190 | }
191 | }
192 |
193 | function getControlPoint([sx, sy], [ex, ey], { curvature, k }) {
194 | const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]
195 |
196 | const distance = getPointDistance([sx, sy], [ex, ey])
197 |
198 | const targetLength = distance / curvature
199 | const disDived = targetLength / 2
200 |
201 | let [dx, dy] = [mx, my]
202 |
203 | do {
204 | dx += disDived
205 | dy = my - k * mx + k * dx
206 | } while (getPointDistance([mx, my], [dx, dy]) < targetLength)
207 |
208 | return [dx, dy]
209 | }
210 |
211 | const FlyLineChart = forwardRef(({ config = {}, dev = false, className, style }, ref) => {
212 | const { width, height, domRef } = useAutoResize(ref)
213 |
214 | const { unique, gradientId, gradient2Id } = useRef({
215 | unique: Math.random(),
216 | gradientId: `gradient-id-${uuid()}`,
217 | gradient2Id: `gradient2-id-${uuid()}`
218 | }).current
219 |
220 | const { mergedConfig, paths, times, texts } = useMemo(calcData, [
221 | config,
222 | width,
223 | height
224 | ])
225 |
226 | const [lengths, setLengths] = useState([])
227 |
228 | const pathDomRef = useRef([])
229 |
230 | function calcData() {
231 | const mergedConfig = getMergedConfig()
232 |
233 | const paths = createFlylinePaths(mergedConfig)
234 |
235 | const { duration, points } = mergedConfig
236 |
237 | const times = points.map(foo => randomExtend(...duration) / 10)
238 |
239 | const texts = points.map(({ text }) => text)
240 |
241 | return { mergedConfig, paths, times, texts }
242 | }
243 |
244 | function getMergedConfig() {
245 | const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
246 |
247 | mergedConfig.points = mergedConfig.points.map(item => {
248 | if (Array.isArray(item)) {
249 | return { position: item, text: '' }
250 | }
251 |
252 | return item
253 | })
254 |
255 | return mergedConfig
256 | }
257 |
258 | function createFlylinePaths(mergedConfig) {
259 | let { centerPoint, relative } = mergedConfig
260 | let points = mergedConfig.points.map(({ position }) => position)
261 |
262 | if (relative) {
263 | centerPoint = [width * centerPoint[0], height * centerPoint[1]]
264 | points = points.map(([x, y]) => [width * x, height * y])
265 | }
266 |
267 | return points.map(point => {
268 | const controlPoint = getControlPoint(centerPoint, point, mergedConfig)
269 |
270 | return [point, controlPoint, centerPoint]
271 | })
272 | }
273 |
274 | const consoleClickPos = useCallback(
275 | ({ offsetX, offsetY }) => {
276 | if (!dev) return
277 |
278 | const relativeX = (offsetX / width).toFixed(2)
279 | const relativeY = (offsetY / height).toFixed(2)
280 |
281 | console.warn(
282 | `dv-flyline-chart DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`
283 | )
284 | },
285 | [width, height, dev]
286 | )
287 |
288 | useEffect(() => {
289 | const lengths = paths.map((foo, i) =>
290 | pathDomRef.current[i].getTotalLength()
291 | )
292 |
293 | setLengths(lengths)
294 | }, [paths])
295 |
296 | const classNames = useMemo(() => classnames('dv-flyline-chart', className), [
297 | className
298 | ])
299 |
300 | return (
301 |
310 | {!!mergedConfig && (
311 |
441 | )}
442 |
5 | 
10 |
11 |
12 | 
13 |
14 |