This commit is contained in:
Executable
+275
@@ -0,0 +1,275 @@
|
||||
<% if @user.paid_time_off %>
|
||||
<!-- Begin easy pie charts container -->
|
||||
<div class="easy-pie-charts-container">
|
||||
<div class="pie-chart">
|
||||
<div class="chart1" data-percent="100">
|
||||
<%= @user.paid_time_off.pto_days_remaining %>
|
||||
</div>
|
||||
<h5 class="name">
|
||||
Available PTO
|
||||
</h5>
|
||||
</div>
|
||||
<div class="pie-chart">
|
||||
<div class="chart2" data-percent="<%= @user.paid_time_off.sick_days_taken_percentage %>">
|
||||
<%= @user.paid_time_off.sick_days_taken %>
|
||||
</div>
|
||||
<h5 class="name">
|
||||
Sick Days Taken
|
||||
</h5>
|
||||
</div>
|
||||
<div class="pie-chart">
|
||||
<div class="chart3" data-percent="100">
|
||||
<%= @user.work_info.income %>
|
||||
</div>
|
||||
<h5 class="name">
|
||||
Income
|
||||
</h5>
|
||||
</div>
|
||||
<div class="pie-chart">
|
||||
<div class="chart4" data-percent="100">
|
||||
<%= @user.performance.last.score %>
|
||||
</div>
|
||||
<h5 class="name">
|
||||
Performance Score
|
||||
</h5>
|
||||
</div>
|
||||
<div class="pie-chart">
|
||||
<div class="chart5" data-percent="91">
|
||||
<%= @user.retirement.total %>
|
||||
</div>
|
||||
<h5 class="name">
|
||||
401k
|
||||
</h5>
|
||||
</div>
|
||||
<div class="clearfix">
|
||||
</div>
|
||||
</div>
|
||||
<!-- End easy pie charts container -->
|
||||
<% end %>
|
||||
<script type="text/javascript">
|
||||
|
||||
// Store timeout IDs so we can clear them on page navigation
|
||||
var chartTimeouts = [];
|
||||
|
||||
function pieChartHome() {
|
||||
// Clear any existing timeouts first
|
||||
chartTimeouts.forEach(function(id) { clearTimeout(id); });
|
||||
chartTimeouts = [];
|
||||
|
||||
$(function () {
|
||||
// Only initialize if chart elements exist
|
||||
if ($('.chart1').length === 0) return;
|
||||
|
||||
//create instance
|
||||
$('.chart1').easyPieChart({
|
||||
animate: 2000,
|
||||
barColor: '#e26666',
|
||||
trackColor: '#dddddd',
|
||||
scaleColor: '#e26666',
|
||||
size: 160,
|
||||
lineWidth: 7,
|
||||
});
|
||||
//update instance after 5 sec
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
|
||||
$('.chart1').data('easyPieChart').update(50);
|
||||
}
|
||||
}, 5000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
|
||||
$('.chart1').data('easyPieChart').update(70);
|
||||
}
|
||||
}, 10000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
|
||||
$('.chart1').data('easyPieChart').update(30);
|
||||
}
|
||||
}, 15000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
|
||||
$('.chart1').data('easyPieChart').update(90);
|
||||
}
|
||||
}, 19000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart1').length && $('.chart1').data('easyPieChart')) {
|
||||
$('.chart1').data('easyPieChart').update(40);
|
||||
}
|
||||
}, 32000));
|
||||
});
|
||||
|
||||
$(function () {
|
||||
// Only initialize if chart elements exist
|
||||
if ($('.chart2').length === 0) return;
|
||||
|
||||
//create instance
|
||||
$('.chart2').easyPieChart({
|
||||
animate: 2000,
|
||||
barColor: '#b5799e',
|
||||
trackColor: '#dddddd',
|
||||
scaleColor: '#b5799e',
|
||||
size: 160,
|
||||
lineWidth: 7,
|
||||
});
|
||||
//update instance after 5 sec
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
|
||||
$('.chart2').data('easyPieChart').update(90);
|
||||
}
|
||||
}, 10000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
|
||||
$('.chart2').data('easyPieChart').update(40);
|
||||
}
|
||||
}, 18000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
|
||||
$('.chart2').data('easyPieChart').update(70);
|
||||
}
|
||||
}, 28000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
|
||||
$('.chart2').data('easyPieChart').update(50);
|
||||
}
|
||||
}, 32000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart2').length && $('.chart2').data('easyPieChart')) {
|
||||
$('.chart2').data('easyPieChart').update(80);
|
||||
}
|
||||
}, 40000));
|
||||
});
|
||||
|
||||
$(function () {
|
||||
// Only initialize if chart elements exist
|
||||
if ($('.chart3').length === 0) return;
|
||||
|
||||
//create instance
|
||||
$('.chart3').easyPieChart({
|
||||
animate: 2000,
|
||||
barColor: '#579da9',
|
||||
trackColor: '#dddddd',
|
||||
scaleColor: '#579da9',
|
||||
size: 160,
|
||||
lineWidth: 7,
|
||||
});
|
||||
//update instance after 5 sec
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
|
||||
$('.chart3').data('easyPieChart').update(20);
|
||||
}
|
||||
}, 9000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
|
||||
$('.chart3').data('easyPieChart').update(59);
|
||||
}
|
||||
}, 20000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
|
||||
$('.chart3').data('easyPieChart').update(38);
|
||||
}
|
||||
}, 35000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
|
||||
$('.chart3').data('easyPieChart').update(79);
|
||||
}
|
||||
}, 49000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart3').length && $('.chart3').data('easyPieChart')) {
|
||||
$('.chart3').data('easyPieChart').update(96);
|
||||
}
|
||||
}, 52000));
|
||||
});
|
||||
|
||||
$(function () {
|
||||
// Only initialize if chart elements exist
|
||||
if ($('.chart4').length === 0) return;
|
||||
|
||||
//create instance
|
||||
$('.chart4').easyPieChart({
|
||||
animate: 2000,
|
||||
barColor: '#dba26b',
|
||||
trackColor: '#dddddd',
|
||||
scaleColor: '#dba26b',
|
||||
size: 160,
|
||||
lineWidth: 7,
|
||||
});
|
||||
//update instance after 5 sec
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
|
||||
$('.chart4').data('easyPieChart').update(40);
|
||||
}
|
||||
}, 6000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
|
||||
$('.chart4').data('easyPieChart').update(67);
|
||||
}
|
||||
}, 14000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
|
||||
$('.chart4').data('easyPieChart').update(43);
|
||||
}
|
||||
}, 23000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
|
||||
$('.chart4').data('easyPieChart').update(80);
|
||||
}
|
||||
}, 36000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart4').length && $('.chart4').data('easyPieChart')) {
|
||||
$('.chart4').data('easyPieChart').update(66);
|
||||
}
|
||||
}, 41000));
|
||||
});
|
||||
|
||||
$(function () {
|
||||
// Only initialize if chart elements exist
|
||||
if ($('.chart5').length === 0) return;
|
||||
|
||||
//create instance
|
||||
$('.chart5').easyPieChart({
|
||||
animate: 3000,
|
||||
barColor: '#1e825e',
|
||||
trackColor: '#dddddd',
|
||||
scaleColor: '#1e825e',
|
||||
size: 160,
|
||||
lineWidth: 7,
|
||||
});
|
||||
//update instance after 5 sec
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
|
||||
$('.chart5').data('easyPieChart').update(30);
|
||||
}
|
||||
}, 9000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
|
||||
$('.chart5').data('easyPieChart').update(87);
|
||||
}
|
||||
}, 19000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
|
||||
$('.chart5').data('easyPieChart').update(28);
|
||||
}
|
||||
}, 27000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
|
||||
$('.chart5').data('easyPieChart').update(69);
|
||||
}
|
||||
}, 39000));
|
||||
chartTimeouts.push(setTimeout(function () {
|
||||
if ($('.chart5').length && $('.chart5').data('easyPieChart')) {
|
||||
$('.chart5').data('easyPieChart').update(99);
|
||||
}
|
||||
}, 47000));
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(pieChartHome);
|
||||
|
||||
// Clear timeouts when navigating away with Turbolinks
|
||||
$(document).on('turbolinks:before-visit', function() {
|
||||
chartTimeouts.forEach(function(id) { clearTimeout(id); });
|
||||
chartTimeouts = [];
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user