localhots
/
empact
1
0
Fork 0
Code Releases Activity

Label positioning done right

This commit is contained in:
Gregory Eremin 2015-03-09 21:58:23 +07:00
parent fb56b7164b
commit dcbc4efe55
1 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/scripts/charts.jsx
View File

@ -116,14 +116,15 @@ var BarChart = React.createClass({
max2 = (min < 0 ? max - min : max), max2 = (min < 0 ? max - min : max),
width = Math.abs(val)/max2*maxWidth, width = Math.abs(val)/max2*maxWidth,
height = this.barHeight, height = this.barHeight,
x = (min >= 0 ? 0 : -min/max2*maxWidth - (val >= 0 ? 0 : width)), offset = -min/max2*maxWidth,
x = (min >= 0 ? 0 : offset - (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}
metric={this.state.sort} metric={this.state.sort}
x={x} y={y} width={width} height={height} x={x} y={y} offset={offset} width={width} height={height}
link={this.props.link} /> link={this.props.link} />
); );
} }
@ -131,31 +132,51 @@ var BarChart = React.createClass({
var Bar = React.createClass({ var Bar = React.createClass({
mixins: [Router.Navigation], mixins: [Router.Navigation],
handleClick: function(e) { handleClick: function(e) {
this.transitionTo(this.props.link + this.props.point.item); this.transitionTo(this.props.link + this.props.point.item);
}, },
render: function() { render: function() {
var p = this.props.point, var val = this.props.point[this.props.metric],
val = p[this.props.metric], item = this.props.point.item,
w = this.props.width, offset = this.props.offset,
label = p.item + ': ' + val, width = this.props.width,
labelM = 5, // Margin label = item + ': ' + val,
labelW = textWidth(label, 'Helvetica Neue', '16px') + 2*labelM, labelPadding = 5,
textx = 2*labelM; labelWidth = textWidth(label, 'Helvetica Neue', '16px') + 2*labelPadding,
if (labelW + 2*labelM > w) { labelOuterWidth = labelWidth + 2*labelPadding,
textx = w + textx; labelX = 0,
barX = this.props.x;
if (labelOuterWidth <= width) {
if (offset > 0) {
if (barX === offset) {
labelX = barX + 2*labelPadding;
} else {
labelX = barX + width - labelOuterWidth + 2*labelPadding;
}
} else {
labelX = barX + 2*labelPadding;
}
} else {
if (labelOuterWidth <= barX) {
labelX = barX - labelOuterWidth + 2*labelPadding;
} else {
labelX = barX + width + labelPadding;
}
} }
return ( return (
<g onClick={this.handleClick}> <g onClick={this.handleClick}>
<rect className="bar" fill={Colors2[this.props.i]} <rect className="bar" fill={Colors2[this.props.i]}
width={w} height={this.props.height} width={width} 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 - labelM} y={this.props.y + 5} x={labelX - labelPadding} y={this.props.y + 5}
height={20} width={labelW} height={20} width={labelWidth}
rx="3" ry="3" /> rx="3" ry="3" />
<text className="label" x={textx} y={this.props.y + 21}>{label}</text> <text className="label" x={labelX} y={this.props.y + 21}>{label}</text>
</g> </g>
); );
} }