Skip to content

Instantly share code, notes, and snippets.

@amio

amio/esnextbin.md

Last active August 19, 2016 10:12
Show Gist options
  • Save amio/a32673b9abb277040065911da6dafd2a to your computer and use it in GitHub Desktop.
Save amio/a32673b9abb277040065911da6dafd2a to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
<script>
window.dataJSON = {"name":"statics","value":245760,"children":[{"name":"d3.flameGraph.css","value":4096},{"name":"d3.flameGraph.js","value":12288},{"name":"d3.tip.v0.6.3.js","value":8192},{"name":"d3.v3.min.js","value":155648},{"name":"font-roboto.css","value":65536}],"meta":{"path":"/Users/Amio/git/flaming-disk-usage/statics","count":6}};
</script>
<style>
.bar { fill: #e76318; }
.label { fill: rgba(255,255,255,0.7); line-height: 20px; }
.bar:hover { fill: #a45de4; }
</style>
</head>
<body>
<!-- put markup and other contents here -->
</body>
</html>
Raw
index.js
// write ES2015 code and import modules from npm
// and then press "Execute" to run your program
import { h, render, Component, svg, g } from 'preact';
/** @jsx h */
function onmouseover (e) {
if (e.target.tagName === 'svg') return
const parentG = findParentG(e.target)
parentG.classList.add('hover')
console.log(parentG.getAttribute('title'))
e.stopPropagation()
}
function onmouseout (e) {
if (e.target.tagName === 'svg') return
const parentG = findParentG(e.target)
parentG.classList.remove('hover')
}
function findParentG (el) {
switch (el.tagName) {
case 'g':
return el
case 'svg':
return el
default:
return findParentG(el.parentNode)
}
}
const Graph = ({
width,
height,
barHeight = 22,
barMargin = 1,
direction = 'up',
data
}) => {
let startY = height - barHeight
let offsetY = barHeight + barMargin
if (direction === 'down') {
startY = 1
offsetY = -offsetY
}
return (
<svg class="flame-graph"
onmouseover={ onmouseover }
onmouseout={ onmouseout }
width={ width } height={ height }
viewBox={`0 0 ${ width } ${ height }`} >
<Bar node={ data }
x={ 0 } y={ startY } offsetY = { offsetY }
width={ width + barMargin } height={ barHeight } margin={ barMargin } />
</svg>
)
}
function barMouseover (e) {
// this.classList.add('hover')
}
function barMouseout (e) {
// this.classList.remove('hover')
}
const Bar = ({
x,
y,
width,
height,
offsetY,
margin,
node
}) => {
const pos = `translate(${x}, ${y})`
let childXPointer = 0
const children = node.children && node.children.map(child => {
const childWidth = child.value / node.value * width - margin
const childX = childXPointer
childXPointer = childXPointer + childWidth + margin
return (
<Bar node={ child }
x={ childX } y={ - offsetY }
width={ childWidth } height={ height } />
)
})
return (
<g class="bar" transform={ pos }
width={ width } height={ height }
title={ node.name } value={ node.value }
onmouseover={ barMouseover } onmouseout={ barMouseout }>
<rect width={ width } height={ height } />
<text x="2" y="16" class="label">{ node.name }</text>
{ children }
</g>
)
}
render(
<Graph data={window.dataJSON} direction="up"
width={ window.innerWidth } height="400" />,
document.body
)
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"preact": "5.4.1"
}
}
Raw
transpiled.js
'use strict';
var _preact = require('preact');
/** @jsx h */
function onmouseover(e) {
if (e.target.tagName === 'svg') return;
var parentG = findParentG(e.target);
parentG.classList.add('hover');
console.log(parentG.getAttribute('title'));
e.stopPropagation();
} // write ES2015 code and import modules from npm
// and then press "Execute" to run your program
function onmouseout(e) {
if (e.target.tagName === 'svg') return;
var parentG = findParentG(e.target);
parentG.classList.remove('hover');
}
function findParentG(el) {
switch (el.tagName) {
case 'g':
return el;
case 'svg':
return el;
default:
return findParentG(el.parentNode);
}
}
var Graph = function Graph(_ref) {
var width = _ref.width;
var height = _ref.height;
var _ref$barHeight = _ref.barHeight;
var barHeight = _ref$barHeight === undefined ? 22 : _ref$barHeight;
var _ref$barMargin = _ref.barMargin;
var barMargin = _ref$barMargin === undefined ? 1 : _ref$barMargin;
var _ref$direction = _ref.direction;
var direction = _ref$direction === undefined ? 'up' : _ref$direction;
var data = _ref.data;
var startY = height - barHeight;
var offsetY = barHeight + barMargin;
if (direction === 'down') {
startY = 1;
offsetY = -offsetY;
}
return (0, _preact.h)(
'svg',
{ 'class': 'flame-graph',
onmouseover: onmouseover,
onmouseout: onmouseout,
width: width, height: height,
viewBox: '0 0 ' + width + ' ' + height },
(0, _preact.h)(Bar, { node: data,
x: 0, y: startY, offsetY: offsetY,
width: width + barMargin, height: barHeight, margin: barMargin })
);
};
function barMouseover(e) {
// this.classList.add('hover')
}
function barMouseout(e) {
// this.classList.remove('hover')
}
var Bar = function Bar(_ref2) {
var x = _ref2.x;
var y = _ref2.y;
var width = _ref2.width;
var height = _ref2.height;
var offsetY = _ref2.offsetY;
var margin = _ref2.margin;
var node = _ref2.node;
var pos = 'translate(' + x + ', ' + y + ')';
var childXPointer = 0;
var children = node.children && node.children.map(function (child) {
var childWidth = child.value / node.value * width - margin;
var childX = childXPointer;
childXPointer = childXPointer + childWidth + margin;
return (0, _preact.h)(Bar, { node: child,
x: childX, y: -offsetY,
width: childWidth, height: height });
});
return (0, _preact.h)(
'g',
{ 'class': 'bar', transform: pos,
width: width, height: height,
title: node.name, value: node.value,
onmouseover: barMouseover, onmouseout: barMouseout },
(0, _preact.h)('rect', { width: width, height: height }),
(0, _preact.h)(
'text',
{ x: '2', y: '16', 'class': 'label' },
node.name
),
children
);
};
(0, _preact.render)((0, _preact.h)(Graph, { data: window.dataJSON, direction: 'up',
width: window.innerWidth, height: '400' }), document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment