Browse Source
* update bizcharts * fixed lint * add charts autoHeight decorator * 升级 TimelineChart * 升级 TagCloud * upgrade bizcharts-plugin-slider * fix(chart): tag cloud overlapping (#461) The key point is: `chart.coord().reflect()`. and you can adjust gaps between words by setting padding for tag-cloud transform * upgrade react@16 & bizcharts@3.1.0 * update bizcharts to 3.1.0-beta2 * fix bizcharts repaint * upgrade to bizcharts@3.1.0-beta.4 * fix TimelineCharts detail stylepull/533/head
niko
8 years ago
committed by
GitHub
GitHub
24 changed files with 977 additions and 1167 deletions
@ -0,0 +1,63 @@ |
|||
/* eslint eqeqeq: 0 */ |
|||
import React from 'react'; |
|||
|
|||
function computeHeight(node) { |
|||
const totalHeight = parseInt(getComputedStyle(node).height, 10); |
|||
const padding = |
|||
parseInt(getComputedStyle(node).paddingTop, 10) + |
|||
parseInt(getComputedStyle(node).paddingBottom, 10); |
|||
return totalHeight - padding; |
|||
} |
|||
|
|||
function getAutoHeight(n) { |
|||
if (!n) { |
|||
return 0; |
|||
} |
|||
|
|||
let node = n; |
|||
|
|||
let height = computeHeight(node); |
|||
|
|||
while (!height) { |
|||
node = node.parentNode; |
|||
if (node) { |
|||
height = computeHeight(node); |
|||
} else { |
|||
break; |
|||
} |
|||
} |
|||
|
|||
return height; |
|||
} |
|||
|
|||
const autoHeight = () => (WrappedComponent) => { |
|||
return class extends React.Component { |
|||
state = { |
|||
computedHeight: 0, |
|||
}; |
|||
|
|||
componentDidMount() { |
|||
const { height } = this.props; |
|||
if (!height) { |
|||
const h = getAutoHeight(this.root); |
|||
// eslint-disable-next-line
|
|||
this.setState({ computedHeight: h }); |
|||
} |
|||
} |
|||
|
|||
handleRoot = (node) => { |
|||
this.root = node; |
|||
}; |
|||
|
|||
render() { |
|||
const { height } = this.props; |
|||
const { computedHeight } = this.state; |
|||
const h = height || computedHeight; |
|||
return ( |
|||
<div ref={this.handleRoot}>{h > 0 && <WrappedComponent {...this.props} height={h} />}</div> |
|||
); |
|||
} |
|||
}; |
|||
}; |
|||
|
|||
export default autoHeight; |
|||
@ -1,17 +0,0 @@ |
|||
/* eslint eqeqeq: 0 */ |
|||
|
|||
function equal(old, target) { |
|||
let r = true; |
|||
for (const prop in old) { |
|||
if (typeof old[prop] === 'function' && typeof target[prop] === 'function') { |
|||
if (old[prop].toString() != target[prop].toString()) { |
|||
r = false; |
|||
} |
|||
} else if (old[prop] != target[prop]) { |
|||
r = false; |
|||
} |
|||
} |
|||
return r; |
|||
} |
|||
|
|||
export default equal; |
|||
@ -1,26 +1,4 @@ |
|||
// 全局 G2 设置
|
|||
import G2 from 'g2'; |
|||
import { track } from 'bizcharts'; |
|||
|
|||
G2.track(false); |
|||
|
|||
const colors = [ |
|||
'#8543E0', '#F04864', '#FACC14', '#1890FF', '#13C2C2', '#2FC25B', '#fa8c16', '#a0d911', |
|||
]; |
|||
|
|||
const config = { |
|||
...G2.Theme, |
|||
defaultColor: '#1089ff', |
|||
colors: { |
|||
default: colors, |
|||
intervalStack: colors, |
|||
}, |
|||
tooltip: { |
|||
background: { |
|||
radius: 4, |
|||
fill: '#000', |
|||
fillOpacity: 0.75, |
|||
}, |
|||
}, |
|||
}; |
|||
|
|||
G2.Global.setTheme(config); |
|||
track(false); |
|||
|
|||
Loading…
Reference in new issue