Skip to content

Commit

Permalink
Changes for v3.0.0.
Browse files Browse the repository at this point in the history 
Still needs some work but it's a working release.
  • Loading branch information
@anteAdamovic
anteAdamovic committed Sep 23, 2016
1 parent 1e0c715 commit 8060690
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 74 deletions.
15 changes: 6 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,28 +43,25 @@ var data = [{
Create a pie chart instance, then assign your data to it.

```JavaScript
var pie = mytPieChart.newChart().setData(data);
var pie = mytPieChart.newChart('container-id').setData(data);
```

Configure your chart.

```JavaScript
pie.setWidth(400) // Required. {int} - default unit is 'px'.
.setHeight(350) // Required. {int} - default unit is 'px'.
.setContainerId('my-id'); // Optional. {string} - ID if an existing DOM element used as container, defaults to 'body'.
// Chart inherits the size of the container element.

// Additional options, see full options support in documentation.
pie.setId('my-chart-id') // Optional. {string} - ID to be used by chart elements, defaults to a generated ID.
pie.chart.font.setSize(18) // Optional. {int} - Size of font used in chart.
pie.tooltip.font.setSize(12); // Optional. {int} - Size of font used in tooltip.
pie.tooltip = true; // Optional. {boolean} - To show the tooltip, defaults to false.
pie.tooltipId = 'tooltipContainerId'; // Optional. {string} - Assign the element to be used as tooltip.
```

Render the chart.

```JavaScript
pie.display();
```
In case you want to redraw the chart, you may call `pie.display();` again.
In case you want to redraw the chart, you may call `pie.restart();`.

```JavaScript
pie.display();
Expand All @@ -74,7 +71,7 @@ data = someNewData();
pie.setData(data);

// Re-render the chart with new data.
pie.display();
pie.update(); // Update only works for data changes, if you want to redraw the chart use 'pie.restart()'
```

---
Expand Down
103 changes: 38 additions & 65 deletions myt-pie-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,73 +20,49 @@

var chart = {

data: [],
_data: [],
// Data to be displayed in the chart_
setData: function(d){
this.data = d;
this._data = d;

return this;
},
getData: function(){
return this.data;
},

width: 450,
_width: 450,
// Width of the SVG element
setWidth: function(w){
if(w)
this.width = w;
this.chart.dimension.setRadius(Math.min(this.width, this.height) / 2);
this.chart.dimension.setCenterRadius(this.chart.dimension.getRadius());

this.chart.position.setX(this.width / 2);
this.chart.position.setY(this.chart.dimension.radius);

// this.tooltip.position.setX(this.chart.dimension.getRadius() / 1.5 + this.width / 2);
// this.tooltip.position.setY(this.height / 10);

this.title.position.setX(this.width / 2.2);
this._width = w;

return this;
},
getWidth: function(){
return this.width;
},

height: 300,
// Height of the SVG element
setHeight: function(h){
if(h)
this.height = h;
this.chart.dimension.setRadius(Math.min(this.width, this.height) / 2);
this.chart.dimension.setCenterRadius(this.chart.dimension.getRadius());

this.chart.position.setY(this.chart.dimension.radius);

this.tooltip.position.setX(this.chart.dimension.getRadius() / 1.5 + this.width / 2);
this.tooltip.position.setY(this.height / 10);

this.title.position.setY(this.height / 12);

return this;
},
getHeight: function(){
return this.height;
},

container: 'body',
// Container for the SVG element
// Id is expected to be passed else
// it won't work as expected
// Defaults to 'body'
setContainer: function(c){
this.container = c;

if(c){
this.container = c;
this.setHeight(document.getElementById(container).offsetHeight);
this.setWidth(document.getElementById(container).offsetWidth);
}
else {
this.setHeight(document.getElementsByTagName('body')[0].offsetHeight);
this.setWidth(document.getElementsByTagName('body')[0].offsetWidth);
}
return this;
},
getContainer: function(){
return this.container;
},

id: id,
// Id of the SVG element
Expand All @@ -100,9 +76,6 @@

return this;
},
getId: function(){
return this.id;
},

chart: {

Expand Down Expand Up @@ -560,12 +533,12 @@
// width: 150,
// // Width of tooltip rectangle
// setWidth: function(w){
// this.width = w;
// this._width = w;
//
// return this;
// },
// getWidth: function(){
// return this.width;
// return this._width;
// },
//
// height: 35,
Expand All @@ -582,7 +555,7 @@
// // Returns all dimension properties
// getDimension: function(){
// return {
// width: this.width,
// width: this._width,
// height: this.height
// }
// }
Expand All @@ -599,6 +572,7 @@
//
// },
tooltip: true,
tooltipId: '',

title: {

Expand Down Expand Up @@ -775,7 +749,6 @@

},

// Events on entire chart
events: {
onClick: function(d){},

Expand Down Expand Up @@ -812,19 +785,19 @@
arcs: null,

display: function(){
this.radius = (Math.min(this.width, this.height)-20) / 2;
this.radius = (Math.min(this._width, this.height)-20) / 2;

this.pie = d3.layout.pie()
.value(function(d) { return d.value; })
.sort(null);

this.arc = d3.svg.arc()
.innerRadius(this.radius - this.chart.dimension.centerRadius)
.outerRadius(this.chart.dimension.radius);
.innerRadius(0)
.outerRadius(this.radius);

var offset = 0;
if(this.chart.font.getSizeType() === "px"){
offset = (this.chart.font.getSize() - 20) / 2 * 15;
offset = (this.chart.font.getSize() - 20) / 2 * 20;
}
this.labelArc = d3.svg.arc()
.outerRadius(this.radius - 40 - offset)
Expand All @@ -835,12 +808,10 @@
}

// Create svg container
this.svg = d3.select('#' + this.getContainer()).append("svg")
this.svg = d3.select('#' + this.container).append("svg")
.attr("width", this.radius * 2 + 10)
.attr("height", this.radius * 2 + 10);

// this.svg.append("text").attr("transform", "translate(100, 30)").text("test");

// Create chart container
this.g_chart = this.svg.append("g")
.attr("transform", "translate(" + (this.radius + 5) + ", " + (this.radius + 5) + ")")
Expand Down Expand Up @@ -890,6 +861,7 @@

update: function(){
var tooltip = this.tooltip;
var tooltip_id = this.tooltipId;

this.events.onMouseOver = function(d){
var angle = d.endAngle - ( (d.endAngle - d.startAngle) / 2 );
Expand All @@ -900,7 +872,7 @@
if(tooltip){
var d_ = d;
this.onmousemove = function(e){
var tooltip = document.getElementById('example-tooltip');
var tooltip = document.getElementById(tooltip_id);
tooltip.style.display = 'block';
tooltip.style.top = e.clientY + 15;
tooltip.style.left = e.clientX + 15;
Expand All @@ -910,31 +882,30 @@
}

this.events.onMouseLeave = function(d){
this.setAttribute('transform', 'translate(0, 0)');
this.setAttribute('transform', '');

if(tooltip){
document.getElementById('example-tooltip').style.display = 'none';
document.getElementById(tooltip_id).style.display = 'none';
}
}

color = this.color;

this.svg.select(this.title.getHashId())
.style("font-family", this.title.font.getFamily())
.style("font-size", this.title.font.getSize() + this.title.font.getSizeType())
.style("font-variant", this.title.font.getVariant())
.style("font-style", this.title.font.getStyle())
.style("font-weight", this.title.font.getWeight())
.text(this.title.textFunc);
// this.svg.select(this.title.getHashId())
// .style("font-family", this.title.font.getFamily())
// .style("font-size", this.title.font.getSize() + this.title.font.getSizeType())
// .style("font-variant", this.title.font.getVariant())
// .style("font-style", this.title.font.getStyle())
// .style("font-weight", this.title.font.getWeight())
// .text(this.title.textFunc);

// Removed unused tags
this.svg.selectAll('.arc').each(function(){
if(!d3.select(this).select('path')[0][0])
d3.select(this).remove();
});

var data0 = this.arcs.length != 0 ? this.arcs.data() : this.pie([]),
data1 = this.pie(this.data);
data1 = this.pie(this._data);

this.arcs = this.arcs.data(data1, key);

Expand Down Expand Up @@ -1076,11 +1047,13 @@
}
}

chart.setContainer(container);
if(container) chart.setContainer(container);
else chart.setContainer();

if(document.getElementById(container))
window.addEventListener('resize', function(){
chart.setWidth(document.getElementById(container).clientWidth);
chart.setHeight(document.getElementById(container).offsetHeight);
chart.setWidth(document.getElementById(container).offsetWidth);
chart.restart();
});
else {
Expand Down

0 comments on commit 8060690

Please sign in to comment.