Skip to content

Commit

Permalink
fix: update props to react 15 rc2 format
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: now requires react 15 rc2
  • Loading branch information
@colinmeinke
colinmeinke committed Mar 16, 2016
1 parent d5866bf commit 530ec4f
Show file tree
Hide file tree
Showing 5 changed files with 34 additions and 34 deletions.
4 changes: 2 additions & 2 deletions examples/barChart/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"express": "^4.13.4",
"react": "^15.0.0-rc.1",
"react-dom": "^15.0.0-rc.1"
"react": "^15.0.0-rc.2",
"react-dom": "^15.0.0-rc.2"
},
"description": "SVG charts bar chart example",
"devDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions examples/lineChart/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"express": "^4.13.4",
"react": "^15.0.0-rc.1",
"react-dom": "^15.0.0-rc.1"
"react": "^15.0.0-rc.2",
"react-dom": "^15.0.0-rc.2"
},
"description": "SVG charts line chart example",
"devDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"babel-preset-react": "^6.5.0",
"commitizen": "^2.7.2",
"cz-conventional-changelog": "^1.1.5",
"react": "^15.0.0-rc.1",
"react": "^15.0.0-rc.2",
"rimraf": "^2.5.2",
"semantic-release": "^4.3.5",
"webpack": "^1.12.14"
Expand All @@ -56,7 +56,7 @@
"main": "lib/index.js",
"name": "react-svg-chart",
"peerDependencies": {
"react": "^15.0.0-rc.1"
"react": "^15.0.0-rc.2"
},
"repository": {
"type": "git",
Expand Down
22 changes: 11 additions & 11 deletions src/BarChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const BarChart = createClass({
<svg
aria-describedby="bar-chart-description"
aria-labelledby="bar-chart-title"
class={ `bar-chart ${ this.props.className }` }
className={ `bar-chart ${ this.props.className }` }
height={ this.props.height }
preserveAspectRatio={ this.props.preserveAspectRatio }
role="img"
Expand All @@ -87,24 +87,24 @@ const BarChart = createClass({

return (
<g
class={ `bar-chart__group${ bar.label ? `bar-chart__group--${ bar.label }` : '' }` }
className={ `bar-chart__group${ bar.label ? `bar-chart__group--${ bar.label }` : '' }` }
key={ i }
>
<rect
aria-describedby={ `bar-chart-value-${ bar.label }` }
aria-labelledby={ `bar-chart-label-${ bar.label }` }
class="bar-chart__bar"
className="bar-chart__bar"
height={ barHeight }
width={ bar.value }
x={ 0 }
y={ barY }
/>
{ this.props.showLabels ?
<text
class="bar-chart__label"
dominant-baseline="middle"
className="bar-chart__label"
dominantBaseline="middle"
id={ `bar-chart-label-${ bar.label }` }
text-anchor="end"
textAnchor="end"
x={ -this.props.labelSpacing }
y={ textY }
>
Expand All @@ -115,11 +115,11 @@ const BarChart = createClass({
</title>
}
<text
class="bar-chart__value"
dominant-baseline="middle"
className="bar-chart__value"
dominantBaseline="middle"
fill={ valueInBar ? 'rgb( 255, 255, 255 )' : 'rgb( 0, 0, 0 )' }
id={ `bar-chart-value-${ bar.label }` }
text-anchor={ valueInBar ? 'end' : 'start' }
textAnchor={ valueInBar ? 'end' : 'start' }
x={ bar.value + ( valueInBar ? -this.props.valueSpacing : this.props.valueSpacing )}
y={ textY }
>
Expand All @@ -129,7 +129,7 @@ const BarChart = createClass({
);
})}

<g class="bar-chart__grid-x">
<g className="bar-chart__grid-x">
<line
stroke="rgb( 0, 0, 0 )"
x1="0"
Expand All @@ -139,7 +139,7 @@ const BarChart = createClass({
/>
</g>

<g class="bar-chart__grid-y">
<g className="bar-chart__grid-y">
<line
stroke="rgb( 0, 0, 0 )"
x1="0"
Expand Down
34 changes: 17 additions & 17 deletions src/LineChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const LineChart = createClass({
<svg
aria-describedby="line-chart-description"
aria-labelledby="line-chart-title"
class={ `line-chart ${ this.props.className }` }
className={ `line-chart ${ this.props.className }` }
height={ this.props.height }
preserveAspectRatio={ this.props.preserveAspectRatio }
width={ this.props.width }
Expand All @@ -81,7 +81,7 @@ const LineChart = createClass({
{ this.props.description }
</desc>

<g class="line-chart__grid-x">
<g className="line-chart__grid-x">
<line
stroke="rgb( 0, 0, 0 )"
x1="0"
Expand All @@ -91,7 +91,7 @@ const LineChart = createClass({
/>
</g>

<g class="line-chart__grid-y">
<g className="line-chart__grid-y">
<line
stroke="rgb( 0, 0, 0 )"
x1="0"
Expand All @@ -103,18 +103,18 @@ const LineChart = createClass({

{ this.state.lines.map(({ points }, i ) => (
<g
class="line-chart__group"
className="line-chart__group"
key={ i }
>
<polyline
class="line-chart__line"
className="line-chart__line"
fill="none"
points={ points.map(( p, j ) => (
`${ pointSpacing * ( j + 1 )},${ p.value }`
)).join( ',' )}
stroke="rgb( 0, 0, 0 )"
stroke-linejoin="round"
stroke-width="5"
strokeLinejoin="round"
strokeWidth="5"
/>

{ points.map(( p, j ) => {
Expand All @@ -124,24 +124,24 @@ const LineChart = createClass({

return (
<g
class={ `line-chart__group${ p.label ? `line-chart__group--${ p.label }` : '' }` }
className={ `line-chart__group${ p.label ? `line-chart__group--${ p.label }` : '' }` }
key={ j }
>
<circle
aria-describedby={ `line-chart-value-${ p.label }` }
aria-labelledby={ `line-chart-label-${ p.label }` }
class="line-chart__point"
className="line-chart__point"
cx={ x }
cy={ p.value }
r={ this.props.pointSize / 2 }
/>

{ this.props.showLabels ?
<text
class="line-chart__label"
dominant-baseline="center"
className="line-chart__label"
dominantBaseline="center"
id={ `line-chart-label-${ p.label }` }
text-anchor="middle"
textAnchor="middle"
x={ x }
y={ this.props.height - this.state.offsetTop - this.props.labelOffset }
>
Expand All @@ -154,24 +154,24 @@ const LineChart = createClass({

<g>
<rect
class="line-chart__value-bg"
className="line-chart__value-bg"
fill="rgb( 255, 255, 255 )"
height={ this.props.valueHeight }
rx={ this.props.valueBorderRadius }
ry={ this.props.valueBorderRadius }
stroke="rgb( 0, 0, 0 )"
stroke-width="1"
strokeWidth="1"
width={ this.props.valueWidth }
x={ x - this.props.valueWidth / 2 }
y={ p.value - this.props.valueOffset - this.props.valueHeight / 2 }
/>
<text
class="line-chart__value"
dominant-baseline="central"
className="line-chart__value"
dominantBaseline="central"
id={ `line-chart-value-${ p.label }` }
x={ x }
y={ p.value - this.props.valueOffset }
text-anchor="middle"
textAnchor="middle"
>
{ formattedValue }
</text>
Expand Down

0 comments on commit 530ec4f

Please sign in to comment.