Donut Singapoure Oi

Developer
Paulo Sérgio
Size
5,490 Kb
Views
22,264
  1. Donut Singapoure Oi Previews
  2. Donut Singapoure Oi HTML Codes
  3. Donut Singapoure Oi CSS Codes
  4. Donut Singapoure Oi JS Codes

How do I make an donut singapoure oi?

What is a donut singapoure oi? How do you make a donut singapoure oi? This script and codes were developed by Paulo Sérgio on 19 November 2022, Saturday.

Donut Singapoure Oi Previews
IQ Test

Donut Singapoure Oi - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Donut Singapoure Oi</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="full-container-chart"> <div class="header"> <h4>Disponível pra navegar</h4> </div> <div class="col-xs-12 charts-dados-navegados"> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Donut Singapoure Oi - Script Codes CSS Codes

@import url(//fonts.googleapis.com/icon?family=Material+Icons);
svg.svg-border { background: transparent; position: absolute; top: -20px; left: -20px;
}
.full-container-chart { max-width: 774px;
}
.full-container-chart .charts-dados-navegados { padding: 0px; margin-left: 2px; display: flex; flex-wrap: wrap; flex-direction: row;
}
.full-container-chart .header { padding: 20px; border: solid 1px #dbdbdb;
}
.full-container-chart .chart-item { min-height: 198px; max-height: 265px; border: solid 1px #dbdbdb; display: flex; align-items: center; justify-content: flex-start; flex-direction: column;
}
.full-container-chart .chart-item .phone { font-size: 14px; font-weight: bold; text-align: left; color: #313131; margin: 20px 0px;
}
.full-container-chart .chart-item .chart-info { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; position: absolute; top: 100px; z-index: 1000;
}
.full-container-chart .chart-item .chart-info .valor { font-size: 20px; font-weight: bold; text-align: center; color: #313131; margin-bottom: 10px;
}
.full-container-chart .chart-item .chart-info .total,
.full-container-chart .chart-item .chart-info .avulso { font-size: 12px; text-align: center; color: #313131;
}
.full-container-chart .chart-item .chart-info .tooltip-info { position: absolute; width: 110px; height: 63.2px; border: 1px solid #dbdbdb; border-radius: 2px; background-color: #ffffff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); font-size: 12px; line-height: 1.67; text-align: center; color: #313131; background: white; display: flex; align-items: center; justify-content: center; top: -15px;
}
.full-container-chart .chart-item .chart-info .tooltip-info .tooltip-arrow-shadow { position: absolute; top: 63px; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: #dbdbdb transparent transparent transparent;
}
.full-container-chart .chart-item .chart-info .tooltip-info .tooltip-arrow { position: absolute; top: 61px; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: white transparent transparent transparent;
}
.full-container-chart .chart-item .msg-info { width: 225px; height: 44px; border-radius: 4px; background-color: #fdfbc3; border: solid 1px #f8cf46; margin-bottom: 30px; display: flex; align-items: center;
}
.full-container-chart .chart-item .msg-info .icon-warning { color: #f8cf46; margin-left: 11px; font-size: 22px;
}
.full-container-chart .chart-item .msg-info .msg-txt { font-size: 11px; text-align: left; color: #222222; margin-left: 6px;
}
.full-container-chart .chart-item .msg-info .link-add { font-size: 12px; font-weight: bold; text-align: right; color: #222222; text-decoration: underline; margin-left: 16px;
}
.full-container-chart .widget { position: relative; width: 130px; background-color: transparent;
}
.full-container-chart .widget svg { transform: rotate(-135deg); background: transparent;
}
.full-container-chart .widget .chart-container { position: relative; z-index: 999;
}
.full-container-chart .widget .shadow { -webkit-filter: drop-shadow(0 0 10px rgba(25, 196, 11, 0.7)); filter: drop-shadow(0 0 10px rgba(25, 196, 11, 0.7));
}

Donut Singapoure Oi - Script Codes JS Codes

var datasets = { "0":{ phone: "(21) 99639-7564", tipo: 'cheio', dataset:[ { tipo: 'cheio', valor: 1000 }, { tipo: 'total', valor: 6000 }] }, "1":{ phone: "(21) 99639-7565", tipo: 'esgotando', avulso: 3000, dataset: [ { tipo: 'esgotando', valor: 100 }, { tipo: 'total', valor: 4000 }] }, "2":{ phone: "(21) 99639-7564", tipo: 'cheio', dataset:[ { tipo: 'cheio', valor: 1300 }, { tipo: 'total', valor: 4000 }] }, "3":{ phone: "(21) 99639-7565", tipo: 'cheio', dataset: [ { tipo: 'cheio', valor: 600 }, { tipo: 'total', valor: 1000 }] }, "4":{ phone: "(21) 99639-7565", tipo: 'esgotada', dataset: [ { tipo: 'esgotada', valor: 0 }, { tipo: 'total', valor: 100 }] }, "5":{ phone: "(21) 99639-7564", tipo: 'cheio', dataset:[ { tipo: 'cheio', valor: 4300 }, { tipo: 'total', valor: 6000 }] }, "6":{ phone: "(21) 99639-7565", tipo: 'esgotando', avulso: 3000, dataset: [ { tipo: 'esgotando', valor: 100 }, { tipo: 'total', valor: 4000 }] }
}
var index = 0;
var chartContainer = $(".charts-dados-navegados");
function formatNumberComma (num) { return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}
function formatNumber(num){ num = num/1000; if(num == parseInt(num)){ return formatNumberComma(parseInt(num)); } return formatNumberComma(num.toFixed(1));
}
function createComponent(index, phone, datasets , dataset, avulso , tipo){ var chart = d3.selectAll('.charts-dados-navegados') .append('div') .attr('class', function(){ if(index == Object.keys(datasets).length - 1 && ((index + 1) % 2 == 1)) { return 'col-xs-12 chart-item' } return 'col-xs-6 chart-item' }) //phone chart.append('div') .attr('class','phone') .text(phone); //donut chart.append('div') .attr('class','widget') .append('div') .attr({ id: 'chart' + index, class: 'chart-container' }) //valores var info = chart.append('div') .attr('class','chart-info') info.append('div') .attr('class','valor') .text(formatNumber(dataset[0].valor) + " GB") info.append('div') .attr('class','total') .text("de " + formatNumber(dataset[1].valor) + " GB") if(avulso){ var avulsoEl = info.append('div') .attr('class','avulso') .attr('id' , 'tooltip-activator-avulso' + index) .attr('title', 'Pacotes avulsos comprados') avulsoEl.text("+" + formatNumber(dataset[1].valor) + " GB*") var tooltip = info.append('div') .attr('class','tooltip-info') .attr('id', 'tooltip-info' + index) tooltip.text('Pacotes avulsos comprados') tooltip.append('div') .attr('class','tooltip-arrow-shadow') tooltip.append('div') .attr('class','tooltip-arrow') //$('#tooltip-avulso' + index).tooltip(); /*info.on('click', function(){ //d3.select alert('clicked') })*/ } if(tipo === "esgotada" || tipo === "esgotando"){ var message = chart.append('div') .attr('class','msg-info') //<i class="material-icons">warning</i> message.append('i') .attr('class','material-icons icon-warning') .text('warning') var msgTxt = message.append('div') .attr('class', 'msg-txt') if(tipo === "esgotada"){ msgTxt.text('Internet esgotada.'); } else { msgTxt.text('Internet esgotando.'); } message.append('a') .attr('class','link-add') .attr('href','/adicionar') .text('Adicionar') }
}
$.each( datasets, function( key, item ) { //console.log(dataset) //chartContainer.append(createComponent(index)) //cria components createComponent( index, item.phone , datasets, item.dataset , item.avulso, item.tipo ) //desenha o chart drawChart("#chart" + index , item.dataset) index++;
});
function drawChart(chart , dataset){ var pie=d3.layout.pie() .value(function(d){return d.valor}) .sort(null) .padAngle(.03); var w=130,h=130; var outerRadius=w/2; var innerRadius=50; //var color = d3.scale.category10(); var green = "#19c40b"; var gray = "#f5f5f5"; var red = "#f8562c"; var maxAngle = 270; var radiusMax = maxAngle * (Math.PI/180); var arc=d3.svg.arc() .outerRadius(outerRadius) .innerRadius(innerRadius) .cornerRadius(50) .startAngle(0) .endAngle(function(d , i){ var tipo = d.data.tipo; if(tipo === "total") return radiusMax; else if(tipo == "cheio") return dataset[0].valor/dataset[1].valor*radiusMax; return radiusMax; //esgotada, esgotando }) //just radians; var arcOut=d3.svg.arc() .outerRadius(outerRadius + 7) .innerRadius(innerRadius + 7) .cornerRadius(50) .startAngle(0) .endAngle(function(d , i){ var tipo = d.data.tipo; if(tipo === "total") return radiusMax; else if(tipo == "cheio") return dataset[0].valor/dataset[1].valor*radiusMax; return radiusMax; //esgotada, esgotando }) //just radians; var svg=d3.select(chart) .append("svg") .attr({ width:w, height:h }).append('g') .attr({ transform:'translate('+w/2+','+h/2+')' }); var filter = svg.append("defs") .append("filter") .attr("id", "blur") .attr("height", "230%")//dont clip .append("feGaussianBlur") //.attr("in", "SourceAlpha") .attr("stdDeviation", 3) .attr("result", "blur") //.attr("in", "SourceAlpha"); var svgBorder=d3.select(chart) .append("svg") .attr({ width:w + 40, height:h + 40, class: 'svg-border', }) .style("stroke-opacity", 0.3) .append('g') .attr({ transform:'translate('+(w/2 + 20)+','+ (h/2 + 20)+')' }); svgBorder.selectAll('path') .data(pie(dataset)) .enter() .append('path') .attr({ d:arcOut, filter: "url(#blur)", 'fill-opacity': '0.2', fill:function(d,i){ var tipo = d.data.tipo; if(tipo === "total") return "transparent"; if(tipo == "esgotada" || tipo == "esgotando") return red; else return green; } }) var path=svg.selectAll('path') .data(pie(dataset)) .enter() .append('path') .attr({ d:arc, fill:function(d,i){ var tipo = d.data.tipo; if(tipo === "total") return gray; if(tipo == "esgotada" || tipo == "esgotando") return red; else return green; } }) ; svg .selectAll("path") .sort(function (a, b) { if (a.data.valor > b.data.valor) return -1; else return 1; });
}
Donut Singapoure Oi - Script Codes
Donut Singapoure Oi - Script Codes
Home Page Home
Developer Paulo Sérgio
Username paulo101977
Uploaded November 19, 2022
Rating 3
Size 5,490 Kb
Views 22,264
Do you need developer help for Donut Singapoure Oi?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Paulo Sérgio (paulo101977) Script Codes
Name
Simon Game
Calculator
Spinner pure CSS loader radius
Game of Life
Input Range Multiple CSS Jquery Javascript Scss Sass
Wiki Search
SunRay Css
Donut Chart D3js
WeatherMap
Spinner Loader SVG Pure Css Radius Loader
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!