Compare text

Find the difference between two text files

Real-time editor
Hide whitespace changes
Hide unchanged lines
Disable line wrap
Layout
Diff precision
Text styles
Syntax highlighting

Untitled diff

Created Diff never expires
13 removals
80 lines
15 additions
82 lines
const { VictoryChart, VictoryBar,VictoryPie ,
const { VictoryChart, VictoryBar,VictoryPie ,
VictoryAxis, VictoryLegend, VictoryLabel ,VictoryTheme} = Victory;
VictoryAxis, VictoryLegend, VictoryLabel ,VictoryTheme} = Victory;
const colors = [
const colors = [
'#F56D00', '#9F3AB7', '#64CCE9', '#32120A',
'#F56D00', '#9F3AB7', '#64CCE9', '#32120A',
'#F8984C', '#BB75CC', '#92DBEF', '#6F5953',
'#F8984C', '#BB75CC', '#92DBEF', '#6F5953',
'#FABD8C', '#D4A6DE', '#B9E8F5', '#A39491']
'#FABD8C', '#D4A6DE', '#B9E8F5', '#A39491']
class DonutChart extends React.Component {
class DonutChart extends React.Component {


static propTypes = {
static propTypes = {
data: PropTypes.arrayOf(PropTypes.object).isRequired,
data: PropTypes.arrayOf(PropTypes.object).isRequired,
width: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
innerRadius: PropTypes.number.isRequired
innerRadius: PropTypes.number.isRequired
}
}


render() {
render() {
let { data, innerRadius, width, height } = this.props
let { data, innerRadius, width, height } = this.props
const colorScale = colors.slice(0, data.length)
const colorScale = colors.slice(0, data.length)
const total = data.reduce((a, b) => ({ y: a.y + b.y }))
const total = data.reduce((a, b) => ({ y: a.y + b.y }))
const viewBox = `0 0 ${width} ${height}`


const legendDataWithStyle = data.map((dateItem, index) => {
const legendDataWithStyle = data.map((dateItem, index) => {
return { name : dateItem.x, symbol: { fill: colors[index], type: "square" } }
return { name : dateItem.x, symbol: { fill: colors[index], type: "square" } }
}
}
)
)




return (
return (
<div style={{ width: width + 100, height: height + 100 }} >
<div style={{ width: width + 100, height: height + 100 }} >
<svg viewBox={viewBox}>
<svg width={width + 100} height={height}>


<VictoryPie
<VictoryPie
standalone={false}
standalone={false}
width={width} height={height}
width={width} height={height}
data={data}
data={data}
innerRadius={innerRadius}
innerRadius={innerRadius}
colorScale={colorScale}
colorScale={colorScale}
/>
/>
<VictoryLabel
<VictoryLabel
textAnchor="middle"
textAnchor="middle"
style={{ fontSize: 20 }}
style={{ fontSize: 20 }}
x={width / 2} y={height / 2}
x={width / 2} y={height / 2}
text={total.y}
text={total.y}
/>
/>
<g transform="translate(40,0)">
<VictoryLegend x={width} y={30}
title="Totals"
centerTitle
orientation="vertical"
gutter={20}
style={{
title: { fontSize: 15 }
}}
data={legendDataWithStyle}
standalone={false}
/>
</g>


<VictoryLegend x={width - 50} y={30}
title="Totals"
centerTitle
orientation="vertical"
gutter={20}
style={{
title: { fontSize: 15 }
}}
data={legendDataWithStyle}
standalone={false}
/>






</svg>
</svg>
</div>
</div>
)
)
}
}
}
}


const dounutData = [
const dounutData = [
{ x: 'a', y: 1 }, { x: 'b', y: 2 }, { x: 'c', y: 3 },
{ x: 'a', y: 1 }, { x: 'b', y: 2 }, { x: 'c', y: 3 },
{ x: 'd', y: 4 }, { x: 'e', y: 2 }, { x: 'f', y: 6 }
{ x: 'd', y: 4 }, { x: 'e', y: 2 }, { x: 'f', y: 6 }
];
];




ReactDOM.render(
ReactDOM.render(
<DonutChart data={dounutData} width={300} height={300}
<DonutChart data={dounutData} width={300} height={300}
innerRadius={68} />,
innerRadius={68} />,
document.getElementById('container')
document.getElementById('container')
);
);


Saved diffs