Commit 189b7971 authored by Alvin Noe Ladines's avatar Alvin Noe Ladines
Browse files

Implemented remaining fixes in issue #312

parent 40f8745e
Pipeline #72623 passed with stages
in 33 minutes and 4 seconds
......@@ -35,13 +35,13 @@ const _mapping = {
'oscillator_strengths': 'Oscillator strengths',
'transition_dipole_moments': 'Transition dipole moments'}
function mapKey(key) {
function mapKey(key, short = true) {
let name = key
const maxLength = 17
if (key in _mapping) {
name = _mapping[key]
}
if (name.length > maxLength) {
if (name.length > maxLength && short) {
return name.substring(0, maxLength) + '...'
} else {
return name
......@@ -149,7 +149,7 @@ class QuantityHistogramUnstyled extends React.Component {
svg.attr('height', height)
let withData = svg
.selectAll('g')
.selectAll('.item')
.data(data, data => data.name)
withData.exit().remove()
......@@ -159,9 +159,11 @@ class QuantityHistogramUnstyled extends React.Component {
let item = withData.enter()
.append('g')
.attr('class', 'item')
item
.append('rect')
.attr('class', 'bar')
.attr('x', x(0))
.attr('y', d => y(d.name))
.attr('width', d => x(d.value) - x(0))
......@@ -195,12 +197,55 @@ class QuantityHistogramUnstyled extends React.Component {
.style('cursor', 'pointer')
.on('click', d => this.handleItemClicked(d))
svg.select('.tooltip').remove()
let tooltip = svg.append('g')
tooltip
.attr('class', 'tooltip')
.style('visibility', 'hidden')
tooltip.append('rect')
.attr('class', 'tooltipbox')
.attr('rx', 6)
.attr('ry', 6)
.attr('width', 120)
.attr('height', y.bandwidth())
.attr('fill', 'grey')
.style('opacity', 1.0)
tooltip.append('text')
.attr('class', 'tooltiptext')
.attr('dy', '1.2em')
.attr('font-family', 'Arial, Helvetica, sans-serif')
.attr('font-size', '12px')
.attr('fill', 'white')
item
.on('mouseover', function(d, i) {
const xPosition = x(0)
const yPosition = y(d.name)
const key = mapKey(d.key, false)
svg.select('.tooltip')
.style('visibility', 'visible')
.attr('transform', `translate( ${xPosition}, ${yPosition})`)
.select('.tooltiptext')
.text(key)
const width = 10 * key.length
svg.select('.tooltip')
.select('.tooltipbox')
.attr('width', width)
})
.on('mouseout', function() {
svg.select('.tooltip')
.style('visibility', 'hidden')
})
const t = d3.transition().duration(500)
item = withData.transition(t)
item
.select('rect')
.select('.bar')
.attr('y', d => y(d.name))
.attr('width', d => x(d.value) - x(0))
.attr('height', y.bandwidth())
......
......@@ -138,43 +138,6 @@ class UploadsHistogramUnstyled extends React.Component {
return intervals[diffs.indexOf(Math.min(...diffs))]
}
hover(svg, bar) {
const textOffset = 25
const tooltip = svg.append('g')
.attr('class', 'tooltip')
.style('display', 'none')
const hoverBox = tooltip.append('rect')
.attr('width', 10)
.attr('height', 20)
.attr('fill', 'white')
.style('opacity', 0.0)
const text = tooltip.append('text')
.attr('x', textOffset)
.attr('dy', '1.2em')
.style('text-anchor', 'start')
.attr('font-size', '12px')
// .attr('font-weight', 'bold')
bar
.on('mouseover', () => {
tooltip.style('display', null)
let { width } = text.node().getBBox()
hoverBox.attr('width', `${width + textOffset}px`)
})
.on('mouseout', () => tooltip.style('display', 'none'))
.on('mousemove', function(d) {
let xPosition = d3.mouse(this)[0] - 15
let yPosition = d3.mouse(this)[1] - 25
tooltip.attr('transform', `translate( ${xPosition}, ${yPosition})`)
tooltip.attr('data-html', 'true')
tooltip.select('text').text(new Date(d.time).toISOString() + ': ' + d.value)
})
}
updateChart() {
let data = []
if (!this.props.data) {
......@@ -244,9 +207,8 @@ class UploadsHistogramUnstyled extends React.Component {
svg.append('text')
.attr('class', 'ylabel')
.attr('x', 0)
.attr('y', 0)
.attr('y', 10)
.attr('dy', '1em')
.attr('text-anchor', 'start')
.attr('font-size', '12px')
.text(`${shortLabel || label}`)
......@@ -271,8 +233,44 @@ class UploadsHistogramUnstyled extends React.Component {
.on('click', d => this.handleItemClicked(d, deltaT))
svg.select('.tooltip').remove()
let tooltip = svg.append('g')
tooltip
.attr('class', 'tooltip')
.style('visibility', 'hidden')
svg.call(this.hover, item)
tooltip.append('rect')
.attr('x', 0)
.attr('rx', 6)
.attr('ry', 6)
.attr('width', 100)
.attr('height', 40)
.attr('fill', 'grey')
.style('opacity', 1.0)
let tooltipText = tooltip.append('text')
.attr('dy', '1.2em')
.attr('font-family', 'Arial, Helvetica, sans-serif')
.attr('font-size', '10px')
.attr('fill', 'white')
.style('text-anchor', 'middle')
item
.on('mouseover', function(d) {
tooltip.style('visibility', 'visible')
const date = new Date(d.time)
const value = `${date.toLocaleDateString()}\n
${date.toLocaleTimeString()}
${d.value} ${shortLabel || label}`
tooltipText.selectAll('tspan')
.data((value).split(/\n/)).join('tspan')
.attr('x', 50)
.attr('y', (d, i) => `${i * 1.2}em`)
.text(d => d)
const xPosition = x(d.name) + 20
const yPosition = y(d.value) - 20
tooltip.attr('transform', `translate( ${xPosition}, ${yPosition})`)
})
.on('mouseout', () => tooltip.style('visibility', 'hidden'))
}
render() {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment