localhots
/
empact
1
0
Fork 0
Code Releases Activity

Move all possible SAC styles to css

This commit is contained in:
Gregory Eremin 2015-03-17 13:48:12 +07:00
parent 326bae572b
commit 8eb44d0ae4
2 changed files with 68 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/scripts/src/charts/stacked_area_chart.jsx
View File

@ -74,12 +74,12 @@ var StackedAreaChart = React.createClass({
handleFocusIn: function(i) { handleFocusIn: function(i) {
var node = this.refs.container.getDOMNode(); var node = this.refs.container.getDOMNode();
node.className = 'sachart-container focused item-'+ i; node.className = 'sac focused item-'+ i;
}, },
handleFocusOut: function() { handleFocusOut: function() {
var node = this.refs.container.getDOMNode(); var node = this.refs.container.getDOMNode();
node.className = 'sachart-container'; node.className = 'sac';
}, },
handleNewData: function() { handleNewData: function() {
@ -210,7 +210,7 @@ var StackedAreaChart = React.createClass({
return ( return (
<StackedArea key={'area-'+ i} <StackedArea key={'area-'+ i}
item={item} i={i} item={item} i={i}
d={this.buildPathD(path)} d={roundPathCorners(this.buildPathD(path), 4)}
color={Colors[i]} color={Colors[i]}
onMouseOver={this.handleFocusIn.bind(this, i)} /> onMouseOver={this.handleFocusIn.bind(this, i)} />
); );
@ -281,7 +281,7 @@ var StackedAreaChart = React.createClass({
var legend = _(paths).pluck(0).filter(function(el){ return el !== null; }).value(); var legend = _(paths).pluck(0).filter(function(el){ return el !== null; }).value();
return ( return (
<div ref="container" className="sachart-container"> <div ref="container" className="sac">
<div className="whatsgoingon"> <div className="whatsgoingon">
This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} <WeekIntervalSelector /> This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} <WeekIntervalSelector />
</div> </div>
@ -373,14 +373,10 @@ var Dot = React.createClass({
<circle ref="dot" <circle ref="dot"
cx={this.props.x} cx={this.props.x}
cy={this.state.lastY || this.props.y} cy={this.state.lastY || this.props.y}
r={this.radius} r={this.radius} />
fill="#fff"
stroke="#f0f0f0"
strokeWidth="2" />
<text ref="value" <text ref="value"
x={this.props.x} x={this.props.x}
y={this.props.y+4} y={this.props.y+4}>
textAnchor="middle">
{this.props.value} {this.props.value}
</text> </text>
</g> </g>
@ -414,17 +410,15 @@ var Axis = React.createClass({
return ( return (
<g key={'mark-'+ i}> <g key={'mark-'+ i}>
<line <line className="axis"
x1={x} x1={x}
y1={this.props.y} y1={this.props.y}
x2={x} x2={x}
y2={this.props.y + 4} y2={this.props.y + 4} />
stroke="#666" strokeWidth="1" />
{showLabel ? <text className="axis-mark" {showLabel ? <text className="axis-mark"
x={x} x={x}
y={this.props.y + 15} y={this.props.y + 15}
textAnchor={ta} textAnchor={ta}
fill="#666"
> >
{formatDate(week)} {formatDate(week)}
</text> : null} </text> : null}
@ -434,20 +428,19 @@ var Axis = React.createClass({
return ( return (
<g ref="axis"> <g ref="axis">
<line <line className="axis"
x1="0" x1="0"
y1={this.props.y} y1={this.props.y}
x2={this.props.width} x2={this.props.width}
y2={this.props.y} y2={this.props.y} />
stroke="#666" strokeWidth="1" />
{this.props.weeks.map(renderMark)} {this.props.weeks.map(renderMark)}
<line <line className="axis"
x1={this.props.width - 1} x1={this.props.width - 1}
y1={this.props.y} y1={this.props.y}
x2={this.props.width - 1} x2={this.props.width - 1}
y2={this.props.y + 4} y2={this.props.y + 4} />
stroke="#666" strokeWidth="1" />
</g> </g>
) )
} }
}); });

94
app/styles/charts.css
View File

@ -1,11 +1,11 @@
@media (min-width: 640px) { @media (min-width: 640px) {
.barchart-container, .sachart-container { .barchart-container, .sac {
width: 100%; width: 100%;
} }
} }
@media (min-width: 1100px) { @media (min-width: 1100px) {
.barchart-container, .sachart-container { .barchart-container, .sac {
width: 50%; width: 50%;
} }
} }
@ -30,18 +30,18 @@
} }
.sachart-container { .sac {
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
padding: 0 20px 20px 0; padding: 0 20px 20px 0;
} }
.sachart-container .dot { .sac .dot {
display: none; display: none;
} }
.sachart-container .dot text { .sac .dot text {
font-size: 10px; font-size: 10px;
} }
.sachart-container .legend { .sac .legend {
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -55,50 +55,50 @@
margin: 1px 5px 0 0; margin: 1px 5px 0 0;
border-radius: 8px; border-radius: 8px;
} }
.sachart-container .legend li { .sac .legend li {
display: inline-block; display: inline-block;
padding: 10px 15px 0 0; padding: 10px 15px 0 0;
cursor: pointer; cursor: pointer;
} }
.sachart-container.focused .path { .sac.focused .path {
fill: #f0f0f0; fill: #f0f0f0;
} }
.sachart-container.focused .label { .sac.focused .label {
opacity: 0.3; opacity: 0.3;
} }
.sachart-container.item-0 .path-0 { fill: #EA8369; } .sac.item-0 .path-0 { fill: #EA8369; }
.sachart-container.item-1 .path-1 { fill: #FCCD67; } .sac.item-1 .path-1 { fill: #FCCD67; }
.sachart-container.item-2 .path-2 { fill: #B5A9F2; } .sac.item-2 .path-2 { fill: #B5A9F2; }
.sachart-container.item-3 .path-3 { fill: #9DD7F2; } .sac.item-3 .path-3 { fill: #9DD7F2; }
.sachart-container.item-4 .path-4 { fill: #FFA3A4; } .sac.item-4 .path-4 { fill: #FFA3A4; }
.sachart-container.item-5 .path-5 { fill: #A8EAA8; } .sac.item-5 .path-5 { fill: #A8EAA8; }
.sachart-container.item-6 .path-6 { fill: #F9D08B; } .sac.item-6 .path-6 { fill: #F9D08B; }
.sachart-container.item-7 .path-7 { fill: #6CCECB; } .sac.item-7 .path-7 { fill: #6CCECB; }
.sachart-container.item-8 .path-8 { fill: #F9E559; } .sac.item-8 .path-8 { fill: #F9E559; }
.sachart-container.item-9 .path-9 { fill: #FFBAD2; } .sac.item-9 .path-9 { fill: #FFBAD2; }
.sachart-container.item-0 .dot-0 { display: inline; } .sac.item-0 .dot-0 { display: inline; }
.sachart-container.item-1 .dot-1 { display: inline; } .sac.item-1 .dot-1 { display: inline; }
.sachart-container.item-2 .dot-2 { display: inline; } .sac.item-2 .dot-2 { display: inline; }
.sachart-container.item-3 .dot-3 { display: inline; } .sac.item-3 .dot-3 { display: inline; }
.sachart-container.item-4 .dot-4 { display: inline; } .sac.item-4 .dot-4 { display: inline; }
.sachart-container.item-5 .dot-5 { display: inline; } .sac.item-5 .dot-5 { display: inline; }
.sachart-container.item-6 .dot-6 { display: inline; } .sac.item-6 .dot-6 { display: inline; }
.sachart-container.item-7 .dot-7 { display: inline; } .sac.item-7 .dot-7 { display: inline; }
.sachart-container.item-8 .dot-8 { display: inline; } .sac.item-8 .dot-8 { display: inline; }
.sachart-container.item-9 .dot-9 { display: inline; } .sac.item-9 .dot-9 { display: inline; }
.sachart-container.item-0 .label-0 { opacity: 1; } .sac.item-0 .label-0 { opacity: 1; }
.sachart-container.item-1 .label-1 { opacity: 1; } .sac.item-1 .label-1 { opacity: 1; }
.sachart-container.item-2 .label-2 { opacity: 1; } .sac.item-2 .label-2 { opacity: 1; }
.sachart-container.item-3 .label-3 { opacity: 1; } .sac.item-3 .label-3 { opacity: 1; }
.sachart-container.item-4 .label-4 { opacity: 1; } .sac.item-4 .label-4 { opacity: 1; }
.sachart-container.item-5 .label-5 { opacity: 1; } .sac.item-5 .label-5 { opacity: 1; }
.sachart-container.item-6 .label-6 { opacity: 1; } .sac.item-6 .label-6 { opacity: 1; }
.sachart-container.item-7 .label-7 { opacity: 1; } .sac.item-7 .label-7 { opacity: 1; }
.sachart-container.item-8 .label-8 { opacity: 1; } .sac.item-8 .label-8 { opacity: 1; }
.sachart-container.item-9 .label-9 { opacity: 1; } .sac.item-9 .label-9 { opacity: 1; }
.selector { .selector {
@ -197,6 +197,22 @@
display: inline; display: inline;
} }
/* NEW */
.axis {
stroke: #888;
stroke-width: 1px;
}
.axis-mark { .axis-mark {
font-size: 10px; font-size: 10px;
fill: #888;
}
.sac .dot circle {
fill: #fff;
stroke: #f0f0f0;
stroke-width: 2px;
}
.sac .dot text {
text-anchor: middle;
} }