Skip to content

Commit

Permalink
Updated files
Browse files Browse the repository at this point in the history
  • Loading branch information
@TriscuitP
TriscuitP committed Dec 10, 2018
1 parent 802dced commit 0fdeaa0
Show file tree
Hide file tree
Showing 7 changed files with 282 additions and 497 deletions.
2 changes: 1 addition & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: white;
background-color: #333;
background-color: #000000;
}
</style>
163 changes: 11 additions & 152 deletions src/components/ArcSubscription.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,19 @@ export default {
methods: {
renderArc() {
var width = 350,
height = 350,
var width = 225,
height = 225,
radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal()
.range(["#6fc9e1", "#00627d"]);
.range(["#FFFDDE", "#FD2D3A"]);
var bigarc = d3.arc()
.outerRadius(radius - 100)
.innerRadius(radius - 60);
.outerRadius(radius - 75)
.innerRadius(radius - 50);
var smallarc = d3.arc()
.outerRadius(radius - 100)
.outerRadius(radius - 75)
.innerRadius(radius - 50);
var pie = d3.pie()
Expand All @@ -57,11 +57,11 @@ export default {
var data = [{
"label": "Big",
"name": "Free membership",
"percent": 75
"percent": 81
}, {
"label": "Small",
"name": "Paid membership",
"percent": 25
"percent": 19
}];
var piedata = pie(data);
Expand All @@ -87,8 +87,9 @@ export default {
labels.selectAll("text").data(piedata)
.enter()
.append("text")
.attr("font-size", "12px")
.attr("font-size", "10px")
.attr("text-anchor", "middle")
// .style("stroke", "white")
.attr("x", function(d) {
var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
d.cx = Math.cos(a) * (radius - 75);
Expand All @@ -111,7 +112,7 @@ export default {
.append("path")
.attr("class", "pointer")
.style("fill", "none")
.style("stroke", "black")
.style("stroke", "#515356")
.attr("marker-end", "url(#circ)")
.attr("d", function(d) {
if(d.cx > d.ox) {
Expand All @@ -120,148 +121,6 @@ export default {
return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
}
});
// var svg = d3.select(".donut")
// .append("svg")
// .append("g")
// svg.append("g")
// .attr("class", "slices");
// svg.append("g")
// .attr("class", "labels");
// svg.append("g")
// .attr("class", "lines");
// var width = 960,
// height = 450,
// radius = Math.min(width, height) / 2;
// var pie = d3.pie()
// .sort(null)
// .value(function(d) {
// return d.value;
// });
// var arc = d3.arc()
// .outerRadius(radius * 0.8)
// .innerRadius(radius * 0.4);
// var outerArc = d3.arc()
// .innerRadius(radius * 0.9)
// .outerRadius(radius * 0.9);
// svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// var key = function(d){ return d.data.label; };
// var color = d3.scaleOrdinal()
// .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])
// .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
// function randomData (){
// var labels = color.domain();
// return labels.map(function(label){
// return { label: label, value: Math.random() }
// });
// }
// function change(data) {
// /* ------- PIE SLICES -------*/
// var slice = svg.select(".slices").selectAll("path.slice")
// .data(pie(data), key);
// slice.enter()
// .insert("path")
// .style("fill", function(d) { return color(d.data.label); })
// .attr("class", "slice");
// slice
// .transition().duration(1000)
// .attrTween("d", function(d) {
// this._current = this._current || d;
// var interpolate = d3.interpolate(this._current, d);
// this._current = interpolate(0);
// return function(t) {
// return arc(interpolate(t));
// };
// })
// slice.exit()
// .remove();
// /* ------- TEXT LABELS -------*/
// var text = svg.select(".labels").selectAll("text")
// .data(pie(data), key);
// text.enter()
// .append("text")
// .attr("dy", ".35em")
// .text(function(d) {
// return d.data.label;
// });
// function midAngle(d){
// return d.startAngle + (d.endAngle - d.startAngle)/2;
// }
// text.transition().duration(1000)
// .attrTween("transform", function(d) {
// this._current = this._current || d;
// var interpolate = d3.interpolate(this._current, d);
// this._current = interpolate(0);
// return function(t) {
// var d2 = interpolate(t);
// var pos = outerArc.centroid(d2);
// pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);
// return "translate("+ pos +")";
// };
// })
// .styleTween("text-anchor", function(d){
// this._current = this._current || d;
// var interpolate = d3.interpolate(this._current, d);
// this._current = interpolate(0);
// return function(t) {
// var d2 = interpolate(t);
// return midAngle(d2) < Math.PI ? "start":"end";
// };
// });
// text.exit()
// .remove();
// /* ------- SLICE TO TEXT POLYLINES -------*/
// var polyline = svg.select(".lines").selectAll("polyline")
// .data(pie(data), key);
// polyline.enter()
// .append("polyline");
// polyline.transition().duration(1000)
// .attrTween("points", function(d){
// this._current = this._current || d;
// var interpolate = d3.interpolate(this._current, d);
// this._current = interpolate(0);
// return function(t) {
// var d2 = interpolate(t);
// var pos = outerArc.centroid(d2);
// pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
// return [arc.centroid(d2), outerArc.centroid(d2), pos];
// };
// });
// polyline.exit()
// .remove();
// };
// change(randomData());
}
}
Expand Down
22 changes: 13 additions & 9 deletions src/components/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<button class="tab" v-on:click="makeActive('eventsActive')">Events</button>
</ul>
</div>

<br> <!-- fills whitespace with background color -->
<div class="tabcontent" v-show="isActiveTab('fansActive')">
<Fans/>
</div>
Expand Down Expand Up @@ -73,15 +73,21 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
/* margin: 0;
padding: 0; */
/* overflow: hidden; */
background-color: #000000;
/* color: rgb(250, 49, 65); */
/* position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
.title {
background-color: #000000;
overflow: hidden;
text-align: center;
}

.homelink {
text-decoration: none;
color: rgb(250, 49, 65);
Expand Down Expand Up @@ -123,7 +129,7 @@ export default {
display: block;
}
.tab {
background-color: #555;
background-color: #000000;
color: white;
float: left;
border: none;
Expand All @@ -140,9 +146,7 @@ export default {
background-color:#848484;
}
.tabcontent {
background-color:#848484;
/* background-color: beige */
/* background-color:white; */
background-color:#383838;
}
h1, h2 {
font-weight: normal;
Expand Down
Loading

0 comments on commit 0fdeaa0

Please sign in to comment.