123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287 |
- <template>
- <div class="row">
- <div class="col-md-12">
- <div class="card">
- <div class="card-header">
- <h5 class="card-title">Development Goals View</h5>
- <div class="card-tools">
- <button type="button" class="btn btn-tool" data-card-widget="collapse">
- <i class="fas fa-minus"></i>
- </button>
- <div class="btn-group">
- <button type="button" class="btn btn-tool dropdown-toggle" data-toggle="dropdown">
- <i class="fas fa-wrench"></i>
- </button>
- <div class="dropdown-menu dropdown-menu-right" role="menu">
- <a href="javascript://" class="dropdown-item">Action</a>
- <a href="javascript://" class="dropdown-item">Another action</a>
- <a href="javascript://" class="dropdown-item">Something else here</a>
- <a class="dropdown-divider"></a>
- <a href="javascript://" class="dropdown-item">Separated link</a>
- </div>
- </div>
- <button type="button" class="btn btn-tool" data-card-widget="remove">
- <i class="fas fa-times"></i>
- </button>
- </div>
- </div>
- <div class="card-body">
- <div class="row">
- <div class="col-md-4">
- <p class="text-center">
- <strong>Goal Completion</strong>
- </p>
- <div
- v-for="(goal, index) of goals"
- v-bind:key="goal.title"
- class="progress-group"
- >
- {{goal.title}}
- <span class="float-right">
- <b>{{goal.completed}}</b>/{{goal.target}}
- </span>
- <div class="progress progress-sm">
- <div
- class="progress-bar"
- :class="goal.bg"
- :style="{ width: completionPct(index) }"
- ></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="card-footer">
- <div class="row">
- <div class="col-sm-3 col-6">
- <div class="description-block border-right">
- <span class="description-percentage text-success"><i class="fas fa-caret-up"></i> 17%</span>
- <h5 class="description-header">$35,210.43</h5>
- <span class="description-text">TOTAL REVENUE</span>
- </div>
- </div>
- <div class="col-sm-3 col-6">
- <div class="description-block border-right">
- <span class="description-percentage text-warning"><i class="fas fa-caret-left"></i> 0%</span>
- <h5 class="description-header">$10,390.90</h5>
- <span class="description-text">TOTAL COST</span>
- </div>
- </div>
- <div class="col-sm-3 col-6">
- <div class="description-block border-right">
- <span class="description-percentage text-success"><i class="fas fa-caret-up"></i> 20%</span>
- <h5 class="description-header">$24,813.53</h5>
- <span class="description-text">TOTAL PROFIT</span>
- </div>
- </div>
- <div class="col-sm-3 col-6">
- <div class="description-block">
- <span class="description-percentage text-danger"><i class="fas fa-caret-down"></i> 18%</span>
- <h5 class="description-header">1200</h5>
- <span class="description-text">GOAL COMPLETIONS</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- /* Import modules. */
- import numeral from 'numeral'
- export default {
- data: () => {
- return {
- goals: []
- }
- },
- computed: {
- completionPct() {
- // NOTE: We use this "method" to allow for the parameter.
- // https://stackoverflow.com/a/40539522
- return _goalId => {
- /* Validate goals. */
- if (!this.goals) {
- return ''
- }
- /* Calculate completion pct. */
- const pct = this.goals[_goalId].completed / this.goals[_goalId].target
- // console.log('COMPLETION PCT', pct)
- /* Set formatted. */
- const formatted = numeral(pct).format('0.0%')
- // console.log('COMPLETION FORMATTED', formatted)
- /* Return style. */
- return formatted
- }
- }
- },
- methods: {
- loadSampleChart() {
- // var ctx = document.getElementById('myChart').getContext('2d');
- // new window.Chart(ctx, {
- // type: 'bar',
- // data: {
- // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
- // datasets: [{
- // label: '# of Votes',
- // data: [12, 19, 3, 5, 2, 3],
- // backgroundColor: [
- // 'rgba(255, 99, 132, 0.2)',
- // 'rgba(54, 162, 235, 0.2)',
- // 'rgba(255, 206, 86, 0.2)',
- // 'rgba(75, 192, 192, 0.2)',
- // 'rgba(153, 102, 255, 0.2)',
- // 'rgba(255, 159, 64, 0.2)'
- // ],
- // borderColor: [
- // 'rgba(255, 99, 132, 1)',
- // 'rgba(54, 162, 235, 1)',
- // 'rgba(255, 206, 86, 1)',
- // 'rgba(75, 192, 192, 1)',
- // 'rgba(153, 102, 255, 1)',
- // 'rgba(255, 159, 64, 1)'
- // ],
- // borderWidth: 1
- // }]
- // },
- // options: {
- // scales: {
- // yAxes: [{
- // ticks: {
- // beginAtZero: true
- // }
- // }]
- // }
- // }
- // });
- },
- loadSalesChart() {
- // /* Set JQuery. */
- // // const $ = window.$
- // /* Set Chart. */
- // const Chart = window.Chart
- // // Get context with jQuery - using jQuery's .get() method.
- // // var salesChartCanvas = $('#salesChart').get(0).getContext('2d')
- // var salesChartCanvas = document.getElementById('salesChart').getContext('2d');
- // var salesChartData = {
- // labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
- // datasets: [
- // {
- // label : 'Digital Goods',
- // backgroundColor : 'rgba(60,141,188,0.9)',
- // borderColor : 'rgba(60,141,188,0.8)',
- // pointRadius : false,
- // pointColor : '#3b8bba',
- // pointStrokeColor : 'rgba(60,141,188,1)',
- // pointHighlightFill : '#fff',
- // pointHighlightStroke: 'rgba(60,141,188,1)',
- // data : [28, 48, 40, 19, 86, 27, 90]
- // },
- // {
- // label : 'Electronics',
- // backgroundColor : 'rgba(210, 214, 222, 1)',
- // borderColor : 'rgba(210, 214, 222, 1)',
- // pointRadius : false,
- // pointColor : 'rgba(210, 214, 222, 1)',
- // pointStrokeColor : '#c1c7d1',
- // pointHighlightFill : '#fff',
- // pointHighlightStroke: 'rgba(220,220,220,1)',
- // data : [65, 59, 80, 81, 56, 55, 40]
- // },
- // ]
- // }
- // var salesChartOptions = {
- // maintainAspectRatio : false,
- // responsive : true,
- // legend: {
- // display: false
- // },
- // scales: {
- // xAxes: [{
- // gridLines : {
- // display : false,
- // }
- // }],
- // yAxes: [{
- // gridLines : {
- // display : false,
- // }
- // }]
- // }
- // }
- // // This will get the first returned node in the jQuery collection.
- // new Chart(salesChartCanvas, {
- // type: 'line',
- // data: salesChartData,
- // options: salesChartOptions
- // }
- // )
- }
- },
- created: function () {
- // /* Add goal. */
- // this.goals.push({
- // title: 'Bull Run to $1k by Dec 2020',
- // completed: 391,
- // target: 1000,
- // bg: 'bg-primary',
- // })
- // /* Add goal. */
- // this.goals.push({
- // title: 'Development Roadmap',
- // completed: 7,
- // target: 19,
- // bg: 'bg-primary',
- // })
- // /* Add goal. */
- // this.goals.push({
- // title: 'Infrastructure Funding Goal',
- // completed: 31,
- // target: 100,
- // bg: 'bg-warning',
- // })
- // /* Add goal. */
- // this.goals.push({
- // title: 'SHA256 Total Hash Rate %',
- // completed: 4,
- // target: 80,
- // bg: 'bg-danger',
- // })
- },
- mounted: function () {
- // this.loadSampleChart()
- // this.loadSalesChart()
- },
- }
- </script>
|