Confronta il testo

Trova la differenza tra due file di testo

Editor live
Nascondi spazi bianchi
Comprimi invariate
Senza a capo
Layout
Livello di dettaglio
Stili testo
Evidenziazione sintassi

Untitled diff

Creato Il diff non scade mai
13 rimozioni
80 linee
15 aggiunte
82 linee
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')
);
);


Diff salvati