chore: reformat code
This commit is contained in:
Rafael Taranto
parent
3d930aa73b
commit
aedabcbdee
509 changed files with 6030 additions and 4266 deletions
|
|
@ -13,7 +13,7 @@ import {
|
|||
fontColor,
|
||||
primaryColor,
|
||||
fontSecondary,
|
||||
subheaderColor
|
||||
subheaderColor,
|
||||
} from 'src/styling/variables'
|
||||
import { numberToFiatAmount } from 'src/utils/number'
|
||||
import { MINUTE, DAY, WEEK, MONTH } from 'src/utils/time'
|
||||
|
|
@ -25,7 +25,7 @@ const Graph = ({
|
|||
setSelectionCoords,
|
||||
setSelectionData,
|
||||
setSelectionDateInterval,
|
||||
log = false
|
||||
log = false,
|
||||
}) => {
|
||||
const ref = useRef(null)
|
||||
|
||||
|
|
@ -38,9 +38,9 @@ const Graph = ({
|
|||
top: 25,
|
||||
right: 3.5,
|
||||
bottom: 27,
|
||||
left: 38
|
||||
left: 38,
|
||||
}),
|
||||
[]
|
||||
[],
|
||||
)
|
||||
|
||||
const offset = getTimezoneOffset(timezone)
|
||||
|
|
@ -50,7 +50,7 @@ const Graph = ({
|
|||
day: [NOW - DAY, NOW],
|
||||
threeDays: [NOW - 3 * DAY, NOW],
|
||||
week: [NOW - WEEK, NOW],
|
||||
month: [NOW - MONTH, NOW]
|
||||
month: [NOW - MONTH, NOW],
|
||||
}
|
||||
|
||||
const dataPoints = useMemo(
|
||||
|
|
@ -59,28 +59,28 @@ const Graph = ({
|
|||
freq: 24,
|
||||
step: 60 * 60 * 1000,
|
||||
tick: d3.utcHour.every(1),
|
||||
labelFormat: '%H:%M'
|
||||
labelFormat: '%H:%M',
|
||||
},
|
||||
threeDays: {
|
||||
freq: 12,
|
||||
step: 6 * 60 * 60 * 1000,
|
||||
tick: d3.utcDay.every(1),
|
||||
labelFormat: '%a %d'
|
||||
labelFormat: '%a %d',
|
||||
},
|
||||
week: {
|
||||
freq: 7,
|
||||
step: 24 * 60 * 60 * 1000,
|
||||
tick: d3.utcDay.every(1),
|
||||
labelFormat: '%a %d'
|
||||
labelFormat: '%a %d',
|
||||
},
|
||||
month: {
|
||||
freq: 30,
|
||||
step: 24 * 60 * 60 * 1000,
|
||||
tick: d3.utcDay.every(1),
|
||||
labelFormat: '%d'
|
||||
}
|
||||
labelFormat: '%d',
|
||||
},
|
||||
}),
|
||||
[]
|
||||
[],
|
||||
)
|
||||
|
||||
const getPastAndCurrentDayLabels = useCallback(d => {
|
||||
|
|
@ -97,11 +97,11 @@ const Graph = ({
|
|||
const previousDateMonth = previousDate.getUTCMonth()
|
||||
|
||||
const daysOfWeek = Array.from(Array(7)).map((_, i) =>
|
||||
format('EEE', add({ days: i }, startOfWeek(new Date())))
|
||||
format('EEE', add({ days: i }, startOfWeek(new Date()))),
|
||||
)
|
||||
|
||||
const months = Array.from(Array(12)).map((_, i) =>
|
||||
format('LLL', add({ months: i }, startOfYear(new Date())))
|
||||
format('LLL', add({ months: i }, startOfYear(new Date()))),
|
||||
)
|
||||
|
||||
return {
|
||||
|
|
@ -112,7 +112,7 @@ const Graph = ({
|
|||
current:
|
||||
currentDateMonth !== previousDateMonth
|
||||
? months[currentDateMonth]
|
||||
: `${daysOfWeek[currentDateWeekday]} ${currentDateDay}`
|
||||
: `${daysOfWeek[currentDateWeekday]} ${currentDateDay}`,
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
|
@ -134,7 +134,7 @@ const Graph = ({
|
|||
|
||||
return points
|
||||
},
|
||||
[NOW, dataPoints, period.code]
|
||||
[NOW, dataPoints, period.code],
|
||||
)
|
||||
|
||||
const buildAreas = useCallback(
|
||||
|
|
@ -159,7 +159,7 @@ const Graph = ({
|
|||
|
||||
return points
|
||||
},
|
||||
[NOW, dataPoints, period.code]
|
||||
[NOW, dataPoints, period.code],
|
||||
)
|
||||
|
||||
const x = d3
|
||||
|
|
@ -177,7 +177,7 @@ const Graph = ({
|
|||
.scaleLinear()
|
||||
.domain([
|
||||
0,
|
||||
(d3.max(data, d => new BigNumber(d.fiat).toNumber()) ?? 1000) * 1.03
|
||||
(d3.max(data, d => new BigNumber(d.fiat).toNumber()) ?? 1000) * 1.03,
|
||||
])
|
||||
.nice()
|
||||
.range([GRAPH_HEIGHT - GRAPH_MARGIN.bottom, GRAPH_MARGIN.top])
|
||||
|
|
@ -186,7 +186,7 @@ const Graph = ({
|
|||
.scaleLog()
|
||||
.domain([
|
||||
(d3.min(data, d => new BigNumber(d.fiat).toNumber()) ?? 1) * 0.9,
|
||||
(d3.max(data, d => new BigNumber(d.fiat).toNumber()) ?? 1000) * 1.1
|
||||
(d3.max(data, d => new BigNumber(d.fiat).toNumber()) ?? 1000) * 1.1,
|
||||
])
|
||||
.range([GRAPH_HEIGHT - GRAPH_MARGIN.bottom, GRAPH_MARGIN.top])
|
||||
|
||||
|
|
@ -196,7 +196,7 @@ const Graph = ({
|
|||
const fullBreakpoints = [
|
||||
graphLimits[1],
|
||||
...R.filter(it => it > dataLimits[0] && it < dataLimits[1], breakpoints),
|
||||
dataLimits[0]
|
||||
dataLimits[0],
|
||||
]
|
||||
|
||||
const intervals = []
|
||||
|
|
@ -227,7 +227,7 @@ const Graph = ({
|
|||
g
|
||||
.attr(
|
||||
'transform',
|
||||
`translate(0, ${GRAPH_HEIGHT - GRAPH_MARGIN.bottom})`
|
||||
`translate(0, ${GRAPH_HEIGHT - GRAPH_MARGIN.bottom})`,
|
||||
)
|
||||
.call(
|
||||
d3
|
||||
|
|
@ -235,18 +235,18 @@ const Graph = ({
|
|||
.ticks(dataPoints[period.code].tick)
|
||||
.tickFormat(d => {
|
||||
return d3.timeFormat(dataPoints[period.code].labelFormat)(
|
||||
d.getTime() + d.getTimezoneOffset() * MINUTE
|
||||
d.getTime() + d.getTimezoneOffset() * MINUTE,
|
||||
)
|
||||
})
|
||||
.tickSizeOuter(0)
|
||||
.tickSizeOuter(0),
|
||||
)
|
||||
.call(g =>
|
||||
g
|
||||
.select('.domain')
|
||||
.attr('stroke', primaryColor)
|
||||
.attr('stroke-width', 1)
|
||||
.attr('stroke-width', 1),
|
||||
),
|
||||
[GRAPH_MARGIN, dataPoints, period.code, x]
|
||||
[GRAPH_MARGIN, dataPoints, period.code, x],
|
||||
)
|
||||
|
||||
const buildYAxis = useCallback(
|
||||
|
|
@ -264,12 +264,12 @@ const Graph = ({
|
|||
if (d >= 1000) return numberToFiatAmount(d / 1000) + 'k'
|
||||
|
||||
return numberToFiatAmount(d)
|
||||
})
|
||||
}),
|
||||
)
|
||||
.select('.domain')
|
||||
.attr('stroke', primaryColor)
|
||||
.attr('stroke-width', 1),
|
||||
[GRAPH_MARGIN, y, log]
|
||||
[GRAPH_MARGIN, y, log],
|
||||
)
|
||||
|
||||
const buildGrid = useCallback(
|
||||
|
|
@ -286,7 +286,7 @@ const Graph = ({
|
|||
.attr('x1', d => 0.5 + x(d))
|
||||
.attr('x2', d => 0.5 + x(d))
|
||||
.attr('y1', GRAPH_MARGIN.top)
|
||||
.attr('y2', GRAPH_HEIGHT - GRAPH_MARGIN.bottom)
|
||||
.attr('y2', GRAPH_HEIGHT - GRAPH_MARGIN.bottom),
|
||||
)
|
||||
// Horizontal lines
|
||||
.call(g =>
|
||||
|
|
@ -297,13 +297,13 @@ const Graph = ({
|
|||
d3
|
||||
.axisLeft(y)
|
||||
.scale()
|
||||
.ticks(GRAPH_HEIGHT / 100)
|
||||
.ticks(GRAPH_HEIGHT / 100),
|
||||
)
|
||||
.join('line')
|
||||
.attr('y1', d => 0.5 + y(d))
|
||||
.attr('y2', d => 0.5 + y(d))
|
||||
.attr('x1', GRAPH_MARGIN.left)
|
||||
.attr('x2', GRAPH_WIDTH)
|
||||
.attr('x2', GRAPH_WIDTH),
|
||||
)
|
||||
// Vertical transparent rectangles for events
|
||||
.call(g =>
|
||||
|
|
@ -319,14 +319,14 @@ const Graph = ({
|
|||
const intervals = getAreaInterval(
|
||||
buildAreas(x.domain()).map(it => Math.round(x(it) * 100) / 100),
|
||||
x.range(),
|
||||
x2.range()
|
||||
x2.range(),
|
||||
)
|
||||
const interval = getAreaIntervalByX(intervals, xValue)
|
||||
return Math.round((interval[0] - interval[1]) * 100) / 100
|
||||
})
|
||||
.attr(
|
||||
'height',
|
||||
GRAPH_HEIGHT - GRAPH_MARGIN.bottom - GRAPH_MARGIN.top
|
||||
GRAPH_HEIGHT - GRAPH_MARGIN.bottom - GRAPH_MARGIN.top,
|
||||
)
|
||||
.attr('stroke', 'transparent')
|
||||
.attr('fill', 'transparent')
|
||||
|
|
@ -336,7 +336,7 @@ const Graph = ({
|
|||
const intervals = getAreaInterval(
|
||||
buildAreas(x.domain()).map(it => Math.round(x(it) * 100) / 100),
|
||||
x.range(),
|
||||
x2.range()
|
||||
x2.range(),
|
||||
)
|
||||
|
||||
const dateInterval = getDateIntervalByX(areas, intervals, xValue)
|
||||
|
|
@ -354,8 +354,8 @@ const Graph = ({
|
|||
left: R.clone(d.target.getBoundingClientRect().x),
|
||||
right: R.clone(
|
||||
d.target.getBoundingClientRect().x +
|
||||
d.target.getBoundingClientRect().width
|
||||
)
|
||||
d.target.getBoundingClientRect().width,
|
||||
),
|
||||
}
|
||||
|
||||
const xCoord =
|
||||
|
|
@ -370,7 +370,7 @@ const Graph = ({
|
|||
setSelectionData(filteredData)
|
||||
setSelectionCoords({
|
||||
x: Math.round(xCoord),
|
||||
y: Math.round(yCoord)
|
||||
y: Math.round(yCoord),
|
||||
})
|
||||
|
||||
d3.select(d.target).attr('fill', subheaderColor)
|
||||
|
|
@ -380,7 +380,7 @@ const Graph = ({
|
|||
setSelectionDateInterval(null)
|
||||
setSelectionData(null)
|
||||
setSelectionCoords(null)
|
||||
})
|
||||
}),
|
||||
)
|
||||
// Thick vertical lines
|
||||
.call(g =>
|
||||
|
|
@ -391,7 +391,7 @@ const Graph = ({
|
|||
buildTicks(x.domain()).filter(x => {
|
||||
if (period.code === 'day') return x.getUTCHours() === 0
|
||||
return x.getUTCDate() === 1
|
||||
})
|
||||
}),
|
||||
)
|
||||
.join('line')
|
||||
.attr('class', 'dateSeparator')
|
||||
|
|
@ -400,7 +400,7 @@ const Graph = ({
|
|||
.attr('y1', GRAPH_MARGIN.top - 50)
|
||||
.attr('y2', GRAPH_HEIGHT - GRAPH_MARGIN.bottom)
|
||||
.attr('stroke-width', 5)
|
||||
.join('text')
|
||||
.join('text'),
|
||||
)
|
||||
// Left side breakpoint label
|
||||
.call(g => {
|
||||
|
|
@ -458,8 +458,8 @@ const Graph = ({
|
|||
offset,
|
||||
setSelectionCoords,
|
||||
setSelectionData,
|
||||
setSelectionDateInterval
|
||||
]
|
||||
setSelectionDateInterval,
|
||||
],
|
||||
)
|
||||
|
||||
const formatTicksText = useCallback(
|
||||
|
|
@ -470,7 +470,7 @@ const Graph = ({
|
|||
.style('fill', fontColor)
|
||||
.style('stroke-width', 0.5)
|
||||
.style('font-family', fontSecondary),
|
||||
[]
|
||||
[],
|
||||
)
|
||||
|
||||
const formatText = useCallback(
|
||||
|
|
@ -481,7 +481,7 @@ const Graph = ({
|
|||
.style('fill', offColor)
|
||||
.style('stroke-width', 0.5)
|
||||
.style('font-family', fontSecondary),
|
||||
[]
|
||||
[],
|
||||
)
|
||||
|
||||
const formatTicks = useCallback(() => {
|
||||
|
|
@ -505,10 +505,10 @@ const Graph = ({
|
|||
.attr('y1', 0.5 + y(median))
|
||||
.attr('y2', 0.5 + y(median))
|
||||
.attr('x1', GRAPH_MARGIN.left)
|
||||
.attr('x2', GRAPH_WIDTH)
|
||||
.attr('x2', GRAPH_WIDTH),
|
||||
)
|
||||
},
|
||||
[GRAPH_MARGIN, y, data, log]
|
||||
[GRAPH_MARGIN, y, data, log],
|
||||
)
|
||||
|
||||
const drawData = useCallback(
|
||||
|
|
@ -524,7 +524,7 @@ const Graph = ({
|
|||
.attr('fill', d => (d.txClass === 'cashIn' ? java : neon))
|
||||
.attr('r', 3.5)
|
||||
},
|
||||
[data, offset, x, y]
|
||||
[data, offset, x, y],
|
||||
)
|
||||
|
||||
const drawChart = useCallback(() => {
|
||||
|
|
@ -550,7 +550,7 @@ const Graph = ({
|
|||
drawData,
|
||||
formatText,
|
||||
formatTicks,
|
||||
formatTicksText
|
||||
formatTicksText,
|
||||
])
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -566,5 +566,5 @@ export default memo(
|
|||
(prev, next) =>
|
||||
R.equals(prev.period, next.period) &&
|
||||
R.equals(prev.selectedMachine, next.selectedMachine) &&
|
||||
R.equals(prev.log, next.log)
|
||||
R.equals(prev.log, next.log),
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue