134 lines
2.9 KiB
JavaScript
134 lines
2.9 KiB
JavaScript
/*eslint-disable*/
|
|
import { scaleLinear, scaleTime, max, axisLeft, axisBottom, select } from 'd3'
|
|
import React, { useMemo } from 'react'
|
|
import moment from 'moment'
|
|
|
|
const data = [
|
|
[0, '2020-11-08T18:00:05.664Z'],
|
|
[40.01301, '2020-11-09T11:17:05.664Z']
|
|
]
|
|
|
|
const marginTop = 10
|
|
const marginRight = 30
|
|
const marginBottom = 30
|
|
const marginLeft = 60
|
|
const width = 510 - marginLeft - marginRight
|
|
const height = 141 - marginTop - marginBottom
|
|
|
|
const Scatterplot = ({ data: realData }) => {
|
|
const x = scaleTime()
|
|
.domain([
|
|
moment()
|
|
.add(-1, 'day')
|
|
.valueOf(),
|
|
moment().valueOf()
|
|
])
|
|
.range([0, width])
|
|
.nice()
|
|
|
|
const y = scaleLinear()
|
|
.domain([0, 1000])
|
|
.range([height, 0])
|
|
.nice()
|
|
|
|
// viewBox="0 0 540 141"
|
|
return (
|
|
<>
|
|
<svg
|
|
width={width + marginLeft + marginRight}
|
|
height={height + marginTop + marginBottom}>
|
|
<g transform={`translate(${marginLeft},${marginTop})`}>
|
|
<XAxis
|
|
transform={`translate(0, ${height + marginTop})`}
|
|
scale={x}
|
|
numTicks={6}
|
|
/>
|
|
<g>{axisLeft(y)}</g>
|
|
{/* <YAxis transform={`translate(0, 0)`} scale={y} numTicks={6} /> */}
|
|
<RenderCircles data={data} scale={{ x, y }} />
|
|
</g>
|
|
</svg>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const XAxis = ({
|
|
range = [10, 500],
|
|
transform,
|
|
scale: xScale,
|
|
numTicks = 7
|
|
}) => {
|
|
const ticks = useMemo(() => {
|
|
return xScale.ticks(numTicks).map(value => ({
|
|
value,
|
|
xOffset: xScale(value)
|
|
}))
|
|
}, [range.join('-')])
|
|
|
|
return (
|
|
<g transform={transform}>
|
|
{ticks.map(({ value, xOffset }) => (
|
|
<g key={value} transform={`translate(${xOffset}, 0)`}>
|
|
<text
|
|
key={value}
|
|
style={{
|
|
fontSize: '10px',
|
|
textAnchor: 'middle',
|
|
transform: 'translateY(10px)'
|
|
}}>
|
|
{value.getHours()}
|
|
</text>
|
|
</g>
|
|
))}
|
|
</g>
|
|
)
|
|
}
|
|
|
|
const YAxis = ({
|
|
range = [10, 500],
|
|
transform,
|
|
scale: xScale,
|
|
numTicks = 7
|
|
}) => {
|
|
const ticks = useMemo(() => {
|
|
return xScale.ticks(numTicks).map(value => ({
|
|
value,
|
|
xOffset: xScale(value)
|
|
}))
|
|
}, [range.join('-')])
|
|
|
|
return (
|
|
<g transform={transform}>
|
|
{ticks.map(({ value, xOffset }) => (
|
|
<g key={value} transform={`translate(0, ${xOffset})`}>
|
|
<text
|
|
key={value}
|
|
style={{
|
|
fontSize: '10px',
|
|
textAnchor: 'middle',
|
|
transform: 'translateX(-10px)'
|
|
}}>
|
|
{value}
|
|
</text>
|
|
</g>
|
|
))}
|
|
</g>
|
|
)
|
|
}
|
|
|
|
const RenderCircles = ({ data, scale }) => {
|
|
let renderCircles = data.map((item, idx) => {
|
|
return (
|
|
<circle
|
|
cx={scale.x(new Date(item[1]))}
|
|
cy={scale.y(item[0])}
|
|
r="4"
|
|
style={{ fill: 'rgba(25, 158, 199, .9)' }}
|
|
key={idx}
|
|
/>
|
|
)
|
|
})
|
|
return <g>{renderCircles}</g>
|
|
}
|
|
|
|
export default Scatterplot
|