localhots
/
empact
1
0
Fork 0
Code Releases Activity

Calculate precise label sizes 

damn you svg!
This commit is contained in:
Gregory Eremin 2015-03-09 21:00:06 +07:00
parent c2fd42bed0
commit fb56b7164b
2 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/scripts/charts.jsx
View File

@ -3,7 +3,7 @@ var SVGNS = "http://www.w3.org/2000/svg",
var BarChart = React.createClass({ var BarChart = React.createClass({
mixins: [Router.Navigation, Router.State], mixins: [Router.Navigation, Router.State],
barHeight: 40, barHeight: 30,
barMargin: 5, barMargin: 5,
getInitialState: function() { getInitialState: function() {
@ -63,7 +63,7 @@ var BarChart = React.createClass({
min: min, min: min,
max: max max: max
}; };
console.log(s); // console.log(s);
this.setState(s); this.setState(s);
}, },
@ -88,7 +88,7 @@ var BarChart = React.createClass({
}, },
render: function() { render: function() {
console.log("State:", this.state) // console.log("State:", this.state)
return ( return (
<div className="barchart-container"> <div className="barchart-container">
<div className="filters"> <div className="filters">
@ -118,7 +118,7 @@ var BarChart = React.createClass({
height = this.barHeight, height = this.barHeight,
x = (min >= 0 ? 0 : -min/max2*maxWidth - (val >= 0 ? 0 : width)), x = (min >= 0 ? 0 : -min/max2*maxWidth - (val >= 0 ? 0 : width)),
y = this.y(i); y = this.y(i);
console.log(point.item, {val: val, max: max, x: x, y: y, width: width}) // console.log(point.item, {val: val, max: max, x: x, y: y, width: width})
return ( return (
<Bar key={point.item} point={point} i={i} <Bar key={point.item} point={point} i={i}
@ -140,10 +140,10 @@ var Bar = React.createClass({
val = p[this.props.metric], val = p[this.props.metric],
w = this.props.width, w = this.props.width,
label = p.item + ': ' + val, label = p.item + ': ' + val,
labelm = 10, // Margin labelM = 5, // Margin
labelw = label.length*9.3 + 2*labelm, // Width labelW = textWidth(label, 'Helvetica Neue', '16px') + 2*labelM,
textx = labelm; textx = 2*labelM;
if (labelw + 2*labelm > w) { if (labelW + 2*labelM > w) {
textx = w + textx; textx = w + textx;
} }
return ( return (
@ -152,10 +152,10 @@ var Bar = React.createClass({
width={w} height={this.props.height} width={w} height={this.props.height}
x={this.props.x} y={this.props.y} rx="2" ry="2" /> x={this.props.x} y={this.props.y} rx="2" ry="2" />
<rect className="label_underlay" <rect className="label_underlay"
x={textx-6} y={this.props.y+10} x={textx - labelM} y={this.props.y + 5}
height={20} width={labelw} height={20} width={labelW}
rx="3" ry="3" /> rx="3" ry="3" />
<text className="label" x={textx} y={this.props.y + 26}>{label}</text> <text className="label" x={textx} y={this.props.y + 21}>{label}</text>
</g> </g>
); );
} }
@ -194,3 +194,24 @@ var Selector = React.createClass({
); );
} }
}); });
function textWidth(str, font, size) {
var svg = document.createElementNS(SVGNS, "svg");
text = document.createElementNS(SVGNS, "text");
svg.width = 500;
svg.height = 500;
svg.style.position = 'absolute';
svg.style.left = '-1000px';
text.appendChild(document.createTextNode(str))
text.style.fontFamily = font;
text.style.fontSize = size;
svg.appendChild(text);
document.body.appendChild(svg);
var box = text.getBBox();
document.body.removeChild(svg);
return box.width;
}

4
app/styles/charts.css
View File

@ -5,11 +5,11 @@
cursor: pointer; cursor: pointer;
} }
.barchart .label { .barchart .label {
font-family: "Lucida Console", Monaco, monospace; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px; font-size: 16px;
} }
.barchart .label_underlay { .barchart .label_underlay {
fill: rgba(255, 255, 255, .8); fill: rgba(255, 255, 255, .7);
} }
.filters { .filters {