Dan Miller
6 years ago
parent
aa798cc545
commit
6f0406125d
@ -0,0 +1,307 @@ |
||||
import * as d3 from 'd3' |
||||
import c3 from 'c3' |
||||
|
||||
export function getCoordinateData (selector) { |
||||
return d3.select(selector).node().getBoundingClientRect() |
||||
} |
||||
|
||||
export function generateDataUIObj (x, index, value) { |
||||
return { |
||||
x, |
||||
value, |
||||
index, |
||||
id: 'data1', |
||||
name: 'data1', |
||||
} |
||||
} |
||||
|
||||
export function handleChartUpdate ({ chart, gasPrices, newPrice, cssId }) { |
||||
const { |
||||
closestLowerValueIndex, |
||||
closestLowerValue, |
||||
closestHigherValueIndex, |
||||
closestHigherValue, |
||||
} = getAdjacentGasPrices({ gasPrices, priceToPosition: newPrice }) |
||||
|
||||
if (closestLowerValue && closestHigherValue) { |
||||
setSelectedCircle({ |
||||
chart, |
||||
newPrice, |
||||
closestLowerValueIndex, |
||||
closestLowerValue, |
||||
closestHigherValueIndex, |
||||
closestHigherValue, |
||||
}) |
||||
} else { |
||||
hideDataUI(chart, cssId) |
||||
} |
||||
} |
||||
|
||||
export function getAdjacentGasPrices({ gasPrices, priceToPosition }) { |
||||
const closestLowerValueIndex = gasPrices.findIndex((e, i, a) => e <= priceToPosition && a[i + 1] >= priceToPosition) |
||||
const closestHigherValueIndex = gasPrices.findIndex((e, i, a) => e > priceToPosition) |
||||
return { |
||||
closestLowerValueIndex, |
||||
closestHigherValueIndex, |
||||
closestHigherValue: gasPrices[closestHigherValueIndex], |
||||
closestLowerValue: gasPrices[closestLowerValueIndex], |
||||
} |
||||
} |
||||
|
||||
export function extrapolateY ({ higherY, lowerY, higherX, lowerX, xForExtrapolation }) { |
||||
const slope = (higherY - lowerY) / (higherX - lowerX) |
||||
const newTimeEstimate = -1 * (slope * (higherX - xForExtrapolation) - higherY) |
||||
|
||||
return newTimeEstimate |
||||
} |
||||
|
||||
|
||||
export function getNewXandTimeEstimate ({ xMousePos, chartXStart, chartWidth, gasPrices, estimatedTimes }) { |
||||
const chartMouseXPos = xMousePos - chartXStart |
||||
const posPercentile = chartMouseXPos / chartWidth |
||||
|
||||
const currentPosValue = (gasPrices[gasPrices.length - 1] - gasPrices[0]) * posPercentile + gasPrices[0] |
||||
|
||||
const { |
||||
closestLowerValueIndex, |
||||
closestLowerValue, |
||||
closestHigherValueIndex, |
||||
closestHigherValue, |
||||
} = getAdjacentGasPrices({ gasPrices, priceToPosition: currentPosValue }) |
||||
|
||||
return !closestHigherValue || !closestLowerValue |
||||
? { |
||||
currentPosValue: null, |
||||
newTimeEstimate: null, |
||||
} |
||||
: { |
||||
currentPosValue, |
||||
newTimeEstimate: extrapolateY ({ |
||||
higherY: estimatedTimes[closestHigherValueIndex], |
||||
lowerY: estimatedTimes[closestLowerValueIndex], |
||||
higherX: closestHigherValue, |
||||
lowerX: closestLowerValue, |
||||
xForExtrapolation: currentPosValue, |
||||
}), |
||||
} |
||||
} |
||||
|
||||
export function hideDataUI (chart, dataNodeId) { |
||||
const overLayedCircle = d3.select(dataNodeId) |
||||
if (!overLayedCircle.empty()) { |
||||
overLayedCircle.remove() |
||||
} |
||||
d3.select('.c3-tooltip-container').style('display', 'none !important') |
||||
chart.internal.hideXGridFocus() |
||||
} |
||||
|
||||
export function setTickPosition (axis, n, newPosition, secondNewPosition) { |
||||
const positionToShift = axis === 'y' ? 'x' : 'y' |
||||
const secondPositionToShift = axis === 'y' ? 'y' : 'x' |
||||
d3.select('#chart') |
||||
.select(`.c3-axis-${axis}`) |
||||
.selectAll('.tick') |
||||
.filter((d, i) => i === n) |
||||
.select('text') |
||||
.attr(positionToShift, 0) |
||||
.select('tspan') |
||||
.attr(positionToShift, newPosition) |
||||
.attr(secondPositionToShift, secondNewPosition || 0) |
||||
.style('visibility', 'visible') |
||||
} |
||||
|
||||
export function appendOrUpdateCircle ({ data, itemIndex, cx, cy, cssId, appendOnly }) { |
||||
const circle = this.main |
||||
.select('.' + 'c3-selected-circles' + this.getTargetSelectorSuffix(data.id)) |
||||
.selectAll('.' + 'c3-selected-circle' + '-' + itemIndex) |
||||
|
||||
if (appendOnly || circle.empty()) { |
||||
circle.data([data]) |
||||
.enter().append('circle') |
||||
.attr('class', () => this.generateClass('c3-selected-circle', itemIndex)) |
||||
.attr('id', cssId) |
||||
.attr('cx', cx) |
||||
.attr('cy', cy) |
||||
.attr('stroke', () => this.color(data)) |
||||
.attr('r', 6) |
||||
} else { |
||||
circle.data([data]) |
||||
.attr('cx', cx) |
||||
.attr('cy', cy) |
||||
} |
||||
} |
||||
|
||||
export function setSelectedCircle ({ |
||||
chart, |
||||
newPrice, |
||||
closestLowerValueIndex, |
||||
closestLowerValue, |
||||
closestHigherValueIndex, |
||||
closestHigherValue, |
||||
}) { |
||||
const numberOfValues = chart.internal.data.xs.data1.length |
||||
const { x: lowerX, y: lowerY } = getCoordinateData(`.c3-circle-${closestLowerValueIndex}`) |
||||
const { x: higherX, y: higherY } = getCoordinateData(`.c3-circle-${closestHigherValueIndex}`) |
||||
|
||||
const currentX = lowerX + (higherX - lowerX) * (newPrice - closestLowerValue) / (closestHigherValue - closestLowerValue) |
||||
const newTimeEstimate = extrapolateY ({ higherY, lowerY, higherX, lowerX, xForExtrapolation: currentX }) |
||||
|
||||
chart.internal.selectPoint( |
||||
generateDataUIObj(currentX, numberOfValues, newTimeEstimate), |
||||
numberOfValues |
||||
) |
||||
} |
||||
|
||||
|
||||
export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax) { |
||||
const chart = c3.generate({ |
||||
size: { |
||||
height: 165, |
||||
}, |
||||
transition: { |
||||
duration: 0, |
||||
}, |
||||
padding: {left: 20, right: 15, top: 6, bottom: 10}, |
||||
data: { |
||||
x: 'x', |
||||
columns: [ |
||||
['x', ...gasPrices], |
||||
['data1', ...estimatedTimes], |
||||
], |
||||
types: { |
||||
data1: 'area', |
||||
}, |
||||
selection: { |
||||
enabled: false, |
||||
}, |
||||
}, |
||||
color: { |
||||
data1: '#259de5', |
||||
}, |
||||
axis: { |
||||
x: { |
||||
min: gasPrices[0], |
||||
max: gasPricesMax, |
||||
tick: { |
||||
values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMax)], |
||||
outer: false, |
||||
format: function (val) { return val + ' GWEI' }, |
||||
}, |
||||
padding: {left: gasPricesMax / 50, right: gasPricesMax / 50}, |
||||
label: { |
||||
text: 'Gas Price ($)', |
||||
position: 'outer-center', |
||||
}, |
||||
}, |
||||
y: { |
||||
padding: {top: 7, bottom: 7}, |
||||
tick: { |
||||
values: [Math.floor(estimatedTimesMax * 0.05), Math.ceil(estimatedTimesMax * 0.97)], |
||||
outer: false, |
||||
}, |
||||
label: { |
||||
text: 'Confirmation time (sec)', |
||||
position: 'outer-middle', |
||||
}, |
||||
min: 0, |
||||
}, |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
}, |
||||
grid: { |
||||
x: {}, |
||||
lines: { |
||||
front: false, |
||||
}, |
||||
}, |
||||
point: { |
||||
focus: { |
||||
expand: { |
||||
enabled: false, |
||||
r: 3.5, |
||||
}, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
format: { |
||||
title: (v) => v.toPrecision(4), |
||||
}, |
||||
contents: function (d) { |
||||
const titleFormat = this.config.tooltip_format_title |
||||
let text |
||||
d.forEach(el => { |
||||
if (el && (el.value || el.value === 0) && !text) { |
||||
text = "<table class='" + 'custom-tooltip' + "'>" + "<tr><th colspan='2'>" + titleFormat(el.x) + '</th></tr>' |
||||
} |
||||
}) |
||||
return text + '</table>' + "<div class='tooltip-arrow'></div>" |
||||
}, |
||||
position: function (data) { |
||||
if (d3.select('#overlayed-circle').empty()) { |
||||
return { top: -100, left: -100 } |
||||
} |
||||
|
||||
const { x: circleX, y: circleY, width: circleWidth } = getCoordinateData('#overlayed-circle') |
||||
const { x: chartXStart, y: chartYStart } = getCoordinateData('.c3-chart') |
||||
|
||||
// TODO: Confirm the below constants work with all data sets and screen sizes
|
||||
const flipTooltip = circleY - circleWidth < chartYStart + 5 |
||||
|
||||
d3 |
||||
.select('.tooltip-arrow') |
||||
.style('margin-top', flipTooltip ? '-16px' : '4px') |
||||
|
||||
return { |
||||
top: circleY - chartYStart - 19 + (flipTooltip ? circleWidth + 38 : 0), |
||||
left: circleX - chartXStart + circleWidth - (gasPricesMax / 50), |
||||
} |
||||
}, |
||||
show: true, |
||||
}, |
||||
}) |
||||
|
||||
chart.internal.selectPoint = function (data, itemIndex = (data.index || 0)) { |
||||
const { x: chartXStart, y: chartYStart } = getCoordinateData('.c3-areas-data1') |
||||
|
||||
d3.select('#set-circle').remove() |
||||
|
||||
appendOrUpdateCircle.bind(this)({ |
||||
data, |
||||
itemIndex, |
||||
cx: () => data.x - chartXStart + 11, |
||||
cy: () => data.value - chartYStart + 10, |
||||
cssId: 'set-circle', |
||||
appendOnly: true, |
||||
}) |
||||
} |
||||
|
||||
chart.internal.overlayPoint = function (data, itemIndex) { |
||||
appendOrUpdateCircle.bind(this)({ |
||||
data, |
||||
itemIndex, |
||||
cx: this.circleX.bind(this), |
||||
cy: this.circleY.bind(this), |
||||
cssId: 'overlayed-circle', |
||||
}) |
||||
} |
||||
|
||||
chart.internal.showTooltip = function (selectedData, element) { |
||||
const dataToShow = selectedData.filter((d) => d && (d.value || d.value === 0)) |
||||
|
||||
if (dataToShow.length) { |
||||
this.tooltip.html( |
||||
this.config.tooltip_contents.call(this, selectedData, this.axis.getXAxisTickFormat(), this.getYFormat(), this.color) |
||||
).style('display', 'flex') |
||||
|
||||
// Get tooltip dimensions
|
||||
const tWidth = this.tooltip.property('offsetWidth') |
||||
const tHeight = this.tooltip.property('offsetHeight') |
||||
const position = this.config.tooltip_position.call(this, dataToShow, tWidth, tHeight, element) |
||||
// Set tooltip
|
||||
this.tooltip.style('top', position.top + 'px').style('left', position.left + 'px') |
||||
} |
||||
} |
||||
|
||||
return chart |
||||
} |
||||
Loading…
Reference in new issue