oecd-simple-charts
Version:
D3 charting library for creating pearl charts, stacked bar charts and box plots
109 lines (78 loc) • 2.64 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Popup.js - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BoxPlot.html">BoxPlot</a></li><li><a href="PearlChart.html">PearlChart</a></li><li><a href="Popup.html">Popup</a></li><li><a href="StackedChart.html">StackedChart</a></li></ul>
</nav>
<div id="main">
<h1 class="page-title">Popup.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>/**
* A Popup component
*
* @constructor
* @param {object} options - The options object for the popup
* @param {string} options.container - The d3 Selection
* @param {string} options.content - Html String
*/
class Popup {
constructor(options = {}) {
this.options = options;
this.closePopup = this.closePopup.bind(this);
}
showPopup() {
const { container } = this.options;
const containerY = container.node().getBoundingClientRect().y;
container.select('.oecd-chart__info-popup')
.classed('oecd-chart__info-popup--active', true)
.style('top', `${containerY}px`);
}
closePopup() {
const { container } = this.options;
container.select('.oecd-chart__info-popup')
.classed('oecd-chart__info-popup--active', false);
}
render() {
const { container, content } = this.options;
const popupNode =
container
.append('div')
.attr('class', 'oecd-chart__info-popup')
.html(content);
popupNode
.append('span')
.attr('class', 'info-popup__close-button')
.text('x')
.on('click', this.closePopup);
}
}
export default Popup;
</code></pre>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.4</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>