initGraph () {
this.arc = d3.svg.arc()
.outerRadius(this.radius - 10)
.innerRadius(0)
.bind(this)
this.pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.population
})
this.svg = d3.select(this.container).append('svg')
.attr('width', '100%')
.attr('height', '100%')
.attr('viewBox','0 0 '+Math.min(this.width, this.height)+' '+Math.min(this.width, this.height))
.attr('perserveAspectRatio', 'xMinYMid')
this.group = this.svg.append('g')
.attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')');
this.pieces = this.group.selectAll('.arc')
.data( this.pie(dataset) )
.enter().append('g')
.attr('class', 'arc')
this.pieces.append('path')
.attr('d', this.arc)
this.pieces.style('fill', function(d) {
return this.colors(d.data.age)
}.bind(this))
}
render:function() {
var props = this.props;
var pie = d3.layout
.pie()
.sort(null);
var arcData = pie(props.data);
var arcs = arcData.map(function(arc, i) {
return (
React.createElement(Arc, {
startAngle: arc.startAngle,
endAngle: arc.endAngle,
outerRadius: props.radius,
innerRadius: props.innerRadius,
labelTextFill: props.labelTextFill,
valueTextFill: props.valueTextFill,
fill: props.colors(i),
label: props.labels[i],
value: props.data[i],
key: i,
width: props.width}
)
);
});
return (
React.createElement("g", {className: "rd3-piechart-pie", transform: props.transform}, arcs)
);
}
NBASummary.prototype._getLayout = function() {
var pie = d3.layout.pie().sort(null)
.value(function(d) {
return d.population;
});
return pie;
};
render: function() {
this.$el.html(this.template({}));
var width = 300,
height = 300,
radius = Math.min(width, height) / 2,
valAttr = this.valAttribute;
this.legend = this.createLegend();
this.arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
this.pie = d3.layout.pie()
.sort(function(a,b) {
return b[valAttr] - a[valAttr]
})
.value(function(d) { return d[valAttr]; });
this.svg = d3.select(this.$('.pie-chart')[0]).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
return this;
},
constructor($element) {
'ngInject';
const width = $element.parent().width();
const height = $element.parent().height();
const totalSize = (this.strokeWidth + this.marginBetweenCircles) * _.size(this.dataset);
const pie = d3.layout.pie().sort(null);
const arc = d3.svg.arc();
let currentElement = 0;
let radius = Math.min(width / 2 - totalSize, height / 2 - totalSize);
this._svg = d3.select($element[0]).append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${width / 2}, ${height / 2})`);
const pathGroups = this._svg.selectAll('g')
.data(this.dataset)
.enter()
.append('g')
.attr('class', (d) => `${COMPONENT_NAME}__${this.chartId}__${_.keys(d)[0]}`);
pathGroups.selectAll('path')
.data((d) => pie(getPercent(_.values(d))))
.enter().append('path')
.attr('class', (d, i) => `${COMPONENT_NAME}__${i === 1 ? 'rest' : 'current'}`)
.attr('d', (d, i, j) => {
if (j > 0 && currentElement !== j) {
radius += this.marginBetweenCircles + this.strokeWidth;
currentElement = j;
}
return arc.innerRadius(radius).outerRadius(radius + this.strokeWidth)(d);
});
}
displayRadialGraph: function(target_elem, data_sub, data_total) {
var targetElemBox = $("#" + target_elem).get(0);
var targetElemP = $("#" + target_elem + "_p").get(0);
if(!data_sub || !data_total) {
targetElemP.innerHTML = "N/A";
} else {
var parseData = [
//parsing data to 2 decimal positions
{ label: gettext("Hours spent on content"), count: Math.round((data_sub * 100)/data_total) },
{ label: gettext("Other activites (exercises, etc.)"), count: Math.round(((data_total - data_sub) * 100)/data_total) }
];
//adjusting the graph's size based on target_elem's sizing
var width = targetElemBox.clientWidth;
var height = targetElemBox.clientHeight;
var radius = (Math.min(width, height) / 2);
var color = d3.scale.category20();
var svg = d3.select("#" + target_elem)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
var arc = d3.svg.arc()
.innerRadius(radius - radius/6)
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.count; })
.sort(null);
var path = svg.selectAll("path")
.data(pie(parseData))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", function(d, i) {
return color(d.data.label);
});
//parsing to 2 decimals
var content_percentage = Math.round((data_sub * 100)/data_total);
targetElemP.innerHTML = content_percentage + "%";
//this will display relevant data when you hover over that data's arc on the radial graph
path.on('mouseover', function(d) {
targetElemP.innerHTML = (d.data.label + ": " + d.data.count + "%");
});
//when not hovering, you'll see the content percentage
path.on('mouseout', function() {
targetElemP.innerHTML = content_percentage + "%";
});
}
},
exports.drawPie = function (parentElem, data) {
var width = 120,
height = 120;
var radius = Math.min(width, height) / 2;
var colors = data.map(function (item) {
return item.color;
});
var color = d3.scale.ordinal()
.range(colors);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function (d) {
return d.val;
});
var svg = d3.select(parentElem).append("svg")
//.attr("width", "100%")
// .attr("height", height)
.attr("viewBox", "0, 0, " + width + ", " + height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
data.forEach(function (d) {
d.val = +d.val;
});
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function (d) {
return color(d.data.lbl);
});
g.append("text")
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr('class', 'pie-text')
.text(function (d) {
return d.data.lbl;
});
};
stats.createPie = function(puddle, puddleGroup, data) {
var xOffset = (pool.width()/3) * (1/6);
var yOffset = pool.height() / 2;
puddleGroup.selectAll('.d3-stats-pie').remove();
var pieGroup = puddleGroup.append('g')
.attr({
transform: 'translate(' + xOffset + ',' + yOffset + ')',
class: 'd3-stats-pie'
});
if (stats.hasNaN(data)) {
puddleGroup.classed('d3-insufficient-data', true);
pieGroup.append('circle')
.attr({
cx: 0,
cy: 0,
r: opts.pieRadius
});
var annotationOpts = {
x: xOffset + puddle.xPosition(),
y: yOffset,
hoverTarget: puddleGroup
};
_.defaults(annotationOpts, opts.defaultAnnotationOpts);
pool.parent().select('#tidelineAnnotations_stats').call(annotation, annotationOpts);
return null;
}
else {
puddleGroup.on('mouseover', null);
puddleGroup.on('mouseout', null);
puddleGroup.classed('d3-insufficient-data', false);
pie = d3.layout.pie().value(function(d) {
return d.value;
})
.sort(null);
arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(opts.pieRadius);
var slices = pieGroup.selectAll('g.d3-stats-slice')
.data(pie(data))
.enter()
.append('path')
.attr({
d: arc,
class: function(d) {
return 'd3-stats-slice d3-' + d.data.type;
}
});
return slices;
}
};
return function(junctions, newJunctions) {
var arc = d3.svg.arc()
.innerRadius(junctionRadius)
.outerRadius(dependencyArcRadius),
pie = d3.layout.pie()
.sort(null)
.value(function(d, i) {
return d.value;
});
var dependenceArc = junctions.selectAll("path")
.data(
function(d, i) {
var dependence = d.collapsed ? 0 : d.dependence,
independence = 1 - dependence;
return pie([
{type: "dependence", color: "black", node: d, value: dependence},
{type: "independence", color: "white", node: d, value: independence}
]);
},
function(d, i) {
return d.data.type;
}
);
dependenceArc.exit().remove();
dependenceArc.enter()
.append("path")
.attr("fill", function(d, i){
return d.data.color;
})
.attr("stroke-width", 0.4)
.call(dragDependency);
dependenceArc
.attr("d", arc)
.style("visibility", function(d, i) {
/*
If detail is off, make sure we're always hidden.
Otherwise, we'll just inherit this value.
*/
return d.data.node.detail ? null : "hidden";
});
junctions.call(onScroll, function(d, i, change) {
var node = getNodeCollection()
.get(d.id);
node.dependence(d.dependence + change);
update();
});
};
plugin.render = function(id, data, config) {
$(id).empty();
var count = data.reduce(function(prev, curr) {
return prev + curr[config.value];
}, 0);
if (count === 0 || isNaN(count)) {
$(id).append('<p class="error">Sorry, there is not enough data to display the chart. Add at least one scene to your script.</p>');
return;
}
var vis = d3.select(id)
.append('svg:svg')
.data([data])
.attr('width', 200)
.attr('height', 200)
.style('margin-left', 'auto')
.style('margin-right', 'auto')
.append('svg:g')
.attr('transform', 'translate(100,100)');
var arc = d3.svg.arc().outerRadius(100);
var pie = d3.layout.pie().value(function(d) {
return d[config.value];
});
var arcs = vis.selectAll('g')
.data(pie)
.enter()
.append('svg:g');
arcs.append('svg:path')
.attr('fill', function(d) {
return config.color(d);
}).attr('d', arc)
.on("mouseover", function(d) {
config.show_tooltip(config.tooltip(d));
})
.on("mousemove", function() {
config.move_tooltip(d3.event.pageX, d3.event.pageY);
})
.on("mouseout", function() {
config.hide_tooltip();
});
vis.append('svg:circle')
.attr('fill', 'none')
.attr('stroke', '#000000')
.attr('stroke-width', '1')
.attr('cx', '0')
.attr('cy', '0')
.attr('r', '100');
};
create(data) {
this.legendRectSize = 18;
this.legendSpacing = 4;
this.data = data;
const numberOfItems = Object.keys(data).length;
const width = this.props.width;
const height = this.props.height;
const svgHeight = this.getHeight(numberOfItems);
const radius = Math.min(width, height) / 2;
const halfWidth = width / 2;
const halfHeight = height / 2;
this.arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(this.props.innerRadius);
this.pie = d3.layout.pie()
.sort(null)
.value(d => { return d.value; });
this.svg = d3.select(this.el).append("svg")
.attr("width", width)
.attr("height", svgHeight)
.append("g")
.attr("transform", `translate(${halfWidth}, ${halfHeight})`);
this.path = this.svg.selectAll("path")
.data(this.pie(d3.entries(data)))
.enter().append("path");
this.path
.attr("fill", (d, i) => { return this.color(i); })
.attr("d", this.arc)
.each(d => {
// Let's keep a reference to the
// original angles to make use of
// in our arcTween helper.
this.originalAngles = d;
})
.on("mouseover", this.onMouseOver.bind(this))
.on("mousemove", this.onMouseMove.bind(this))
.on("mouseout", this.onMouseOut.bind(this));
if (this.showTooltips) {
this.addTooltips();
}
if (this.showLegend) {
this.addLegend();
}
}
drawChart () {
const div = document.getElementById('chart' + this.props.elem.id);
while (div.firstChild) {
div.removeChild(div.firstChild);
}
let data = Object.keys(this.props.elem.categories).map(key => {
return {
label: key,
value: this.props.elem.categories[key]
};
})
.filter(elem => elem.value !== 0);
if (!data.length) {
data = [{label: 'no votes', value: 1}];
}
const w = 128;
const h = 128;
const r = h / 2;
const color = d3.scale.category20c();
const vis = d3.select('#chart' + this.props.elem.id)
.append('svg:svg')
.data([data])
.attr('width', w)
.attr('height', h)
.append('svg:g')
.attr('transform', 'translate(' + r + ',' + r + ')');
const pie = d3.layout.pie().value(d => d.value);
const arc = d3.svg.arc().outerRadius(r);
const arcs = vis.selectAll('g.slice')
.data(pie)
.enter()
.append('svg:g')
.attr('class', 'slice');
arcs.append('svg:path')
.attr('fill', (d, i) => color(i))
.attr('d', (d) => arc(d));
// add the text
arcs.append('svg:text').attr('transform', d => {
d.innerRadius = 0;
d.outerRadius = r;
return 'translate(' + arc.centroid(d) + ')';
})
.attr('text-anchor', 'middle').text((d, i) => data[i].label);
}
selection.each(function (data, index) {
var pie = d3.layout.pie()
.sort(sort)
.value(value);
data = pie(data).map(function (d) {
return [d];
});
var radius = Math.min(width, height) / 2;
var svgEvents = events().listeners(listeners);
var svg = d3.select(this).append("svg")
.attr("width", width)
.attr("height", height)
.call(svgEvents);
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var arc = d3.svg.arc()
.outerRadius(outerRadius || radius)
.innerRadius(innerRadius);
var piePath = path()
.pathGenerator(arc)
.class(pieClass)
.fill(fill)
.stroke(stroke);
var pieText = textElement()
.transform(text.transform || function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.dy(text.dy)
.anchor(text.anchor)
.fill(text.fill)
.text(function (d, i) {
return label.call(this, d.data, i);
});
g.selectAll("groups")
.data(data)
.enter().append("g")
.call(piePath)
.call(pieText);
});
function createPieChart (data) {
var div = document.createElement('div');
var radius = Math.min(data.width, data.height) / 2;
var color = d3.scale.ordinal()
.range(data.colors);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.quantity; });
var svg = d3.select(div).append("svg")
.attr("width", data.width)
.attr("height", data.height)
.append("g")
.attr("transform", "translate(" + data.width / 2 + "," + data.height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(data.dataSet))
.enter().append("g")
.attr("class", data.arcClass);
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.label); });
g.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data.label; });
function type(d) {
d.quantity = +d.quantity;
return d;
}
return div
}
constructor(element, options) {
this.svg = d3.select(element);
this.arcsContainer = this.svg.append('g').attr('class', 'arcs');
this.paths = this.arcsContainer.selectAll('.pie_slice');
this.arcsOutline = this.arcsContainer.append('path').attr('class', 'pie_outline');
this.legendsContainer = this.svg.append('g').attr('class', 'pie_svg_legends');
this.legends = this.legendsContainer.selectAll('.pie_svg_legend');
this.options = _.merge({
sort: null,
gauge: false,
handAnchorRatio: 0.03,
handLengthRatio: 0.7,
startAngle: 0,
endAngle: 360,
spacing: _.merge({
top: 10,
right: 10,
bottom: 10,
left: 10
}, options.spacing || {})
}, options);
const { sort, gauge, padAngle, startAngle, endAngle } = this.options;
if (gauge === true) {
this.hand = this.svg.append('g').attr('class', 'pie_gauge_needle');
this.handAnchor = this.hand.append('circle').attr('class', 'pie_gauge_anchor');
this.handBase = this.hand.append('circle').attr('class', 'pie_gauge_needle_base');
this.handLine = this.hand.append('path').attr('class', 'pie_gauge_needle_arrow');
this.angleScale = d3.scale.linear().range([startAngle, endAngle]);
}
this.pie = d3.layout.pie()
.value(d => d.count)
.sort(sort)
.startAngle(Pie.degreesToRadians(startAngle))
.endAngle(Pie.degreesToRadians(endAngle))
;
if (padAngle !== undefined) {
this.pie.padAngle = Pie.degreesToRadians(padAngle);
}
this.width = 100;
this.height = 100;
}
/**
* Draws the donut chart
*/
createTheDonutChart()
{
const { totalTablet, totalSmartphone, dataEntries } = this.props;
const dataset = [ totalTablet, totalSmartphone ];
const pie = d3.layout.pie()
.sort(null);
const arc = d3.svg.arc()
.innerRadius(this.radius)
.outerRadius(this.radius - this.donutWidth);
const path = this.svg.selectAll('path')
.data(pie(dataset))
.enter().append('path')
.attr('fill', (d, i) => this.colors[i])
.attr('d', arc);
const lineHeight = 5;
// Draws the tick in the donut
for(let t in [1,2,3,4])
{
let sign = Math.pow( -1, t%2 );
let inversesign = -sign;
var pos = ( sign * this.radius ) + ( inversesign * this.donutWidth );
let x1 = 0, x2 = 0, y1 = pos, y2 = pos - sign * lineHeight;
if( t > 1 )
{
y1 = 0;
y2 = 0;
x1 = pos;
x2 = pos - sign*lineHeight;
}
this.svg.append('line')
.attr('x1', x1)
.attr('y1', y1)
.attr('x2', x2)
.attr('y2', y2)
.attr('stroke-width', 2)
.attr('stroke', `${this.colors[1]}`);
}
}
createG(svg) {
let {dataSet, g: {title}, dispatch} = this.props;
let colors = [],
arc = this.createArc(),
color = d3.scale.category20(),
pie = d3.layout.pie();
dataSet = [10, 50, 25, 20, 80];
let arcs = svg.selectAll('g')
.data(pie(dataSet))
.enter()
.append('g')
.attr('class', 'svg-circle-g')
.style('stroke', 'white')
.style('stroke-width', 1)
.style('display', 'none');
arcs.append('path')
.transition()
.duration(2000)
.ease('circle')
.delay(function(d, i) {
return 200 * i;
})
.attr("fill", function(d, i) {
colors.push(color(i));
return color(i);
})
.attr("d", function(d) {
return arc(d);
});
if (title) {
arcs.append('text')
.attr('class', 'g-text')
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
return d.value;
});
}
this.gAnimation();
console.log('dis', disDataSetColors(colors));
dispatch(disDataSetColors(colors));
}
PieChart: function (jsonData, explanation) {
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
//The number of colors to display with the pie chart
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00",
"#96abc5", "#8589a6", "#756888", "#63486b", "#a75d56", "#d8743c", "#f58c00"]);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.count; });
var svg = d3.select(".chart").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(jsonData))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.outcome); });
g.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data.outcome; });
}
render () {
var {width, height, data, colorRange} = this.props
var radius = Math.min(width, height) / 2;
colorRange = colorRange != null ? colorRange : ["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"];
var color = d3.scale.ordinal().range(colorRange);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.svg.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var node = ReactFauxDOM.createElement('svg')
var svg = d3.select(node)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.label); });
g.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data.label; });
return node.toReact()
}
constructor(element, options) {
this.svg = d3.select(element);
this.arcsContainer = this.svg.append('g').attr('class', 'arcs');
this.paths = this.arcsContainer.selectAll('path');
this.shadowContainer = this.svg.append('g').attr('class', 'pie_shadow');
this.shadowPath = this.shadowContainer.append('path');
this.lightContainer = this.svg.append('g').attr('class', 'pie_light');
this.lightPath = this.lightContainer.append('path');
this.options = _.merge({
sort: null,
gauge: false,
handAnchorRatio: 0.03,
handLengthRatio: 0.7,
startAngle: 0,
endAngle: 360
}, options);
let { sort, gauge, padAngle, startAngle, endAngle } = this.options;
if (gauge === true) {
this.hand = this.svg.append('g').attr('class', 'pie_hand');
this.handAnchor = this.hand.append('circle').attr('class', 'pie_hand_anchor');
this.handLine = this.hand.append('path').attr('class', 'pie_hand_line');
this.angleScale = d3.scale.linear().range([startAngle, endAngle]);
}
this.pie = d3.layout.pie()
.value(d => d.count)
.sort(sort)
.startAngle(Pie.degreesToRadians(startAngle))
.endAngle(Pie.degreesToRadians(endAngle))
;
if (padAngle !== undefined) {
this.pie.padAngle = Pie.degreesToRadians(padAngle);
}
this.width = 100;
this.height = 100;
}
Donut3D.transition = function(id, data, rx, ry, h, ir){
function arcTweenInner(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) { return pieInner(i(t), rx+0.5, ry+0.5, h, ir); };
}
function arcTweenTop(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) { return pieTop(i(t), rx, ry, ir); };
}
function arcTweenOuter(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) { return pieOuter(i(t), rx-.5, ry-.5, h); };
}
function textTweenX(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) { return 0.6*rx*Math.cos(0.5*(i(t).startAngle+i(t).endAngle)); };
}
function textTweenY(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) { return 0.6*rx*Math.sin(0.5*(i(t).startAngle+i(t).endAngle)); };
}
var _data = d3.layout.pie().sort(null).value(function(d) {return d.value;})(data);
d3.select("#"+id).selectAll(".innerSlice").data(_data)
.transition().duration(750).attrTween("d", arcTweenInner);
d3.select("#"+id).selectAll(".topSlice").data(_data)
.transition().duration(750).attrTween("d", arcTweenTop);
d3.select("#"+id).selectAll(".outerSlice").data(_data)
.transition().duration(750).attrTween("d", arcTweenOuter);
d3.select("#"+id).selectAll(".percent").data(_data).transition().duration(750)
.attrTween("x",textTweenX).attrTween("y",textTweenY).text(getPercent);
}
render:function() {
var props = this.props;
var pie = d3.layout
.pie()
.sort(null);
var arcData = pie(props.values);
var arcs = arcData.map(function(arc, idx) {
return (
React.createElement(ArcContainer, {
key: idx,
startAngle: arc.startAngle,
endAngle: arc.endAngle,
outerRadius: props.radius,
innerRadius: props.innerRadius,
labelTextFill: props.labelTextFill,
valueTextFill: props.valueTextFill,
valueTextFormatter: props.valueTextFormatter,
fill: props.colors(props.colorAccessor(props.data[idx], idx)),
value: props.values[idx],
label: props.labels[idx],
width: props.width,
showInnerLabels: props.showInnerLabels,
showOuterLabels: props.showOuterLabels,
sectorBorderColor: props.sectorBorderColor,
hoverAnimation: props.hoverAnimation}
)
);
});
return (
React.createElement("g", {className: "rd3-piechart-pie", transform: props.transform},
arcs
)
);
}
constructor (opts) {
this.root = opts.root;
this.selection = d3.select(this.root);
this.data = opts.data;
this.duration = opts.duration || 2000;
this.width = opts.width || 300;
this.height = opts.height || 300;
this.radius = Math.min(this.width, this.height) / 2;
let pie = d3.layout.pie().value(d => d.value);
this.container = this.selection
.append('svg')
.attr('width', this.width)
.attr('height', this.height)
.append('g')
.attr('transform', `translate(${this.width / 2}, ${this.height / 2})`)
.selectAll('.arc')
.data(pie(this.data))
.enter();
}
_setupD3Functions = (props) => {
const dataSets = props.data.map(item => {
return item.value;
});
const startAngle = (-135 * this.state.radiansMultiplier);
const endAngle = (135 * this.state.radiansMultiplier);
const pie = d3.layout.pie().padAngle(props.padAngle).endAngle(endAngle);
const values = pie(dataSets);
const radius = Math.min(props.width, props.height) / 2;
const standardArc = d3.svg.arc().outerRadius(radius - props.activeOffset).innerRadius(radius - props.arcWidth);
const hoveredArc = d3.svg.arc().outerRadius(radius).innerRadius(radius - props.arcWidth);
const baseArc = d3.svg.arc().outerRadius(radius - props.activeOffset).innerRadius(radius - props.arcWidth).startAngle(startAngle).endAngle(endAngle);
this.setState({
baseArc,
endAngle,
hoveredArc,
pie,
radius,
standardArc,
values
});
};
draw: function () {
var self = this;
var computed = self.computed;
var layout = self.options.layout;
var behavior = self.options.behavior;
var chart = this._createChart();
var data = self.data;
var color = d3.scale.category20b();
var arc = d3.svg.arc().outerRadius(computed.radius);
var pie = d3.layout.pie();
pie.value(self.fn.value)
.sort(null);
var path = chart.selectAll('path');
var pieTip = d3.tip()
.attr('class', 'bar-tooltip')
.offset([-10, 0])
.html(function(d) {
return '<span class="label">' + self.fn.label(d.data) + '</span>: <span class="value">' + self.fn.value(d.data) + '</span>';
});
chart.call(pieTip);
path.data(pie(data))
.enter()
.append('path')
.attr('class', 'pie-segment')
.attr('d', arc)
.attr('fill', function(d) {
return color(d.data[self.options.segments.label]);
})
.on('mouseover', pieTip.show)
.on('mouseout', pieTip.hide);
}
ReactPieChartD3.update = function (el, props) {
var radius = Math.min(width, height) / 2;
var data = props.data;
if (!data) return;
var color = d3.scale.category20b();
var arc = d3.svg.arc()
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.votes; })
.sort(null);
var path = svg.selectAll('path')
.data(pie(data.choices));
path.exit().remove();
path.enter()
.append('path');
path.attr('d', arc)
.attr('fill', function(d) {
return color(d.data.title);
});
var keys = html.selectAll('li.key')
.data(color.domain());
keys.enter().append('li')
.attr('class', 'key')
.style('background', color)
.text(function (d) {
return d;
});
};
if(typeof this.onRender=="function"){this.onRender(args)}},_addListeners:function(){this.graph.element.addEventListener("mousemove",function(e){this.visible=true;this.update(e)}.bind(this),false);this.graph.onUpdate(function(){this.update()}.bind(this));this.graph.element.addEventListener("mouseout",function(e){if(e.relatedTarget&&!(e.relatedTarget.compareDocumentPosition(this.graph.element)&Node.DOCUMENT_POSITION_CONTAINS)){this.hide()}}.bind(this),false)}});Rickshaw.namespace("Rickshaw.Graph.JSONP");Rickshaw.Graph.JSONP=Rickshaw.Class.create(Rickshaw.Graph.Ajax,{request:function(){$.ajax({url:this.dataURL,dataType:"jsonp",success:this.success.bind(this),error:this.error.bind(this)})}});Rickshaw.namespace("Rickshaw.Graph.Legend");Rickshaw.Graph.Legend=function(args){var element=this.element=args.element;var graph=this.graph=args.graph;var self=this;element.classList.add("rickshaw_legend");var list=this.list=document.createElement("ul");element.appendChild(list);var series=graph.series.map(function(s){return s}).reverse();this.lines=[];this.addLine=function(series){var line=document.createElement("li");line.className="line";var swatch=document.createElement("div");swatch.className="swatch";swatch.style.backgroundColor=series.color;line.appendChild(swatch);var label=document.createElement("span");label.className="label";label.innerHTML=series.name;line.appendChild(label);list.appendChild(line);line.series=series;if(series.noLegend){line.style.display="none"}var _line={element:line,series:series};if(self.shelving){self.shelving.addAnchor(_line);self.shelving.updateBehaviour()}if(self.highlighter){self.highlighter.addHighlightEvents(_line)}self.lines.push(_line)};series.forEach(function(s){self.addLine(s)});graph.onUpdate(function(){})};Rickshaw.namespace("Rickshaw.Graph.RangeSlider");Rickshaw.Graph.RangeSlider=function(args){var element=this.element=args.element;var graph=this.graph=args.graph;$(function(){$(element).slider({range:true,min:graph.dataDomain()[0],max:graph.dataDomain()[1],values:[graph.dataDomain()[0],graph.dataDomain()[1]],slide:function(event,ui){graph.window.xMin=ui.values[0];graph.window.xMax=ui.values[1];graph.update();if(graph.dataDomain()[0]==ui.values[0]){graph.window.xMin=undefined}if(graph.dataDomain()[1]==ui.values[1]){graph.window.xMax=undefined}}})});element[0].style.width=graph.width+"px";graph.onUpdate(function(){var values=$(element).slider("option","values");$(element).slider("option","min",graph.dataDomain()[0]);$(element).slider("option","max",graph.dataDomain()[1]);if(graph.window.xMin==undefined){values[0]=graph.dataDomain()[0]}if(graph.window.xMax==undefined){values[1]=graph.dataDomain()[1]}$(element).slider("option","values",values)})};Rickshaw.namespace("Rickshaw.Graph.Renderer");Rickshaw.Graph.Renderer=Rickshaw.Class.create({initialize:function(args){this.graph=args.graph;this.tension=args.tension||this.tension;this.graph.unstacker=this.graph.unstacker||new Rickshaw.Graph.Unstacker({graph:this.graph});this.configure(args)},seriesPathFactory:function(){},seriesStrokeFactory:function(){},defaults:function(){return{tension:.8,strokeWidth:2,unstack:true,padding:{top:.01,right:0,bottom:.01,left:0},stroke:false,fill:false}},domain:function(){var values={xMin:[],xMax:[],y:[]};var stackedData=this.graph.stackedData||this.graph.stackData();var firstPoint=stackedData[0][0];var xMin=firstPoint.x;var xMax=firstPoint.x;var yMin=firstPoint.y+firstPoint.y0;var yMax=firstPoint.y+firstPoint.y0;stackedData.forEach(function(series){series.forEach(function(d){var y=d.y+d.y0;if(y<yMin)yMin=y;if(y>yMax)yMax=y});if(series[0].x<xMin)xMin=series[0].x;if(series[series.length-1].x>xMax)xMax=series[series.length-1].x});xMin-=(xMax-xMin)*this.padding.left;xMax+=(xMax-xMin)*this.padding.right;yMin=this.graph.min==="auto"?yMin:this.graph.min||0;yMax=this.graph.max||yMax;if(this.graph.min==="auto"||yMin<0){yMin-=(yMax-yMin)*this.padding.bottom}if(this.graph.max===undefined){yMax+=(yMax-yMin)*this.padding.top}return{x:[xMin,xMax],y:[yMin,yMax]}},render:function(){var graph=this.graph;graph.vis.selectAll("*").remove();var nodes=graph.vis.selectAll("path").data(this.graph.stackedData).enter().append("svg:path").attr("d",this.seriesPathFactory());var i=0;graph.series.forEach(function(series){if(series.disabled)return;series.path=nodes[0][i++];this._styleSeries(series)},this)},_styleSeries:function(series){var fill=this.fill?series.color:"none";var stroke=this.stroke?series.color:"none";series.path.setAttribute("fill",fill);series.path.setAttribute("stroke",stroke);series.path.setAttribute("stroke-width",this.strokeWidth);series.path.setAttribute("class",series.className)},configure:function(args){args=args||{};Rickshaw.keys(this.defaults()).forEach(function(key){if(!args.hasOwnProperty(key)){this[key]=this[key]||this.graph[key]||this.defaults()[key];return}if(typeof this.defaults()[key]=="object"){Rickshaw.keys(this.defaults()[key]).forEach(function(k){this[key][k]=args[key][k]!==undefined?args[key][k]:this[key][k]!==undefined?this[key][k]:this.defaults()[key][k]},this)}else{this[key]=args[key]!==undefined?args[key]:this[key]!==undefined?this[key]:this.graph[key]!==undefined?this.graph[key]:this.defaults()[key]}},this)},setStrokeWidth:function(strokeWidth){if(strokeWidth!==undefined){this.strokeWidth=strokeWidth}},setTension:function(tension){if(tension!==undefined){this.tension=tension}}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Line");Rickshaw.Graph.Renderer.Line=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"line",defaults:function($super){return Rickshaw.extend($super(),{unstack:true,fill:false,stroke:true})},seriesPathFactory:function(){var graph=this.graph;var factory=d3.svg.line().x(function(d){return graph.x(d.x)}).y(function(d){return graph.y(d.y)}).interpolate(this.graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Stack");Rickshaw.Graph.Renderer.Stack=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"stack",defaults:function($super){return Rickshaw.extend($super(),{fill:true,stroke:false,unstack:false})},seriesPathFactory:function(){var graph=this.graph;var factory=d3.svg.area().x(function(d){return graph.x(d.x)}).y0(function(d){return graph.y(d.y0)}).y1(function(d){return graph.y(d.y+d.y0)}).interpolate(this.graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Bar");Rickshaw.Graph.Renderer.Bar=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"bar",defaults:function($super){var defaults=Rickshaw.extend($super(),{gapSize:.05,unstack:false});delete defaults.tension;return defaults},initialize:function($super,args){args=args||{};this.gapSize=args.gapSize||this.gapSize;$super(args)},domain:function($super){var domain=$super();var frequentInterval=this._frequentInterval();domain.x[1]+=parseInt(frequentInterval.magnitude);return domain},barWidth:function(){var stackedData=this.graph.stackedData||this.graph.stackData();var data=stackedData.slice(-1).shift();var frequentInterval=this._frequentInterval();var barWidth=this.graph.x(data[0].x+frequentInterval.magnitude*(1-this.gapSize));return barWidth},render:function(){var graph=this.graph;graph.vis.selectAll("*").remove();var barWidth=this.barWidth();var barXOffset=0;var activeSeriesCount=graph.series.filter(function(s){return!s.disabled}).length;var seriesBarWidth=this.unstack?barWidth/activeSeriesCount:barWidth;var transform=function(d){var matrix=[1,0,0,d.y<0?-1:1,0,d.y<0?graph.y.magnitude(Math.abs(d.y))*2:0];return"matrix("+matrix.join(",")+")"};graph.series.forEach(function(series){if(series.disabled)return;var nodes=graph.vis.selectAll("path").data(series.stack.filter(function(d){return d.y!==null})).enter().append("svg:rect").attr("x",function(d){return graph.x(d.x)+barXOffset}).attr("y",function(d){return graph.y(d.y0+Math.abs(d.y))*(d.y<0?-1:1)}).attr("width",seriesBarWidth).attr("height",function(d){return graph.y.magnitude(Math.abs(d.y))}).attr("transform",transform);Array.prototype.forEach.call(nodes[0],function(n){n.setAttribute("fill",series.color)});if(this.unstack)barXOffset+=seriesBarWidth},this)},_frequentInterval:function(){var stackedData=this.graph.stackedData||this.graph.stackData();var data=stackedData.slice(-1).shift();var intervalCounts={};for(var i=0;i<data.length-1;i++){var interval=data[i+1].x-data[i].x;intervalCounts[interval]=intervalCounts[interval]||0;intervalCounts[interval]++}var frequentInterval={count:0};Rickshaw.keys(intervalCounts).forEach(function(i){if(frequentInterval.count<intervalCounts[i]){frequentInterval={count:intervalCounts[i],magnitude:i}}});this._frequentInterval=function(){return frequentInterval};return frequentInterval}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Area");Rickshaw.Graph.Renderer.Area=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"area",defaults:function($super){return Rickshaw.extend($super(),{unstack:false,fill:false,stroke:false})},seriesPathFactory:function(){var graph=this.graph;var factory=d3.svg.area().x(function(d){return graph.x(d.x)}).y0(function(d){return graph.y(d.y0)}).y1(function(d){return graph.y(d.y+d.y0)}).interpolate(graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory},seriesStrokeFactory:function(){var graph=this.graph;var factory=d3.svg.line().x(function(d){return graph.x(d.x)}).y(function(d){return graph.y(d.y+d.y0)}).interpolate(graph.interpolation).tension(this.tension);factory.defined&&factory.defined(function(d){return d.y!==null});return factory},render:function(){var graph=this.graph;graph.vis.selectAll("*").remove();var method=this.unstack?"append":"insert";var nodes=graph.vis.selectAll("path").data(this.graph.stackedData).enter()[method]("svg:g","g");nodes.append("svg:path").attr("d",this.seriesPathFactory()).attr("class","area");if(this.stroke){nodes.append("svg:path").attr("d",this.seriesStrokeFactory()).attr("class","line")}var i=0;graph.series.forEach(function(series){if(series.disabled)return;series.path=nodes[0][i++];this._styleSeries(series)},this)},_styleSeries:function(series){if(!series.path)return;d3.select(series.path).select(".area").attr("fill",series.color);if(this.stroke){d3.select(series.path).select(".line").attr("fill","none").attr("stroke",series.stroke||d3.interpolateRgb(series.color,"black")(.125)).attr("stroke-width",this.strokeWidth)}if(series.className){series.path.setAttribute("class",series.className)}}});Rickshaw.namespace("Rickshaw.Graph.Renderer.Pie");Rickshaw.Graph.Renderer.Pie=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"pie",defaults:function($super){var defaults=Rickshaw.extend($super(),{innerRadius:0,outerRadius:100,scheme:"classic9",unstack:false});delete defaults.tension;return defaults},initialize:function($super,args){args=args||{};this.innerRadius=args.innerRadius||this.innerRadius;this.scheme=args.scheme||this.scheme;$super(args)},render:function(){var graph=this.graph;graph.vis.selectAll("*").remove();var pie=d3.layout.pie().sort(null).value(function(d){return d.y});var palette=new Rickshaw.Color.Palette({scheme:graph.scheme});var arc=d3.svg.arc().outerRadius(this.outerRadius-10).innerRadius(this.innerRadius);var g=graph.vis.selectAll(".arc").data(pie(graph.series[0].data)).enter().append("g").attr("transform","translate("+graph.width/2+","+graph.height/2+")").attr("class","arc");g.append("path").attr("d",arc).style("fill",function(d){return palette.color()});g.append("text").attr("transform",function(d){return"translate("+arc.centroid(d)+")"}).attr("dy",".35em").style("text-anchor","middle").text(function(d){return d.label})}});Rickshaw.namespace("Rickshaw.Graph.Renderer.ScatterPlot");Rickshaw.Graph.Renderer.ScatterPlot=Rickshaw.Class.create(Rickshaw.Graph.Renderer,{name:"scatterplot",defaults:function($super){return Rickshaw.extend($super(),{unstack:true,fill:true,stroke:false,padding:{top:.01,right:.01,bottom:.01,left:.01},dotSize:4})},initialize:function($super,args){$super(args)},render:function(){var graph=this.graph;graph.vis.selectAll("*").remove();graph.series.forEach(function(series){if(series.disabled)return;var nodes=graph.vis.selectAll("path").data(series.stack.filter(function(d){return d.y!==null})).enter().append("svg:circle").attr("cx",function(d){return graph.x(d.x)}).attr("cy",function(d){return graph.y(d.y)}).attr("r",function(d){return"r"in d?d.r:graph.renderer.dotSize});Array.prototype.forEach.call(nodes[0],function(n){n.setAttribute("fill",series.color)})},this)}});Rickshaw.namespace("Rickshaw.Graph.Smoother");Rickshaw.Graph.Smoother=function(args){this.graph=args.graph;this.element=args.element;var self=this;this.aggregationScale=1;if(this.element){$(function(){$(self.element).slider({min:1,max:100,slide:function(event,ui){self.setScale(ui.value);self.graph.update()}})})}self.graph.stackData.hooks.data.push({name:"smoother",orderPosition:50,f:function(data){if(self.aggregationScale==1)return data;var aggregatedData=[];data.forEach(function(seriesData){var aggregatedSeriesData=[];while(seriesData.length){var avgX=0,avgY=0;var slice=seriesData.splice(0,self.aggregationScale);slice.forEach(function(d){avgX+=d.x/slice.length;avgY+=d.y/slice.length});aggregatedSeriesData.push({x:avgX,y:avgY})}aggregatedData.push(aggregatedSeriesData)});return aggregatedData}});this.setScale=function(scale){if(scale<1){throw"scale out of range: "+scale}this.aggregationScale=scale;this.graph.update()}};Rickshaw.namespace("Rickshaw.Graph.Unstacker");Rickshaw.Graph.Unstacker=function(args){this.graph=args.graph;var self=this;this.graph.stackData.hooks.after.push({name:"unstacker",f:function(data){if(!self.graph.renderer.unstack)return data;data.forEach(function(seriesData){seriesData.forEach(function(d){d.y0=0})});return data}})};Rickshaw.namespace("Rickshaw.Series");Rickshaw.Series=Rickshaw.Class.create(Array,{initialize:function(data,palette,options){options=options||{};this.palette=new Rickshaw.Color.Palette(palette);this.timeBase=typeof options.timeBase==="undefined"?Math.floor((new Date).getTime()/1e3):options.timeBase;var timeInterval=typeof options.timeInterval=="undefined"?1e3:options.timeInterval;this.setTimeInterval(timeInterval);if(data&&typeof data=="object"&&data instanceof Array){data.forEach(function(item){this.addItem(item)},this)}},addItem:function(item){if(typeof item.name==="undefined"){throw"addItem() needs a name"}item.color=item.color||this.palette.color(item.name);item.data=item.data||[];if(item.data.length==0&&this.length&&this.getIndex()>0){this[0].data.forEach(function(plot){item.data.push({x:plot.x,y:0})})}else if(item.data.length==0){item.data.push({x:this.timeBase-(this.timeInterval||0),y:0})}this.push(item);if(this.legend){this.legend.addLine(this.itemByName(item.name))}},addData:function(data){var index=this.getIndex();Rickshaw.keys(data).forEach(function(name){if(!this.itemByName(name)){this.addItem({name:name})}},this);this.forEach(function(item){item.data.push({x:(index*this.timeInterval||1)+this.timeBase,y:data[item.name]||0})},this)},getIndex:function(){return this[0]&&this[0].data&&this[0].data.length?this[0].data.length:0},itemByName:function(name){for(var i=0;i<this.length;i++){if(this[i].name==name)return this[i]}},setTimeInterval:function(iv){this.timeInterval=iv/1e3},setTimeBase:function(t){this.timeBase=t},dump:function(){var data={timeBase:this.timeBase,timeInterval:this.timeInterval,items:[]};this.forEach(function(item){var newItem={color:item.color,name:item.name,data:[]};item.data.forEach(function(plot){newItem.data.push({x:plot.x,y:plot.y})});data.items.push(newItem)});return data},load:function(data){if(data.timeInterval){this.timeInterval=data.timeInterval}if(data.timeBase){this.timeBase=data.timeBase}if(data.items){data.items.forEach(function(item){this.push(item);if(this.legend){this.legend.addLine(this.itemByName(item.name))}},this)}}});Rickshaw.Series.zeroFill=function(series){Rickshaw.Series.fill(series,0)};Rickshaw.Series.fill=function(series,fill){var x;var i=0;var data=series.map(function(s){return s.data});while(i<Math.max.apply(null,data.map(function(d){return d.length}))){x=Math.min.apply(null,data.filter(function(d){return d[i]}).map(function(d){return d[i].x}));data.forEach(function(d){if(!d[i]||d[i].x!=x){d.splice(i,0,{x:x,y:fill})}});i++}};Rickshaw.namespace("Rickshaw.Series.FixedDuration");Rickshaw.Series.FixedDuration=Rickshaw.Class.create(Rickshaw.Series,{initialize:function(data,palette,options){var options=options||{};if(typeof options.timeInterval==="undefined"){throw new Error("FixedDuration series requires timeInterval")}if(typeof options.maxDataPoints==="undefined"){throw new Error("FixedDuration series requires maxDataPoints")}this.palette=new Rickshaw.Color.Palette(palette);this.timeBase=typeof options.timeBase==="undefined"?Math.floor((new Date).getTime()/1e3):options.timeBase;this.setTimeInterval(options.timeInterval);if(this[0]&&this[0].data&&this[0].data.length){this.currentSize=this[0].data.length;this.currentIndex=this[0].data.length}else{this.currentSize=0;this.currentIndex=0}this.maxDataPoints=options.maxDataPoints;if(data&&typeof data=="object"&&data instanceof Array){data.forEach(function(item){this.addItem(item)},this);this.currentSize+=1;this.currentIndex+=1}this.timeBase-=(this.maxDataPoints-this.currentSize)*this.timeInterval;if(typeof this.maxDataPoints!=="undefined"&&this.currentSize<this.maxDataPoints){for(var i=this.maxDataPoints-this.currentSize-1;i>0;i--){this.currentSize+=1;this.currentIndex+=1;this.forEach(function(item){item.data.unshift({x:((i-1)*this.timeInterval||1)+this.timeBase,y:0,i:i})},this)}}},addData:function($super,data){$super(data);this.currentSize+=1;this.currentIndex+=1;if(this.maxDataPoints!==undefined){while(this.currentSize>this.maxDataPoints){this.dropData()}}},dropData:function(){this.forEach(function(item){item.data.splice(0,1)});this.currentSize-=1},getIndex:function(){return this.currentIndex}});
this.reactComp = reactComp;
this.par = Object.assign({}, this.defaultParams, params);
let size = 250;
let width = size - 20,
height = size - 20,
radius = Math.min(width, height) / 2;
let fullWidth = size;
let fullHeight = size;
this.arc = d3.svg.arc()
.outerRadius(radius - 10);
this.pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
this.svg = loc.append('svg')
.attr('id', 'd3graphSVG')
.style('display', 'inline-block')
.style('position', 'absolute')
.attr('preserveAspectRatio', 'xMinYMin slice')
.attr('viewBox', '0 0 ' + fullWidth + ' ' + fullHeight)
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
this.tooltip = d3.select('body')
render: function render() {
var _props = this.props;
var data = _props.data;
var width = _props.width;
var height = _props.height;
var margin = _props.margin;
var colorScale = _props.colorScale;
var innerRadius = _props.innerRadius;
var outerRadius = _props.outerRadius;
var labelRadius = _props.labelRadius;
var padRadius = _props.padRadius;
var cornerRadius = _props.cornerRadius;
var sort = _props.sort;
var x = _props.x;
var y = _props.y;
var values = _props.values;
var innerWidth = this._innerWidth;
var innerHeight = this._innerHeight;
var pie = d3.layout.pie().value(function (e) {
return y(e);
});
if (typeof sort !== "undefined") {
pie = pie.sort(sort);
}
var radius = Math.min(innerWidth, innerHeight) / 2;
if (!innerRadius) {
innerRadius = radius * 0.8;
}
if (!outerRadius) {
//outerRadius = radius * 0.4;
}
if (!labelRadius) {
// labelRadius = radius * 0.9;
}
var arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius).padRadius(padRadius).cornerRadius(cornerRadius);
var outerArc = d3.svg.arc().innerRadius(labelRadius).outerRadius(labelRadius);
var pieData = pie(values(data));
var translation = "translate(" + innerWidth / 2 + ", " + innerHeight / 2 + ")";
return React.createElement(
"div",
null,
React.createElement(
Chart,
{ height: height, width: width, margin: margin },
React.createElement(
"g",
{ transform: translation },
React.createElement(DataSet, {
width: innerWidth,
height: innerHeight,
colorScale: colorScale,
pie: pieData,
arc: arc,
outerArc: outerArc,
radius: radius,
x: x,
y: y,
onMouseEnter: this.onMouseEnter,
onMouseLeave: this.onMouseLeave
})
),
this.props.children
),
React.createElement(Tooltip, this.state.tooltip)
);
}
Donut3D.draw = function(id,
data,
x /*center x*/,
y/*center y*/,
rx/*radius x*/,
ry/*radius y*/,
h/*height*/,
ir/*inner radius*/){
var _data = d3.layout.pie().sort(null).value(function(d) {
return d.value;
})(data);
var slices = d3.select("#"+id).append("g").attr("transform", "translate(" + x + "," + y + ")")
.attr("class", "slices");
// Inner part slices of donut
slices.selectAll(".innerSlice").data(_data).enter().append("path").attr("class", "innerSlice")
.style("fill", function(d) {
return d3.hsl(d.data.color).darker(0.7);
})
.attr("d",function(d) {
return pieInner(d, rx+0.5,ry+0.5, h, ir);
})
.each(function(d) {
this._current=d;
});
// Top visible part of donut (all slices)
slices.selectAll(".topSlice").data(_data).enter().append("path").attr("class", "topSlice")
.style("fill", function(d) {
return d.data.color;
})
.style("stroke", function(d) {
return d.data.color;
})
.attr("d", function(d) {
return pieTop(d, rx, ry, ir);
})
.each(function(d){
this._current=d;
});
// Front part of slice
slices.selectAll(".outerSlice").data(_data).enter().append("path").attr("class", "outerSlice")
.style('fill', function(d) {
return d3.hsl(d.data.color).darker(0.7);
})
.attr("d",function(d) {
return pieOuter(d, rx - .5,ry - .5, h);
})
.each(function(d) {
this._current = d;
});
// Slices value (in percents)
slices.selectAll(".percent").data(_data).enter().append("text").attr("class", "percent")
.attr("x",function(d) {
return 0.6 * rx * Math.cos(0.5 * (d.startAngle + d.endAngle));
})
.attr("y",function(d) {
return 0.6 * ry * Math.sin(0.5 * (d.startAngle + d.endAngle));
})
.text(getPercent).each(function(d) {
this._current=d;
});
}